<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="card-header-title">
        <span class="blue-block blue-block-goods-title"></span>操作提现
      </div>

      <el-form ref="assetForm" :model="assetForm" size="small" :rules="rules" label-width="150px" class="ruleFormshop">
        <el-form-item label="当前余额：">
          {{ currentBalance }} 元
        </el-form-item>

        <el-form-item label="可提现金额：">
          {{ withdrawalBalance }} 元
        </el-form-item>

        <el-form-item label="提现中的金额：">
          {{ withdrawalProgress }} 元
        </el-form-item>

        <el-form-item label="提现至：" prop="bank_id">
          <el-select v-model="assetForm.bank_id" placeholder="选择到账银行卡" style="width:420px;">
            <el-option v-for="item in bankList" :key="item.id" :label="item.bank_name" :value="item.id"></el-option>
          </el-select>
          <span class="withdraw-tip">
            您还没有账户，<span>去添加>></span>
          </span>
        </el-form-item>

        <el-form-item label="提现金额：">
          <el-input v-model="withdrawalBalance" disabled placeholder="全部提现金额" style="width:420px;"/>
          <span class="withdraw-tip">
            不允许手动输入，提现金额必须为全部的可提现余额，
            手续费将从您的提现金额中扣除，以实际到账为准（开票以实际到账金额开具）
          </span>
        </el-form-item>

        <el-form-item label="支付密码：" prop="pay_pass">
          <el-input v-model="assetForm.pay_pass" type="password" placeholder="请输入提现密码" style="width:420px;"/>
          <span class="withdraw-tip">
            忘记支付密码？重新设定
          </span>
        </el-form-item>

        <el-form-item label="短信验证码：" prop="code" class="spe-code-con-item">
          <el-input v-model="assetForm.code" placeholder="验证码" style="width:420px;">
            <template slot="append">
              <span v-show="show" @click="getCheckCode">获取验证码</span>
              <span v-show="!show" class="count">{{count}} s</span>
            </template>
          </el-input>
        </el-form-item>

      </el-form>

      <div class="footer-btn">
        <el-button type="primary" @click="submitForm" :disabled="inSureCashOut" style="margin-right:20px;">确 定</el-button>
        <el-button @click="resetAssetForm">取 消</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
  // import {getSellerInfo, getBankcardList, addWithdrawlog, getCheckCode} from '@/api/module/withdrawlog'
  import { getMyAssetListData } from '@/api/module/bankcard'

  export default {
    name: "withdrawlog",
    data() {
      return {
        //倒计时
        show: true,
        inSureCashOut: false,
        count: '',
        timer: null,

        seller_id: 0,
        currentBalance: 0,
        withdrawalBalance: 0,
        withdrawalProgress: 0,
        bankList: [],
        assetForm: {
          bank_id: '',
          pay_pass: '',
          code: ''
        },
        // 表单校验
        rules: {
          bank_id: [{required: true, message: "请选择要提现的银行卡", trigger: "change"}],
          code: [{required: true, message: "短信验证码不能为空", trigger: "blur"}],
          pay_pass: [{required: true, message: "支付密码必须填写", trigger: "blur"}]
        },
      };
    },
    created() {
      /** 唯一 商家 id */
      this.seller_id = this.$store.state.user.sellerid;
      /** 我的资产 所有数据 */
      this.getMyAssetList()
    },
    methods: {
      /** 我的资产 所有数据 */
      getMyAssetList() {
        getMyAssetListData( {seller_id:this.seller_id} ).then(res=> {
          if(res.code == 1 && res.data) {
            // 账号资产
            if(res.data.account_info ) {
              this.withdrawalBalance = Number(res.data.account_info.new_balance) / 100;
              this.withdrawalProgress = Number(res.data.account_info.new_frozen_money) / 100;
              this.currentBalance = this.add(this.withdrawalBalance,this.withdrawalProgress);
            }
            // 账户管理
            if(res.data.bank_list) {
              this.bankList = res.data.bank_list;
            }
          }else {
            let msg = res.message ? res.message : '获取数据失败'
            this.$message({type:'error',message: msg});
          }
        });
      },

      // 自定义高精度浮点数运算
      // 加法
      add(arg1, arg2) {
        let r1, r2, m, result;
        try {
          //取小数位长度
          r1 = arg1.toString().split(".")[1].length;
          r2 = arg2.toString().split(".")[1].length;
        } catch (e) {
          r1 = 0;
          r2 = 0;
        }
        m = Math.pow(10, Math.max(r1, r2));		//计算因子
        result = (arg1 * m + arg2 * m) / m;
        result = result.toFixed(2);
        return result;
      },
      // 减法
      minus(arg1, arg2) {
        return this.add(arg1, -arg2);
      },
      //-----------

      //倒计时
      getCode() {
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
      },
      /** 获取 短信验证码 */
      getCheckCode() {
        let numRegExp = /^[0-9]+(.[0-9]{2})?$/;

        if(this.assetForm.bank_id === '') {
          this.$refs.assetForm.validateField("bank_id");
          return;
        }

        if (this.seller_id <= 0) {
          this.msgError("商户信息错误");
          return;
        }

        // 倒计时效果
        this.getCode()

        getCheckCode({seller_id: this.seller_id}).then(response => {
          if (response.code == 0) {
            this.msgSuccess(response.msg);
          }
        });

      },

      // 暂时 无用
      onInputBlur(event) {
        let fee = 0.006;
        this.form.amount = event.target.value;
        let numRegExp = /^[0-9]+(.[0-9]{2})?$/;
        let numberMoney = Number(this.form.amount);
        //debugger
        let numberCash = Number(this.drawableCash);
        if(this.form.amount !== '') {
          if(!numRegExp.test(this.form.amount)) {
            this.$message({ type: 'warning',message: '提现金额只能输入大于 0 的数字'});
            return;
          }

          if (Number(this.form.amount) > Number(this.drawableCash)) {
            this.$message({type: 'warning',message:'提现金额不足！'});
            return;
          }

          if (Number(this.form.amount) < 100) {
            this.$message({type: 'warning',message:'提现金额需大于或者等于 100'});
            return;
          }
          this.newFee = (this.form.amount * fee + 1).toFixed(2);
        }
      },

      // 表单重置
      resetAssetForm() {
        this.$refs['assetForm'].resetFields();
      },

      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            let numberMoney = Number(this.form.amount);
            let numberCash = Number(this.drawableCash);
            let numberFee = Number(this.newFee);

            // 提现金额 + 手续费 <= 可提现金额
            // add   minus
            // 提现金额 + 手续费
            let feeAddAmount = this.add(numberFee,numberMoney);
            let isabled = Number(this.minus( numberCash, feeAddAmount) );

            this.form.seller_id = this.seller_id;
            // 再次校验 提现信息
            if(!this.form.seller_id) {
              this.$message({type: 'error',message: '商户信息有误！'});
              return;
            }
            if(numberMoney < 100 ) {
              this.$message({type: 'error',message: '提现金额不能小于100'});
              return;
            }
            if( (numberMoney > numberCash) ) {
              this.$message({type: 'error',message: '提现金额不足！'});
              return;
            }

            if( isabled < 0 ) {
              this.$message({type: 'error',message: '本次操作提现后，【当前余额】不足以支付本次提现的手续费用，请您重新输入提现金额'});
              return;
            }

            this.form.amount = Number(this.form.amount);

            // console.log(this.newFee);
            // console.log(feeAddAmount,isabled);
            //
            // return;
            addWithdrawlog(this.form).then(response => {
              if (response.code === 1) {
                this.msgSuccess(response.message);
                // this.getList();
              }
              else {
                this.$message({type: 'error',message: response.message});
              }
            });
          }
        });
      },
    } //methods结束
  };
</script>
<style scoped>
  /deep/ .el-card__body{
    height: 100%;
    overflow: hidden;
  }

  .ruleFormshop {
    height: calc(100% - 110px);
    padding: 20px;
    overflow-y: auto;
  }

  .ruleFormshop .el-form-item {
    margin-bottom: 26px;
  }

  /deep/ .spe-code-con-item .el-input-group__append {
    cursor: pointer;
  }

  .card-header-title {
    height: 45px;
    line-height: 35px;
    font-size: 18px;
    color: #000;
    font-weight: bold;
    border-bottom: 1px solid #eee;
  }

  .blue-block {
    display: inline-block;
    width: 5px;
    height: 24px;
    background: #3A84FF;
    margin: 0 9px 0 0;
    border-radius: 2px;
    vertical-align: middle;
  }

  .footer-btn {
    width: calc(100% + 40px);
    margin-left: -20px;
    padding-top: 20px;
    height:65px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-shadow: 0 -8px 9px 1px rgba(51, 51, 51, 0.06);
  }

  .withdraw-tip {
    font-size:12px;
    color: #999;
    margin: 5px;
    line-height: 26px;
  }
</style>
