<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 { getMetaStandardTree, deleteMetaStandard,
  getMetaStandardDataList, getMetaStandardDataFields,
  deleteMetaStandardDataFields, exportMetaStandardData
} from '@/api/modules/dataMetaService'
import router from '@/router'
import { TableColumnWidth } from '@/utils/enum';
import StandardDialog from './components/standardDialog.vue'
import StandardFieldsDialog from './components/standardFieldsDialog.vue'

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: "standardName",
    value: "guid",
    isLeaf: "isLeaf",
  },
  // lazy: true,
  nodeKey: 'guid',
  expandedKey: [],
  currentNodeKey: '',
  data: [],
  expandOnNodeClick: false,
  loading: false,
  currentObj: {},
  editTreeItem: true,
  className: 'tree-list'
})
function nodeClick (data) {
  console.log('nodeData', data)
  treeInfo.value.currentObj = data
  if (data.level == 1) return
  getTableFields()
  getFirstPageData()
}
function treeCustomClick (node, type) {
  console.log(node, type)
  if (type === 'edit') {
    // 编辑
    standardDialog.type = 'edit'
    standardDialog.guid = node.data.guid
    standardDialog.visible = true
    return
  }
  if (type === 'delete') {
    // 删除
    ElMessageBox.confirm('确定删除吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => deleteTreeNode(node.data.guid))
  }
}
function getTree () {
  getMetaStandardTree().then((res:any) => {
    if (res.code === proxy.$passCode) {
      let data = res.data || []
      data.forEach(item => {
        item.showEdit = true
        item.level = 1
      })
      treeInfo.value.data = data
      treeInfo.value.expandedKey = [data[0].guid]
      treeInfo.value.currentNodeKey = data[0].guid
      nodeClick(data[0])
    }
  })
}
function deleteTreeNode (guid) {
  deleteMetaStandard([guid]).then((res:any) => {
    if (res.code === proxy.$passCode) {
      ElMessage.success('删除成功')
      getTree()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

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: false,
  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 standardFields = ref([])
function getFirstPageData () {
  page.value.curr = 1
  toSearch({})
}
function toSearch (val: any, clear: boolean = false) {
  let params: any = Object.keys(val).length ? { ...val } : {}
  let { currentNodeKey, currentObj } = treeInfo.value
  params.pageIndex = page.value.curr;
  params.pageSize = page.value.limit;
  params.metaStandardGuid = currentObj.guid
  params.keyWords = tableSearchInput.value
  getTable(params)
}
function getTable (params) {
  tableInfo.value.loading = true
  getMetaStandardDataList(params).then((res:any) => {
    if (res.code === proxy.$passCode) {
      let data = res.data
      let list = res.data.records || []
      list.forEach((item:any) => {
        Object.keys(item.metaStandardValue).forEach(key => {
          item[key] = item.metaStandardValue[key]
        })
      })
      tableInfo.value.data = list
      tableInfo.value.page.limit = data.pageSize
      tableInfo.value.page.curr = data.pageIndex
      tableInfo.value.page.rows = data.totalRows
    }
  }).finally(() => tableInfo.value.loading = false)
}
function getTableFields () {
  let { currentObj } = treeInfo.value
  const indexField = { label: '序号', type: 'index', width: 56, align: 'center' }
  getMetaStandardDataFields(currentObj.guid).then((res:any) => {
    if (res.code === proxy.$passCode && res.data) {
      const data = res.data
      standardFields.value = data
      const fields = data.map(item => {
        return {
          label: item.fileNameCodeName,
          field: item.fileNameCode,
          width: 140
        }
      })
      fields.unshift(indexField)
      tableInfo.value.fields = fields
    } else {
      tableInfo.value.fields = [indexField]
    }
  })
}
function tablePageChange (info) {
  page.value.curr = Number(info.curr)
  page.value.limit = Number(info.limit)
  toSearch({})
}
function tableBtnClick (scope, btn) {
  console.log(scope, btn)
  const type = btn.value
  const row = scope.row
  if (type === 'edit') {
    openStandardFieldsDialog(type, row)
  } else if (type === 'delete') {
    ElMessageBox.confirm('确定删除吗？', '提示', {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: 'warning',
    }).then(() => deleteStandardFields(row))
  }
}
function deleteStandardFields (row) {
  deleteMetaStandardDataFields([row.guid]).then((res:any) => {
    if (res.code === proxy.$passCode) {
      ElMessage.success('删除成功')
      getFirstPageData()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

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,
    type: 'add',
    guid: null
})
function openStandardDialog () {
  standardDialog.type = 'add'
  standardDialog.visible = true
}
// 元标准数据dialog
const standardFieldsDialog = reactive({
  visible: false,
  type: 'add',
  metaStandardGuid: null,
  data: {}
})
function openStandardFieldsDialog (type, data = {}) {
  standardFieldsDialog.type = type
  standardFieldsDialog.metaStandardGuid = treeInfo.value.currentObj.guid
  standardFieldsDialog.data = data
  standardFieldsDialog.visible = true
}

function importData () {
  let currentTreeObj:any = treeInfo.value.currentObj
  console.log('currentTree', currentTreeObj)
  let uploadSetting:any = []
  if (currentTreeObj.children) {
    uploadSetting = currentTreeObj.children.map((item:any) => {
      return {
        standardName: item.standardName,
        standardGuid: item.guid
      }
    })
  } else {
    uploadSetting = [{
      standardName: currentTreeObj.standardName,
      standardGuid: currentTreeObj.guid
    }]
  }
  cacheStore.setCatch('uploadSetting', uploadSetting)
  router.push({
    path: '/data-meta/metadata-standard/standard-meta-import',
  });
}

function exportData () {
  let body = [treeInfo.value.currentObj.guid]
  exportMetaStandardData(body).then((res:any) => {
    if (res && !res.msg) {
      download(res, '元数据标准表.xlsx', 'excel')
    } else {
      res?.msg && ElMessage.error(res?.msg);
    }
  })
}

onBeforeMount(() => {
  getTree()
})
</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" @itemMenuClick="treeCustomClick">
          <template #default="{ node, data }">
            {{ node.label }}
          </template>
        </Tree>
    </div>
    <div class="main_wrap">
        <div class="table_tool_wrap">
            <div class="tools_btns">
                <el-button type="primary" @click="() => openStandardFieldsDialog('add')" v-preReClick>新建</el-button>
                <el-button @click="importData" v-preReClick>导入</el-button>
                <el-button @click="exportData" v-preReClick>导出</el-button>
                <el-button @click="viewGraph" 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"
            @tablePageChange="tablePageChange"/>
        </div>
    </div>
    <StandardDialog 
      v-model="standardDialog.visible" 
      :standardOptions="treeInfo.data" 
      :type="standardDialog.type"
      :guid="standardDialog.guid"
      @success="getTree"
    />
    <StandardFieldsDialog
      v-model="standardFieldsDialog.visible"
      :fields="standardFields"
      :type="standardFieldsDialog.type"
      :metaStandardGuid="standardFieldsDialog.metaStandardGuid"
      :data="standardFieldsDialog.data"
      @success="getFirstPageData"
    />
</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>