<route lang="yaml">
  name: classifyGradeCatalogue //新增分级分类模板
  </route>

<script lang="ts" setup name="classifyGradeCatalogue">
import { CirclePlus, Delete, Warning } from "@element-plus/icons-vue";
import TableTools from '@/components/Tools/table_tools.vue';
import { getCgDirTreeList, getCgDirFieldPageList } from '@/api/modules/dataInventory';

const currentPath = ref<string[]>(['全部', '个人信息', '个人自然信息', '个人基本概况信息']);

const tempData = [
  {
    guid: '1',
    standardName: '个人信息',
    status: 'published',
    children: [
      {
        guid: '1-1',
        standardName: '个人自然信息',
        status: 'published',
        children: [
          {
            guid: '1-1-1',
            standardName: '个人基本概况信息',
            status: 'published',
          },
          {
            guid: '1-1-2',
            standardName: '个人财产信息',
            status: 'published',
          },
          {
            guid: '1-1-3',
            standardName: '个人健康信息',
            status: 'published',
          },
        ]
      },
    ]
  },
];
const { proxy } = getCurrentInstance() as any;

// 分级分类树形列表
const CgDirTreeList = ref();
const getCgDirTreeData = async () => {
  const params = {
    classifyName: '',
  }
  const res: any = await getCgDirTreeList(params);
  if (res.code == proxy.$passCode) {
    CgDirTreeList.value = res.data;
  } else {
    proxy.$ElMessage.error(res.msg);
  }
}
// 分页列表
const CgDirFieldPageList = ref();
const getCgDirFieldPage = async (params = {}) => {
  // 在这里你可以根据需要扩展或修改 params
  const defaultParams = {
    pageIndex: 1,
    pageSize: 10,
    dirGuid: '',
    label: '',
    fieldName: '',
    classifyName: '',
    gradeDetailName: '',
    tableName: '',
    database: '',
    dirGuids: [],
  };
  const finalParams = { ...defaultParams, ...params };
  const res: any = await getCgDirFieldPageList(finalParams);
  if (res.code == proxy.$passCode) {
    CgDirFieldPageList.value = res.data;
  } else {
    proxy.$ElMessage.error(res.msg);
  }
};

onMounted(() => {
  getCgDirTreeData();
  getCgDirFieldPage();
})

// 左侧tree-list
const treeInfo = ref({
  id: "data-pickup-tree",
  filter: true,
  editTreeItem: true,
  queryValue: "",
  className: 'tree-list',
  queryPlaceholder: "输入标准集名称搜索",
  props: {
    label: "standardName",
    value: "guid",
  },
  nodeKey: 'guid',
  expandedKey: ['0'],
  currentNodeKey: '',
  expandOnNodeClick: false,
  data: tempData,
  loading: false
});

// 弹窗配置
const formItems: any = ref([
  {
    label: '标准集名称',
    type: 'input',
    maxlength: 50,
    placeholder: '请输入',
    field: 'standardName',
    clearable: true,
    required: true
  }, {
    label: '标准集编号',
    type: 'input',
    placeholder: '',
    field: 'standardCode',
    required: true,
    disabled: true
  }, {
    label: "上级标准集",
    type: 'tree-select',
    placeholder: '请选择',
    field: 'parentGuid',
    default: '',
    checkStrictly: true,
    lazy: false,
    clearable: true,
    options: [],
    props: {
      label: 'standardName',
      value: 'guid',
      children: 'children',
      isLeaf: 'isLeaf'
    },
    expandKeys: [],
    filterable: true,
    required: false
  }, {
    label: '排序',
    type: 'input',
    placeholder: '请输入',
    field: 'orderNum',
    maxlength: 6,
    required: true,
    clearable: true,
  }, {
    label: '描述',
    type: 'textarea',
    placeholder: '请输入',
    field: 'description',
    clearable: true,
    required: false,
    block: true
  },
])
const formRules: any = ref({
  standardName: [
    {
      required: true,
      message: '请输入标准集名称',
      trigger: 'blur'
    },
    {
      max: 50,
      message: '长度在 50 个字符以内',
      trigger: 'blur'
    },
  ],
  orderNum: [{
    validator: (rule: any, value: any, callback: any) => {
      if (value === 0) {
        callback();
        return;
      }
      if (!value) {
        callback(new Error('请填写排序'));
        return;
      }
      const r = /(^[0-9]([0-9]*)$|^[0-9]$)/; // 正整数（可以以0打头）
      if (value && !r.test(value)) {
        callback(new Error('请填写大于或等于零整数'));
        return;
      }
      callback();
    },
    trigger: "blur",
  }],
})
const formInfo = ref({
  type: "form",
  title: "",
  formInfo: {
    id: "add-set-standard-form",
    items: formItems.value,
    rules: formRules.value
  },
})
const standardSetDialogInfo: any = ref({
  visible: false,
  size: 700,
  direction: "column",
  header: {
    title: "新建",
  },
  type: '',
  contents: [formInfo.value],
  footer: {
    visible: true,
    btns: [
      { type: "default", label: "取消", value: "cancel" },
      { type: "primary", label: "确定", value: "submit" },
    ],
  },
})

