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

<script lang="ts" setup name="classifyGradEdit">

import router from "@/router";
import { ref } from "vue";
import { saveGrade, getGradeList, deleteGrade, getLargeCategoryList, updateGrade } from '@/api/modules/dataInventory';

onMounted(() => {
  getGradeListData();
  Promise.all([getDataGrade(), getDataClassify()]);
});

// 获取分级列表
const getGradeListData = async () => {
  const params = {
    pageIndex: 1,
    pageSize: -1,
    classifyGradeGuid: guid
  }
  const res: any = await getGradeList(params);
  if (res.code == proxy.$passCode) {
    tableInfo.value.data = res.data.records;
  } else {
    proxy.$ElMessage.error(res.msg);
  }
}

// 获取数据类别
const getDataGrade = async () => {
  const params = {
    dictType: "数据类别"
  }
  const res: any = await getLargeCategoryList(params);
  if (res.code == proxy.$passCode) {
    // 提出value和label 作为select的options
    const options = res.data.map((item: any) => ({
      label: item.label,
      value: item.value
    }));
    newCreateGradeFormItems.value[1].options = options;
    classDataRef.value = options;
  } else {
    proxy.$ElMessage.error(res.msg);
  }
}

// 获取数据级别
const getDataClassify = async () => {
  const params = {
    dictType: "数据级别"
  }
  const res: any = await getLargeCategoryList(params);
  if (res.code == proxy.$passCode) {
    // 提出value和label 作为select的options
    const options = res.data.map((item: any) => ({
      label: item.label,
      value: item.value
    }));
    newCreateGradeFormItems.value[0].options = options;
    // 这里需要过滤已经在表格中数据级别
    gradeDataRef.value = options;
  } else {
    proxy.$ElMessage.error(res.msg);
  }
}

// 新增过滤数据级别
const filterDataGrade = () => {
  const selectedDataGrade = new Set();
  tableInfo.value.data.forEach((item: any) => {
    if (item.dataGrade) {
      selectedDataGrade.add(item.dataGrade);
    }
  });
  const filteredOptions = gradeDataRef.value.filter(option => !selectedDataGrade.has(option.value));
  (newCreateGradeFormItems.value[0].options as any[]) = filteredOptions;
};

// 编辑过滤数据级别，需包含当前数据级别，不排除自己
const filterDataGradeEdit = (dataGrade: string) => {
  const selectedDataGrade = new Set();
  tableInfo.value.data.forEach((item: any) => {
    if (item.dataGrade) {
      selectedDataGrade.add(item.dataGrade);
    }
  });
  // 移除当前数据级别dataGrade
  selectedDataGrade.delete(dataGrade);
  console.log(selectedDataGrade,);
  const filteredOptions = gradeDataRef.value.filter(option => !selectedDataGrade.has(option.value));
  (newCreateGradeFormItems.value[0].options as any[]) = filteredOptions;
};

const tableRef = ref();
const classDataRef = ref();
const gradeDataRef = ref();
const fullscreenLoading = ref(false);
const editClassifyGradeGuid = ref('');
const { proxy } = getCurrentInstance() as any;
const guidArray = ref<any[]>([]);
// 获取query参数 中的guid
const guid = router.currentRoute.value.query.guid;
const tableInfo = ref({
  id: "data-class-standard-table",
  multiple: true,
  fields: [
    { label: "序号", field: 'orderNum', width: 56, align: "center" },
    {
      label: "数据级别", field: "dataGrade", width: 120, getName: (scope) => {
        let dataGrade = scope.row.dataGrade;
        return dataGrade + '级';
      }
    },
    {
      label: "数据类别", field: "dataClassify", width: 120, getName: (scope) => {
        let dataClassify = scope.row.dataClassify;
        return classDataRef.value.find((item: any) => item.value === dataClassify)?.label;
      }
    },
    { label: "分级描述", field: "gradeDesc", align: "left", },

  ],
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 120,
    btns: [
      {
        label: "编辑", value: "edit", click: (scope) => {
          console.log(scope);
          filterDataGradeEdit(scope.row.dataGrade);
          newCreateGradeStandardDialogInfo.value.visible = true;
          newCreateGradeStandardDialogInfo.value.title = '编辑分类';
          newCreateGradeFormItems.value.forEach(item => {
            item.default = scope.row[item.field];
          })
          editClassifyGradeGuid.value = scope.row.guid;
        }
      },
      {
        label: "删除", value: "delete", click: (scope) => {
          guidArray.value = [];  // 重置数组
          guidArray.value.push(scope.row.guid);
          batchRemobe();
        }
      },
    ],
  },
  data: [],
  showPage: false,
  loading: false,
});

