<script name="editTemplate" setup>
import {
  save,
  indexList,
  detail,
  tagFuzzyMatch,
  draftSave,
  draftDetail,
  templateTypePage
} from '@/http/apis/performanceEvaluation/indicatorTemplate'
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { tagList } from '@/http/apis/projectPortrait/tagsManage'
import { dictionary } from '@/http/apis/projectCollection/projectCollectionEnter'
import {
  fileFormatVerification,
  handleFileSuccess,
  handleFileError,
  fileTypes,
  fileDesc,
  handleFileExceed,
  handleFilePreview
} from '@/utils/uploadAction.js'
import store from '@/store'
import { auditDetail } from '@/http/apis/performanceEvaluation/performanceApprove'
import IndexTree from '@/components/indexTree/index.vue'
const { proxy } = getCurrentInstance(),
  uploadUrl = store.dictStore.uploadUrl,
  route = useRoute(),
  form = ref({
    projectYears: [{
      projectYear: ''
    }]
  }),
  formRef = ref(),
  rules = {
    name: [{ required: true, message: '请输入' }],
    projectType: [{ required: true, message: '请选择' }],
    projectYear: [{ required: true, message: '请选择' }],
    amountRange: [{ required: true, message: '请选择' }],
    projectTagIds: [{ required: true, message: '请选择', trigger: 'change' }],
    constructType: [{ required: true, message: '请选择' }],
    templateType: [{ required: true, message: '请选择' }]
  },
  form1 = ref({
    templateDetails: [{
      indexId: undefined,
      name: '',
      type: 1, // 1一级指标 2二级指标 3三级指标
      children: [
        {
          name: '',
          type: 2,
          children: [{
            isUploadSupportFile: true,
            indexId: undefined,
            name: '',
            type: 3,
            indexScore: undefined, // 指标分值
            indexDetail: '', // 指标细则
            gradeDetail: '', // 评分细则
            supportMaterial: ''// 佐证材料 描述
          }]
        }
      ]
    }],
    additionalIndexDetails: []
  }),
  formRef1 = ref(),
  rules1 = {},
  active = ref(0),
  totalScore = ref(0),
  next = () => {
    if (active.value === 0) {
      formRef.value.validate(valid => {
        if (valid) {
          active.value++
        }
      })
    } else {
      formRef1.value.validate(async valid => {
        if (valid) {
          const postData = getPostData()
          totalScore.value = 0
          postData.templateDetails.forEach(i => {
            i.children.forEach(j => {
              j.children.forEach(k => {
                totalScore.value += k.indexScore
              })
            })
          })
          totalScore.value = caldigit(totalScore.value.toFixed(3), 2)
          if (totalScore.value !== 100) {
            proxy.$message.warning('除附加指标外的指标总分必须等于100分')
            return
          }
          await save(postData)
          active.value++
        }
      })
    }
  },
  router = useRouter(),
  saveDraft = async () => {
    const postData = getPostData()
    await draftSave(postData)
    proxy.$message.success('暂存成功')
    router.go(-1)
  },
  caldigit = (value, num) => {
    const val = value + ''
    value = val.substr(0, val.indexOf('.') + (num + 1))
    return value * 1
  },
  getPostData = () => {
    return {
      ...form.value,
      id: route.query.id || undefined,
      auditId: auditInfo.value?.auditStatus === 3 ? route.query.auditId * 1 : undefined,
      projectYear: form.value.projectYears.map(i => i.projectYear).join(','),
      projectYears: undefined,
      regionCode: route.query.regionCode,
      ...form1.value,
      templateDetails: form1.value.templateDetails?.length && changeIndexIds(form1.value.templateDetails) || [],
      additionalIndexDetails: form1.value.additionalIndexDetails?.length && changeIndexIds(form1.value.additionalIndexDetails) || []
    }
  },
  changeIndexIds = (data) => {
    const arr = []
    data.forEach(i => {
      arr.push({
        ...i,
        indexListData: undefined,
        indexId: i.indexId?.length > 1 ? i.indexId[i.indexId.length - 1] : i.indexId,
        // supportFile: i.isUploadSupportFile && i.supportFile?.length && JSON.stringify(changFilesParam(i.supportFile)) || undefined,
        children: i.children?.length ? changeIndexIds(i.children) : []
      })
    })
    return arr
  },
  pre = () => {
    active.value--
  },
  addOne = (stage) => {
    form1.value[stage].push({
      name: '',
      type: 1,
      indexListData: indexListData.value['1'],
      children: [
        {
          name: '',
          type: 2,
          indexListData: indexListData.value['2'],
          children: [{ type: 3, indexListData: stage === 'additionalIndexDetails' ? indexListData.value['4'] : indexListData.value['3'], isUploadSupportFile: true }]
        }
      ]
    })
  },
  delOne = (stage, index) => {
    form1.value[stage].splice(index, 1)
  },
  addTwo = (stage, index) => {
    form1.value[stage][index].children.push({
      name: '',
      type: 2,
      indexListData: indexListData.value['2'],
      children: [{
        type: 3,
        indexListData: stage === 'additionalIndexDetails' ? indexListData.value['4'] : indexListData.value['3'],
        isUploadSupportFile: true
      }]
    })
  },
  delTwo = (stage, index, key) => {
    form1.value[stage][index].children.splice(key, 1)
  },
  addThree = (stage, index, key) => {
    form1.value[stage][index].children[key].children.push({
      name: '',
      type: 3,
      indexListData: stage === 'additionalIndexDetails' ? indexListData.value['4'] : indexListData.value['3'],
      isUploadSupportFile: true
    })
  },
  delThree = (stage, index, key, i) => {
    form1.value[stage][index].children[key].children.splice(i, 1)
  },
  auditInfo = ref(),
  getDetail = async () => {
    if (route.query.auditStatus === '3') {
      const res = await auditDetail(route.query.auditId)
      const data = res.data?.templateDetail || {}
      form.value = {
        id: data.id,
        name: data.name,
        templateType: data.templateType,
        regionCode: data.regionCode,
        projectYears: data.projectYear.toString()?.split(',').map(i => {
          return { projectYear: i }
        })
      }
      form1.value = {
        templateDetails: getIndexDetail(data.templateDetails),
        additionalIndexDetails: getIndexDetail(data?.additionalIndexDetails) || []
      }
      auditInfo.value = res.data
    } else if (route.query.draftId) {
      const res = await draftDetail(route.query.draftId)
      form.value = {
        draftId: res.data.draftId,
        name: res.data.name,
        templateType: res.data.templateType,
        regionCode: res.data.regionCode,
        projectYears: res.data.projectYear?.toString()?.split(',').map(i => {
          return { projectYear: i }
        }) || [{ projectYear: '' }]
      }
      form1.value = {
        templateDetails: res.data.templateDetails?.length && getIndexDetail(res.data.templateDetails) || [],
        additionalIndexDetails: res.data?.additionalIndexDetails?.length && getIndexDetail(res.data?.additionalIndexDetails) || []
      }
    } else {
      const res = await detail(route.query.id)
      form.value = {
        id: res.data.id,
        name: res.data.name,
        templateType: res.data.templateType,
        regionCode: res.data.regionCode,
        projectYears: res.data.projectYear.toString()?.split(',').map(i => {
          return { projectYear: i }
        })
      }
      form1.value = {
        templateDetails: getIndexDetail(res.data.templateDetails),
        additionalIndexDetails: getIndexDetail(res.data?.additionalIndexDetails) || []
      }
    }
  // getIndexList()
  },
  getIndexDetail = (data) => {
    const arr = []
    data.forEach(i => {
      arr.push({
        ...i,
        isUploadSupportFile: i.type === 3 ? i.isUploadSupportFile && JSON.parse(i.isUploadSupportFile) : undefined,
        // supportFile: i.type === 3 && i.isUploadSupportFile && i.supportFile ? reviewFileParam(JSON.parse(i.supportFile)) : undefined,
        children: i.children?.length ? getIndexDetail(i.children) : []
      })
    })
    return arr
  },
  indexListData = ref({}),
  selectLoading = ref(false),
  // getIndexList = async () => {
  //   const res = {}
  //   res['1'] = await tagFuzzyMatch({ indexLevel: '1' })
  //   res['2'] = await tagFuzzyMatch({ indexLevel: '2' })
  //   res['3'] = await tagFuzzyMatch({ indexLevel: '3', additional: false })
  //   res['4'] = await tagFuzzyMatch({ indexLevel: '3', additional: true })
  //   indexListData.value['1'] = res['1'].data?.filter(i => i.projectIndexes?.length).map(i => {
  //     return {
  //       ...i,
  //       projectIndexes: i.projectIndexes.map(j => {
  //         return {
  //           ...j,
  //           name: j.indexName
  //         }
  //       })
  //     }
  //   })
  //   indexListData.value['2'] = res['2'].data?.filter(i => i.projectIndexes?.length).map(i => {
  //     return {
  //       ...i,
  //       projectIndexes: i.projectIndexes.map(j => {
  //         return {
  //           ...j,
  //           name: j.indexName
  //         }
  //       })
  //     }
  //   })
  //   indexListData.value['3'] = res['3'].data?.filter(i => i.projectIndexes?.length).map(i => {
  //     return {
  //       ...i,
  //       projectIndexes: i.projectIndexes.map(j => {
  //         return {
  //           ...j,
  //           name: j.indexName
  //         }
  //       })
  //     }
  //   })
  //   indexListData.value['4'] = res['4'].data?.filter(i => i.projectIndexes?.length).map(i => {
  //     return {
  //       ...i,
  //       projectIndexes: i.projectIndexes.map(j => {
  //         return {
  //           ...j,
  //           name: j.indexName
  //         }
  //       })
  //     }
  //   })
  //   form1.value.templateDetails = changeIndexList(form1.value.templateDetails, false)
  //   form1.value.additionalIndexDetails = form1.value.additionalIndexDetails ? changeIndexList(form1.value.additionalIndexDetails, true) : []
  // },
  // changeIndexList = (data, flag) => {
  //   const arr = []
  //   data.forEach(i => {
  //     arr.push({
  //       ...i,
  //       indexListData: flag && i.type === 3 ? indexListData.value['4'] : indexListData.value[i.type + ''],
  //       children: i.children?.length ? changeIndexList(i.children, flag) : []
  //     })
  //   })
  //   return arr
  // },
  beforeFilter = async (query, indexLevel, data, isAdditional) => {
    let additional
    if (indexLevel === '3') {
      additional = isAdditional
    }
    const res = await tagFuzzyMatch({ name: query, indexLevel, additional })
    data.indexListData = res.data.filter(i => i.projectIndexes?.length).map(i => {
      return {
        ...i,
        projectIndexes: i.projectIndexes.map(j => {
          return {
            ...j,
            name: j.indexName
          }
        })
      }
    })
    console.log(data)
  },
  // 指标选择列表
  remoteMethod = async (query) => {
    selectLoading.value = true
    const res = await indexList({
      pageNumber: 1,
      pageSize: 10000,
      indexName: query
    })
    indexListData.value = res.data.records
    selectLoading.value = false
  },
  changeIndex = (val, data, level) => {
    if (val?.length) {
      const item = data.indexListData.find(i => i.id === val[0])?.projectIndexes.find(i => i.id === val[1]) || {}
      data.name = item?.indexName || data.name
      if (level === 3) {
        data.indexScore = item.indexScore
        data.indexDetail = item.indexDetail
        data.gradeDetail = item.gradeDetail
        data.supportMaterial = item.supportMaterial
        data.additional = item.additional || false
      }
    }
  },
  // 项目标签
  selectTagLoading = ref(false),
  tagListData = ref([]),
  remoteMethodTag = async (query) => {
    selectTagLoading.value = true
    const res = await tagList(route.query.regionCode, {
      pageNumber: 1,
      pageSize: 10000,
      name: query
    })
    tagListData.value = res.data.records
    selectTagLoading.value = false
  },
  dictionaryList = ref([]),
  // 预算年度多个
  addYear = () => {
    form.value.projectYears.push({})
  },
  delYear = (index) => {
    form.value.projectYears.splice(index, 1)
  },
  // 指标树
  indexTreeProps = reactive({
    visible: false,
    params: undefined,
    data: undefined,
    title: ''
  }),
  closeIndexTree = () => {
    indexTreeProps.visible = false
  },
  getIndexData = (data) => {
    const item = JSON.parse(JSON.stringify(data[0]))
    indexTreeProps.data.name = item.name
    indexTreeProps.data.indexId = item.indexId
    if (item.indexLevel === 3) {
      indexTreeProps.data.indexScore = item.indexScore
      indexTreeProps.data.indexDetail = item.indexDetail
      indexTreeProps.data.gradeDetail = item.gradeDetail
      indexTreeProps.data.supportMaterial = item.supportMaterial
      indexTreeProps.data.additional = item.additional || false
    }
  },
  // fieldsNames = ref(),
  showIndexTree = (indexLevel, data, additional) => {
    indexTreeProps.visible = true
    indexTreeProps.params = {
      indexLevel,
      additional: indexLevel === '3' ? additional : undefined
    }
    indexTreeProps.title = indexLevel === '1' ? '一级指标' : indexLevel === '2' ? '二级指标' : '三级指标'
    indexTreeProps.data = data
    indexTreeProps.defalutData = data?.indexId ? [data] : []
  },
  templateTypeListData = ref(),
  getTemplateTypeList = async () => {
    const res = await templateTypePage({
      pageNumber: 1,
      pageSize: 10000
    })
    templateTypeListData.value = res?.data?.records || []
  }
