<template>

  <el-dialog
    title="绑定银行卡"
    :visible.sync="show"
    width="25%"
    :close-on-click-modal="false"
    :before-close="handleClose"
    append-to-body>

    <div class="layout_v" v-if="!check">

      <span class="self_center">
        {{sent ? "已经" : ''}}发送验证码到尾号{{tail}}的手机，请输入验证码完成绑定。
      </span>

      <div class="layout_h self_center" style="margin-top: 10px;">
        <el-input class="self_center" style="width: 300px;" type="number" v-model="code" placeholder="请输入验证码" :maxlength="6" clearable>
        </el-input>
        <sms-sender type="merchant_bind_card" @sent="sent = true" />
      </div>

    </div>

    <el-form v-if="check" :model="bankCard" :rules="rules" ref="bankForm" label-width="100px">
      <el-form-item label="绑定银行卡" prop="cardNo">
        <el-input v-model="bankCard.cardNo" placeholder="输入银行卡号" type="number"></el-input>
      </el-form-item>
      <el-form-item label="转账银行" prop="bank">
        <el-input v-model="bankCard.bank" placeholder="输入转账银行"></el-input>
      </el-form-item>
      <el-form-item label="收款人" prop="bank">
        <el-input v-model="bankCard.owner" placeholder="输入收款人"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="onSubmit">确 认</el-button>
    </span>

  </el-dialog>

</template>

<script>

  import { checkSms, bindCard } from '@/api/financial/wallet.js'
  import {mapState} from 'vuex'
  import {
    ZmMixin
  } from '@/mixins/ZmMixin.js'

  export default {
    mixins: [ZmMixin],
    components: {
      'sms-sender': () => import('@/components/smsSender.vue')
    },
    props: {
      show: Boolean
    },
    data() {
      return {
        sent: false,
        loading: false,
        check: false,
        code: '',
        bankCard: {
          cardNo: '',
          bank: '',
          owner: ''
        },
        rules: {
          cardNo: [{
            message: '请输入银行卡号',
            trigger: 'blur',
            required: true
          }],
          bank: [{
            message: '请输入银行名称',
            trigger: 'blur',
            required: true
          }],
          owner: [{
            message: '请输入收款人',
            trigger: 'blur',
            required: true
          }]
        }
      }
    },
    computed: {
      ...mapState({
        userInfo: (state) => state.user.userInfo,
      }),
      tail() {
        if(this.userInfo.phone) {
          let phone = this.userInfo.phone
          let count = phone.length
          return phone.substr(count - 4, 4)
        }
        return '****'
      }
    },
    methods: {
      handleClose() {
        this.$emit('close')
        this.check = false
      },
      onSubmit() {
        if(this.check) {
          this.$refs['bankForm'].validate((valid) => {
            if(valid) {
              this.doBindCard()
            }
            return valid
          })
        } else {
          let code = this.code
          if(code == undefined || code.length == 0) {
            this.warn('请输入验证码')
            return
          }
          this.loading = true
          checkSms({type: 'merchant_bind_card', 'code': code})
          .then(r => {
            this.loading = false
            this.check = true
          })
          .catch(e => {
            this.loading = false
          })
        }
      },
      doBindCard() {
        this.loading = true
        bindCard({'code': this.code, ...this.bankCard})
        .then(r => {
          this.success("绑定成功")
          this.loading = false
          this.check = false
          this.$emit('success')
        })
        .catch(e => {
          this.loading = false
        })
      }
    }
  }

</script>

<style scoped>

</style>
