<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-form ref="form" :model="form" label-width="100px" style="width:500px;">
        <el-form-item label="当前可用奖金">
          <el-tag type="success">{{balance}}元</el-tag>
        </el-form-item>
        <!--<el-form-item label="当前提现比例">-->
          <!--<el-tag type="info">{{withdrawProp}}%</el-tag>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="最大提现金额">-->
          <!--<el-tag type="info">{{maxAmount}}元</el-tag>-->
        <!--</el-form-item>-->
        <el-form-item label="最小提现金额">
          <el-tag type="info">{{minAmount}}元</el-tag>
        </el-form-item>
        <el-form-item label="提现手续费">
          <el-tag type="info">{{withdrawFee}}%</el-tag>
        </el-form-item>
        <el-form-item label="提现金额">
          <el-input v-model="form.applyAmount" type="number" :min="minAmount" :max="maxAmount"></el-input>
        </el-form-item>
        <el-form-item label="" v-if="isPact==='1'">
          <el-checkbox v-model="checked"> 我已同意</el-checkbox>
          <a @click="dialogVisible = true" href="javascript:void(0)">《服务协议》</a>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="submitButtonStat" :disabled="!checked">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
        title="服务协议"
        :visible.sync="dialogVisible">
      <div v-html="content"></div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="重要提示"
      :visible.sync="idCardDialogVisible">
      <div>
        <p>因系统升级，首次提现需进行在线签约，签约成功后提现才可到账。</p>
        <p>在线签约步骤：微信扫码\手机验证码\实名认证：上传身份证正反面\合同签署：签字\完成</p>
        <p><el-image :src="idCardInfoQrCodeUrl"></el-image></p>
        <p>如有其他疑问：请致电 <span style="color: #f75b36">400 694 1919</span></p>
      </div>
      <span slot="footer" class="dialog-footer">
<!--        <el-button @click="idCardDialogVisible = false">取 消</el-button>-->
        <el-button type="primary" @click="idCardDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Vue from 'vue'
  import store from '@/utils/vuexStore'
  import network from '@/utils/network'
  import tool from '@/utils/tool'
  import userInfo from '@/utils/userInfo'
  import {CDN_IMG_URL} from '@/utils/config'

  export default {
    name: 'finance_withdraw-add',
    mounted() {
      this.init()
      this.chkWithdrawUserinfo()
    },
    data() {
      return {
        form: {
          applyAmount: 0,
          payPassword: '',
          withdrawCode: '',
        },
        balance: 0,
        loading: true,
        userInfo: {
          WITHDRAW_PROP:100
        },
        submitButtonStat: false,
        openBanks: null,
        isPact: null,
        checked: this.chkAgree(),
        content: null,
        dialogVisible: false,
        idCardDialogVisible: false,
        withdrawProp: 100,
        maxAmount: 0,
        minAmount: 0,
        withdrawFee: 0,
        idCardInfoQrCodeUrl:'',
      }
    },
    methods: {
      init() {
        this.idCardInfoQrCodeUrl = CDN_IMG_URL + "img_data/idCardInfo.png"
      },
      chkAgree() {
        if (this.isPact === '0') return true
        return tool.getStorage('withdrawAgree'+userInfo.userId()) === '1' ? true : false
      },
      chkWithdrawUserinfo() {
        network.getData(`finance/chk-withdraw-user`).then(response => {
          this.loading = false
          this.userInfo = response.userInfo
          this.isPact = response.isPact
          this.checked=this.chkAgree()
          this.content = response.content
          this.minAmount = response.minAmount
          this.withdrawFee = response.withdrawFee
            this.getBalance()
        }).catch(() => {
          this.$router.go(-1)
        })
      },
      getBalance() {
        this.$message({
          message: '正获取您的奖金...',
          type: 'info'
        })
        network.getData('finance/available-balance').then(response => {
          this.$message.closeAll()
          this.balance = response.bonus
          this.getMaxAmount()
          this.loading = false
        })
      },
      getMaxAmount(){
          this.maxAmount = this.balance
        // this.maxAmount = Math.floor(tool.formatPrice(this.balance * this.userInfo.WITHDRAW_PROP * 0.01))
        // this.withdrawProp = this.userInfo.WITHDRAW_PROP
      },
      onSubmit() {
        this.submitButtonStat = true
        tool.setStorage('withdrawAgree'+userInfo.userId(), 1)
        console.log(tool.getStorage('withdrawAgree'))
        let path = 'finance/withdraw-add'

          network.getData('finance/wd-mult-point').then(response => {
              this.form.withdrawCode = response.withdrawCode

              this.$prompt('请输入支付密码', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  inputType: 'password',
                  inputPattern: /\S+/,
                  inputErrorMessage: '请输入支付密码',
                  beforeClose:async (action, instance, done)=>{
                      if (action === 'confirm') {
                          instance.confirmButtonLoading = true;
                          instance.confirmButtonText = '执行中...';
                          console.log(instance.inputValue);
                          this.form.payPassword = instance.inputValue;
                          await network.postData(path, this.form).then(response => {

                              instance.confirmButtonLoading = false;
                              done();
                              this.$message({
                                  message: response,
                                  type: 'success'
                              })
                              tool.setStorage('withdrawAgree', 1)
                              this.submitButtonStat = false
                              this.$router.go(-1)
                          }).catch(error=>{
                              instance.confirmButtonLoading = false;
                              this.submitButtonStat = false
                              if( error.status === 424 ) {
                                  this.idCardDialogVisible = true
                              }
                              done();
                          })
                      }else {
                          this.submitButtonStat = false
                          done();
                      }
                  }
              })

          })
        // this.$prompt('请输入支付密码', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   inputType: 'password',
        //   inputPattern: /\S+/,
        //   inputErrorMessage: '请输入支付密码'
        // }).then(({value}) => {
        //   this.form.payPassword = value
        //   return network.postData(path, this.form).then(response => {
        //     this.$message({
        //       message: response,
        //       type: 'success'
        //     })
        //     tool.setStorage('withdrawAgree', 1)
        //     this.submitButtonStat = false
        //     this.$router.go(-1)
        //   }).catch((error) => {
        //     this.submitButtonStat = false
        //     if( error.status === 424 ) {
        //         this.idCardDialogVisible = true
        //     }
        //   })
        // }).catch((response) => {
        //   this.submitButtonStat = false
        // })
      },
    }
  }
</script>

<style scoped>

</style>
