<template>
  <div class="indexLibrary">
    <div class="btnBox">
      <n-button type="primary" @click="handleClick('add')">新增指标</n-button>
      <n-button type="primary" class="closeIcon" @click="handleClick('setting')"
        ><template #icon>
          <n-icon size="20" color="#fff">
            <Settings />
          </n-icon>
        </template>
      </n-button>
    </div>
    <div class="table">
      <n-data-table
        :data="data"
        :columns="columns"
        :max-height="1000"
        :single-line="false"
      />
    </div>
  </div>
  <n-modal
    v-model:show="showModal"
    :show-icon="false"
    preset="card"
    :title="modelTitle"
    :style="{ width: '800px' }"
  >
    <n-form
      :label-width="80"
      :model="addFormValue"
      :rules="addFormRules"
      :size="medium"
      label-placement="left"
      ref="addFormRef"
    >
      <n-form-item label="指标类别：" path="typeId">
        <n-select
          v-model:value="addFormValue.typeId"
          filterable
          :options="options1"
          placeholder="请选择指标类别"
          @update:value="changeType"
          :disabled="disabled"
        />
      </n-form-item>
      <n-form-item label="所属项目：" path="projectId">
        <n-select
          v-model:value="addFormValue.projectId"
          filterable
          :options="options2"
          placeholder="请选择所属项目"
          :disabled="disabled"
        />
      </n-form-item>
      <n-form-item label="考核内容：" path="optionContent">
        <n-input
          v-model:value="addFormValue.optionContent"
          type="textarea"
          clearable
          placeholder="请输入指标名称"
          :disabled="disabled"
        />
      </n-form-item>
      <n-form-item label="标准分值：" path="optionScore">
        <n-input-number
          v-model:value="addFormValue.optionScore"
          clearable
          style="width: 100%"
          :disabled="disabled"
        />
      </n-form-item>
      <n-form-item
        label="评分标准："
        path="list"
        v-if="modelTitle == '修改考核指标'"
      >
        <n-dynamic-input
          v-model:value="addFormValue.list"
          :on-create="onCreate"
        >
          <template #default="{ value }">
            <div style="display: flex; align-items: center; width: 100%">
              <n-input-number
                v-model:value="value.value"
                style="margin-right: 12px; width: 160px"
              />
              <n-input v-model:value="value.key" type="text" />
            </div>
          </template>
        </n-dynamic-input>
      </n-form-item>
    </n-form>
    <template #action>
      <n-space>
        <n-button @click="() => (showModal = false)">取消</n-button>
        <n-button type="primary" @click="handleClick('sure')">确定</n-button>
      </n-space>
    </template>
  </n-modal>
  <n-modal
    v-model:show="showSetModal"
    :show-icon="false"
    preset="card"
    title="配置厂站与指标关系"
    :style="{ width: '700px' }"
  >
    <n-radio-group v-model:value="orgValue" name="radiogroup">
      <n-space>
        <n-radio v-for="org in organ" :key="org.value" :value="org.value">
          {{ org.label }}
        </n-radio>
      </n-space>
    </n-radio-group>
    <n-data-table
      :data="SetData"
      :columns="SetColumns"
      :pagination="pagination"
      :max-height="600"
      :single-line="false"
      style="margin-top: 10px"
    />
  </n-modal>
  <n-modal
    v-model:show="showTypeModal"
    :show-icon="false"
    preset="card"
    title="考核指标类型"
    :style="{ width: '400px' }"
  >
    <n-checkbox-group v-model:value="lxValue">
      <n-checkbox
        v-for="l in lxList"
        :key="l.value"
        :value="l.value"
        :label="l.label"
        style="width: 100%; height: 40px"
      />
    </n-checkbox-group>
    <template #action>
      <n-space>
        <n-button @click="() => (showTypeModal = false)">取消</n-button>
        <n-button type="primary" @click="saveType()">确定</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script>
