<template>
  <div class="cash">
    <inner-header title="资金提现"></inner-header>
    <section class="content">
      <h2>提现到支付宝（{{userInfo.alipay}}）</h2>
      <div class="input-box">
        <el-input class="cash-input" placeholder="最少提现1元，每日上限3万元" v-model="coins"></el-input>
        <span class="input-icon">¥</span>
        <el-button type="text" class="get-all" @click="doGetAll">全部提现</el-button>
      </div>
      <div class="balance">
        可用余额
        <span>￥{{coinInfo.balance}}</span>元
      </div>
      <el-button @click="doGet" class="get-btn" type="primary">提现</el-button>
      <p class="remind-time">预计1~3个工作日到账</p>
      <p>提现说明</p>
      <div class="reminds">
        <div>1.提现非客栈转入的资金需要收取0.6%的手续费</div>
        <div>2.提现成功后，会在1-3个工作日内到账，节假日可能会稍有延时，请耐心等待</div>
        <div>
          3.请确认支付宝账号和实名认证信息保持一致，如需修改支付宝账号，请前往
          <a href="/setting/user">实名个人信息</a>
        </div>
        <div>
          4.如提现失败，或长时间未到账( 超过3个工作日),可联系在线客服
        </div>
      </div>
    </section>
    <el-dialog title="手机验证码确认" :visible.sync="dialogShow">
      <h1 class="dialog-h1">已向您的手机{{userinfo.mobile}}发送验证码</h1>
      <div class="ver-input">
        请输入验证码
        <el-input v-model="ver"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取 消</el-button>
        <el-button type="primary" @click="doDialogConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import InputVer from '@/components/input/ver'
import InnerHeader from '@/components/inner_header'

export default {
  components: {
    InputVer,
    InnerHeader,
  },
  data() {
    return {
      alipayInfo: {},
      dialogShow: false,
      // 提现金额
      coins: '',
      // 验证码
      ver: '',
    }
  },
  computed: {
    coinInfo() {
      return this.alipayInfo.coinInfo || {}
    },
    userInfo() {
      return this.alipayInfo.userInfo || {}
    }
  },
  mounted() {
    this.getAlipayInfo()
    console.log(this.userinfo)
  },
  methods: {
    /**
     * 全部提现
     */
    doGetAll() {
      this.coins = this.coinInfo.balance
    },
    /**
     * 获取支付宝信息
     */
    async getAlipayInfo() {
      let res = await this.$post('/api/user/get_cash_info')
      console.log(res)
      if(res) {
        this.alipayInfo = res.data
      }
    },
    /**
     * 点击提现
     */
    async doGet() {
      if(!this.coins.trim()) {
        this.$message('请输入提现金额')
        return
      }
      let res = await this.$post('/api/user/send_mobile_auth_code', {
        mobile: this.userinfo.mobile,
        type: 3
      })
      if(res) {
        this.dialogShow = true
      }
    },
    /**
     * 点击验证码
     */
    doDialogConfirm() {
      if(!this.ver.trim()) {
        this.$message('请输入验证码')
        return
      }
      this.$confirm('确定要进行取现操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$post('/api/account/take_coins_to_alipay', {
          coins: +this.coins,
          payee_real_name: this.userinfo.realname,
          alipay_account: this.userInfo.alipay,
          auth_code: this.ver,
        })
        if(res) {
          this.$message({
            type: 'success',
            message: '提现成功'
          })
          setTimeout(() => {
            location.reload()
          }, 1000)
        }
      })
    }
  }
}
</script>

<style scoped>
.cash {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 590px;
  background: white;
}
h2 {
  margin: 64px 0 8px;
  font-size: 14px;
}
.input-box {
  position: relative;
  width: 396px;
}
.cash-input {
  width: 396px;
}
.input-icon,
.get-all {
  position: absolute;
}
.input-icon {
  top: 10px;
  left: 16px;
  font-size: 20px;
}
.get-all {
  top: 0;
  right: 20px;
}
.balance {
  color: #999;
  font-size: 13px;
  margin: 6px 0 24px;
}
.balance span {
  color: #ffa81a;
}
.get-btn {
  width: 244px;
}
.remind-time {
  color: #999;
  font-size: 12px;
  margin: 8px 0 28px;
}
.reminds {
  width: 396px;
  color: #919aa7;
  margin-top: 6px;
  line-height: 32px;
}
.ver-input {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ver-input .el-input {
  margin-left: 10px;
  width: 280px;
}
.dialog-h1 {
  margin: 10px 0;
  text-align: center;
}
</style>
