<template>
  <el-drawer
    v-if="dialogVisible"
    :key="alias"
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    append-to-body
    :modal="false"
    :size="380"
    :wrapper-closable="false"
    class="right-drawer-wrap"
    :class="{
      'dialog-model-drawer': isDialog && isGetApprovalBtn && !isFromTaskManager,
      'horizontal-layout-drawer': layout === 'horizontal',
      'flow-module-drawer': isFromApplicationModule,
    }"
  >
    <div class="dialog__content">
      <el-form
        v-form
        :model="formData"
        label-width="100px"
        data-vv-scope="approvalForm"
      >
        <ht-form-item v-if="isShowUserSelector" :label="userLabel">
          <ht-user-selector-input
            v-model="users"
            :single="userSelectorIsSingle"
            display-style="block"
            quick-search-props="fullname,account,phone,email"
            :append-to-body="true"
            :config="{ id: 'formData.userId' }"
            permission="b"
          ></ht-user-selector-input>
        </ht-form-item>
        <ht-form-item
          :label="opinionLabel"
          class="opinion-label"
          label-width="100px"
        >
          <approval-comments
            :approval-opinion="approvalOpinion"
            :approval-maxlength="approvalMaxlength"
            @get-opinion="getOpinion"
          ></approval-comments>
        </ht-form-item>
        <ht-form-item
          v-if="isShowUpload"
          :label="$t('taskToCopyTo.AttachmentUpload')"
        >
          <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>
</template>

<script>
  import approvalButton from '@/mixins/approvalButton'
  import { mapState, mapMutations } from 'vuex'
  export default {
    name: 'ApprovalDialog',
    mixins: [approvalButton],
    props: {
      dialogTitle: {
        type: String,
        default: '',
      },
      opinionLabel: {
        type: String,
        default: '审批意见',
      },
      userLabel: {
        type: String,
        default: '转办人员',
      },
      isShowUserSelector: {
        type: Boolean,
        default: false,
      },
      isShowUpload: {
        type: Boolean,
        default: true,
      },
      userSelectorIsSingle: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        loading: false,
        fileList: '',
        users: '',
        formData: {
          userId: '',
        },
        fileUploading: false,
        approvalMaxlength: 500,
      }
    },
    computed: {
      ...mapState('matter', ['currentShowDialogAlias']),
    },
    methods: {
      ...mapMutations('matter', ['setCurrentShowDialogAlias']),
      openDialog() {
        this.dialogVisible = true
        this.setCurrentShowDialogAlias(this.alias)
        this.users = ''
        this.fileList = ''
      },
      confirm() {
        this.loading = true
        this.$root.$validator.validateAll('approvalForm').then((result) => {
          if (result) {
            const data = {
              userId: this.formData.userId,
              files: this.fileList && JSON.stringify(this.fileList),
              opinion: this.opinionValue,
            }
            if (!this.isShowUserSelector) {
              delete data.userId
            }
            // 防止外部没有回调，设置4秒后自动取消加载中的状态
            const finalTickCB = setTimeout(() => {
              this.loading = false
              this.dialogVisible = false
              this.setCurrentShowDialogAlias('')
            }, 10000)
            this.$emit('submit-form', data, () => {
              // 外部已经回调的情况下，取消倒计时
              clearTimeout(finalTickCB)
              this.loading = false
              this.dialogVisible = false
              this.setCurrentShowDialogAlias('')
            })
          } else {
            this.loading = false
            this.$message.error('有必填的内容未填写。')
          }
        })
      },
    },
  }
</script>

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