onMounted(async () => {
  dictionaryList.value = (await dictionary({ type: 'PROJECT_TYPE' })).data
  getTemplateTypeList()
  await remoteMethodTag()
  formRef.value.resetFields()
  if (route.query.auditId || route.query.draftId) {
    getDetail()
  }
})
</script>

<template>
  <div class="editTemplate footerPage">
    <el-card shadow="never" class="mb-16">
      <el-steps align-center :active="active" class="custom-steps">
        <el-step title="基本信息" />
        <el-step title="评价指标" />
        <el-step title="完成" />
      </el-steps>
    </el-card>
    <el-card v-if="active===0" shadow="never">
      <el-form
        ref="formRef"
        label-suffix="："
        :model="form"
        :rules="rules"
        label-width="130"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="模板名称" prop="name">
              <el-input v-model="form.name" :maxlength="100" placeholder="请输入考核模板名称" />
            </el-form-item>
          </el-col>
          <el-col v-if="false" :span="24">
            <el-form-item label="项目类型" prop="projectType">
              <el-radio-group v-model="form.projectType">
                <el-radio
                  v-for="(item,index) in dictionaryList?.filter(i => i.type === 'PROJECT_TYPE')"
                  :key="index"
                  :label="item.value"
                >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          v-for="(item,index) in form.projectYears"
          :key="index"
        >
          <el-col
            :span="12"
            class="flex items-center mb-16"
          >
            <el-form-item
              :label="index===0?'预算年度':''"
              :prop="`projectYears[${index}].projectYear`"
              :rules="[{required:true,message:'请选择'}]"
              class="flex-1"
              style="margin-bottom: 0"
            >
              <el-date-picker
                v-model="item.projectYear"
                type="year"
                placeholder="请选择"
                format="YYYY"
                value-format="YYYY"
              />
            </el-form-item>
            <el-icon
              v-if="index===0"
              class="flex-shrink-0 ml-4 cursor-pointer"
              style="color: #0967FD;font-size: 20px"
              @click="addYear"
            ><CirclePlus /></el-icon>
            <el-icon
              v-if="form.projectYears?.length>1"
              class="flex-shrink-0 ml-4 cursor-pointer"
              style="color: #ff3b30;font-size: 20px"
              @click="delYear(index)"
            ><Delete /></el-icon>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="指标模板类型" prop="templateType">
              <el-radio-group v-model="form.templateType">
                <el-radio
                  v-for="(v,k) in templateTypeListData"
                  :key="k"
                  :label="v.id"
                >{{ v.name }}</el-radio>
              </el-radio-group>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="false">
          <el-col :span="12">
            <el-form-item label="建设类型" prop="constructType">
              <el-select
                v-model="form.constructType"
                placeholder="请选择"
                class="w-full"
                clearable
              >
                <el-option
                  label="软件"
                  :value="1"
                />
                <el-option
                  label="硬件"
                  :value="2"
                />
                <el-option
                  label="软硬件"
                  :value="3"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="false">
          <el-col :span="12">
            <el-form-item label="项目金额" prop="amountRange">
              <el-select
                v-model="form.amountRange"
                placeholder="请选择"
                class="w-full"
                clearable
              >
                <el-option
                  label="500万元以下"
                  :value="1"
                />
                <el-option
                  label="500-2000万元"
                  :value="2"
                />
                <el-option
                  label="2000万元及以上"
                  :value="3"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="false">
          <el-col :span="12">
            <el-form-item label="项目标签" prop="projectTagIds">
              <el-select
                v-model="form.projectTagIds"
                placeholder="请选择"
                class="w-full"
                multiple
                filterable
                remote
                :remote-method="remoteMethodTag"
                :loading="selectTagLoading"
                value-key="id"
                remote-show-suffix
              >
                <el-option
                  v-for="list in tagListData"
                  :key="list.id"
                  :label="list.name"
                  :value="list.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card v-if="active===1" shadow="never">
      <el-form
        ref="formRef1"
        label-suffix="："
        :model="form1"
        :rules="rules1"
      >
        <div v-for="(one,index) in form1.templateDetails" :key="index">
          <div class="module-box">
            <el-row class="mb-16" :gutter="16">
              <el-col :span="12">
                <el-form-item
                  label="一级指标"
                  :prop="`templateDetails[${index}].indexId`"
                  :rules="{
                    required: true,
                    message: '请输入',
                  }"
                >
                  <el-select
                    v-if="false"
                    v-model="form1.templateDetails[index].indexId"
                    placeholder="请选择一级指标，可通过指标名称查询"
                    class="w-full"
                    filterable
                    remote
                    :remote-method="remoteMethod"
                    :loading="selectLoading"
                    @change="val=>changeIndex(val,(form1.templateDetails[index]),1)"
                  >
                    <el-option
                      v-for="list in indexListData.filter(i=>i.indexLevel===1)"
                      :key="list.id"
                      :label="list.indexName"
                      :value="list.id"
                    />
                  </el-select>
                  <el-cascader
                    v-if="false"
                    v-model="form1.templateDetails[index].indexId"
                    filterable
                    :before-filter="(query)=>beforeFilter(query,'1',form1.templateDetails[index])"
                    :show-all-levels="false"
                    :options="form1.templateDetails[index].indexListData"
                    :props="{value:'id',label:'name',children:'projectIndexes'}"
                    clearable
                    @focus="form1.templateDetails[index].indexListData=indexListData['1']"
                    @change="val=>changeIndex(val,(form1.templateDetails[index]),1)"
                  />
                  <el-input v-model="form1.templateDetails[index].name" readonly @click="showIndexTree('1',form1.templateDetails[index])" />
                </el-form-item>
              </el-col>
              <el-col v-if="form1.templateDetails.length>1" :span="12">
                <div class="flex items-center flexRight h-full">
                  <p class="add-icon del" @click="delOne(`templateDetails`,index)"><el-icon style="color:rgb(255,59,48);font-size: 14px"><Delete /></el-icon></p>
                </div>
              </el-col>
            </el-row>
            <div v-for="(two,key) in one.children" :key="key" class="ml-8 pl-16 sub-item">
              <el-row class="mb-16" :gutter="16">
                <el-col :span="12">
                  <el-form-item
                    label="二级指标"
                    :prop="`templateDetails[${index}].children[${key}].indexId`"
                    :rules="{
                      required: true,
                      message: '请输入',
                    }"
                  >
                    <el-select
                      v-if="false"
                      v-model="form1[`templateDetails`][index].children[key].indexId"
                      placeholder="请选择二级指标，可通过指标名称查询"
                      class="w-full"
                      filterable
                      remote
                      :remote-method="remoteMethod"
                      :loading="selectLoading"
                      @change="val=>changeIndex(val,form1[`templateDetails`][index].children[key],2)"
                    >
                      <el-option
                        v-for="list in indexListData.filter(i=>i.indexLevel===2)"
                        :key="list.id"
                        :label="list.indexName"
                        :value="list.id"
                      />
                    </el-select>
                    <el-cascader
                      v-if="false"
                      v-model="form1.templateDetails[index].children[key].indexId"
                      filterable
                      clearable
                      :before-filter="(query)=>beforeFilter(query,'2',form1.templateDetails[index].children[key])"
                      :show-all-levels="false"
                      :options="form1[`templateDetails`][index].children[key]?.indexListData"
                      :props="{value:'id',label:'name',children:'projectIndexes'}"
                      @focus="form1[`templateDetails`][index].children[key].indexListData=indexListData['2']"
                      @change="val=>changeIndex(val,form1[`templateDetails`][index].children[key],2)"
                    />
                    <el-input v-model="form1.templateDetails[index].children[key].name" readonly @click="showIndexTree('2',form1.templateDetails[index].children[key])" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <div class="flex items-center flexRight h-full">
                    <p class="add-icon mr-4" @click="addTwo(`templateDetails`,index)"><el-icon class="addIcon"><Plus /></el-icon></p>
                    <p v-if="one.children.length>1" class="add-icon del" @click="delTwo('templateDetails',index,key)"><el-icon style="color:rgb(255,59,48);font-size: 14px"><Delete /></el-icon></p>
                  </div>
                </el-col>
              </el-row>
              <div v-for="(three,i) in two.children" :key="i" class="pl-24">
                <el-row class="mb-16" :gutter="16">
                  <el-col :span="12">
                    <el-form-item
                      label="三级指标"
                      :prop="`templateDetails[${index}].children[${key}].children[${i}].indexId`"
                      :rules="{
                        required: true,
                        message: '请输入',
                      }"
                    >
                      <el-select
                        v-if="false"
                        v-model="form1[`templateDetails`][index].children[key].children[i].indexId"
                        placeholder="请选择三级指标，可通过指标名称查询"
                        class="w-full"
                        filterable
                        remote
                        :remote-method="remoteMethod"
                        :loading="selectLoading"
                        @change="val=>changeIndex(val,form1[`templateDetails`][index].children[key].children[i],3)"
                      >
                        <el-option
                          v-for="list in indexListData.filter(i=>i.indexLevel===3)"
                          :key="list.id"
                          :label="list.indexName"
                          :value="list.id"
                        />
                      </el-select>
                      <el-cascader
                        v-if="false"
                        v-model="form1.templateDetails[index].children[key].children[i].indexId"
                        filterable
                        clearable
                        :before-filter="(query)=>beforeFilter(query,'3',form1[`templateDetails`][index].children[key].children[i],false)"
                        :show-all-levels="false"
                        :options="form1[`templateDetails`][index].children[key].children[i].indexListData"
                        :props="{value:'id',label:'name',children:'projectIndexes'}"
                        @focus="form1[`templateDetails`][index].children[key].children[i].indexListData=indexListData['3']"
                        @change="val=>changeIndex(val,form1[`templateDetails`][index].children[key].children[i],3)"
                      />
                      <el-input v-model="form1.templateDetails[index].children[key].children[i].name" readonly @click="showIndexTree('3',form1.templateDetails[index].children[key].children[i],false)" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="指标分值"
                      :prop="`templateDetails[${index}].children[${key}].children[${i}].indexScore`"
                      :rules="{
                        required: true,
                        message: '请输入',
                      }"
                    >
                      <el-input-number
                        v-model="form1[`templateDetails`][index].children[key].children[i].indexScore"
                        placeholder="请输入"
                        :min="form1[`templateDetails`][index].children[key].children[i].additional?undefined:0"
                        :max="100"
                        :precision="2"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <div class="flex items-center flexRight h-full">
                      <p class="add-icon mr-4" @click="addThree(`templateDetails`,index,key)"><el-icon class="addIcon"><Plus /></el-icon></p>
                      <p v-if="two.children.length>1" class="add-icon del" @click="delThree(`templateDetails`,index,key,i)"><el-icon style="color:rgb(255,59,48);font-size: 14px"><Delete /></el-icon></p>
                    </div>
                  </el-col>
                </el-row>
                <el-row class="mb-16" :gutter="16">
                  <el-col :span="12" class="mb-16">
                    <el-form-item
                      label="指标细则"
                      :prop="`templateDetails[${index}].children[${key}].children[${i}].indexDetail`"
                      :rules="{
                        required: true,
                        message: '请输入',
                      }"
                    >
                      <el-input
                        v-model="form1[`templateDetails`][index].children[key].children[i].indexDetail"
                        placeholder="请填写"
                        :maxlength="1000"
                        show-word-limit
                        type="textarea"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="评分细则"
                      :prop="`templateDetails[${index}].children[${key}].children[${i}].gradeDetail`"
                      :rules="{
                        required: true,
                        message: '请输入',
                      }"
                    >
                      <el-input
                        v-model="form1[`templateDetails`][index].children[key].children[i].gradeDetail"
                        placeholder="请填写"
                        :maxlength="1000"
                        show-word-limit
                        type="textarea"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <div class="flex items-center">
                      <el-form-item
                        label="是否上传佐证材料"
                      >
                        <el-switch v-model="form1[`templateDetails`][index].children[key].children[i].isUploadSupportFile" />
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col v-if="form1[`templateDetails`][index].children[key].children[i].isUploadSupportFile&&false" :span="12">
                    <el-form-item
                      label="佐证材料附件"
                      :prop="`templateDetails[${index}].children[${key}].children[${i}].supportFile`"
                      :rules="{
                        required: true,
                        message: '请上传',
                      }"
                      class="ml-4"
                    >
                      <el-upload
                        v-model:file-list="form1[`templateDetails`][index].children[key].children[i].supportFile"
                        class="w-full"
                        :action="uploadUrl"
                        :on-exceed="handleFileExceed"
                        :on-success="res => handleFileSuccess(res, form1[`templateDetails`][index].children[key].children[i].supportFile)"
                        :on-error="handleFileError"
                        :before-upload="file=>fileFormatVerification(file, {types: fileTypes})"
                        :accept="fileTypes.map(i=>`.${i}`).join(',')"
                        multiple
                        :limit="20"
                        :on-preview="handleFilePreview"
                      >
                        <el-button type="primary" class="mr-4">上传附件</el-button>
                        <template #tip>
                          <div class="el-upload__tip">支持{{ fileDesc }}文件</div>
                        </template>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="佐证材料"
                      :prop="`templateDetails[${index}].children[${key}].children[${i}].supportMaterial`"
                      :rules="{
                        required: true,
                        message: '请输入',
                      }"
                    >
                      <el-input
                        v-model="form1[`templateDetails`][index].children[key].children[i].supportMaterial"
                        placeholder="请填写"
                        :maxlength="1000"
                        show-word-limit
                        type="textarea"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
        <el-button
          type="primary"
          plain
          icon="Plus"
          size="small"
          class="w-full mb-16"
          @click="addOne(`templateDetails`)"
        >添加一级指标</el-button>
        <el-collapse>
          <el-collapse-item>
            <template #title>
              <div class="collapse-title">附加指标</div>
            </template>
            <div v-for="(one,index) in form1.additionalIndexDetails" :key="index">
              <div class="module-box">
                <el-row class="mb-16" :gutter="16">
                  <el-col :span="12">
                    <el-form-item
                      label="一级指标"
                      :prop="`additionalIndexDetails[${index}].indexId`"
                      :rules="{
                        required: true,
                        message: '请输入',
                      }"
                    >
                      <el-select
                        v-if="false"
                        v-model="form1.additionalIndexDetails[index].indexId"
                        placeholder="请选择一级指标，可通过指标名称查询"
                        class="w-full"
                        filterable
                        remote
                        :remote-method="remoteMethod"
                        :loading="selectLoading"
                        @change="val=>changeIndex(val,(form1.additionalIndexDetails[index]),1)"
                      >
                        <el-option
                          v-for="list in indexListData.filter(i=>i.indexLevel===1)"
                          :key="list.id"
                          :label="list.indexName"
                          :value="list.id"
                        />
                      </el-select>
                      <el-cascader
                        v-if="false"
                        v-model="form1.additionalIndexDetails[index].indexId"
                        filterable
                        clearable
                        :before-filter="(query)=>beforeFilter(query,'1',form1.additionalIndexDetails[index])"
                        :show-all-levels="false"
                        :options="form1[`additionalIndexDetails`][index].indexListData"
                        :props="{value:'id',label:'name',children:'projectIndexes'}"
                        @focus="form1.additionalIndexDetails[index].indexListData=indexListData['1']"
                        @change="val=>changeIndex(val,(form1.additionalIndexDetails[index]),1)"
                      />
                      <el-input v-model="form1.additionalIndexDetails[index].name" readonly @click="showIndexTree('1',form1.additionalIndexDetails[index])" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <div class="flex items-center flexRight h-full">
                      <p class="add-icon del" @click="delOne(`additionalIndexDetails`,index)"><el-icon style="color:rgb(255,59,48);font-size: 14px"><Delete /></el-icon></p>
                    </div>
                  </el-col>
                </el-row>
                <div v-for="(two,key) in one.children" :key="key" class="ml-8 pl-16 sub-item">
                  <el-row class="mb-16" :gutter="16">
                    <el-col :span="12">
                      <el-form-item
                        label="二级指标"
                        :prop="`additionalIndexDetails[${index}].children[${key}].indexId`"
                        :rules="{
                          required: true,
                          message: '请输入',
                        }"
                      >
                        <el-select
                          v-if="false"
                          v-model="form1[`additionalIndexDetails`][index].children[key].indexId"
                          placeholder="请选择二级指标，可通过指标名称查询"
                          class="w-full"
                          filterable
                          remote
                          :remote-method="remoteMethod"
                          :loading="selectLoading"
                          @change="val=>changeIndex(val,form1[`additionalIndexDetails`][index].children[key],2)"
                        >
                          <el-option
                            v-for="list in indexListData.filter(i=>i.indexLevel===2)"
                            :key="list.id"
                            :label="list.indexName"
                            :value="list.id"
                          />
                        </el-select>
                        <el-cascader
                          v-if="false"
                          v-model="form1.additionalIndexDetails[index].children[key].indexId"
                          filterable
                          clearable
                          :before-filter="(query)=>beforeFilter(query,'2',form1.additionalIndexDetails[index].children[key])"
                          :show-all-levels="false"
                          :options="form1[`additionalIndexDetails`][index].children[key].indexListData"
                          :props="{value:'id',label:'name',children:'projectIndexes'}"
                          @focus="form1.additionalIndexDetails[index].children[key].indexListData=indexListData['2']"
                          @change="val=>changeIndex(val,form1[`additionalIndexDetails`][index].children[key],2)"
                        />
                        <el-input v-model="form1.additionalIndexDetails[index].children[key].name" readonly @click="showIndexTree('2',form1.additionalIndexDetails[index].children[key])" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <div class="flex items-center flexRight h-full">
                        <p class="add-icon mr-4" @click="addTwo(`additionalIndexDetails`,index)"><el-icon class="addIcon"><Plus /></el-icon></p>
                        <p v-if="one.children.length>1" class="add-icon del" @click="delTwo('additionalIndexDetails',index,key)"><el-icon style="color:rgb(255,59,48);font-size: 14px"><Delete /></el-icon></p>
                      </div>
                    </el-col>
                  </el-row>
                  <div v-for="(three,i) in two.children" :key="i" class="pl-24">
                    <el-row class="mb-16" :gutter="16">
                      <el-col :span="12">
                        <el-form-item
                          label="三级指标"
                          :prop="`additionalIndexDetails[${index}].children[${key}].children[${i}].indexId`"
                          :rules="{
                            required: true,
                            message: '请输入',
                          }"
                        >
                          <el-select
                            v-if="false"
                            v-model="form1[`additionalIndexDetails`][index].children[key].children[i].indexId"
                            placeholder="请选择三级指标，可通过指标名称查询"
                            class="w-full"
                            filterable
                            remote
                            :remote-method="remoteMethod"
                            :loading="selectLoading"
                            @change="val=>changeIndex(val,form1[`additionalIndexDetails`][index].children[key].children[i],3)"
                          >
                            <el-option
                              v-for="list in indexListData.filter(i=>i.indexLevel===3)"
                              :key="list.id"
                              :label="list.indexName"
                              :value="list.id"
                            />
                          </el-select>
                          <el-cascader
                            v-if="false"
                            v-model="form1.additionalIndexDetails[index].children[key].children[i].indexId"
                            filterable
                            clearable
                            :before-filter="(query)=>beforeFilter(query,'3',form1.additionalIndexDetails[index].children[key].children[i],true)"
                            :show-all-levels="false"
                            :options="form1[`additionalIndexDetails`][index].children[key].children[i].indexListData"
                            :props="{value:'id',label:'name',children:'projectIndexes'}"
                            @focus="form1.additionalIndexDetails[index].children[key].children[i].indexListData=indexListData['4']"
                            @change="val=>changeIndex(val,form1[`additionalIndexDetails`][index].children[key].children[i],3)"
                          />
                          <el-input v-model="form1.additionalIndexDetails[index].children[key].children[i].name" readonly @click="showIndexTree('3',form1.additionalIndexDetails[index].children[key].children[i],true)" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item
                          label="指标分值"
                          :prop="`additionalIndexDetails[${index}].children[${key}].children[${i}].indexScore`"
                          :rules="{
                            required: true,
                            message: '请输入',
                          }"
                        >
                          <el-input-number
                            v-model="form1[`additionalIndexDetails`][index].children[key].children[i].indexScore"
                            placeholder="请输入"
                            :min="form1[`additionalIndexDetails`][index].children[key].children[i].additional?undefined:-100"
                            :max="100"
                            :precision="2"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="4">
                        <div class="flex items-center flexRight h-full">
                          <p class="add-icon mr-4" @click="addThree(`additionalIndexDetails`,index,key)"><el-icon class="addIcon"><Plus /></el-icon></p>
                          <p v-if="two.children.length>1" class="add-icon del" @click="delThree(`additionalIndexDetails`,index,key,i)"><el-icon style="color:rgb(255,59,48);font-size: 14px"><Delete /></el-icon></p>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row class="mb-16" :gutter="16">
                      <el-col :span="12" class="mb-16">
                        <el-form-item
                          label="指标细则"
                          :prop="`additionalIndexDetails[${index}].children[${key}].children[${i}].indexDetail`"
                          :rules="{
                            required: true,
                            message: '请输入',
                          }"
                        >
                          <el-input
                            v-model="form1[`additionalIndexDetails`][index].children[key].children[i].indexDetail"
                            placeholder="请填写"
                            :maxlength="1000"
                            show-word-limit
                            type="textarea"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item
                          label="评分细则"
                          :prop="`additionalIndexDetails[${index}].children[${key}].children[${i}].gradeDetail`"
                          :rules="{
                            required: true,
                            message: '请输入',
                          }"
                        >
                          <el-input
                            v-model="form1[`additionalIndexDetails`][index].children[key].children[i].gradeDetail"
                            placeholder="请填写"
                            :maxlength="1000"
                            show-word-limit
                            type="textarea"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <div class="flex items-center">
                          <el-form-item
                            label="是否上传佐证材料"
                          >
                            <el-switch v-model="form1[`additionalIndexDetails`][index].children[key].children[i].isUploadSupportFile" />
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col v-if="false&&form1[`additionalIndexDetails`][index].children[key].children[i].isUploadSupportFile" :span="12">
                        <el-form-item
                          label="佐证材料附件"
                          :prop="`additionalIndexDetails[${index}].children[${key}].children[${i}].supportFile`"
                          :rules="{
                            required: true,
                            message: '请上传',
                          }"
                          class="ml-4"
                        >
                          <el-upload
                            v-model:file-list="form1[`additionalIndexDetails`][index].children[key].children[i].supportFile"
                            class="w-full"
                            :action="uploadUrl"
                            :on-success="res => handleFileSuccess(res, form1[`additionalIndexDetails`][index].children[key].children[i].supportFile)"
                            :on-error="handleFileError"
                            :before-upload="file=>fileFormatVerification(file, {types: fileTypes})"
                            :accept="fileTypes.map(i=>`.${i}`).join(',')"
                            multiple
                            :limit="10"
                            :on-preview="handleFilePreview"
                          >
                            <el-button type="primary" class="mr-4">上传附件</el-button>
                            <template #tip>
                              <div class="el-upload__tip">支持{{ fileDesc }}文件</div>
                            </template>
                          </el-upload>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item
                          label="佐证材料"
                          :prop="`additionalIndexDetails[${index}].children[${key}].children[${i}].supportMaterial`"
                          :rules="{
                            required: true,
                            message: '请输入',
                          }"
                        >
                          <el-input
                            v-model="form1[`additionalIndexDetails`][index].children[key].children[i].supportMaterial"
                            placeholder="请填写"
                            :maxlength="1000"
                            show-word-limit
                            type="textarea"
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </div>
            <el-button
              type="primary"
              plain
              icon="Plus"
              size="small"
              class="w-full mb-16"
              @click="addOne(`additionalIndexDetails`)"
            >添加一级指标</el-button>
          </el-collapse-item>
        </el-collapse>
      </el-form>
    </el-card>
    <el-card v-if="active===2">
      <el-result
        icon="success"
        title="新建成功"
      />
      <p class="text-center"><el-button @click="$router.go(-1)"> 返回 </el-button></p>
    </el-card>
    <div class="footer">
      <el-button @click="$router.go(-1)"> 返回 </el-button>
      <el-button
        v-if="(!$route.query.id&&!$route.query.draftId)||route.query.draftId"
        type="primary"
        plain
        @click="saveDraft"
      > 暂存 </el-button>
      <template v-if="active<2">
        <el-button
          v-if="active===1"
          type="primary"
          plain
          @click="pre"
        >上一步 </el-button>
        <el-button type="primary" @click="next"> {{ active===1?'提交':'下一步' }} </el-button>
      </template>
    </div>
  </div>
  <index-tree
    :params="indexTreeProps.params"
    :visible="indexTreeProps.visible"
    :show-checkbox="false"
    :default-data="indexTreeProps.defalutData"
    :title="indexTreeProps.title"
    @close="closeIndexTree"
    @get-select-data="getIndexData"
  />
