<script name="earlyWarningRule" setup>
import { getIsShowRegionTree, getTreeParams } from '@/utils/getIsShowRegionTree'
import { getCurrentInstance, onMounted, ref } from 'vue'
import ElTree from '@/components/elTree/index.vue'
import { detail, save } from '@/http/apis/systemManage/earlyWarningManage'
import { processConfigList } from '@/http/apis/systemManage/flowConfiguration'
const { proxy } = getCurrentInstance(),
  getTree = (value) => {
    regionCode.value = value.regionLevel === 3 ? value.regionCode : undefined
    getData()
  },
  regionCode = ref(),
  data = ref(),
  getData = async () => {
    const res = await detail(regionCode.value)
    data.value = res.data
    formRef.value.resetFields()
    formData.value = {
      rule: [{}],
      noticeContent: activeName.value === '1' ? `{projectName}的{flowType}在您的审核节点已超过{time}小时，请及时处理。` : '请尽快处理{projectName}的{stepName}，已停留{time}。',
      adventContent: activeName.value === '1' ? `{projectName}的{flowType}在您的审核节点已超过{time}小时，请及时处理。` : '请尽快处理{projectName}的{stepName}，已停留{time}，将在{time2}小时后超期。'
    }
    setFormData(data.value.find(i => i.ruleType === activeName.value * 1) || {})
  },
  setFormData = (data) => {
    formData.value = {
      ...data,
      rule: data.rule ? JSON.parse(data.rule).map(i => { return { ...i, notice: i.notice ? i.notice.split(',').map(i => i * 1) : [] } }) : [{}],
      noticeMethod: data?.noticeMethod?.split(',').map(i => i * 1) || undefined,
      noticeContent: data.noticeContent || formData.value.noticeContent,
      adventContent: data.adventContent || formData.value.adventContent,
      isOpen: data.isOpen || false
    }
  },
  activeName = ref('1'),
  changeTab = (val) => {
    activeName.value = val
    getData()
  },
  formRef = ref(),
  formData = ref({
    rule: [{}],
    noticeContent: '{projectName}的{flowType}在您的审核节点已超过{time}小时，请及时处理。',
    adventContent: '{projectName}的{flowType}在您的审核节点已超过{time}小时，请及时处理。'
  }),
  rules = {
    noticeMethod: [{ required: true, message: '请选择' }],
    noticeContent: [{ required: true, message: '请输入' }],
    adventContent: [{ required: true, message: '请输入' }],
    isOpen: [{ required: true, type: Boolean }]
  },
  loading = ref(false),
  submit = async (formEl) => {
    if (!formEl) {
      return
    }
    await formEl.validate(async valid => {
      if (valid) {
        loading.value = true
        const rule = formData.value.rule.map(i => {
          return {
            ...i,
            notice: i.notice?.length ? i.notice.join(',') : undefined
          }
        })
        const postData = {
          ...formData.value,
          ruleType: activeName.value * 1,
          areaCode: regionCode.value,
          rule: JSON.stringify(rule),
          noticeMethod: formData.value.noticeMethod.join(',')
        }
        await save(postData)
        getData()
        proxy.$message.success('保存成功！')
        loading.value = false
      }
    })
  },
  // 添加规则
  add = () => {
    formData.value.rule.push({
      time: undefined,
      notice: []
    })
  },
  // 删除规则
  del = (index) => {
    formData.value.rule.splice(index, 1)
  },
  processList = ref(),
  getProcessList = async () => {
    const res = await processConfigList({ regionCode: regionCode.value || 331100 })
    processList.value = res.data.records
  }
onMounted(() => {
  if (!getIsShowRegionTree(['SUPER_ADMIN', 'REGION_MANAGER'])) getData()
  getProcessList()
})
</script>