const addStandardSet = () => {
  standardSetDialogInfo.value.visible = true;
  console.log('addStandardSet');
}

const standardSetDialogBtnClick = (btn: any, info: any) => {
  console.log('standardSetDialogBtnClick', btn, info);
  if (btn.value === 'submit') {
    standardSetDialogInfo.value.visible = false;
  }
  if (btn.value === 'cancel') {
    standardSetDialogInfo.value.visible = false;
  }
}

// 右侧上方搜索tab配置
const searchItemList = ref([
  {
    label: '标签',
    type: 'select',
    maxlength: 19,
    placeholder: '选择标签',
    field: 'labelName',
    default: '',
    options: [],
    props: {
      label: 'name',
      value: 'guid',
    },
    clearable: true,
  },
  {
    label: '字段名',
    type: 'select',
    maxlength: 19,
    placeholder: '选择字段名',
    field: 'fieldName',
    default: '',
    options: [],
    props: {
      label: 'name',
      value: 'guid',
    },
    clearable: true,
  },
  {
    label: '分类',
    type: 'select',
    maxlength: 19,
    placeholder: '选择分类',
    field: 'classifyName',
    default: '',
    options: [],
    props: {
      label: 'name',
      value: 'guid',
    },
    clearable: true,
  }, {
    label: '分级',
    type: 'select',
    maxlength: 19,
    placeholder: '选择分级',
    field: 'levelName',
    default: '',
    options: [],
    props: {
      label: 'name',
      value: 'guid',
    },
    clearable: true,
  }, {
    label: '数据库名',
    type: 'select',
    maxlength: 19,
    placeholder: '选择数据库名',
    field: 'databaseName',
    default: '',
    options: [],
    props: {
      label: 'name',
      value: 'guid',
    },
    clearable: true,
  },
  {
    label: '表名',
    type: 'select',
    maxlength: 19,
    placeholder: '选择表名',
    field: 'tableName',
    default: '',
    options: [],
    props: {
      label: 'name',
      value: 'guid',
    },
    clearable: true,
  }
])
const searchParams = ref({})
const toSearch = (val: any, clear: boolean = false) => {
  if (clear) {
    searchItemList.value.map(item => item.default = '')
    searchParams.value = {}
  }

  if (Object.keys(val).length) {
    searchParams.value = { ...val }
  }
  // let params: any = { ...searchParams.value }
  // params.pageIndex = page.value.curr;
  // params.pageSize = page.value.limit;
  // //params.standardSetGuid = standardSetGuid.value;
  // params.standardSetLevelCode = standardSetLevelCode.value;
  // return getTableData(params);
};
const treeSelectNodeChange = (node: any) => {
  console.log('treeSelectNodeChange', node);
  const { guid, standardName } = node
  treeInfo.value.currentNodeKey = guid;
  console.log('nodeClick', guid, standardName);

  // 递归tempData找到所有祖先元素的standardName，存入currentPath中
  const path = findPath(tempData, guid);
  if (path) {
    currentPath.value = path;
    console.log('找到路径:', path);
  } else {
    console.error('未找到路径');
  }
}

// btns-area
const checked1 = ref(false);


