<template>
  <a-form-model ref="ruleForm" :model="form" :rules="rules" class="form-descriptions-word">
    <admin-icon-title>
      <template slot="title">{{ title }}</template>
    </admin-icon-title>
    <a-descriptions bordered size="small" class="descriptions-width">
      <!-- 当前环节 -->
      <a-descriptions-item label="当前环节" :span="3">
        <a-form-model-item>
          <span class="ml-3">{{ planActPojo.taskName }}</span>
        </a-form-model-item>
      </a-descriptions-item>

      <!-- 下一环节 -->
      <a-descriptions-item v-if="hasNextTask" label="下一环节" :span="3">
        <AdminRequiredSign prop="deptName" />
        <a-form-model-item>
          <template v-if="planActPojo.nextActivityType === 'exclusiveGateway'">
            <template v-if="planActPojo.nextActivityList.length > 1">
              <a-select v-model="branchValue" @change="handleBranchValueChange">
                <a-select-option
                  v-for="item in planActPojo.nextActivityList"
                  :key="item.branchValue"
                  :value="item.branchValue"
                >
                  {{ item.taskDefinitionPojo.taskName }}
                </a-select-option>
              </a-select>
            </template>
            <template v-else>
              <span class="ml-3">{{ planActPojo.nextActivityList[0].taskDefinitionPojo.taskName || '无' }}</span>
            </template>
          </template>
          <span v-else class="ml-3">{{ planActPojo.nextTaskName || '无' }}</span>
        </a-form-model-item>
      </a-descriptions-item>

      <!-- 工作票延期 -->
      <template v-if="branchValue === 'work_change_delay'">
        <a-descriptions-item label="工作票延期" :span="3">
          <div class="ml10">
            <a-form-model-item prop="delayTime">
              <a-date-picker
                show-time
                placeholder="请选择需要延长的有效时间"
                style="width: 100%"
                @change="(date, dateString) => (form.delayTime = dateString)"
              />
            </a-form-model-item>
          </div>
        </a-descriptions-item>
      </template>

      <!-- 负责人变更 -->
      <template v-if="branchValue === 'work_change_charge'">
        <a-descriptions-item label="变更前工作负责人" :span="3">
          <span class="ml-3">{{ useTicketInfo.workChargeName }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="变更后工作负责人" :span="3">
          <AdminRequiredSign required />
          <WorkClassMemberSelectModal
            v-model="form.workChargeId"
            :multi="false"
            placeholder="请选择工作负责人"
            @change="workChargeChangeTimeChange"
          />
        </a-descriptions-item>
        <a-descriptions-item label="变更时间" :span="3">
          <AdminRequiredSign required />
          <a-date-picker
            show-time
            placeholder="请选择变更时间"
            style="width: 100%"
            @change="(date, dateString) => (form.workChargeChangeTime = dateString)"
          />
        </a-descriptions-item>
      </template>

      <!-- 下一环节处理人 -->
      <a-descriptions-item v-if="hasNextTask" label="下一环节处理人" :span="3">
        <AdminRequiredSign :required="nextAssigneeRequired" prop="deptName" />
        <a-form-model-item prop="nextAssigneeId">
          <!-- <WorkClassMemberSelectModal
            v-model="form.nextAssigneeId"
            :multi="false"
            :is-view="nextTaskRole === '工作负责人'"
            placeholder="请选择审批人"
            @change="handleUserChange"
          /> -->
          <a-input v-model="form.nextAssigneeName"></a-input>
        </a-form-model-item>
      </a-descriptions-item>

      <!-- 审批意见 -->
      <!-- v-if="branchValue === 'default'" -->
      <template>
        <a-descriptions-item label="审批意见" :span="3">
          <AdminRequiredSign required prop="approvalComment" />
          <a-form-model-item prop="approvalComment">
            <a-textarea
              v-model="form.approvalComment"
              placeholder="请输入审批意见"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            />
          </a-form-model-item>
        </a-descriptions-item>
      </template>

      <!-- 审批操作 -->
      <a-descriptions-item label="审批操作" :span="3">
        <div class="mt-2 mb-2 ml-3">
          <a-space size="middle">
            <a-button type="primary" icon="audit" :loading="agreeLoading" @click="handleAgree">同意</a-button>
            <a-button type="danger" icon="rollback" :loading="goBackLoading" @click="handleGoBack">回退</a-button>
            <a-button type="danger" icon="stop" :loading="refuseLoading" @click="handleRefuse">拒绝</a-button>
          </a-space>
        </div>
      </a-descriptions-item>
    </a-descriptions>
  </a-form-model>
</template>

<script>
import { mapGetters } from 'vuex'
import AdminRequiredSign from '@/components/hrhx/layouts/AdminRequiredSign'
import { cloneDeep } from 'lodash'

const DEFAULT_BRANCH_VALUE = 'default'
// import { selectActConfigList } from '@/views/plan/api/services/plan.js'
export default {
  name: 'ApprovalProcess',
  components: { AdminRequiredSign },
  props: {
    title: {
      type: String,
      required: false,
      default: '审批处理信息'
    },
    agreeLoading: {
      type: Boolean,
      required: false,
      default: false
    },
    goBackLoading: {
      type: Boolean,
      required: false,
      default: false
    },
    refuseLoading: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      branchValue: DEFAULT_BRANCH_VALUE,
      nextTaskDefKey: null,
      nextAssigneeRequired: true,
      nextTaskRole: '',
      form: {
        nextAssigneeId: '',
        nextAssigneeName: '',
        nextAssignee: '',
        approvalComment: '',
        workChargeId: '',
        workChargeName: ''
      },
      rules: {
        nextAssigneeId: [{ required: true, message: '请选择下一环节处理人！', trigger: 'change' }],
        approvalComment: [{ required: true, message: '请填写审批意见！', trigger: 'blur' }]
      },
      planActPojo: {}
    }
  },
  computed: {
    ...mapGetters(['useApprovalProcessInfo']),
    hasNextTask() {
      if (!!this.planActPojo.nextTaskDefKey) {
        return true
      }
      return false
    }
  },
  watch: {
    useApprovalProcessInfo: {
      handler(obj) {
        if (obj && Object.keys(obj).length) {
          this.planActPojo = obj.actPojo || {}
          // 如果有分支
          if (
            this.planActPojo.nextActivityType === 'exclusiveGateway' &&
            this.planActPojo.nextActivityList.length > 1
          ) {
            this.branchValue = this.planActPojo.nextActivityList[0].branchValue
          } else if (
            this.planActPojo.nextActivityType === 'exclusiveGateway' &&
            this.planActPojo.nextActivityList.length === 1
          ) {
            this.handleBranchValueChange(this.planActPojo.nextActivityList[0].branchValue)
          }
          const { nextAssigneeId, nextAssignee, nextAssigneeName, nextTaskRole } = obj.actPojo || {}
          this.$set(this.form, 'nextAssigneeId', nextAssigneeId)
          this.$set(this.form, 'nextAssigneeName', nextAssigneeName)
          this.$set(this.form, 'nextAssignee', nextAssignee)
          // this.nextTaskRole = nextTaskRole
          if (!this.form.nextAssigneeId) {
            this.handleGetPerson()
          }
        }
      },
      deep: true
    }
  },
  methods: {
    /**
     * 选择下一环节
     * @param {String} value 环节标识
     * @author Matrix
     * @since 2022/09/08
     */
    handleBranchValueChange(value) {
      this.branchValue = value
      const branchTask = this.planActPojo.nextActivityList.find(item => item.branchValue === this.branchValue)
      const { assigneeId, assignee, assigneeName, taskRole, taskDefKey } = branchTask.taskDefinitionPojo || {}
      this.$set(this.form, 'nextAssigneeId', assigneeId)
      this.$set(this.form, 'nextAssigneeName', assignee)
      this.$set(this.form, 'nextAssignee', assigneeName)
      this.nextTaskRole = taskRole
      this.nextTaskDefKey = taskDefKey

      // 开工作业，针对分支进行特殊处理
      if (value === 'work_change_charge') {
        // 负责人变更
        const { workChargeId, workChargeName } = this.useApprovalProcessInfo
        this.$set(this.form, 'workChargeIdOld', workChargeId)
        this.$set(this.form, 'workChargeNameOld', workChargeName)
      }
    },

    /**
     * 负责人变更选择人员回调
     * @param {String} id 人员ID
     * @param {String} name 人员Name
     * @param {Array} rows 人员信息集合
     * @author Matrix
     * @since 2022/09/15
     */
    workChargeChangeTimeChange(id, name, rows) {
      this.$set(this.form, 'workChargeId', id)
      this.$set(this.form, 'workChargeName', name)
      this.$set(this.form, 'workChargeCode', rows[0].username)
    },

    /**
     * 选择人员回调
     * @param {String} id 人员ID
     * @param {String} name 人员Name
     * @param {Array} rows 人员信息集合
     * @author Matrix
     * @since 2022/09/08
     */
    handleUserChange(id, name, rows) {
      this.$set(this.form, 'nextAssigneeId', id)
      this.$set(this.form, 'nextAssigneeName', name)
      this.$set(this.form, 'nextAssignee', rows[0].username)
    },
    handleGetPerson() {
      // selectActConfigList({ assignee: 'admin' }).then(res => {
      //   this.$set(this.form, 'nextAssigneeId', res.value[0].assigneeId)
      //   this.$set(this.form, 'nextAssigneeName', res.value[0].assigneeName)
      //   this.$set(this.form, 'nextAssignee', res.value[0].assignee)
      // })
    },
    /**
     * 审批同意
     * @return {Promise<unknown>}
     * @author Matrix
     * @since 2022/09/16
     */
    handleAgree() {
      const approvalInfo = cloneDeep(this.form)
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            approvalInfo.branchValue =
              this.planActPojo.nextActivityType === 'exclusiveGateway' ? this.branchValue : null
            if (this.branchValue !== DEFAULT_BRANCH_VALUE) {
              approvalInfo.nextTaskDefKey = this.nextTaskDefKey
              approvalInfo.nextTaskRole = this.nextTaskRole
            }
            this.$emit('on-agree', approvalInfo)
            resolve()
          } else {
            reject({ message: '审批提交时，验证未通过！' })
          }
        })
      })
    },

    /**
     * 审批退回
     * @author Matrix
     * @since 2022/09/16
     */
    handleGoBack() {
      this.$emit('on-back')
    },

    /**
     * 审批拒绝
     * @author Matrix
     * @since 2022/09/16
     */
    handleRefuse() {
      this.$emit('on-refuse')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/descriptios-reset.css';

::v-deep .descriptions-width {
  .ant-descriptions-item-label.ant-descriptions-item-colon {
    width: 150px;
  }
}
</style>
