<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, updateClassifyGrad } from '@/api/modules/dataInventory';
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const route = useRoute();
const fullPath = route.fullPath;
onBeforeMount(() => {
  getGradeListData();
  getDataGrade();
  getDataClassify();
});

// 获取分级列表
const getGradeListData = async () => {
  tableInfo.value.loading = true;
  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;
    tableInfo.value.loading = false;
  } 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<any>();
const classDataRef = ref<any[]>([]);
const gradeDataRef = ref<any>();
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: "序号", type: 'index', width: 56, align: "center" },
    // { 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) => {
          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) => {
      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.title = '新增规则';
  newCreateGradeStandardDialogInfo.value.visible = true;
  newCreateGradeFormItems.value.forEach(item => item.default = '');
}

const formRef = ref<any>();

const classStandardFormItems = ref([{
  label: '分级名称',
  type: 'input',
  maxlength: 50,
  placeholder: '请输入',
  field: 'name',
  default: router.currentRoute.value.query.classClassifyGradName,
  block: false,
  clearable: true,
  required: true
}]);


const saveLoading = ref(false);
const saveUpdate = async () => {
  console.log(formRef.value.formInline);
  if (!formRef.value.formInline.name) {
    proxy.$ElMessage.error('分级名称不能为空');
    return;
  }

  saveLoading.value = true;
  const params = {
    guid: router.currentRoute.value.query.guid,
    name: formRef.value.formInline.name,
    type: 'G',
  }
  console.log(params);
  const res: any = await updateClassifyGrad(params);
  if (res.code == proxy.$passCode) {
    proxy.$ElMessage.success('修改分级成功');
    userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
    router.push({
      name: 'templateConfig'
    });
    saveLoading.value = false;
  } else {
    saveLoading.value = false;
    proxy.$ElMessage.error(res.msg);
  }
}

const cancel = () => {
  proxy.$openMessageBox("当前页面尚未保存，确定放弃修改吗？", () => {
    userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
    router.push({
      name: 'templateConfig'
    });
  }, () => {
    proxy.$ElMessage.info("已取消");
  });
}

onActivated(() => {
  const classClassifyGradName = route.query.classClassifyGradName;
  let tab: any = userStore.tabbar.find((tab: any) => tab.fullPath === fullPath);
  console.log(tab, '-----------');
  if (tab) {
    if (classClassifyGradName) {
      tab.meta.title = `编辑-${classClassifyGradName}`;
    }
    if (fullPath === route.fullPath) {
      document.title = tab.meta.title;
    }
  }
});

</script>

<template>
  <div class="container_wrap">
    <div class="content_main">
      <ContentWrap id="id-baseInfo" title="基础信息" description="" style="margin-top: 8px;">
        <Form ref="formRef" :itemList="classStandardFormItems" formId="main-model-edit" col="col3" />
      </ContentWrap>
      <ContentWrap id="id-grade-info" title="分级规则" class="detail-content" description="" style="margin-top: 8px;">
        <div class="content" v-loading="fullscreenLoading">
          <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>
      </ContentWrap>
    </div>
    <div class="bottom_tool_wrap">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="saveUpdate" :loading="saveLoading">保存修改</el-button>
    </div>
    <Dialog_form :dialogConfigInfo="newCreateGradeStandardDialogInfo" />
  </div>
</template>
<style lang="scss" scoped>
.container_wrap {
  padding: 0px;
}

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

  .table-top-btns {
    margin-bottom: 12px;
  }
}

.bottom_tool_wrap {
  height: 44px;
  padding: 0 16px;
  border-top: 1px solid #d9d9d9;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.detail-content) {

  .el-card__body {
    height: calc(100% - 50px) !important;

    .card-body-content {
      height: 100%;
    }
  }
}

.tools_btns {
  position: relative;
  margin-bottom: 16px;

  .show-change-btn {
    position: absolute;
    right: 0px;
  }
}

.shape-main {
  height: calc(100% - 40px);
}

.table_panel {
  height: calc(100% - 40px) !important;
}
</style>