<route lang="yaml">
  name: taskConfig //分类分级模板
  </route>

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

import { ref, onMounted } from "vue";
import TableTools from '@/components/Tools/table_tools.vue';
import { MoreFilled } from "@element-plus/icons-vue";
import { useValidator } from '@/hooks/useValidator';
import { saveClassifyGrad, getClassifyGradList, deleteClassifyGrad, updateClassifyGrad, } from "@/api/modules/dataInventory";

const router = useRouter();
const { required } = useValidator();
const { proxy } = getCurrentInstance() as any;

const refGradePageParams = ref({
  pageIndex: 1,
  pageSize: -1,
  type: "G"
});

const refClassifyPageParams = ref({
  pageIndex: 1,
  pageSize: -1,
  type: "C"
});
// 分级列表
const classifyGradListData: any = ref([]);

// 分类列表
const classListData: any = ref([]);

//记录分级guid
const classifyGradGuid = ref('');

// 记录分类guid
const classGuid = ref('');



const classListDataLoading = ref(false);



// 获取分级列表
const getClassifyGradListData = async () => {
  classListDataLoading.value = true;
  const res: any = await getClassifyGradList(refGradePageParams.value);
  if (res.code == proxy.$passCode) {
    classifyGradListData.value = res.data.records || [];
    (classStandardFormItems.value[1].options as any) = classifyGradListData.value;
    classListDataLoading.value = false;
  } else {
    proxy.$ElMessage.error(res.msg);
  }
}

//获取分类列表
const getClassListData = async (params = {}) => {
  const inParams = {
    type: 'C',
    pageIndex: 1,
    pageSize: -1
  }
  const finalParams = {
    ...inParams,
    ...params
  }
  classListDataLoading.value = true;
  const res: any = await getClassifyGradList(finalParams);
  if (res.code == proxy.$passCode) {
    classListData.value = res.data.records || [];
    classListDataLoading.value = false;
  } else {
    proxy.$ElMessage.error(res.msg);
  }
}

onMounted(() => {
  getClassifyGradListData();
  // getClassListData();
})


const tabsInfo = ref({
  activeName: 'gradeStandard',
  tabs: [
    // { label: '分类分级模板', name: 'classTemplate' },
    { label: '分级规则', name: 'gradeStandard' },
    { label: '分类规则', name: 'classStandard' },
  ]
});

const tabChange = (val) => {
  tabsInfo.value.activeName = val;
}

/** ------------------------------- 分类标准相关 ------------------------------------- */

/** 分类标准的搜索配置 */
const classSearchItemList = ref([
  {
    type: 'input',
    label: '',
    field: 'classStandardName',
    default: '',
    maxlength: 50,
    placeholder: '分类名称',
    clearable: true,
    visible: true
  }
]);

/** 记录点击省略号弹出菜单的visible */
const cardBtnVisible: any = ref(false);

/** 搜索查询分类标准 */
const searchClass = async (val: any, clear: boolean = false) => {
  console.log(val, 'val');

  if (clear) {
    classSearchItemList.value.map(item => item.default = '')
    getClassListData();
    return;
  }
  // const params = {
  //   type: 'C',
  //   name: val.classStandardName,
  //   pageIndex: 1,
  //   pageSize: -1
  // }
  // const res: any = await getClassifyGradList(params);
  // if (res.code == proxy.$passCode) {
  //   classListData.value = res.data.records || [];
  // } else {
  //   proxy.$ElMessage.error(res.msg);
  // }
  getClassListData(
    {
      name: val.classStandardName
    }
  );
};

/** 编辑分类 */
const handleClassDataEdit = (params) => {
  classGuid.value = params.guid;
  newCreateClassStandardDialogInfo.value.submitBtnLoading = false;
  newCreateClassStandardDialogInfo.value.visible = true;
  newCreateClassStandardDialogInfo.value.title = '编辑分类';
  classStandardFormItems.value.forEach(item => {
    if (item.field === 'refGradeGuid') {
      item.default = params.refGradeGuid
    }
    if (item.field === 'classStandardName') {
      item.default = params.name
    }
    if (item.field === 'description') {
      item.default = params.description
    }
  })
}

// 配置分类
const handleClassDataClick = (item, des = '') => {
  console.log(item, 'i111tem');
  // 获取分级标准
  router.push({
    name: 'classStandardEdit',
    query: {
      guid: item.guid,
      type: des === '' ? '配置' : des,
      classStandardName: item.name,
      refGradeGuid: item.refGradeGuid,
      description: item.description,
      isExpand: item.isExpand || false
    }
  });
}

