<route lang="yaml">
  name: metadataStandardCodetable
</route>

<script lang="ts" setup name="metadataStandardCodetable">
import { ref, reactive } from 'vue';
import { ElMessage } from "element-plus";
import Tree from '@/components/Tree/index.vue';
import TableTools from '@/components/Tools/table_tools.vue';
import { Search } from '@element-plus/icons-vue'
import { useRouter, useRoute } from "vue-router";
import { TableColumnWidth } from '@/utils/enum';
import { commonPageConfig } from '@/components/PageNav/index';
import { getParamsList } from '@/api/modules/dataAsset'
import { getStandardCodeList, saveStandardCode, updateStandardCode } from '@/api/modules/dataMetaService'

const { proxy } = getCurrentInstance() as any;
const router = useRouter();

const treeInfo:any = reactive({
    id: "data-pickup-tree",
    filter: true,
    queryValue: "",
    queryPlaceholder: "请输入关键字搜索",
    props: {
        label: "label",
        value: "value",
    },
    nodeKey: 'value',
    expandedKey: ['01'],
    currentNodeKey: '01',
    expandOnNodeClick: false,
    data: [],
    loading: false
});
function nodeClick (data) {

}

/** 分页及搜索传参信息配置。 */
const tableSearchInput = ref('')
function getFirstPageData () {
    page.value.curr = 1
    toSearch({})
}
function toSearch (val: any, clear: boolean = false) {
    let params: any = Object.keys(val).length ? { ...val } : {}
    params.pageIndex = page.value.curr;
    params.pageSize = page.value.limit;
    params.name = tableSearchInput.value
    getTableData(params);
}
const page = ref({
    ...commonPageConfig,
    collectTaskName: '',
    dataSourceGuid: '',
    taskState: null
});
const tableInfo = ref({
    id: 'data-source-table',
    fields: [
        { label: '序号', type: 'index', width: TableColumnWidth.INDEX, align: 'center' },
        { label: '代码名称', field: '1', width: 140 },
        { label: '标准号', field: '2', width: 140 },
        { label: '标准名称', field: '3', width: 140 },
        { label: '启用状态', field: '4', width: 140 },
        { label: '创建时间', field: '5', width: 140 }
    ],
    data: [],
    page: {
        type: 'normal',
        rows: 0,
        ...page.value
    },
    actionInfo: {
        label: '操作',
        type: 'btn',
        width: 160,
        btns: scope => {
            let row = scope.row
            return [
                { label: '编辑', value: 'edit' },
                { label: '删除', value: 'delete' },
            ]
        }
    },
    loading: false
})
function tableBtnClick (scope, btn) {

}
function tablePageChange (info) {
    page.value.curr = Number(info.curr);
    page.value.limit = Number(info.limit);
    // getTableData();
}
function getTableData (params) {

}
function handleCreate () {
    drawerInfo.value.visible = true;
    drawerInfo.value.type = 'add';
    drawerInfo.value.header.title = '新增标准代码';
    drawerInfo.value.footer.visible = true;
}

// drawer form
const standardOptions = ref([])
const publishingUnitCodeOptions = ref([])
const formRef = ref()
const formItems: any = ref([
    {
        label: '标准类型',
        type: 'select',
        placeholder: '请选择',
        field: 'standardTypeCode',
        default: '',
        options: standardOptions,
        clearable: true,
        required: true
    },
    {
        label: '代码名称',
        type: 'input',
        placeholder: '请输入',
        field: 'codeName',
        default: '',
        maxlength: 20,
        clearable: true,
        required: true
    },
    {
        label: '标准号',
        type: 'input',
        placeholder: '请输入',
        field: 'standard',
        default: '',
        maxlength: 50,
        clearable: true,
        required: true
    },
    {
        label: '标准名称',
        type: 'input',
        placeholder: '请输入',
        field: 'standardName',
        default: '',
        maxlength: 20,
        clearable: true,
        required: true
    },
    {
        label: '发布单位',
        type: 'select',
        placeholder: '请输入',
        field: 'publishingUnitCode',
        default: '',
        options: publishingUnitCodeOptions,
        clearable: true,
        required: true
    },
    {
        label: '排序',
        type: 'inputNumber',
        placeholder: '请输入',
        field: 'orderNum',
        default: '',
        maxlength: 6,
        clearable: true,
        required: true
    },
    {
        label: '启用状态',
        type: 'switch',
        field: 'bizState',
        default: false
    },
    {
        label: '代码类型',
        type: 'select',
        placeholder: '请选择',
        field: 'typeCode',
        default: '1',
        options: [
            { label: '列表结构', value: '1' },
            { label: '层级结构', value: '2' }
        ],
        clearable: true,
        required: true
    },
    {
        label: '编码字段',
        type: 'select',
        placeholder: '请选择',
        field: 'codeFields',
        default: [],
        options: [
            { label: 'code', value: 'code' },
            { label: 'name', value: 'name' }
        ],
        clearable: true,
        required: true,
        multiple: true
    },
    {
        label: '编码名称',
        type: 'select',
        placeholder: '请选择',
        field: 'codeFieldName',
        default: '',
        options: [
            { label: 'code', value: 'code' },
            { label: 'name', value: 'name' }
        ],
        clearable: true,
        required: true
    },
    {
        label: '层级结构',
        type: 'input',
        placeholder: '请输入',
        field: 'hierarchy',
        default: '',
        clearable: true,
        required: true
    }
])
const formRules = ref({

})
const formInfo = ref({
    type: 'form',
    title: '',
    col: 'span',
    formInfo: {
        id: 'add-dict-form',
        col: 'col2',
        items: formItems.value,
        formRules: formRules.value
    }
})
const formTable = reactive({
    type: "table",
    title: "定义表结构",
    col: 'no-margin',
    style: {
        height: 'calc(100% - 234px)'
    },
    tableInfo: {
        id: "role-authority-table",
        multiple: true,
        minHeight: 'unset',
        maxHeight: '100%',
        fields: [
            { label: '序号', type: 'index', width: 56, align: 'center' },
            { label: '字段名称', field: 'fieldName', width: 140, type: 'edit', customClass: 'edit-colum'}
        ],
        data: [{ fieldName: '1', index: 0}],
        showPage: false,
        actionInfo: {
            show: true,
            label: "操作",
            type: "btn",
            width: 60,
            fixed: 'right',
            btns: [{ label: "删除", value: "remove" }]
        },
        editInfo: {
            fieldName: {
                field: 'fieldName',
                label: '字段名称',
                type: 'input',
                clearable: true,
                maxlength: 20
            }
        },
        readonly: false,
        col: 'auto-height',
        style: { height: 'calc(100% - 40px)'},
        loading: false
    },
    tableTool: {
        col: 'float-right',
        visible: true,
        btns: [
            { label: "新增行", value: "tableAdd", type: 'primary' },
            { label: "批量删除", value: "tableDelete" },
        ]
    },
})
// 新增drawer
const drawerInfo = ref({
    visible: false,
    direction: 'rtl',
    size: 550,
    header: {
        title: '新增标准代码',
    },
    type: '',
    container: {
        contents: [formInfo.value, formTable],
    },
    footer: {
        visible: true,
        btns: [
            { type: 'default', label: '取消', value: 'cancel' },
            { type: 'primary', label: '保存', value: 'save' },
            { type: 'primary', label: '保存并添加数据', value: 'saveAndAdd', visible: true }
        ]
    }
})
async function drawerBtnClick (btn, info) {

}
function drawerTableToolBtnClick (btn, data) {
    console.log(btn, data)
    if (btn.value === 'tableAdd') {
        // 定义表结构新增行
        let rowInfo = { fieldName: '' }
        formTable.tableInfo.data.push(rowInfo)
    }
}