</template>
<style lang="less">
.editTemplate{
  .module-box{
    background: #f5f8fa;
    border-radius: 4px;
    padding: 16px 24px;
    margin-bottom: 16px;
    .el-form-item{
      margin-bottom: 0;
    }
    .sub-item{
      border-left: 4px solid rgba(9, 103, 253, 0.2);
    }
    .add-icon{
      background: rgba(9, 103, 253, 0.06);
      border-radius: 4px;
      font-size: 14px;
      color: #0967fd;
      width: 22px;
      height: 22px;
      line-height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      &.del{
        color: #f5222d;
        background: rgba(245, 34, 45, 0.06);
      }
    }
  }
}
.custom-steps {

  .el-step__head {
    .el-step__icon {
      width: 32px;
      height: 32px;
    }

    .el-step__line {
      top: 15px
    }

    &.is-success {
      color: #0057FF;
      border-color: #0057FF;

      .el-step__line {
        background-color: #0057FF;
      }
    }

    &.is-process {
      color: #FFFFFF;
      border-color: #0057FF;

      .el-step__icon.is-text {
        background: #0057FF;
      }

      .el-step__icon-inner {
        font-weight: 400;
      }

      .el-step__line {
        background-color: #DCDEE2;
      }
    }

    &.is-wait {
      color: #A6A6A6;
      border-color: #DCDEE2;

      .el-step__line {
        background-color: #DCDEE2;
      }
    }
  }

  .el-step__title {
    &.is-process{
      color:#0057FF;
    }
    &.is-success{
      color:#0057FF;
    }
  }
}
</style>