//下方表格配置
const tableDataList = ref([{
  fieldStandardCode: '个人基本概况信息',
  chName: '个人自然信息',
  enName: '个人信息',
  dataTypeValue: '规则',
  approveState: 'Y',
}, {
  fieldStandardCode: '个人财产信息',
  chName: '个人自然信息',
  enName: '个人信息',
  dataTypeValue: '规则',
  approveState: 'Y',
}, {
  fieldStandardCode: '个人健康信息',
  chName: '个人自然信息',
  enName: '个人信息',
  dataTypeValue: '规则',
  approveState: 'Y',
}]);
const tableInfo = ref({
  id: "role-manage-table",
  multiple: true,
  fixedSelection: true,
  fields: [
    { label: "序号", type: "index", width: 56, align: "center" },
    { label: "字段名", field: "fieldName", width: 140 },
    { label: "分类", field: "classifyName", width: 180 },
    { label: "分级", field: "enName", width: 120 },
    { label: "标签", field: "labelName", width: 140 },
    { label: "规则", field: "rulesName", width: 180 },
    { label: "表名", field: "tableName", width: 120, align: 'center' },
    { label: "表中文名", field: "tableCHName", width: 120, align: 'center' },
    { label: "数据库名", field: "databaseName", width: 120, align: 'center' },
    { label: "数据类型", field: "databaseCHName", width: 120, align: 'center' },

  ],
  data: tableDataList.value,
  page: {
    type: "normal",
    rows: 0,
    // ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 300,
    fixed: 'right',
    btns: [
      {
        label: "编辑", value: "edit", click: (scope) => {
          console.log('编辑', scope);
          drawerInfo.value.visible = true
        }
      },

      {
        label: "复制", value: "copy", click: (scope) => {
          console.log('复制', scope);
        }
      },
      {
        label: "删除 ", value: "delete", click: (scope) => {
          console.log('删除', scope);
        }
      },
    ]

  },
  loading: false
});


const nodeClick = (data: any) => {
  const { guid, standardName } = data
  console.log('nodeClick', guid, standardName);
  searchItemList.value[0].default = standardName;
  // 递归tempData找到所有祖先元素的standardName，存入currentPath中
  const path = findPath(tempData, guid);
  if (path) {
    currentPath.value = path;
    console.log('找到路径:', path);
  } else {
    console.error('未找到路径');
  }

}
const findPath = (data: any[], targetGuid: string, path: string[] = []) => {
  for (const item of data) {
    path.push(item.standardName); // 添加当前节点名称
    if (item.guid === targetGuid) {
      return path; // 找到目标节点，返回路径
    }
    if (item.children && item.children.length > 0) {
      const result = findPath(item.children, targetGuid, path);
      if (result) return result; // 子节点找到目标节点，返回路径
    }
    path.pop(); // 回溯，移除当前节点
  }
  return null; // 未找到目标节点
};


const classEditFormItems = ref([{
  label: '已选字段',
  type: 'input',
  maxlength: 50,
  placeholder: '请输入',
  field: 'classifyName',
  default: '',
  clearable: true,
  required: true,
  block: true
}, {
  label: '长度',
  type: 'input',
  placeholder: '请选择',
  field: 'orderNum',
  maxlength: 6,
  regexp: /\D/g,
  required: true,
  clearable: true,
},
{
  label: '',
  type: 'input',
  placeholder: '请输入',
  field: 'orderNum',
  maxlength: 6,
  regexp: /\D/g,
  required: true,
  clearable: true,
  col: 'numberClass',
},
{
  label: '精度',
  type: 'input',
  placeholder: '请选择',
  field: 'orderNum',
  maxlength: 6,
  regexp: /\D/g,
  required: true,
  clearable: true,
},
{
  label: '',
  type: 'input',
  placeholder: '请输入',
  field: 'orderNum',
  maxlength: 6,
  regexp: /\D/g,
  required: true,
  clearable: true,
  col: 'numberClass',
}, {
  label: '关联字典',
  field: 'parentGuid',
  type: 'select',
  placeholder: '请选择',
  default: '',
  options: [],
  props: {
    label: "classifyName",
    value: "guid",
  },
  filterable: true,
  clearable: true,
  required: false
},
{
  label: '字段取值范围',
  type: 'input-group',
  placeholder: '请输入',
  field: 'numberAround',
  default: '',
  children: [
    {
      type: 'input',
      placeholder: '请输入',
      field: 'numberStart',
      default: '',
      clearable: true,
      required: true,
    },
    {
      type: 'input',
      placeholder: '请输入',
      field: 'numberEnd',
      default: '',
      clearable: true,
      required: true,
    },
  ],
  col: 'col2',
  clearable: true,
},
{
  label: '数据是否唯一',
  type: "radio-group",
  field: "radioField",
  disabled: false,
  options: [
    { label: "选项一", value: "option1", disabled: false },
    { label: "选项二", value: "option2", disabled: false },
  ],
},
{
  label: '是否必填',
  type: "radio-group",
  field: "radioField",
  disabled: false,
  options: [
    { label: "选项一", value: "option1", disabled: false },
    { label: "选项二", value: "option2", disabled: false },
  ],
}
]);
const classEditFormRules = ref({
  classifyName: [{ required: true, message: '请填写分类名称', trigger: 'blur' }],
});
/** 新增分类的form */
const classEditFormInfo = ref({
  type: "form",
  title: "",
  col: "span",
  formInfo: {
    id: "add-class-form",
    readonly: false,
    items: classEditFormItems.value,
    rules: classEditFormRules.value,
  },
});
/** 新增编辑分类。 */
const drawerInfo = ref({
  visible: false,
  direction: 'rtl',
  size: 600,
  header: {
    title: '批量配置业务规则',
  },
  type: '',
  container: {
    contents: [classEditFormInfo.value],
  },
  footer: {
    btns: [
      { type: 'default', label: '取消', value: 'cancel' },
      { type: 'primary', label: '确定', value: 'save', loading: false },
    ]
  }
})
const drawerBtnClick = async (btn, info) => {
  if (btn.value == 'cancel') {
    drawerInfo.value.visible = false;
  } else {
    // if (drawerInfo.value.header.title == '添加分类') {
    //   const params = {
    //     ...info,
    //     classifyGradeGuid: router.currentRoute.value.query.guid,
    //   }
    //   const res: any = await saveClassify(params);
    //   if (res.code == proxy.$passCode) {
    //     proxy.$ElMessage.success('添加成功!');
    //     drawerInfo.value.visible = false;
    //     getTreeListData();
    //   } else {
    //     proxy.$ElMessage.error(res.msg);
    //   }
    // } else {
    //   // 编辑分类
    //   const params = {
    //     ...info,
    //     classifyGradeGuid: router.currentRoute.value.query.guid,
    //     guid: currTableInfo.value.guid
    //   }
    //   const res: any = await updateClassify(params);
    //   if (res.code == proxy.$passCode) {
    //     proxy.$ElMessage.success('修改成功!');
    //     drawerInfo.value.visible = false;
    //     getTreeListData();
    //   } else {
    //     proxy.$ElMessage.error(res.msg);
    //   }
    // }
    console.log('aaa')
  }
}