onMounted(() => {
    getParamsList({ dictType: '标准类型'}).then((res:any) => {
        if (res.code === proxy.$passCode) {
            const data = res.data || []
            treeInfo.data = data
            standardOptions.value = data
            // 默认展开第一个
            if (data.length === 0) return
            let params = {
                pageIndex: 1,
                pageSize: 100,
                standardTypeCode: data[0].value,
                codeName: '标准类型'
            }
            getStandardCodeList(params)
        }
    })
    getParamsList({ dictType: '发布单位' }).then((res:any) => {
        if (res.code === proxy.$passCode) {
            const data = res.data || []
            publishingUnitCodeOptions.value = data
        }
    })
})
</script>

<template>
<div class="container_wrap full flex">
    <div class="aside_wrap">
        <div class="aside_title">标准代码列表</div>
        <Tree :treeInfo="treeInfo" @nodeClick="nodeClick" />
    </div>
    <div class="main_wrap">
        <div class="table_tool_wrap">
            <div class="tools_btns">
                <el-button type="primary" @click="handleCreate">新建</el-button>
                <el-button>批量删除</el-button>
                <el-button>批量导入</el-button>
            </div>
            <el-input class="table_search_input" v-model.trim="tableSearchInput" placeholder="代码名称搜索"
            :suffix-icon="Search" clearable @change="val => getFirstPageData()" />
        </div>
        <div class="table_panel_wrap">
            <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange"
            />
        </div>
    </div>
    <Drawer
        :drawerInfo="drawerInfo"
        @drawerBtnClick="drawerBtnClick"
        ref="drawerRef"
        @drawerTableToolBtnClick="drawerTableToolBtnClick"
    >
        <!-- <Form ref="formRef"
            :itemList="formItems"
            formId="basic-info-form"
            :rules="formRules"
        /> -->
    </Drawer>
</div>
</template>

<style scoped lang="scss">
.container_wrap {

  .aside_wrap {
    width: 200px;
  }

  .main_wrap {
    padding: 10px 20px;


    :deep(.el-tabs) {
      height: 100%;

      .el-tabs__header {
        margin-bottom: 0;
      }

      .el-tabs__item {
        height: 32px;
        padding: 0px;
        width: 144px;

        &:last-child {
          width: 130px;
        }
      }

      .el-tabs__content {
        height: calc(100% - 32px);
      }

      .el-tab-pane {
        padding: 0px 16px;
        height: 100%;
      }
    }
  }

}

.tree_panel {
  height: calc(100% - 36px);
  padding-top: 0;

  :deep(.el-tree) {
    margin: 0;
    overflow: hidden auto;
  }
}

.table_tool_wrap {
  display: flex;
  flex-direction: column;

  .el-input {
    width: 230px;
    height: 32px;
  }

  :deep(.el-input) {
    .el-input__suffix-inner {
      flex-direction: row-reverse;
      -webkit-flex-direction: row-reverse;
      display: flex;
    }
  }
}

.table_panel_wrap {
  height: calc(100% - 44px);
}
</style>