<template>
  <div class="batch-process-dialog">
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      width="30%"
    >
      <div v-if="isShowResult">
        <div v-for="(item, index) in resultList" :key="index">
          <span v-if="item.list.length > 0">{{ item.tipMsg }}</span>
          <div v-for="it in item.list" :key="it.key" class="result-wrap">
            <el-link
              :type="item.type"
              :disabled="it.isDisabled"
              @click="handleJumps(it, item.key)"
            >
              {{ it.subject
              }}{{ it.type === 'danger' ? `(${failedMsg[it.id]})` : '' }}
            </el-link>
          </div>
        </div>
      </div>
      <el-form
        v-else
        v-form="{ inputsDisplay: 'block' }"
        :model="formData"
        label-width="120px"
        data-vv-scope="bathProcessDialogForm"
      >
        <ht-form-item label="审批意见">
          <ht-input
            v-model="formData.opinion"
            validate="required"
            type="textarea"
            :autosize="{ minRows: 4 }"
          ></ht-input>
        </ht-form-item>
        <ht-form-item label="审批动作">
          <ht-select
            v-model="formData.action"
            validate="required"
            :options="actionOptions"
          ></ht-select>
        </ht-form-item>
        <template v-if="formData.action === 'reject'">
          <ht-form-item label="驳回重提模式" class="custom-width">
            <ht-radio
              v-model="formData.backHandMode"
              validate="required"
              :options="backHandModeOptions"
            />
          </ht-form-item>
          <ht-form-item label="驳回方式" class="custom-width">
            <ht-radio
              v-model="formData.rejectType"
              validate="required"
              :options="rejectTypeOptions"
            />
          </ht-form-item>
        </template>
        <ht-form-item class="dialog-footer__btns">
          <el-button type="primary" :loading="loading" @click="onSubmit">
            提交
          </el-button>
          <el-button @click="handleClose">取消</el-button>
        </ht-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import { savaPatchProcessing } from '@/api/process'
  export default {
    name: 'BatchProcessingDialog',
    props: {
      selectedIds: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        dialogVisible: false,
        loading: false,
        formData: {
          opinion: '',
          action: 'agree',
          backHandMode: '',
          rejectType: '',
        },
        actionOptions: [
          {
            key: 'agree',
            value: '同意',
          },
        ],
        backHandModeOptions: [
          { key: 'normal', value: '重新审批' },
          { key: 'direct', value: '回到本节点' },
        ],
        rejectTypeOptions: [
          { key: 'backToStart', value: '驳回到发起人' },
          { key: 'reject', value: '驳回上一步' },
        ],
        dialogTitle: '批量处理',
        isShowResult: false,
        failedMsg: {},
        resultList: [
          {
            tipMsg: '以下任务不允许批量办理，请进入页面审批',
            key: 'unHandleList',
            type: 'primary',
            isDisabled: false,
            list: [],
          },
          {
            tipMsg: '以下任务处理完成',
            key: 'complete',
            type: 'success',
            isDisabled: false,
            list: [],
          },
          {
            tipMsg: '以下任务处理失败',
            key: 'failedList',
            type: 'danger',
            isDisabled: false,
            list: [],
            // failedMsg: {},
          },
          {
            tipMsg: '以下任务不允许批量办理，请进入页面审批',
            key: 'notAuth',
            type: '',
            isDisabled: true,
            list: [],
          },
        ],
      }
    },
    methods: {
      handleClose() {
        this.dialogVisible = false
        this.failedMsg = {}
        // this.$emit('complete')
      },
      openBatchProcessingDialog() {
        this.dialogTitle = '批量处理'
        this.isShowResult = false
        this.dialogVisible = true
        this.formData = {
          opinion: '',
          action: 'agree',
          backHandMode: '',
          rejectType: '',
        }
      },
      onSubmit() {
        const { action, rejectType, opinion } = this.formData
        if (!opinion) {
          this.$message({ type: 'error', message: '审批意见不能为空！' })
          return
        }
        if (!action) {
          this.$message({ type: 'error', message: '审批动作不能为空！' })
          return
        }
        const params = {
          taskIds: this.selectedIds,
          action: action === 'agree' ? 'agree' : rejectType || action,
          opinion,
        }
        this.loading = true
        savaPatchProcessing(params)
          .then((res) => {
            if (!res.state) return this.$message.error(res.message)
            this.$message.success(res.message)
            this.setResultList(res?.value)
            this.failedMsg = res.value?.failedMsg
            this.dialogTitle = '处理结果'
            this.isShowResult = true
            this.$emit('complete')
          })
          .finally(() => {
            this.loading = false
          })
      },
      setResultList(result) {
        const { complete, failedList, notAuth, unHandleList } = result
        const resultMap = {
          complete,
          failedList,
          notAuth,
          unHandleList,
        }
        this.resultList = this.resultList.map((item) => {
          return {
            ...item,
            list: resultMap[item.key],
          }
        })
      },
      handleJumps(task, key) {
        if (key === 'notAuth') {
          this.$emit('jump-approval-form', task, 'notAuth')
        } else if (key === 'complete') {
          this.dialogVisible = false
          this.$router.push({
            path: '/matter/approvalForm',
            query: {
              instId: task.procInstId,
              isReadonly: true,
              type: 'done',
              doneTaskId: task.id,
            },
          })
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .batch-process-dialog {
    .custom-width {
      ::v-deep {
        .inputs {
          width: 100%;
        }
      }
    }
    .result-wrap {
      padding-top: 10px;
    }
    .dialog-footer__btns {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>