<route lang="yaml">
ame: metadataStandard
</route>

<script lang="ts" setup name="metadataStandard">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
import { Search, CirclePlus } from '@element-plus/icons-vue'
import Tree from '@/components/Tree/index.vue'
import Table from '@/components/Table/index.vue'
import Drawer from '@/components/Drawer/index.vue'
import DictFileds from './components/dictFileds.vue'
import useCatchStore from "@/store/modules/catch";
import { download } from '@/utils/common'
import { getParamsList } from '@/api/modules/dataAsset'
import { getStandardCodeList } from '@/api/modules/dataMetaService'
import router from '@/router'
import { TableColumnWidth } from '@/utils/enum';

const { proxy } = getCurrentInstance() as any;

const cacheStore = useCatchStore()
const showFiledsPage = ref(false)

// 树菜单
const treeInfo = ref({
  id: "data-pickup-tree",
  filter: true,
  queryValue: "",
  queryPlaceholder: "请输入关键字搜索",
  props: {
    label: "label",
    value: "value",
    isLeaf: "isLeaf",
  },
  lazy: true,
  nodeKey: 'value',
  expandedKey: ['01'],
  currentNodeKey: '01',
  data: [],
  expandOnNodeClick: false,
  loading: false,
  currentObj: {}
})
function nodeClick (data) {
  drawerInfo.value.visible = false
  const changeCont = () => {
        nextTick(() => {
        treeInfo.value.currentNodeKey = data.value
        treeInfo.value.currentObj = data
        if (data.isLeaf) {
            showFiledsPage.value = true
            nextTick(() => {
            dictFiledsRef.value.standardGuid = data.value
            dictFiledsRef.value.standardName = data.label
            treeCurrentNodeKey.value = data.value
            dictFiledsRef.value.getFirstPageData()
            })
        } else {
            showFiledsPage.value = false
            getFirstPageData()
        }
        })
    }
    if (showFiledsPage.value) {
        const toChange = dictFiledsRef.value.checkSave()
        if (!toChange) {
        ElMessageBox.confirm(
            '存在未保存的数据，切换后会丢失，是否确定切换',
            '提示',
            {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            }
        ).then(() => {
            changeCont()
        }).catch(() => {
            treeInfo.value.currentNodeKey = dictGuid.value
        })
        } else {
        changeCont()
        }
    } else {
        changeCont()
    }
}

const tableSearchInput = ref('')
const currTableData: any = ref<Object>({});
const page = ref({
  limit: 50,
  curr: 1,
  sizes: [
    { label: "10", value: 10 },
    { label: "50", value: 50 },
    { label: "100", value: 100 },
    { label: "150", value: 150 },
    { label: "200", value: 200 },
  ]
})
const selectRowData = ref([])
const selectedRowData = ref([])
const tableInfo: any = ref({
  id: 'data-source-table',
  multiple: true,
  fixedSelection: true,
  fields: [
    { label: "序号", type: "index", width: 56, align: "center" },
    { label: '数据源标识符', field: 'codeName', width: 140 },
    { label: '数据元名称', field: 'standard', width: 140 },
    { label: '定义', field: 'standardName', width: 140 },
    { label: '数据类型', field: '', width: 120 },
    { label: '表示格式', field: 'createTime', width: TableColumnWidth }
  ],
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 92, //不要刚好90.缩小浏览器会因为小数点的差距而换行，
    fixed: 'right',
    btns: [
    //   { label: '查看', value: 'detail'},
      { label: "编辑", value: "edit" },
      { label: "删除", value: "delete" },
    ],
  },
  loading: false
})