// 选择勾选的数据
const onTableSelectChange = async (selection: any[]) => {
  guidArray.value = [];  // 重置数组
  selection.forEach((item: any) => {
    guidArray.value.push(item.guid);
  });
};

// 批量删除
const batchRemobe = async () => {
  // 批量删除,增加confirm确认弹窗
  if (guidArray.value.length == 0) {
    proxy.$ElMessage({
      type: 'warning',
      message: '请选择要删除的数据'
    })
    return;
  }

  // confirm弹窗
  proxy.$confirm('是否删除选中数据?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const res: any = await deleteGrade(guidArray.value);
    if (res.code == proxy.$passCode) {
      proxy.$ElMessage({
        type: 'success',
        message: '删除成功'
      })
      getGradeListData();
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  }).catch(() => {
    proxy.$ElMessage({
      type: 'info',
      message: '已取消删除'
    });
  });

};

/**弹窗配置 */
const newCreateGradeFormItems = ref([{
  label: '数据级别',
  type: 'select',
  placeholder: '请选择',
  field: 'dataGrade',
  default: '',
  options: gradeDataRef.value,
  required: true,
  filterable: true,
  clearable: true,
  visible: true,
},
{
  label: '数据类别',
  type: 'select',
  placeholder: '请选择',
  field: 'dataClassify',
  default: '',
  options: [],
  required: true,
  filterable: true,
  clearable: true,
  visible: true,
},
{
  label: '序号',
  type: 'input',
  maxlength: 19,
  placeholder: '请输入',
  field: 'orderNum',
  default: '',
  clearable: true,
  required: true,
  regexp: /\D/g
},
{
  label: '分级描述',
  type: 'textarea',
  maxlength: 500,
  placeholder: '分类分级的描述说明',
  field: 'gradeDesc',
  default: '',
  clearable: true,
  required: false,
  block: true,
}]);

const newCreateGradeFormRules = ref({
  dataGrade: [
    { required: true, message: '请选择数据级别', trigger: 'change' }
  ],
  orderNum: [
    { required: true, message: '请输入序号', trigger: 'blur' }
  ],
  dataClassify: [
    { required: true, message: '请选择数据类别', trigger: 'change' }
  ]
});

const newCreateGradeStandardDialogInfo = ref({
  visible: false,
  size: 860,
  title: "添加分类",
  type: "",
  formInfo: {
    id: "grade-form",
    items: newCreateGradeFormItems.value,
    rules: newCreateGradeFormRules.value,
  },
  submitBtnLoading: false,
  btns: {
    cancel: () => {
      newCreateGradeStandardDialogInfo.value.visible = false;
    },
    submit: async (btn, info) => {
      console.log(info, guid);
      newCreateGradeStandardDialogInfo.value.submitBtnLoading = true;
      if (newCreateGradeStandardDialogInfo.value.title === '编辑分类') {
        const params = {
          ...info,
          guid: editClassifyGradeGuid.value,
          classifyGradeGuid: guid
        }

        const res: any = await updateGrade(params);
        if (res.code == proxy.$passCode) {
          proxy.$ElMessage({
            type: 'success',
            message: '修改分类成功'
          })
          getGradeListData();
          newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
          newCreateGradeStandardDialogInfo.value.visible = false;
        } else {
          proxy.$ElMessage.error(res.msg);
        }
        return;
      } else {
        const params = {
          ...info,
          classifyGradeGuid: guid
        }
        const res: any = await saveGrade(params);
        if (res.code == proxy.$passCode) {
          proxy.$ElMessage({
            type: 'success',
            message: '新增分类成功'
          })
          getGradeListData();
          newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
          newCreateGradeStandardDialogInfo.value.visible = false;
        } else {
          proxy.$ElMessage.error(res.msg);
        }
      }
    }
  }
})

const newStandard = () => {
  filterDataGrade();
  newCreateGradeStandardDialogInfo.value.visible = true;
  newCreateGradeFormItems.value.forEach(item => item.default = '');
}



</script>

<template>
  <div class="container_wrap" v-loading="fullscreenLoading">
    <div class="content_main">
      <div class="table-top-btns">
        <el-button type="primary" @click="newStandard">新增标准</el-button>
        <el-button @click="batchRemobe">批量删除</el-button>
      </div>
      <Table ref="tableRef" :tableInfo="tableInfo" @tableSelectionChange="onTableSelectChange" />
    </div>
    <Dialog_form :dialogConfigInfo="newCreateGradeStandardDialogInfo" />
  </div>
</template>
<style lang="scss" scoped>
.container_wrap {
  padding: 0px;
}

.content_main {
  height: calc(100% - 44px);
  padding: 17px 16px 10px 16px;

  .table-top-btns {
    display: flex;
    margin-bottom: 12px;
  }
}
</style>