<script setup name="projectTagStore">
import ElTree from '@/components/elTree/index.vue'
import { getCurrentInstance, h, nextTick, reactive, ref } from 'vue'
import { indexList, indexDel, indexSave, indexDetail, tagList } from '@/http/apis/performanceEvaluation/indicatorTemplate'
import store from '@/store'
import TagDialog from '@/pages/performanceEvaluation/indicatorTemplate/projectTagStore/componets/tagDialog.vue'
const { proxy } = getCurrentInstance(),
  { indexLevelOptions } = store.dictStore.globalDicts || {},
  searchForm = reactive({
    regionCode: undefined,
    indexName: undefined,
    indexLevel: undefined
  }),
  tableListRef = ref(),
  total = ref(0),
  data = ref([]),
  column = [
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '指标名称',
      key: 'indexName',
      prop: 'indexName',
      minWidth: '200',
      showOverflowTooltip: true
    },
    {
      label: '指标级别',
      key: 'indexLevel',
      prop: 'indexLevel',
      width: '100',
      render: row => h('span', indexLevelOptions[row.indexLevel])
    },
    {
      label: '创建时间',
      key: 'createOn',
      prop: 'createOn',
      width: '180'
    },
    {
      label: '操作',
      slot: 'action',
      width: '120',
      fixed: 'right'
    }
  ],
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await indexList({
      ...pageParams,
      ...searchForm
    })
    data.value = res?.data?.records || []
    total.value = res.data.total || 0
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.indexName = undefined
    searchForm.indexLevel = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  getTree = (value) => {
    searchForm.regionCode = value.regionLevel === 3 ? value.regionCode : undefined
    tableListRef.value.pageParams.pageNumber = 1
    getTableData()
  },
  // 新增编辑指标
  dialogVisible = ref(false),
  editType = ref(),
  formData = ref({
    additional: false
  }),
  formRef = ref(),
  rules = {
    indexName: [{ required: true, message: '请输入' }],
    indexLevel: [{ required: true, message: '请选择' }],
    additional: [{ required: true, message: '请选择' }],
    indexScore: [{ required: true, message: '请输入' }],
    indexDetail: [{ required: true, message: '请输入' }],
    gradeDetail: [{ required: true, message: '请输入' }],
    supportMaterial: [{ required: true, message: '请输入' }]
  },
  loading = ref(false),
  showDialog = async (type, id) => {
    getTagList()
    if (id) {
      const res = await indexDetail(id)
      formData.value = {
        ...res.data,
        tagIds: res.data.tags.map(i => i.id)
      }
    }
    editType.value = type
    dialogVisible.value = true
    await nextTick()
    formRef.value.clearValidate()
  },
  save = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async valid => {
      if (valid) {
        loading.value = true
        const postData = {
          ...formData.value,
          regionCode: searchForm.regionCode,
          additional: formData.value.indexLevel === 3 ? formData.value.additional : undefined
        }
        try {
          await indexSave(postData)
          proxy.$message.success('提交成功！')
          loading.value = false
          close(true)
        } catch (e) {
          loading.value = false
        }
      }
    })
  },
  close = (flag) => {
    flag && getTableData()
    formData.value = {}
    dialogVisible.value = false
  },
  // 删除
  delData = (data) => {
    proxy.$messageBox
      .confirm(`是否删除${data.indexName}?`, '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await indexDel(data.id)
        proxy.$message.success('删除成功！')
        await getTableData()
      })
  },
  // 标签管理
  tagDialogVisible = ref(false),
  closeTagDialog = () => {
    tagDialogVisible.value = false
  },
  tagLists = ref([]),
  getTagList = async () => {
    const res = await tagList({
      pageNumber: 1,
      pageSize: 1000
    })
    tagLists.value = res.data.records
  }
</script>

<template>
  <el-row :gutter="16">
    <el-col style="padding-right: 16px" :span="4">
      <elTree @get-tree="getTree" />
    </el-col>
    <el-col :span="20">
      <div>
        <el-card shadow="never" class="search mb-16">
          <el-form label-suffix=":" :model="searchForm" size="small">
            <el-row :gutter="16">
              <el-col :span="8">
                <el-form-item label="指标名称">
                  <el-input
                    v-model="searchForm.indexName"
                    maxlength="10"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="指标级别">
                  <el-select v-model="searchForm.indexLevel">
                    <el-option
                      v-for="(v,k) in indexLevelOptions"
                      :key="k"
                      :value="k*1"
                      :label="v"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item class="btn">
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button @click="reset">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card shadow="never">
          <template #header>
            <div class="flex justify-between items-center">
              <span>指标列表</span>
              <div>
                <el-button
                  type="primary"
                  size="small"
                  @click="tagDialogVisible=true"
                >指标标签管理</el-button>
                <el-button
                  type="primary"
                  size="small"
                  icon="Plus"
                  @click="showDialog(1)"
                >新增指标</el-button>
              </div>

            </div>
          </template>
          <table-list
            ref="tableListRef"
            :column="column"
            :data="data"
            :total="total"
            @get-table-data="getTableData"
          >
            <template #action="{scope}">
              <a @click="showDialog(2,scope.row.id)">编辑</a>
              <a class="text-danger" @click="delData(scope.row)">删除</a>
            </template>
          </table-list>
        </el-card>
      </div>
    </el-col>
  </el-row>
  <el-dialog
    :title="editType===1?'新增指标':'编辑指标'"
    :model-value="dialogVisible"
    :close-on-click-modal="false"
    @close="close"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-suffix="："
      label-width="140"
    >
      <el-form-item label="指标名称" prop="indexName">
        <el-input v-model="formData.indexName" :maxlength="50" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="指标级别" prop="indexLevel">
        <el-radio-group v-model="formData.indexLevel" :disabled="editType===2">
          <el-radio :label="1">一级</el-radio>
          <el-radio :label="2">二级</el-radio>
          <el-radio :label="3">三级</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="formData.indexLevel===3" label="是否为附加指标" prop="additional">
        <el-radio-group v-model="formData.additional" @change="formData.indexScore=undefined">
          <el-radio :label="false">否</el-radio>
          <el-radio :label="true">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="指标标签">
        <el-select
          v-model="formData.tagIds"
          multiple
          class="w-full"
          filterable
        >
          <el-option
            v-for="(item,index) in tagLists"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <template v-if="formData.indexLevel===3">
        <el-form-item label="指标分值" prop="indexScore">
          <el-input-number
            v-model="formData.indexScore"
            :max="100"
            :min="!formData.additional?0:undefined"
            :precision="2"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="指标细则" prop="indexDetail">
          <el-input
            v-model="formData.indexDetail"
            :maxlength="1000"
            type="textarea"
            show-word-limit
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="评分细则" prop="gradeDetail">
          <el-input
            v-model="formData.gradeDetail"
            :maxlength="1000"
            type="textarea"
            show-word-limit
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="佐证材料" prop="supportMaterial">
          <el-input
            v-model="formData.supportMaterial"
            :maxlength="1000"
            type="textarea"
            show-word-limit
            placeholder="请输入"
          />
        </el-form-item>
      </template>
    </el-form>
    <template #footer>
      <el-button
        type="primary"
        size="small"
        :loading="loading"
        @click="save(formRef)"
      >
        保存
      </el-button>
      <el-button size="small" @click="close">
        关闭
      </el-button>
    </template>
  </el-dialog>
  <tag-dialog :visible="tagDialogVisible" @close="closeTagDialog" />
</template>
