<script setup name='reviewTemplateConfig'>
import { reactive, ref, onMounted, getCurrentInstance } from 'vue'
import ElTree from '@/components/elTree/index.vue'
import { template, save } from '@/http/apis/expertManage/reviewTemplateConfig'
import { getIsShowRegionTree, getTreeParams } from '@/utils/getIsShowRegionTree'

const { proxy } = getCurrentInstance(),
  searchForm = reactive({
    regionCode: undefined,
    templateType: '1'
  }),
  // 地区
  getTree = (data) => {
    searchForm.regionCode = data.regionLevel === 3 ? data.regionCode : undefined
    getTemplate()
  },
  // 切换模板类型
  handleClickTab = ({ props }) => {
    searchForm.templateType = props.name
    getTemplate()
  },
  // 获取模板
  getTemplate = async () => {
    try {
      const res = await template({ ...searchForm, templateType: searchForm.templateType * 1 })
      formData.value = res.data || { templates: [] }
    } catch (e) {
      formData.value = { templates: [] }
    }
  },
  // 模板列表
  column = [
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '意见标题',
      slot: 'title'
    },
    {
      label: '选项类型',
      slot: 'optionType',
      width: 120
    },
    {
      label: '包含的选项',
      slot: 'options'
    },
    {
      label: '操作',
      slot: 'action',
      width: 60
    }
  ],
  formData = ref({
    templates: []
  }),
  formRef = ref(),
  // 增加问题
  addTemp = () => {
    formData.value.templates.push({ title: '', optionType: undefined, options: [{}] })
  },
  // 删除
  removeTemp = (index) => {
    formData.value.templates.splice(index, 1)
  },
  // 增加选项
  addOptions = (index) => {
    formData.value.templates[index].options.push({ option: '' })
  },
  // 删除选项
  removeOption = (index, key) => {
    formData.value.templates[index].options.splice(key, 1)
  },
  loading = ref(false),
  submit = async formEl => {
    if (!formEl) {
      return
    }
    await formEl.validate(async valid => {
      if (valid) {
        const postData = getData()
        loading.value = true
        try {
          await save(postData)
          proxy.$message.success('提交成功！')
          loading.value = false
        } catch (e) {
          loading.value = false
        }
      }
    })
  },
  // 插入序号
  getData = () => {
    return {
      regionCode: searchForm.regionCode,
      templateType: searchForm.templateType * 1,
      templates: formData.value?.templates.map((item, index) => {
        return {
          ...item,
          serialNo: index,
          options: item.options.map((option, key) => {
            return {
              ...option,
              serialNo: key
            }
          })
        }
      }) || []
    }
  }
onMounted(() => {
  if (!getIsShowRegionTree(['SUPER_ADMIN', 'REGION_MANAGER', 'EXPERT_ADMIN'])) getTemplate()
})
</script>

<template>
  <el-row :gutter="16">
    <el-col
      v-if="getIsShowRegionTree(['SUPER_ADMIN','REGION_MANAGER','EXPERT_ADMIN'])"
      style="padding-right: 16px"
      :span="4"
    >
      <elTree :params="getTreeParams({'SUPER_ADMIN':false,'REGION_MANAGER':false,'EXPERT_ADMIN':false})" @get-tree="getTree" />
    </el-col>
    <el-col :span="getIsShowRegionTree(['SUPER_ADMIN','REGION_MANAGER','EXPERT_ADMIN'])?20:24">
      <el-card class="w-full tab-card footerCard">
        <template #header>
          <el-tabs
            v-model="searchForm.templateType"
            class="demo-tabs"
            @tab-click="handleClickTab"
          >
            <el-tab-pane
              label="初步方案评审模版"
              name="1"
            />
            <el-tab-pane
              label="建设方案评审模版"
              name="2"
            />
            <el-tab-pane
              label="验收评审模版"
              name="3"
            />
            <el-tab-pane
              label="部门联审模版"
              name="4"
            />
            <el-tab-pane
              label="公平性审查"
              name="5"
            />
          </el-tabs>
        </template>
        <el-form ref="formRef" :model="formData">
          <table-list
            ref="tableListRef"
            :column="column"
            :data="formData?.templates||[]"
            :pagination="false"
          >
            <template #title="{scope}">
              <el-form-item
                v-if="formData.templates[scope.$index]"
                :prop="`templates[${scope.$index}].title`"
                :rules="[
                  {
                    required: true,
                    message: '请输入',
                  }
                ]"
              >
                <el-input v-model="formData.templates[scope.$index].title" />
              </el-form-item>
            </template>
            <template #optionType="{scope}">
              <el-form-item
                v-if="formData.templates[scope.$index]"
                :prop="`templates[${scope.$index}].optionType`"
                :rules="[
                  {
                    required: true,
                    message: '请选择',
                  }
                ]"
              >
                <el-select v-model="formData.templates[scope.$index].optionType">
                  <el-option label="单选" :value="1" />
                  <el-option label="多选" :value="2" />
                </el-select>
              </el-form-item>
            </template>
            <template #options="{scope}">
              <template v-if="formData.templates[scope.$index]">
                <div
                  v-for="(item,key) in formData.templates[scope.$index].options"
                  :key="key"
                  class="flex items-center mb-8"
                >
                  <el-form-item
                    class="flex-1"
                    style="margin-bottom: 0;"
                    :prop="`templates[${scope.$index}].options[${key}].option`"
                    :rules="[
                      {
                        required: true,
                        message: '请输入',
                      }
                    ]"
                  >
                    <el-input v-model="formData.templates[scope.$index].options[key].option" />
                  </el-form-item>
                  <svg-icon name="deleteIcon" class="ml-4 cursor-pointer text-24" @click="removeOption(scope.$index,key)" />
                </div>
                <el-button
                  type="primary"
                  size="small"
                  class="w-full"
                  plain
                  icon="Plus"
                  @click="addOptions(scope.$index)"
                >添加选项</el-button>
              </template>
            </template>
            <template #action="{scope}">
              <a v-if="formData.templates[scope.$index]" class="text-danger" @click="removeTemp(scope.$index)">移除</a>
            </template>
          </table-list>
        </el-form>
        <el-button
          type="primary"
          class="w-full"
          plain
          icon="Plus"
          @click="addTemp"
        >添加意见类型</el-button>
        <div class="footer">
          <el-button type="primary" :loading="loading" @click="submit(formRef)">
            提交
          </el-button>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<style lang='less' scoped> </style>