const handleTreeItemMenuClick = (data: any, type) => {
  console.log('handleTreeItemMenuClick', data, type);
}
const getItemStyle = (status: string) => {
  const styles: { [key: string]: any } = {
    published: {
      color: '#1BA854',
      background: '#F2FFF5',
      border: '1px solid rgba(109, 209, 142, 1)',
    },
    running: {
      color: '#FF991C',
      background: '#FFFBF2',
      border: '1px solid rgba(255, 203, 120, 1)',
    },
    pending: {
      border: '1px solid rgba(217, 217, 217, 1)',
      color: '#404040',
      background: '#F5F5F5',
    },
  };

  return styles[status] || {}; // 如果状态没有对应的样式，则返回空对象
}


const activeName = ref('first');
const handleClick = (tab: any) => {
  console.log(tab.props.name);
  activeName.value = tab.props.name;
}

const handleSubjectTableCommand = (command: string) => {
  console.log('handleSubjectTableCommand', command);
}

// 文字提示区域
const isShowClassifyTip = ref(true);
const isShowDatabaseTip = ref(true);
const addIsShowClassifyTip = () => {
  isShowClassifyTip.value = false;
}

const addIsShowDatabaseTip = () => {
  isShowDatabaseTip.value = false;
}

</script>

<template>
  <div class="classification-template-content">
    <div class="v-table-tools">
      <TableTools :searchItems="searchItemList" :init="false" :searchId="'files-standard-search'" @search="toSearch"
        @treeSelectNodeChange="treeSelectNodeChange" />
    </div>
    <div class="container_wrap full flex">
      <div class="aside_wrap">
        <el-tabs v-model="activeName" class="v-tabs" @tab-click="handleClick">
          <el-tab-pane label="分类分级目录" name="first">
            <Tree :treeInfo="treeInfo" @nodeClick="nodeClick" @itemMenuClick="handleTreeItemMenuClick" />
          </el-tab-pane>
          <el-tab-pane label="数据库目录" name="second">Config</el-tab-pane>
        </el-tabs>
      </div>
      <div class="main_wrap" v-if="activeName === 'first'">
        <div class="top-tool-tip" v-if="isShowClassifyTip">
          <div class="des">
            <div class="v-icon">
              <el-icon>
                <Warning />
              </el-icon>
            </div>
            目录内容为最新的已确认的分类分级任务。
          </div>
          <el-button type="success" link @click="addIsShowClassifyTip">
            不再提醒
          </el-button>
        </div>
        <div class="path">
          <span v-for="(item, index) in currentPath" :key="index" class="path-item">
            <span :class="{ 'bold': index === currentPath.length - 1 }">{{ item }}</span>
            <span v-if="index < currentPath.length - 1">/</span>
          </span>
        </div>
        <div class="btns-area">
          <div class="left-btns">
            <el-button type="primary" @click="addStandardSet">查看已生产报告</el-button>
            <el-button>导出</el-button>
            <el-button>批量配置业务规则</el-button>
          </div>
        </div>
        <div class="table_panel_wrap">
          <Table :tableInfo="tableInfo" />
        </div>
      </div>

      <div class="main_wrap" v-if="activeName === 'second'">
        <div class="top-tool-tip" v-if="isShowDatabaseTip">
          <div class="des">
            <div class="v-icon">
              <el-icon>
                <Warning />
              </el-icon>
            </div>
            数据库目录可新建表，可设置业务规则，自动生成质检规则。
          </div>
          <el-button type="success" link @click="addIsShowDatabaseTip">
            不再提醒
          </el-button>
        </div>
        <div>全部</div>
        <div class="btns-area">
          <div class="left-btns">
            <div class="dropdown_btn">
              <el-dropdown popper-class="table-create-menu" @command="handleSubjectTableCommand"
                placement="bottom-start" trigger="click">
                <span class="el-dropdown-link">
                  <el-button type="primary">新建主题表</el-button>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="manualCreate">
                      <el-icon style="width: 24px;height: 24px;">
                        <svg-icon style="width: 24px;height: 24px;" name="table-create-manual" />
                      </el-icon>
                      <div class="item-content">
                        <span class="item-content-title">根据文件新建</span>
                        <span class="item-content-desc">根据文件新建数据库表</span>
                      </div>
                    </el-dropdown-item>
                    <el-dropdown-item command="existingCreate">
                      <el-icon style="width: 24px;height: 24px;">
                        <svg-icon style="width: 24px;height: 24px;" name="table-create-exist" />
                      </el-icon>
                      <div class="item-content">
                        <span class="item-content-title">已有表新建</span>
                        <span class="item-content-desc">根据已有表或视图新建表</span>
                      </div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
            <el-button>导出</el-button>
            <el-button>查看已生产报告</el-button>
            <el-button>查看质量规则</el-button>
          </div>
          <div class="right-btns">
            <el-checkbox v-model="checked1" label="仅看规划数据资产表" size="large" />
          </div>
        </div>
        <div class="table_panel_wrap_database">
          <Table :tableInfo="tableInfo" />
        </div>
      </div>

      <Dialog :dialogInfo="standardSetDialogInfo" @btnClick="standardSetDialogBtnClick" />
      <Drawer :drawerInfo="drawerInfo" @drawerBtnClick="drawerBtnClick" class="v-drawer" />

    </div>
  </div>