const formItems: any = ref([
  {
    label: '中文名称',
    type: 'input',
    placeholder: '请输入',
    field: 'codeName',
    default: '',
    maxlength: 20,
    clearable: true,
    required: true
  },
  {
    label: '英文生成规则',
    type: 'select',
    placeholder: '请选择',
    field: 'publishingUnitCode',
    default: '',
    options: [],
    clearable: true,
    required: true
  },
  {
    label: '英文名称',
    type: 'input',
    placeholder: '请输入',
    field: 'orderNum',
    default: '',
    maxlength: 2,
    clearable: true,
    required: true
  },
  {
    label: '标准编号',
    type: 'input',
    placeholder: '请选择',
    field: 'codeFieldName',
    default: '',
    clearable: true,
    required: true,
    visible: true
  },
  {
    label: '标准集',
    type: 'Select',
    placeholder: '请选择',
    field: 'hierarchy',
    default: '',
    options: [],
    clearable: true,
    visible: false
  },
  {
    label: '字段类型',
    type: 'Select',
    placeholder: '请选择',
    field: 'hierarchy',
    default: '',
    options: [],
    clearable: true,
    visible: false
  },
  {
    label: '数据分类',
    type: 'Select',
    placeholder: '请选择',
    field: 'hierarchy',
    default: '',
    options: [],
    clearable: true,
    visible: false
  },
  {
    label: '数据加密等级',
    type: 'Select',
    placeholder: '请选择',
    field: 'hierarchy',
    default: '',
    options: [],
    clearable: true,
    visible: false
  },
  {
    label: '关联数据字典',
    type: 'checkbox',
    placeholder: '请选择',
    field: 'hierarchy',
    default: '',
    options: [],
    clearable: true,
    visible: false
  },
  {
    label: '业务定义',
    type: 'textarea',
    placeholder: '请选择',
    field: 'hierarchy',
    default: '',
    options: [],
    clearable: true,
    visible: false
  }
])
const formRules: any = ref({
  standardTypeCode: { required: true, message: '请选择标准类型' },
  codeName: { required: true, message: '请输入代码名称' },
  standard: { required: true, message: '请输入标准号' },
  standardName: { required: true, message: '请输入标准名称' },
  publishingUnitCode: { required: true, message: '请选择发布单位' },
  orderNum: { required: true, message: '请输入排序' },
  typeCode: { required: true, message: '请选择代码类型' },
  codeFields: { required: true, message: '请选择编码字段' },
  codeFieldName: { required: true, message: '请选择编码名称' }
})
const formInfo = ref({
  type: 'form',
  title: '',
  col: 'span',
  formInfo: {
    id: 'add-dict-form',
    col: 'col2',
    readonly: false,
    items: formItems.value,
    rules: formRules.value
  }
})

// 元标准dialog
const standardDialog = reactive({
    visible: false,
    title: '新增元标准'
})
function openStandardDialog () {
    standardDialog.visible = true
}
</script>

<template>
<!-- <div class="container_wrap full flex standard">
    <div class="aside_wrap">
        <div class="aside_title">
            元数据标准列表
            <el-icon color="#4fa1a4" @click="openStandardDialog">
                <CirclePlus />
            </el-icon>
        </div>
        <Tree ref="dictTreeRef" :treeInfo="treeInfo" @nodeClick="nodeClick" @loadNode="loadTreeNode"/>
    </div>
    <div class="main_wrap">
        <div class="table_tool_wrap">
            <div class="tools_btns">
                <el-button type="primary" @click="loadDrawer" v-preReClick>新建</el-button>
                <el-button @click="batching('export')" v-preReClick>导入</el-button>
                <el-button @click="batching('delete')" v-preReClick>导出</el-button>
                <el-button @click="batching('delete')" v-preReClick>查看</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 full">
            <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tableSelectionChange="tableSelectionChange"
            @tablePageChange="tablePageChange" @tableSwitchBeforeChange="tableSwitchBeforeChange" />
        </div>
    </div>
    <el-dialog v-model="standardDialog.visible" :title="standardDialog.title" width="700">

    </el-dialog>
</div> -->
</template>

<style lang="scss">
.standard {
    .el-icon {
        cursor: pointer;
        width: 2em;
        height: 2em
    }
    .el-icon svg {
        width: 20px;
        height: 20px;
    }
}
</style>
<style lang="scss" scoped>
.container_wrap {
  .aside_wrap {
    width: 200px;
  }
  .aside_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
  }
}

.tree_panel {
  height: 100%;
  padding-top: 0;

  :deep(.el-tree) {
    margin: 0;
    height: calc(100% - 68px);
    overflow: hidden auto;
  }
}
</style>