import { ref, onMounted, h, reactive, toRefs } from "vue";
import { resetForm } from "../../../utils/util";
import { NButton, useDialog, useMessage, NTag } from "naive-ui";
import { Settings, AddCircleOutline } from "@vicons/ionicons5";
import {
  getPerformanceList,
  getRelationList,
  getOptionsTypelist,
  saveRelation,
  getTypelist,
  savePormance,
  updatePormance,
  deletePormance,
  getStandards,
} from "@/services";
export default {
  name: "indexLibrary",
  components: {
    Settings,
    AddCircleOutline,
  },
  setup() {
    const dialog = useDialog();
    const message = useMessage();
    const addFormRef = ref(null);
    const valueRef = ref("2022年运营维护绩效指标");
    const panelsRef = ref([
      "2022年运营维护绩效指标",
      "2021年运营维护绩效指标",
      "2020年运营维护绩效指标",
      "2019年运营维护绩效指标",
      "2018年运营维护绩效指标",
    ]);

    const columns = ref([
      {
        title: "类别",
        key: "evaluateType",
        align: "center",
        width: "120",
        rowSpan: (rowData, rowIndex) => {
          return rowData.rowSpan1;
        },
      },
      {
        title: "赋值",
        key: "totalScore",
        align: "center",
        width: "80",
        rowSpan: (rowData, rowIndex) => {
          return rowData.rowSpan1;
        },
      },
      {
        title: "序号",
        key: "evaluateProjectNo",
        align: "center",
        width: "80",
        rowSpan: (rowData, rowIndex) => {
          return rowData.rowSpan2;
        },
      },
      {
        title: "项目",
        key: "evaluateProject",
        align: "center",
        width: "140",
        rowSpan: (rowData, rowIndex) => {
          return rowData.rowSpan2;
        },
      },
      {
        title: "标准分值",
        key: "optionScore",
        align: "center",
        width: "90",
        rowSpan: (rowData, rowIndex) => {
          return rowData.rowSpan3;
        },
      },
      {
        title: "考核内容",
        key: "optionContent",
        align: "center",
        rowSpan: (rowData, rowIndex) => {
          return rowData.rowSpan3;
        },
      },
      {
        title: "评分标准",
        key: "scoreStandard",
        align: "center",
      },
      {
        title: "操作",
        key: "actions",
        align: "center",
        width: "150",
        rowSpan: (rowData, rowIndex) => {
          return rowData.rowSpan3;
        },
        render(row) {
          const btn = actionColumn.value.map((item, index) => {
            return h(
              NButton,
              {
                text: true,
                size: item.size,
                style: {
                  margin: "10px",
                },
                type: item.btnType,
                onClick: () => handleClick(item.type, row),
              },
              { default: () => item.default }
            );
          });
          return btn;
        },
      },
    ]);
    const data = ref([]);
    const actionColumn = ref([
      {
        size: "small",
        btnType: "primary",
        type: "edit",
        default: "编辑",
      },
      {
        size: "small",
        btnType: "error",
        type: "delete",
        default: "删除",
      },
    ]);
    // 新增/修改弹窗
    const state = reactive({
      showModal: false,
      disabled: false,
      modelTitle: "",
      addFormValue: {
        typeId: null,
        projectId: null,
        optionContent: null,
        optionScore: null,
        list: [
          {
            value: null,
            key: null,
          },
        ],
      },
      addFormRules: {
        typeId: {
          required: true,
          trigger: ["blur", "change"],
          message: "请选择指标类型",
          type: "number",
        },
        projectId: {
          required: true,
          trigger: ["blur"],
          message: "请选择所属项目",
          type: "number",
        },
        optionContent: {
          required: true,
          trigger: ["blur"],
          message: "请输入考核内容",
        },
        optionScore: {
          required: true,
          trigger: ["blur"],
          message: "请输入标准分值",
          type: "number",
        },
        list: {
          required: true,
          trigger: ["blur"],
          message: "请输入标评分标准",
          type: "array",
        },
      },
      options1: [],
      options2: [],
    });
    // 指标关系弹窗
    const setModalData = reactive({
      showSetModal: false,
      orgValue: 1,
      organ: [
        { label: "项目公司考评", value: 1 },
        { label: "水务局考评", value: 2 },
      ],
      SetColumns: [
        {
          title: "名称",
          key: "facilitiesName",
          align: "center",
          width: "200",
        },
        {
          title: "信息介绍",
          key: "typeNames",
          align: "center",
          ellipsis: {
            tooltip: true,
          },
        },
        {
          title: "状态",
          key: "status",
          align: "center",
          width: "90",
          render(row) {
            return h(
              NTag,
              {
                bordered: false,
                color: {
                  color: "transparent",
                  textColor: row.status === 0 ? "#d03050" : "#2080f0",
                },
              },
              {
                default: row.status === 0 ? "未关联" : "已关联",
              }
            );
          },
        },
        {
          title: "操作",
          key: "actions",
          align: "center",
          width: "90",
          render(row) {
            return h(
              NButton,
              {
                text: true,
                size: "small",
                type: "primary",
                style: {
                  margin: "10px",
                },
                onClick: () => handleClick("relation", row),
              },
              { default: () => "去关联" }
            );
          },
        },
      ],
      SetData: [],
    });
    //  考核指标类型弹窗
    const typeModal = reactive({
      facilitiesId: null,
      showTypeModal: false,
      lxValue: null,
      lxList: [],
    });
    //分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 5,
      showSizePicker: true,
      pageSizes: [3, 5, 7],
      showQuickJumper: true,
      onChange: (page) => {
        paginationReactive.page = page;
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
      },
    });
    // 获取表格数据
    const getTableData = async () => {
      let res = await getPerformanceList();
      if (res.code === 0) {
        data.value = res.result;
      }
    };
    // 获取厂站列表
    const getRelation = async () => {
      let pramas = {
        evaluateDept: setModalData.orgValue,
        page: paginationReactive.page,
        limit: paginationReactive.pageSize,
      };
      let res = await getRelationList(pramas);
      if (res.code === 0) {
        setModalData.SetData = res.page.list;
      }
    };
    // 获取指标类型列表
    const getTypeList = async (id) => {
      let pramas = {
        evaluateDept: setModalData.orgValue,
        facilitiesId: id,
      };
      let res = await getOptionsTypelist(pramas);
      if (res.code == 0) {
        typeModal.lxList = res.result;
      }
    };
    // 查询指标类别和指标所属项目
    const getTypeOrBelongs = async () => {
      let res = await getTypelist();
      if (res.code === 0) {
        res.result.forEach((item) => {
          state.options1.push({
            label: item.label,
            value: item.value,
            projectList: item.projectList,
          });
        });
      }
    };
    const changeType = (value, options) => {
      state.addFormValue.projectId = null;
      state.options2 = options.projectList;
    };
    // 按钮点击事件
    const handleClick = (type, row) => {
      switch (type) {
        case "add":
          state.showModal = true;
          state.modelTitle = "新增考核指标";
          state.disabled = false;
          resetForm(state.addFormValue);
          break;
        case "edit":
          state.showModal = true;
          state.modelTitle = "修改考核指标";
          state.disabled = true;
          state.addFormValue.typeId = row.evaluateTypeId;
          state.addFormValue.projectId = row.evaluateProjectNo;
          state.addFormValue.optionContent = row.optionContent;
          state.addFormValue.optionScore = row.optionScore;
          state.addFormValue.optionId = row.optionContentId;
          getList(row.optionContentId);
          state.options1.forEach((v) => {
            if (state.addFormValue.typeId == v.value) {
              state.options2 = v.projectList;
            }
          });
          break;
        case "delete":
          state.modelTitle == null;
          dialog.info({
            title: "提示",
            content: `您想删除"${row.optionContentId}"吗？`,
            positiveText: "确定",
            negativeText: "取消",
            onPositiveClick: () => {
              submit(row.optionContentId, row.typeId);
            },
            onNegativeClick: () => {},
          });
          break;
        case "sure":
          addFormRef.value.validate((errors) => {
            if (!errors) {
              submit();
            } else {
              message.error("验证失败");
            }
          });
          break;
        case "setting":
          setModalData.showSetModal = true;
          getRelation();
          break;
        case "relation":
          typeModal.showTypeModal = true;
          typeModal.facilitiesId = row.facilitiesId;
          getTypeList();
          break;
      }
    };
    // 新增/修改/删除指标提交
    const submit = async (id, typeId) => {
      if (state.modelTitle == "新增考核指标") {
        let res = await savePormance(state.addFormValue);
        if (res.code === 0) {
          state.showModal = false;
          getTableData();
        }
      } else if (state.modelTitle == "修改考核指标") {
        let res2 = await updatePormance(state.addFormValue);
        if (res2.code === 0) {
          state.showModal = false;
          getTableData();
        }
      } else {
        let pramas = {
          optionId: id,
          type: typeId,
        };
        let res3 = await deletePormance(pramas);
        if (res3.code === 0) {
          getTableData();
        }
      }
    };
    // 提交关联指标类型
    const saveType = async () => {
      if (typeModal.lxValue.length > 0) {
        let pramas = {
          evaluateTypeIds: typeModal.lxValue,
          facilitiesId: typeModal.facilitiesId,
        };
        let res = await saveRelation(pramas);
        if (res.code == 0) {
          typeModal.showTypeModal = false;
          getRelation();
        }
      } else {
        message.info("请至少选择一项进行关联");
      }
    };
    // 获取修改指标库评分标准
    const getList = async (id) => {
      let res = await getStandards(`?optionId=${id}`);
      if (res.code == 0) {
        state.addFormValue.list = res.list;
      }
    };
    const onCreate = (value) => {
      return {
        value: null,
        key: null,
      };
    };
    onMounted(() => {
      getTableData();
      getTypeOrBelongs();
    });
    return {
      addFormRef,
      value: valueRef,
      panels: panelsRef,
      columns,
      data,
      ...toRefs(state),
      ...toRefs(setModalData),
      ...toRefs(typeModal),
      pagination: paginationReactive,
      getTableData,
      handleClick,
      saveType,
      changeType,
      onCreate,
    };
  },
};
</script>

<style lang="less" scoped>
.indexLibrary {
  position: relative;
  height: 100%;
  .btnBox {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .closeIcon {
      margin: 0 10px;
    }
  }
  .table{
    height: calc(100% - 50px);
    overflow: hidden;
  }
}
</style>