<template>
  <div class="details-drawer">
    <el-drawer
      :visible="true"
      :before-close="handleClose"
      :close-on-press-escape="false"
      :wrapper-closable="false"
      :modal-append-to-body="true"
      :append-to-body="true"
      custom-class="drawer-auto-layout"
    >
      <div slot="title" class="flex-l">
        <sys-origin-icon :icon="row.sysOrigin" size="18px" />&nbsp;{{ $t('pages.userBankWithdrawMoneyApply.approvalDrawer.title') }}
      </div>
      <div class="team-bill-settle">
        <div class="drawer-form">
          <div class="blockquote">{{ $t('pages.userBankWithdrawMoneyApply.approvalDrawer.submitUser') }}</div>
          <div class="content" style="display: flex;justify-content: flex-start;flex-direction: row;align-items: center;">
            <user-table-exhibit :user-profile="row.submitUser" :query-details="true" style="margin: 0.4rem" />
          </div>

          <div v-if="row.settlementResult && row.settlementResult.acceptBankCard">
            <div class="blockquote">{{ $t('pages.userBankWithdrawMoneyApply.approvalDrawer.bankCard') }} <i class="el-icon-document-copy cursor-pointer" @click="copyBankCard(row)" /></div>
            <div class="content">
              <div style="margin: 0.2rem auto;line-height: .6rem;">
                <el-tag effect="plain">{{ $t('pages.userBankWithdrawMoneyApply.approvalDrawer.cardNo') }}:{{ row.settlementResult.acceptBankCard.cardNo }}</el-tag>
                <el-tag effect="plain">{{ $t('pages.userBankWithdrawMoneyApply.approvalDrawer.payee') }}:{{ row.settlementResult.acceptBankCard.payee }}</el-tag>
                <el-tag effect="plain">{{ $t('pages.userBankWithdrawMoneyApply.approvalDrawer.bankName') }}:{{ row.settlementResult.acceptBankCard.cardName }}</el-tag>
              </div>
              <div v-if="row.settlementResult.acceptBankCard.del" style="margin: 0.2rem auto;line-height: .6rem;">
                <el-tag type="danger">{{ $t('pages.userBankWithdrawMoneyApply.approvalDrawer.bankCardDeleted') }}</el-tag>
              </div>
            </div>
          </div>
          <div class="blockquote">{{ $t('pages.userBankWithdrawMoneyApply.approvalDrawer.amount') }}: <span style="color:#419eff;">{{ row.amount }}</span></div>
          <div class="blockquote">{{ $t('pages.userBankWithdrawMoneyApply.approvalDrawer.settlement') }}
            <el-tooltip class="item" effect="dark">
              <div slot="content">
                <p>* {{ $t('pages.userBankWithdrawMoneyApply.approvalDrawer.transferVoucherTip') }}</p>
                <p>* {{ $t('pages.userBankWithdrawMoneyApply.approvalDrawer.remarkTip') }}</p>
              </div>
              <i class="el-icon-info" />
            </el-tooltip>
          </div>
          <el-form ref="form" :model="form" label-width="80px" style="margin-right: 15px;">

            <el-form-item prop="tmpExistsCertificate" :label="$t('pages.userBankWithdrawMoneyApply.approvalDrawer.uploadVoucher')">
              <el-row>
                <el-col :span="8">
                  <upload-image
                    v-model="certificateOne"
                    :file-dir="$application.fileBucket.back"
                  />
                </el-col>
                <el-col :span="8">
                  <upload-image
                    v-model="certificateTwo"
                    :file-dir="$application.fileBucket.back"
                  />
                </el-col>
                <el-col :span="8">
                  <upload-image
                    v-model="certificateThree"
                    :file-dir="$application.fileBucket.back"
                  />
                </el-col>
                <el-col :span="24" style="margin-top: 10px;">
                  <upload-image
                    v-model="certificateFour"
                    :file-dir="$application.fileBucket.back"
                  />
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item :label="$t('pages.userBankWithdrawMoneyApply.approvalDrawer.externalRemark')">
              <el-input
                v-model="form.remark"
                type="textarea"
                :placeholder="$t('pages.userBankWithdrawMoneyApply.approvalDrawer.externalRemarkPlaceholder')"
                maxlength="100"
                show-word-limit
                resize="none"
                rows="5"
              />
            </el-form-item>
          </el-form>
        </div>

        <div class="drawer-footer">
          <el-button :disabled="submitLoading" @click="handleClose()">{{ $t('pages.userBankWithdrawMoneyApply.action.cancel') }}</el-button>
          <el-button :disabled="submitLoading" :loading="submitLoading" @click="submit('PASS')">{{ $t('pages.userBankWithdrawMoneyApply.action.pass') }}</el-button>
          <el-button type="primary" :disabled="submitLoading" :loading="submitLoading" @click="submit('NOT_PASS')">{{ $t('pages.userBankWithdrawMoneyApply.action.reject') }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { deepClone, copyText } from '@/utils'
import { approvalMoneyApply, getBankWithdrawMoneyApply } from '@/api/app-user-bank-balance'
import { bankCardType } from '@/constant/team-type'
export default {
  name: 'UserBankWithdrawMoneyApplyApprovalDrawer',
  props: {
    row: {
      type: Object,
      require: true,
      default: () => {}
    }
  },
  data() {
    return {
      bankCardType,
      submitLoading: false,
      certificateOne: '',
      certificateTwo: '',
      certificateThree: '',
      certificateFour: '',
      form: {
        id: '',
        credential: [],
        remark: '',
        approvalStatus: ''
      }
    }
  },
  watch: {
    row: {
      handler(newVal) {
        if (newVal) {
          this.nativeRow = deepClone(newVal)
          this.form.id = this.nativeRow.id
          this.form.approvalStatus = this.nativeRow.latestApprovalStatus
          this.form.remark = this.nativeRow.remark
          if (this.nativeRow.settlementResult && this.nativeRow.settlementResult.credential) {
            const credentialList = this.nativeRow.settlementResult.credential || []
            if (credentialList.length > 0) {
              this.certificateOne = credentialList[0]
            }
            if (credentialList.length > 1) {
              this.certificateTwo = credentialList[1]
            }
            if (credentialList.length > 2) {
              this.certificateThree = credentialList[2]
            }
            if (credentialList.length > 3) {
              this.certificateFour = credentialList[3]
            }
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    copyBankCard(row) {
      copyText(`卡号: ${row.settlementResult.acceptBankCard.cardNo || '?'}, 收款人: ${row.settlementResult.acceptBankCard.payee || '?'}, 银行: ${row.settlementResult.acceptBankCard.cardName || '?'} 
      `).then(() => {
        this.$opsMessage.success()
      }).catch(er => {
        this.$opsMessage.fail()
      })
    },
    handleClose() {
      if (this.submitLoading) {
        this.$opsMessage.warn(this.$t('pages.userBankWithdrawMoneyApply.message.processing'))
        return
      }
      this.$emit('close')
    },
    getStatusName(status) {
      const key = `pages.userBankWithdrawMoneyApply.approvalRecord.${status}`
      const value = this.$t(key)
      return value === key ? this.$t('pages.userBankWithdrawMoneyApply.approvalRecord.UNKNOWN') : value
    },
    getBankCardTypeName(_type) {
      var _name = ''
      this.bankCardType.forEach(function(v, i) {
        if (v.value === _type) {
          _name = v.name
          return
        }
      })
      return _name
    },
    submit(approvalStatus) {
      const that = this

      that.form.approvalStatus = approvalStatus

      var certificateUrls = []
      if (that.certificateOne) {
        certificateUrls.push(that.certificateOne)
      }
      if (that.certificateTwo) {
        certificateUrls.push(that.certificateTwo)
      }
      if (that.certificateThree) {
        certificateUrls.push(that.certificateThree)
      }
      if (that.certificateFour) {
        certificateUrls.push(that.certificateFour)
      }
      if (certificateUrls.length <= 0 && approvalStatus === 'PASS') {
        this.$opsMessage.warn(this.$t('pages.userBankWithdrawMoneyApply.message.uploadVoucherFirst'))
        return
      }
      that.form.credential = certificateUrls
      that.$refs.form.validate(valid => {
        if (!valid) {
          console.error('error submit!!')
          return false
        }
        that.submitLoading = true
        approvalMoneyApply(that.form).then(res => {
          getBankWithdrawMoneyApply(that.form.id).then(res => {
            that.submitLoading = false
            that.$opsMessage.success()
            this.$emit('approvalClose', res.body)
          }).catch(er => {
          })
        }).catch(er => {
          that.submitLoading = false
        })
      })
    }
  }
}
</script>
<style scope.d lang="scss">
  .details-content {
      padding: 0px 10px;
      .content {
        margin-bottom: 10px;
      }

      .remark {
        width: 100%;
        overflow: auto;
        word-wrap: break-word;
        .nickname {
          font-weight: bold;
        }
      }
      .details-row {
        padding: 10px 0px;
        >.details-col {
          width: 50%;
        }
      }
      .policy {
        .policy-row {
          color: #333333;
          .title {
            padding: 5px 15px !important;
            background-color: transparent !important;
          }
          .policy-content {
            text-align: center;
            .policy-block {
              border: 1px solid #FFFFFF;
              width: 33.33%;
              padding: 10px;
              background-color: #F1F2F3;
              .label {
                padding-bottom: 5px;
              }
            }
          }

        }
      }
      .bank-card-list {
        .back-green {
          background-image: linear-gradient(to left, #018AA8 0%, #00B39F 100%);
        }
        .back-blue {
          background-image: linear-gradient(to left, #2D61CF 0%, #3893E6 100%);
        }
        .bank-card-item {
          color: #FFFFFF;
          margin-bottom: .2rem;
          border-radius: .2rem;
          padding: 10px;
          .card-info {
            .card-icon {
              height: 50px;
              width: 50px;
              flex-shrink: 0;
              img {
                width: 100%;
                height: 100%;
                border-radius: 100%;
              }
            }
            .profile {
              width: 100%;
              padding: 0px 10px;
              .payee {
                padding: 5px 0px;
              }
            }
          }
        }
      }
  }
  </style>
