<template>
  <div class="approval-button-item exchange-button">
    <el-button :disabled="disabled" :size="btnSize" @click="handleExchange">
      {{ name }}
    </el-button>
    <el-drawer
      title="流转设置"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :modal="false"
      :close-on-click-modal="false"
      :size="380"
      :wrapper-closable="false"
      class="right-drawer-wrap"
      :class="{
        'dialog-model-drawer': isDialog && !isFromTaskManager,
        'horizontal-layout-drawer': layout === 'horizontal',
        'flow-module-drawer': isFromApplicationModule,
      }"
      append-to-body
    >
      <div class="dialog__content">
        <el-form
          v-form="{ inputsDisplay: 'block' }"
          :model="formData"
          label-width="140px"
          data-vv-scope="exchangeForm"
        >
          <ht-form-item label="任务通过规则">
            <ht-radio
              v-model="formData.radioVote"
              validate="required"
              :options="voteOptions"
              @change="handleVoteChange"
            ></ht-radio>
          </ht-form-item>
          <template v-if="isCoustomVote">
            <ht-form-item label="计票策略">
              <ht-radio
                v-model="formData.decideType"
                validate="required"
                :options="decideTypeOptions"
              ></ht-radio>
            </ht-form-item>
            <ht-form-item label="投票类型">
              <ht-radio
                v-model="formData.voteType"
                validate="required"
                :options="voteTypeOptions"
              ></ht-radio>
            </ht-form-item>
            <ht-form-item label="票数">
              <ht-input
                v-model="formData.voteAmount"
                validate="required"
                class="vote-amount"
                :class="{ 'is-percent': formData.voteType === 'percent' }"
              ></ht-input>
            </ht-form-item>
          </template>
          <ht-form-item label="流转类型">
            <ht-radio
              v-model="formData.signType"
              validate="required"
              :options="signTypeOptions"
            ></ht-radio>
          </ht-form-item>
          <ht-form-item label="流转结束后的动作">
            <ht-radio
              v-model="formData.action"
              validate="required"
              :options="actionOptions"
            ></ht-radio>
          </ht-form-item>
          <ht-form-item label="流转人员">
            <ht-user-selector-input
              v-model="users"
              quick-search-props="fullname,account"
              :append-to-body="true"
              :config="{ id: 'formData.userIds' }"
              permission="b"
            ></ht-user-selector-input>
          </ht-form-item>
          <ht-form-item
            label="流转意见"
            class="opinion-label"
            label-width="80px"
          >
            <approval-comments
              :approval-opinion="approvalOpinion"
              @get-opinion="getOpinion"
            ></approval-comments>
          </ht-form-item>
          <ht-form-item label="附件上传">
            <ht-file
              v-model="fileList"
              :uploading.sync="fileUploading"
              type="list"
              :downloadable="false"
            />
          </ht-form-item>
        </el-form>
      </div>
      <div class="dialog-footer__btns">
        <el-button
          type="primary"
          :loading="loading || fileUploading"
          @click="confirm"
        >
          确定
        </el-button>
        <el-button :disabled="loading || fileUploading" @click="handleClose">
          取消
        </el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import approvalButton from '@/mixins/approvalButton'
  import { savaExchange } from '@/api/process'
  import {
    VOTE_OPTIONS,
    DECIDE_TYPE_OPTIONS,
    VOTE_TYPE_OPTIONS,
    SIGN_TYPE_OPTIONS,
    ACTION_OPTIONS,
    VETO_DECIDE_TYPE, //一票否决时计票策略默认值
    CUSTOM,
    PASS_UNANIMOUSLY,
    ONE_VOTE_VETO,
    ONE_VOTE_AGREE,
  } from './const'

  import { resultJudge } from '@/utils/event.js'

  export default {
    name: 'ExchangeButton',
    mixins: [approvalButton],
    data() {
      return {
        voteOptions: VOTE_OPTIONS, //任务通过规则选项
        decideTypeOptions: DECIDE_TYPE_OPTIONS, //计票策略选项
        voteTypeOptions: VOTE_TYPE_OPTIONS, //投票类型选项
        signTypeOptions: SIGN_TYPE_OPTIONS, //流转类型选项
        actionOptions: ACTION_OPTIONS, //流转结束后的动作选项
        formData: {
          userIds: '',
          radioVote: '1', //任务通过规则 1-全票通过,2-一票否决,3-一票同意,4-自定义
          decideType: 'agree', //计票策略
          voteType: 'percent', //投票类型
          voteAmount: '100', //票数
          signType: 'parallel', //流转类型
          action: 'submit', //流转结束后的动作
        },
        users: '',
        isCoustomVote: false, //是否自定义投票
        fileUploading: false,
      }
    },
    methods: {
      handleExchange() {
        if (this.beforeClick) {
          resultJudge(this.beforeClick(this.alias)).then((result) => {
            if (result) {
              this.dialogVisible = true
            }
          })
        } else {
          this.dialogVisible = true
        }
      },
      handleVoteChange(vote) {
        this.isCoustomVote = false
        // 全票通过1。 即需要100%同意
        if (vote === PASS_UNANIMOUSLY) {
          this.formData.voteType = 'percent'
          this.formData.decideType = 'agree'
          this.formData.voteAmount = '100'
        } else if (vote === ONE_VOTE_VETO) {
          this.formData.voteType = 'amount'
          this.formData.decideType = 'refuse'
          this.formData.voteAmount = '1'
        } else if (vote === ONE_VOTE_AGREE) {
          this.formData.voteType = 'amount'
          this.formData.decideType = 'agree'
          this.formData.voteAmount = '1'
        } else if (vote === CUSTOM) {
          this.isCoustomVote = true
        }
      },
      confirm() {
        this.$root.$validator.validateAll('exchangeForm').then((result) => {
          this.loading = true
          if (!result) {
            this.loading = false
            return this.$message.error('有必填的内容未填写。')
          }
          if (this.dialogBeforeClick) {
            resultJudge(this.dialogBeforeClick(this.alias)).then((result) => {
              if (result) {
                //提交前执行前置脚本
                this.submitBefore('startTrans', 'exchangeForm')
              } else {
                this.loading = false
              }
            })
          } else {
            //提交前执行前置脚本
            this.submitBefore('startTrans', 'exchangeForm')
          }
          this.submitAfter('startTrans')
        })
      },
      handleSubmitting() {
        const params = {
          taskId: this.taskId,
          opinion: this.opinionValue,
          files: JSON.stringify(this.fileList),
          ...this.formData,
          data: Base64.encode(JSON.stringify(this.data)),
        }
        savaExchange(params)
          .then((res) => {
            if (!res.state) return this.$message.error(res.message)
            this.$message.success(res.message)
            this.filterHasHandleTask()
            // this.$router.go(-1)
            this.dialogModeApprovalCompletionToPre()
            this.dialogVisible = false
            this.dialogAfterClick(this.alias)
          })
          .finally(() => {
            this.loading = false
          })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .exchange-button {
    .vote-amount {
      width: 12%;
    }
  }
  .is-percent {
    ::v-deep {
      .el-input {
        position: relative;
        &::after {
          position: absolute;
          content: '%';
          top: 0;
          right: -16px;
        }
      }
    }
  }
</style>