<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 { commonPageConfig } from '@/components/PageNav/index';
import { useValidator } from '@/hooks/useValidator';

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

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

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

/** 模板的搜索配置 */
const searchItemList = ref([
  {
    type: 'input',
    label: '',
    field: 'templateName',
    default: '',
    maxlength: 50,
    placeholder: '模板名称',
    clearable: true,
    visible: true
  }
]);

/** 搜索查询分类分级模板。 */
const searchTemplate = (val: any, clear: boolean = false) => {
  // page.value.curr = 1;
  // if (clear) {
  //   searchItemList.value.map(item => item.default = '')
  //   page.value.planName = '';
  //   page.value.state = null;
  //   getTableData();
  //   return;
  // }
  // page.value.planName = val.planName;
  // page.value.state = val.state;
  // getTableData();
};

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

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

const classPage: any = ref({
  ...commonPageConfig,
  classStandardName: ''
});

const classListDataLoading = ref(false);

const classListData: any = ref([{
  guid: '1',
  name: '工业数据分类',
  updateTime: '2020-12-12 10:10:10'
}, {
  guid: '2'
}, {
  guid: '3'
}, {
  guid: '4'
}, {
  guid: '5'
}, {
  guid: '6'
}, {
  guid: '7'
}]);

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

/** 搜索查询分类标准 */
const searchClass = (val: any, clear: boolean = false) => {
  classPage.value.curr = 1;
  if (clear) {
    classSearchItemList.value.map(item => item.default = '')
  //  classPage.value.planName = '';
    getClassListData();
    return;
  }
   //  classPage.value.planName = '';
   getClassListData();
};

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

const getClassListData = () => {
  // classListDataLoading.value = true;
  // getPlanList({
  //   pageIndex: classPage.value.curr,
  //     pageSize: classPage.value.limit,
  //   //TODO
  // }).then((res: any) => {
  //   classListDataLoading.value = false;
  //   if (res === undefined) {
  //     return;
  //   }
  //   if (res.code == proxy.$passCode) {
  //     const data = res.data || {}
  //     classListData.value.data = data.records || [];
  //   } else {
  //     proxy.$ElMessage.error(res.msg);
  //   }
  // })
}

/** 编辑分类 */
const handleClassDataEdit = (item) => {

}

const handleClassDataClick = (item) => {
  router.push({
    name: 'classStandardEdit',
    query: {
      guid: item.guid,
      classStandardName: '工业分类'
    }
  });
}

const handleClassDataDel = (item) => {

}

const classStandardFormItems = ref([{
  label: '分类名称',
  type: 'input',
  maxlength: 50,
  placeholder: '请输入',
  field: 'classStandardName',
  default: '',
  block: true,
  clearable: true,
  required: true
}, {
  label: '分级标准',
  type: 'select',
  placeholder: '请选择',
  field: 'gradeStandard',
  default: 1,
  options: [], //TODO
  required: true,
  filterable: true,
  clearable: true,
  visible: true,
  block: true,
}]);

const classStandardFormRules = ref({
  classStandardName: [required('请填写分类名称')],
  gradeStandard: [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: (btn, info) => {
      newCreateClassStandardDialogInfo.value.visible = false;
      classPage.value.curr = 1;
      getClassListData();
      //跳转到编辑页面
      router.push({
        name: 'classStandardEdit',
        query: {
          guid: '1',
          classStandardName: '工业分类'
        }
      });
    }
  }
})

const newCreateTemplate = () => {

}

const newCreateGrade = () => {

}

onBeforeMount(() => {
  getClassListData();
})

</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>
        </div>
      </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 class="desc-row">
            <div class="desc">{{ '分级标准' }}</div>
            <div class="desc">{{ item.updateTime }}</div>
          </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'">
      <el-button type="primary" @click="newCreateGrade">新增分级</el-button>
    </div>
    <Dialog_form :dialogConfigInfo="newCreateClassStandardDialogInfo" />
  </div>
</template>

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

  .panel {
    height: calc(100% - 51px);
  }
}

: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>