</template>


<style lang="scss" scoped>
.classification-template-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .v-table-tools {
    padding: 8px 12px;
  }

  .container_wrap {
    padding: 0;
    display: flex;
    justify-content: space-between;

    .aside_wrap {
      width: 199px;
      border-right: 1px solid #d9d9d9;
      box-shadow: none;

      :deep(.v-tabs) {
        .el-tabs__item {
          padding: 0 10px;
        }
      }

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

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

    }

    .main_wrap {
      padding: 11px 16px 0 16px;

      .top-tool-tip {
        display: flex;
        justify-content: space-between;
        height: 40px;
        align-items: center;
        background: #EFFBFC;
        border: 1px solid rgba(195, 219, 219, 1);
        border-radius: 2px;
        padding: 0 16px;
        margin-bottom: 12px;

        .des {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #212121;
          line-height: 21px;
          font-weight: 400;

          .v-icon {
            display: flex;
            align-items: center;
            margin-right: 8px;
            color: #4FA1A4;
          }
        }
      }

      .path-item {
        font-weight: normal;
      }

      .bold {
        color: #212121;
        font-weight: 400;
      }

      .btns-area {
        display: flex;
        justify-content: space-between;
        height: 40px;

        .left-btns {
          display: flex;
          align-items: center;

          .dropdown_btn {
            margin-right: 8px;
          }
        }

        .right-btns {
          display: flex;
          align-items: center;

          .el-checkbox {
            margin-right: 8px;
          }
        }
      }

      .table_panel_wrap {
        width: 100%;
        height: calc(100% - 113px);
        min-height: 210px;
        overflow: visible;
      }

      .table_panel_wrap_database {
        width: 100%;
        height: calc(100% - 113px);
        min-height: 210px;
        overflow: visible;
      }
    }
  }

  .match-content-wrapper {
    width: 100%;

    .match-content {
      display: flex;
      align-items: center;
      margin-top: 8px;

      .v-select {
        margin-right: 8px;
        width: 50%;
      }

      .v-input {
        width: calc(50% - 50px);
      }

      .extra-icon {
        transition: opacity 1s;
      }
    }
  }

  :deep(.v-drawer) {
    .numberClass {
      margin-top: 12px;
    }
  }
}
</style>