<template>
  <div class="footerPage earlyWarningRule">
    <el-row>
      <el-col v-if="getIsShowRegionTree(['SUPER_ADMIN','REGION_MANAGER'])" style="padding-right: 16px" :span="4">
        <elTree :params="getTreeParams({'SUPER_ADMIN':false,'REGION_MANAGER':false})" @get-tree="getTree" />
      </el-col>
      <el-col :span="getIsShowRegionTree(['SUPER_ADMIN','REGION_MANAGER'])?20:24">
        <el-card class="tab-card">
          <template #header>
            <el-tabs v-model="activeName" @tab-change="changeTab">
              <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"
            :rules="rules"
            label-position="right"
            label-suffix=":"
            scroll-to-error
          >
            <el-row>
              <el-col>
                <el-form-item label="规则" style="margin-bottom: 0" />
                <div v-for="(item,index) in formData.rule" :key="index" class="mb-8 flex items-center justify-between ruleBox">
                  <div v-if="activeName==='1'||activeName==='4'" class="flex items-center text-14">
                    <span class="mr-4">当流程达到审核人，到达</span>
                    <el-form-item
                      :prop="`rule[${index}].adventTime`"
                      :rules="[{required:true,message:'请输入'}]"
                      label-width="0"
                      style="margin-bottom: 0;width: 80px"
                    >
                      <el-input-number
                        v-model="formData.rule[index].adventTime"
                        :min="1"
                        :max="99999"
                        :precision="0"
                        placeholder="请输入"
                        :controls="false"
                      />
                    </el-form-item>
                    <span class="ml-4">小时未处理时自动发送临期提醒，</span>
                    <span>超过</span>
                    <el-form-item
                      :prop="`rule[${index}].time`"
                      :rules="[{required:true,message:'请输入'}]"
                      label-width="0"
                      style="margin-bottom: 0;width: 150px"
                    >
                      <el-input-number
                        v-model="item.time"
                        :min="1"
                        :max="99999"
                        :precision="0"
                        placeholder="请输入"
                      />
                    </el-form-item>
                    <span class="ml-4">小时内没有{{ activeName==='1'?'提交':'处理' }}时发送超期提醒</span>
                    <el-form-item
                      v-if="activeName==='1'"
                      label="提醒对象"
                      :prop="`rule[${index}].notice`"
                      :rules="[{required:true,message:'请选择'}]"
                      style="margin-bottom: 0"
                      class="ml-40"
                    >
                      <el-select
                        v-model="formData.rule[index].notice"
                        multiple
                      >
                        <el-option label="项目联系人" :value="1" />
                        <el-option label="项目负责人" :value="2" />
                      </el-select>
                    </el-form-item>
                  </div>
                  <div v-else class="flex items-center text-14">
                    <span class="mr-4">当</span>
                    <el-form-item
                      :prop="`rule[${index}].biz`"
                      :rules="[{required:true,message:'请选择'}]"
                      label-width="0"
                      style="margin-bottom: 0;width: 150px"
                      class="mr-8"
                    >
                      <el-select v-if="activeName==='2'" v-model="formData.rule[index].biz">
                        <el-option label="预审申报" :value="1" />
                        <el-option label="建设方案申报" :value="2" />
                        <el-option label="采购结果备案" :value="3" />
                        <el-option label="初验备案" :value="4" />
                        <el-option label="验收申报" :value="5" />
                      </el-select>
                      <el-select v-else-if="activeName==='3'" v-model="formData.rule[index].biz">
                        <el-option label="项目初验" :value="1" />
                        <el-option label="项目终验" :value="2" />
                      </el-select>
                      <el-select v-else-if="activeName==='5'" v-model="formData.rule[index].biz">
                        <el-option label="单位自评" :value="1" />
                        <el-option label="自评确认" :value="2" />
                        <el-option label="项目复评" :value="3" />
                        <el-option label="上传回复单" :value="4" />
                        <el-option label="回复单审核" :value="5" />
                        <el-option label="专家核查" :value="6" />
                        <el-option label="项目整改" :value="7" />
                        <el-option label="整改核查" :value="8" />
                      </el-select>
                    </el-form-item>
                    <el-form-item
                      :prop="`rule[${index}].adventTime`"
                      :rules="[{required:true,message:'请输入'}]"
                      label-width="0"
                      style="margin-bottom: 0;width: 80px"
                    >
                      <el-input-number
                        v-model="formData.rule[index].adventTime"
                        :min="1"
                        :max="99999"
                        :precision="0"
                        placeholder="请输入"
                        :controls="false"
                      />
                    </el-form-item>
                    <span class="ml-4">小时未处理时自动发送临期提醒，</span>
                    <span>超过</span>
                    <el-form-item
                      :prop="`rule[${index}].time`"
                      :rules="[{required:true,message:'请输入'}]"
                      label-width="0"
                      style="margin-bottom: 0;width: 80px"
                    >
                      <el-input-number
                        v-model="formData.rule[index].time"
                        :min="1"
                        :max="99999"
                        :precision="0"
                        placeholder="请输入"
                        :controls="false"
                      />
                    </el-form-item>
                    <span class="ml-4">小时未处理时自动发送超期提醒</span>
                    <el-form-item
                      v-if="activeName==='2'||activeName==='3'"
                      label="提醒对象"
                      :prop="`rule[${index}].notice`"
                      :rules="[{required:true,message:'请选择'}]"
                      style="margin-bottom: 0"
                      class="ml-40"
                    >
                      <el-select
                        v-model="formData.rule[index].notice"
                        multiple
                      >
                        <el-option label="项目联系人" :value="1" />
                        <el-option label="项目负责人" :value="2" />
                      </el-select>
                    </el-form-item>
                  </div>
                  <el-button
                    v-if="formData.rule?.length>1"
                    type="danger"
                    link
                    @click="del(index)"
                  >删除</el-button>
                </div>
                <el-button
                  icon="Plus"
                  type="primary"
                  plain
                  size="small"
                  class="mb-16"
                  @click="add"
                >添加规则</el-button>
              </el-col>
              <el-col>
                <el-form-item label="提醒方式" prop="noticeMethod">
                  <el-checkbox-group v-model="formData.noticeMethod">
                    <el-checkbox :label="0">浙政钉工作通知</el-checkbox>
                    <el-checkbox :label="1">手机短信</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="临期提醒文案" prop="adventContent">
                  <el-input
                    v-model="formData.adventContent"
                    type="textarea"
                    placeholder="请输入"
                    :maxlength="100"
                    show-word-limit
                  />
                  <p>项目名称：{projectName}，{{ activeName==='1'?'流程类型：{flowType}，':activeName=== '4'?'':'环节名称：{stepName}，' }}停留时间：{time}，剩余时间：{time2}。</p>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="超期提醒文案" prop="noticeContent">
                  <el-input
                    v-model="formData.noticeContent"
                    type="textarea"
                    placeholder="请输入"
                    :maxlength="100"
                    show-word-limit
                  />
                  <p>项目名称：{projectName}，{{ activeName==='1'?'流程类型：{flowType}，':activeName=== '4'?'':'环节名称：{stepName}，' }}停留时间：{time}。</p>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="是否启用" prop="isOpen">
                  <el-switch
                    v-model="formData.isOpen"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <div class="footer">
      <el-button type="primary" :loading="loading" @click="submit(formRef)">保存</el-button>
    </div>
  </div>
</template>
<style lang="less">
.earlyWarningRule{
  .ruleBox{
    background: #f5f8fa;
    border-radius: 4px;
    padding: 16px;
  }
}
</style>
