<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="form.code" placeholder="请输入验证码" :maxlength="6" clearable>
        </el-input>
        <sms-sender type="merchant_withdraw" @sent="sent = true" />
      </div>

    </div>

    <el-form v-if="check" :model="form" :rules="rules" ref="bankForm" label-width="100px">

      <div class="layout_v">

        <span class="self_center">{{topText}}</span>

        <el-form-item label="提现金额" prop="amount" style="margin-top: 10px;">
          <div class="layout_h_v_c">
            <el-input v-model="form.amount" placeholder="输入提现金额"></el-input>
            <div style="margin-left: 10px;">元</div>
          </div>
        </el-form-item>

        <span class="self_center">{{bottomText}}</span>

      </div>

    </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, applyWithdraw } from '@/api/financial/wallet.js'
  import {mapState} from 'vuex'
  import {
    ZmMixin
  } from '@/mixins/ZmMixin.js'

  export default {
    mixins: [ZmMixin],
    props: {
      show: Boolean,
      wallet: {
        type: Object,
        default: undefined
      }
    },
    components: {
      'sms-sender': () => import('@/components/smsSender.vue')
    },
    data() {
      return {
        sent: false,
        loading: false,
        check: false,
        form: {
          amount: '',
          code: '',
        },
        rules: {
          amount: [{
            trigger: 'change',
            validator: (rule, value, callback) => {
              let v = parseFloat(value)
              if(v == undefined) {
                callback(new Error('请输入提现金额'))
                return
              }
              if(isNaN(v)) {
                callback(new Error('提现金额不正确'))
                return
              }
              if(v <= 0) {
                callback(new Error('提现金额必须大于0'))
                return
              }
              callback()
            }
          }]
        }
      }
    },
    methods: {
      handleClose() {
        this.$emit('close')
        this.check = false
      },
      onSubmit() {
        if(this.check) {
          let amount = parseFloat(this.form.amount)
          if(isNaN(amount) || amount == undefined) {
            this.warn('请填写提现金额')
            return
          }
          let remain = this.valid - amount
          if(remain < 0) {
            this.warn('您的可提现余额不足')
            return
          }
          this.loading = true
          applyWithdraw({
            ...this.form
          })
          .then(r => {
            this.loading = false
            this.check = false
            this.$emit('success')
          })
          .catch(r => {
            this.loading = false
          })
        } else {
          let code = this.form.code
          if(code == undefined || code.length == 0) {
            this.warn('请输入验证码')
            return
          }
          this.loading = true
          checkSms({type: 'merchant_withdraw', 'code': code})
          .then(r => {
            this.loading = false
            this.check = true
          })
          .catch(e => {
            this.loading = false
          })
        }
      }
    },
    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 '****'
      },
      balance() {
        if(this.wallet) {
          return this.wallet.balance || 0
        }
        return 0
      },
      valid() {
        if(this.wallet) {
          return this.wallet.valid || 0
        }
        return 0
      },
      rate() {
        if(this.wallet) {
          return this.wallet.rate || 0
        }
        return 0
      },
      topText() {
        return '可提现金额为：' + this.balance + '元'
      },
      bottomText() {
        let rate = Math.round(this.rate * 100) / 100 * 100
        let amount = parseFloat(this.form.amount)
        let arrive = ''
        if(!isNaN(amount) && amount > 0) {
          arrive = Math.round((1 - this.rate) * amount * 100) / 100
        }
        return '提现手续费：' + rate + '%，到账金额：' + arrive
      },
    }
  }

</script>

<style scoped>

</style>