const handleClassDataDel = async (item) => {
  try {
    // 弹出确认框
    await proxy.$confirm('此操作将永久删除该分级, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
    const res: any = await deleteClassifyGrad({ guid: item.guid });
    if (res.code === proxy.$passCode) {
      await getClassListData();  // 获取更新后的列表数据
      proxy.$ElMessage({
        type: 'success',
        message: '删除成功!'
      });
    } else {
      proxy.$ElMessage.error(res.msg);  // 显示错误信息
    }
  } catch (error) {
    if (error !== 'cancel') {
      proxy.$ElMessage({
        type: 'info',
        message: '已取消删除'
      });
    }
  }

}


const classStandardFormItems = ref([{
  label: '分类名称',
  type: 'input',
  maxlength: 50,
  placeholder: '请输入',
  field: 'classStandardName',
  default: '',
  block: true,
  clearable: true,
  required: true
}, {
  label: '分级标准',
  type: 'select',
  placeholder: '请选择',
  field: 'refGradeGuid',
  options: [],
  props: {
    label: "name",
    value: "guid",
  },
  filterable: true,
  clearable: true,
  default: '',
  required: true,
  block: true,
}, {
  label: '分类描述',
  type: 'textarea',
  placeholder: '请输入',
  field: 'description',
  default: '',
  clearable: true,
  required: false,
  block: true
}]);

const classStandardFormRules = ref({
  classStandardName: [required('请填写分类名称')],
  refGradeGuid: [required('请选择分级标准')]
});

const newCreateClassStandardDialogInfo = ref({
  visible: false,
  size: 460,
  title: "新增分类",
  type: "",
  formInfo: {
    id: "class-standard-form",
    items: classStandardFormItems.value,
    rules: classStandardFormRules.value,
  },
  submitBtnLoading: false,
  btns: {
    cancel: () => {
      newCreateClassStandardDialogInfo.value.visible = false;
    },
    submit: async (btn, info) => {

      if (newCreateClassStandardDialogInfo.value.title === '新增分类') {
        newCreateClassStandardDialogInfo.value.submitBtnLoading = true;
        const params = {
          description: info.description,
          name: info.classStandardName,
          refGradeGuid: info.refGradeGuid,
          type: 'C'
        }
        const res: any = await saveClassifyGrad(params);
        if (res.code == proxy.$passCode) {
          await getClassListData();
          proxy.$ElMessage({
            type: 'success',
            message: '新增分类成功'
          })

          nextTick(() => {
            // 拿到新增的分类数据，跳转到配置页面
            const item = classListData.value.find(item => item.name === info.classStandardName);
            console.log(item, 'item---------------');
            if (item) {
              const params = {
                name: item.name,
                guid: item.guid,
                refGradeGuid: item.refGradeGuid,
                description: item.description,
                isExpand: true
              }
              handleClassDataClick(params, '');
            }
          })
          newCreateClassStandardDialogInfo.value.submitBtnLoading = false;
          newCreateClassStandardDialogInfo.value.visible = false;
        } else {
          newCreateClassStandardDialogInfo.value.submitBtnLoading = false;
          proxy.$ElMessage.error(res.msg);
        }
      } else {
        newCreateClassStandardDialogInfo.value.submitBtnLoading = true;
        const params = {
          name: info.classStandardName,
          refGradeGuid: info.refGradeGuid,
          guid: classGuid.value,
          type: 'C'
        }
        const res: any = await updateClassifyGrad(params);
        if (res.code == proxy.$passCode) {
          getClassListData();
          proxy.$ElMessage({
            type: 'success',
            message: '修改分类成功'
          })
          newCreateClassStandardDialogInfo.value.visible = false;
        } else {
          proxy.$ElMessage.error(res.msg);
        }
      }
    }
  }
})

const newCreateClass = () => {
  newCreateClassStandardDialogInfo.value.submitBtnLoading = false;
  newCreateClassStandardDialogInfo.value.visible = true;
  classStandardFormItems.value.forEach(item => item.default = '');
}

/** ------------------------------- 分级标准相关 ------------------------------------- */

const newCreateGradeFormItems = ref([{
  label: '分级名称',
  type: 'input',
  maxlength: 50,
  placeholder: '请输入',
  field: 'name',
  default: '',
  block: true,
  clearable: true,
  required: true
}]);

const newCreateGradeFormRules = ref({
  name: [required('请填写分级名称')],
});

const newCreateGradeStandardDialogInfo = ref({
  visible: false,
  size: 460,
  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;
      console.log(info, newCreateGradeStandardDialogInfo.value.title);
      if (newCreateGradeStandardDialogInfo.value.title === '新增分级') {
        const params = {
          name: info.name,
          type: 'G'
        }
        const res: any = await saveClassifyGrad(params);
        if (res.code == proxy.$passCode) {
          await getClassifyGradListData();
          proxy.$ElMessage({
            type: 'success',
            message: '新增分级成功'
          })
          // 拿到新增的分级数据，跳转到配置页面
          const item = classifyGradListData.value.find(item => item.name === info.name);
          if (item) {
            const params = {
              name: item.name,
              guid: item.guid,
            }
            handleClassifyGradDataClick(params);
          }
          newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
          newCreateGradeStandardDialogInfo.value.visible = false;
        } else {
          newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
          proxy.$ElMessage.error(res.msg);
        }
      } else {
        const params = {
          name: info.name,
          guid: classifyGradGuid.value,
          type: 'G'
        }
        const res: any = await updateClassifyGrad(params);
        if (res.code == proxy.$passCode) {
          getClassifyGradListData();
          proxy.$ElMessage({
            type: 'success',
            message: '修改分级成功'
          })
          newCreateGradeStandardDialogInfo.value.visible = false;
        } else {
          proxy.$ElMessage.error(res.msg);
        }
      }

    }
  }
})

