<template>
  <el-dialog :close-on-click-modal="false" :visible.sync="visible" title="商家提现申请">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="110px">
      <el-form-item label="商家名称：" prop="shopName">
        <span class="shop-name">{{dataForm.shopName}}</span>
      </el-form-item>
      <el-form-item label="账户名称：" prop="accountName">
        <span class="account-name">店铺余额</span>
      </el-form-item>
      <el-form-item label="充值金额：" prop="rechargeAmount">
        <span class="recharge-amount">
          <span class="bold">{{dataForm.amount}}</span>元
        </span>
      </el-form-item>
      <el-form-item label="收款方信息：" prop="payeeInformation">
        <div class="payee-Info">
          <p class="tips">
            你需要汇款
            <span class="bold">{{dataForm.amount}}</span>元至以下账户，汇款成功后上传凭证信息，审核通过后到账
          </p>
          <div class="payee-con">
            <div class="payee-con-item">
              <p class="tit">收款方户名：</p>
              <p class="txt">{{shopBankCard.recipientName}}</p>
            </div>
            <div class="payee-con-item">
              <p class="tit">银行名称：</p>
              <p class="txt">{{shopBankCard.bankName}}</p>
            </div>
            <div class="payee-con-item">
              <p class="tit">收款方开户行：</p>
              <p class="txt">{{shopBankCard.openingBank}}</p>
            </div>
            <div class="payee-con-item">
              <p class="tit">收款方账户：</p>
              <p class="txt">
                <span ref="copyVal">{{shopBankCard.cardNo}}</span>&nbsp;&nbsp;
                <textarea class="copy-content" ref="input">装载内容盒子</textarea>
                <span
                  class="copy-txt"
                  data-clipboard-text="需要复制的内容571907821710904"
                  @click="copyAccountNum"
                >复制</span>
              </p>
            </div>
            <div class="payee-con-item">
              <p class="tit">备注：</p>
              <p class="txt">{{dataForm.shopRemarks}}</p>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="发放状态：" prop="status">
        <el-radio-group
          v-if="dataForm.status <2"
          v-model="dataForm.status"
          :disabled="oldStatus !== 0"
        >
          <el-radio :label="0" :disabled="true">未审核</el-radio>
          <el-radio :label="1">已通过</el-radio>
          <el-radio :label="-1">未通过</el-radio>
        </el-radio-group>
        <div v-if="dataForm.status >1">
          <el-tag v-if="dataForm.status == 2" type="success">发放成功</el-tag>
          <el-tag v-if="dataForm.status == 3" type="danger">发放失败</el-tag>
        </div>
      </el-form-item>
      <el-form-item label="付款方信息：" prop="payerInformation" v-if="dataForm.status > 0">
        <div class="payer-info">
          <el-form-item label="付款户名：" prop="payingAccount" class="payer-item">
            <el-input
              type="text"
              v-model="dataForm.payingAccount"
              placeholder="请输入付款户名"
              :disabled="oldStatus !== 0"
            ></el-input>
          </el-form-item>
          <el-form-item label="付款账号：" prop="payingCardNo" class="payer-item">
            <el-input
              type="text"
              v-model="dataForm.payingCardNo"
              placeholder="请输入付款账号"
              :disabled="oldStatus !== 0"
            ></el-input>
          </el-form-item>
          <el-form-item label="付款日期：" prop="payingTime">
            <el-date-picker
              v-model="dataForm.payingTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              :disabled="oldStatus !== 0"
            ></el-date-picker>
          </el-form-item>
        </div>
      </el-form-item>
      <el-form-item label="备注：" prop="remarks">
        <el-input
          type="textarea"
          :autosize="{ minRows: 1, maxRows: 4}"
          v-model="dataForm.remarks"
          placeholder="请输入备注信息"
          :disabled="oldStatus !== 0"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" v-if="oldStatus === 0" @click="dataFormSubmit()">提交</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      dataForm: {
        status: 0,
        payingAccount: '', // 付款户名
        payingCardNo: '',  // 付款账号
        payingTime: '' // 付款日期
      },
      shopBankCard: {
        bankName: '',
        cardNo: '',
        openingBank: '',
        recipientName: ''
      },
      oldStatus: 0,
      dataRule: {
        payingAccount: [
          { required: true, message: '请填写付款人户名', trigger: 'blur' }
        ],
        payingCardNo: [
          { required: true, message: '请填写付款人账号', trigger: 'blur' }
        ],
        payingTime: [
          { required: true, message: '请选择付款日期', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init (rowData) {
      let dataForm = Object.assign({}, rowData)
      this.shopBankCard = Object.assign({}, rowData.shopBankCard)
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.dataForm = dataForm
        this.dataForm.shopBankCard = null
        this.oldStatus = dataForm.status
        console.log(this.dataForm)
      })
    },
    /**
     * 复制
     */
    copyAccountNum () {
      this.$refs.input.value = this.$refs.copyVal.innerText  // 替换文本框内容
      console.log(this.$refs.input.value)
      this.$refs.input.select() // 选中文本
      document.execCommand('copy') // 执行浏览器复制命令
      this.$message({
        message: '复制成功',
        type: 'success',
        duration: 1000
      })
    },
    // 表单提交
    dataFormSubmit () {
      if (this.dataForm.status === 0) {
        this.visible = false
        return
      }
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/shop/shopWithdrawCash/audit'),
            method: 'put',
            data: this.$http.adornData(this.dataForm)
          }).then(({ data }) => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
          })
        }
      })
    }
  }
}
</script>

<style scoped>
>>> .el-dialog__body {
  padding-top: 0;
  padding-bottom: 0;
}
.el-form-item {
  margin-bottom: 8px !important;
}
.bold {
  font-weight: bold;
  font-size: 16px;
  padding: 0 2px;
}
/* 收款方信息 */
.payee-Info {
  border: 1px solid #eee;
  border-radius: 3px;
  padding: 15px;
  margin-bottom: 15px;
  width: 98%;
}
.payee-con-item {
  padding: 10px;
  line-height: 1em;
}
.tips {
  line-height: 1.5em;
  padding-bottom: 10px;
}
.tit {
  display: inline-block;
  width: 100px;
  text-align: right;
}
.txt {
  display: inline-block;
  text-align: left;
  position: relative;
}
.copy-txt {
  color: #1c60d4;
  cursor: pointer;
}
.copy-content {
  width: 1em;
  height: 1em;
  border: 0;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: -11;
}
/* 付款人信息 */
.payer-info {
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 3px;
  width: 98%;
}
.el-input {
  width: 90%;
}
.payer-item {
  margin-bottom: 20px !important;
}
</style>
