<template>
  <div class="approval-button-item inquiry-button">
    <el-button :disabled="disabled" :size="btnSize" @click="handleInquiry">
      {{ name }}
    </el-button>
    <el-drawer
      :title="$t('task.InquirySettings')"
      :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="100px"
          data-vv-scope="InquiryForm"
        >
          <ht-form-item :label="$t('task.InquiryUser')">
            <ht-user-selector-input
              v-model="users"
              single
              quick-search-props="fullname,account"
              :append-to-body="true"
              :config="{ id: 'formData.userId' }"
              permission="b"
            ></ht-user-selector-input>
          </ht-form-item>
          <ht-form-item
            v-if="isShowInquiryType"
            :label="$t('task.InquiryType')"
          >
            <ht-radio
              v-model="inquiryType"
              validate="required"
              :rdlist="JSON.stringify(inquiryTypeOptions)"
            ></ht-radio>
          </ht-form-item>
          <ht-form-item
            :label="$t('task.InquiryDescription')"
            class="opinion-label"
            label-width="80px"
          >
            <approval-comments
              :approval-opinion="approvalOpinion"
              @get-opinion="getOpinion"
            ></approval-comments>
          </ht-form-item>
          <ht-form-item :label="$t('task.InquiryAttachmentUpload')">
            <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"
        >
          {{ $t('Common.Confirm') }}
        </el-button>
        <el-button :disabled="loading || fileUploading" @click="handleClose">
          {{ $t('Common.Cancel') }}
        </el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import approvalButton from '@/mixins/approvalButton'
  import { savaInquiry } from '@/api/process'
  import { resultJudge } from '@/utils/event.js'
  const INQUIRY_TYPE_OPTIONS = [
    {
      key: 'direct',
      value: '直接返回',
    },
    {
      key: 'step',
      value: '逐级返回',
    },
  ]
  export default {
    name: 'InquiryButton',
    mixins: [approvalButton],
    data() {
      return {
        inquiryTypeOptions: INQUIRY_TYPE_OPTIONS,
        users: '',
        inquiryType: 'direct',
        formData: {
          userId: '',
        },
        fileUploading: false,
      }
    },
    computed: {
      status() {
        return this.$route.query.status
      },
      isShowInquiryType() {
        return this.status !== 'TRANSFORMEDINQU'
      },
    },
    methods: {
      async handleInquiry() {
        let res = true
        if (this.beforeClick) {
          res = await resultJudge(this.beforeClick(this.alias))
        }
        if (!res) return
        this.dialogVisible = true
      },
      confirm() {
        const params = {
          taskId: this.taskId,
          opinion: this.opinionValue,
          userIds: this.formData.userId,
          action: 'back',
          files: this.fileList && JSON.stringify(this.fileList),
          data: JSON.stringify(this.data),
          inquType: this.isShowInquiryType ? this.inquiryType : '',
        }
        this.$root.$validator.validateAll('InquiryForm').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.doSubmit(params)
              } else {
                this.loading = false
              }
            })
          } else {
            this.doSubmit(params)
          }
        })
      },
      doSubmit(params) {
        savaInquiry(params)
          .then((res) => {
            if (!res.state) return this.$message.error(res.message)
            this.filterHasHandleTask()
            this.$message.success(res.message)
            this.handleClose()
            this.dialogModeApprovalCompletionToMyTask()
            this.dialogAfterClick(this.alias)
          })
          .finally(() => {
            this.loading = false
          })
      },
    },
  }
</script>

<style lang="scss" scoped></style>