// 删除分级
const handleClassifyGradDataDel = async (item) => {
  try {
    // 弹出确认框
    await proxy.$confirm('此操作将永久删除该分级, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
    const res: any = await deleteClassifyGrad({ guid: item.guid });
    if (res.code === proxy.$passCode) {
      await getClassifyGradListData();  // 获取更新后的列表数据
      proxy.$ElMessage({
        type: 'success',
        message: '删除成功!'
      });
    } else {
      proxy.$ElMessage.error(res.msg);  // 显示错误信息
    }
  } catch (error) {
    if (error !== 'cancel') {
      proxy.$ElMessage({
        type: 'info',
        message: '已取消删除'
      });
    }
  }
};

// 编辑分级
const handleClassifyGradDataEdit = (itemGradeName) => {
  newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
  classifyGradGuid.value = itemGradeName.guid;
  newCreateGradeStandardDialogInfo.value.visible = true;
  newCreateGradeStandardDialogInfo.value.title = '编辑分级';
  newCreateGradeFormItems.value.forEach(item => {
    item.default = itemGradeName.name
  })
}

// 配置分级
const handleClassifyGradDataClick = (item) => {
  console.log(item);
  router.push({
    name: 'classifyGradEdit',
    query: {
      guid: item.guid,
      classClassifyGradName: item.name
    }
  });
}

const newCreateGrade = () => {
  newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
  newCreateGradeStandardDialogInfo.value.visible = true;
  newCreateGradeFormItems.value.forEach(item => item.default = '');
}






/** ------------------------------- 分类分级模板 ------------------------------------- */

// const pageInfo = 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 },
//   ],
//   type: "normal",
//   rows: 0,
// })

// const newCreateTemplate = () => {
//   router.push({
//     name: 'newCreateTemplate',
//     query: {
//       classStandardName: '分类分级模板'
//     }
//   });
// }

// const tempBtn = () => {
//   router.push({
//     name: 'classificationTemplateEdit',
//     query: {
//       classClassifyGradName: '分类分级模板名称'
//     }
//   });
// }


// const pageChange = (info) => {
//   pageInfo.value.curr = Number(info.curr);
//   pageInfo.value.limit = Number(info.limit);
//   getClassificationTemplateList();
// }

// const getClassificationTemplateList = async () => {
//   const params = {
//     pageSize: pageInfo.value.limit,
//     pageIndex: pageInfo.value.curr,
//   }
//   const res = await getTempleteClassifyData(params);
//   console.log(res);
// }

// onBeforeMount(() => {
//   getClassificationTemplateList();
// })

</script>

<template>
  <div class="container">
    <Tabs :tabs-info="tabsInfo" @tab-change="tabChange" />
    <!-- <div class="panel" v-show="tabsInfo.activeName == 'classTemplate'">
      <div class="table_tool_wrap">
        <TableTools :searchItems="searchItemList" :searchId="'template-manage-search'" @search="searchTemplate" />
        <div class="tools_btns">
          <el-button type="primary" @click="newCreateTemplate">新增模板</el-button>
          <el-button type="primary" @click="tempBtn">测试页面</el-button>
        </div>
      </div>
      <div class="content">
        <TemplateItem />
      </div>
      <div class="botton-page-nav">
        <PageNav :class="[pageInfo.type]" :pageInfo="pageInfo" @pageChange="pageChange" />
      </div>
    </div> -->
    <div class="panel" v-show="tabsInfo.activeName == 'classStandard'">
      <div class="table_tool_wrap">
        <TableTools :searchItems="classSearchItemList" :searchId="'template-manage-search'" @search="searchClass" />
        <div class="tools_btns">
          <el-button type="primary" @click="newCreateClass">新增分类</el-button>
        </div>
      </div>
      <div class="data-content" v-loading="classListDataLoading">
        <div class="card-content" v-for="item in classListData" :key="item.guid" @click="handleClassDataClick(item)">
          <div class="type-btn">
            <el-popover v-model="cardBtnVisible" placement="bottom" width="96" trigger="click"
              popper-class="tree-item-edit-menu" :show-arrow="false" :hide-after="0">
              <template #reference>
                <el-icon color="#666" @click.stop="cardBtnVisible = true">
                  <MoreFilled />
                </el-icon>
              </template>
              <div class="levitation-ul">
                <span class="levitation-li" @click="handleClassDataClick(item)">编辑</span>
                <!-- <span class="levitation-li" @click="handleClassDataEdit(item)">编辑</span> -->
                <span class="levitation-li" @click="handleClassDataDel(item)">删除</span>
              </div>
            </el-popover>
          </div>
          <el-icon class="title-icon">
            <svg-icon name="folder" />
          </el-icon>
          <div class="title">{{ item.name }}</div>
        </div>
        <div v-if="!classListData.length" class="card-noData">
          <img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
          <span>暂无分类标准</span>
        </div>
      </div>
    </div>
    <div class="panel" v-show="tabsInfo.activeName == 'gradeStandard'">
      <div class="tools_btns">
        <el-button type="primary" @click="newCreateGrade">新增分级</el-button>
      </div>
      <div class="data-content" v-loading="classListDataLoading">
        <div class="card-content" v-for="item in classifyGradListData" :key="item.guid"
          @click="handleClassifyGradDataClick(item)">
          <div class="type-btn">
            <el-popover v-model="cardBtnVisible" placement="bottom" width="96" trigger="click"
              popper-class="tree-item-edit-menu" :show-arrow="false" :hide-after="0">
              <template #reference>
                <el-icon color="#666" @click.stop="cardBtnVisible = true">
                  <MoreFilled />
                </el-icon>
              </template>
              <div class="levitation-ul">
                <span class="levitation-li" @click="handleClassifyGradDataClick(item)">编辑</span>
                <!-- <span class="levitation-li" @click="handleClassifyGradDataEdit(item)">编辑</span> -->
                <span class="levitation-li" @click="handleClassifyGradDataDel(item)">删除</span>
              </div>
            </el-popover>
          </div>
          <el-icon class="title-icon">
            <svg-icon name="folder" />
          </el-icon>
          <div class="title">{{ item.name }}</div>
        </div>
        <div v-if="!classifyGradListData.length" class="card-noData">
          <img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
          <span>暂无分类标准</span>
        </div>
      </div>
    </div>
    <Dialog_form :dialogConfigInfo="newCreateClassStandardDialogInfo" />
    <Dialog_form :dialogConfigInfo="newCreateGradeStandardDialogInfo" />
  </div>
</template>

<style lang="scss" scoped>
.container {
  height: 100%;
  padding: 12px 16px 20px 16px;

  .panel {
    height: calc(100% - 51px);
    display: flex;
    flex-direction: column;

    .content {
      flex: 1;
      height: 100%;
      overflow-y: auto;
    }

    .botton-page-nav {
      position: sticky;
      bottom: 0;
      width: 100%;
      background-color: #fff;
      z-index: 10;
    }
  }


}

:deep(.table-tools) {
  .tools_search {
    padding: 0px;
  }
}

.tools_btns {
  padding: 8px 0px 16px;
}

.data-content {
  height: calc(100% - 92px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-content: flex-start;
  overflow-y: auto;

  .card-noData {
    height: 100%;
    width: 100%;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #909399;
    font-size: 14px;
  }

  .card-content {
    width: 18%;
    max-width: 240px;
    min-width: 220px;
    height: 160px;
    padding: 12px;
    border: 1px solid var(--el-border-color-regular);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    &:hover {
      border: 1px solid var(--el-color-primary);
    }

    :deep(.title-icon.el-icon) {
      width: 40px;
      height: 40px;
      margin-top: 28px;
      margin-bottom: 16px;

      svg {
        width: 40px;
        height: 40px;
      }
    }

    .title {
      font-size: 14px;
      color: #212121;
      text-align: center;
      line-height: 21px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .desc-row {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .desc {
        font-size: 12px;
        color: #999999;
        line-height: 18px;
      }
    }

    .type-btn {
      position: absolute;
      right: 12px;
    }
  }
}
</style>