<template>

  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商户提现</span>
      </div>
      <el-row>
        <el-col :span="24" class="card-box">
          <!-- <span>商户信息</span> -->
          <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="ruleFormshop">
            <el-form-item label="当前余额">
              {{sellerinfo.Balance}}元
            </el-form-item>
            <el-form-item label="提现中的金额">
              {{sellerinfo.FrozenMoney}}元
            </el-form-item>
            <el-form-item label="可提现金额">
              {{drawableCash}}元
              <!--drawableCash-->
            </el-form-item>
            <el-form-item label="手续费">
              当前手续费为{{newFee}}元
            </el-form-item>
            <el-form-item label="银行卡" prop="bankId">
              <el-select v-model="form.bankId" placeholder="选择到账银行卡" style="width:260px;">
                <el-option v-for="item in banklist" :key="item.Id"
                           :label="item.BankAccountName?item.BankAccountName:item.ZfbAccountName"
                           :value="item.Id?item.Id:item.Id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="提现金额" prop="money">
              <el-input v-model="form.money" placeholder="提现金额大于等于100"
                        style="width:260px;"/>
            </el-form-item>
            <el-form-item label="短信验证码" prop="verifycode">
              <el-input v-model="form.verifycode" placeholder="验证码" style="width:260px;">
                <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-item label="支付密码" prop="pwd">
              <el-input v-model="form.pwd" type="password" placeholder="请输入提现密码" style="width:260px;"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm" :disabled="inSureCashOut">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
  import {getSellerInfo, getBankcardList, addWithdrawlog, getCheckCode} from '@/api/module/withdrawlog'

  export default {
    name: "withdrawlog",
    data() {
      return {
        //倒计时
        show: true,
        inSureCashOut: false,
        count: '',
        timer: null,
        //提现金额
        money: 0,
        // 遮罩层
        loading: true,
        // 选中数组
        sellerId: 0,
        sellerinfo: {},
        banklist: [],
        //手续费
        newFee: 0,
        // 可提现金额
        drawableCash: 0,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: true,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          bankId: [{required: true, message: "请选择要提现的银行卡", trigger: "change"}],
          money: [{required: true, message: "提现金额不能为空", trigger: "blur"}],
          verifycode: [{required: true, message: "短信验证码不能为空", trigger: "blur"}],
          pwd: [{required: true, message: "支付密码必须填写", trigger: "blur"}]
        }
      };
    },
    watch: {
      // drawableCash: function() {
      //   this.drawableCash = this.drawableCash.toFixed(2);
      // }
    },
    created() {
      this.sellerId = this.$store.state.user.sellerid;
      this.getList();
    },
    methods: {
      //-----------
      // 自定义高精度浮点数运算
      add(arg1, arg2) {
        var r1, r2, m;
        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));		//计算因子

        return (arg1 * m + arg2 * m) / m;
      },
      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() {
        if (this.money <= 0) {
          this.msgError("填写提现金额");
          return false
        } else if (this.money < 100) {
          this.msgError("提现金额必须大于等于100");
          return false
        }
        // 倒计时
        this.getCode()
        //发送验证码
        if (this.sellerId <= 0) {
          this.msgError("商户信息错误");
          return false
        }
        getCheckCode({sellerId: this.sellerId}).then(response => {
          if (response.code == 0) {
            this.msgSuccess(response.msg);
          }
        });

      },

      // onInputBlur(event) {
      //   let fee = 0.006;
      //   this.money = event.target.value;
      //   let numRegExp = /^[0-9]+(.[0-9]{2})?$/;
      //   let yue = this.drawableCash;
      //   if (this.money > yue) {
      //     this.$message({type: 'warning',message:'提现金额不足'});
      //     return false
      //   }
      //   if(!numRegExp.test(this.money)) {
      //     this.$message({ type: 'warning',message: '提现金额只能输入大于 0 的数字'});
      //     return;
      //   }else {
      //     this.newFee = (this.money * fee + 1).toFixed(2);
      //   }
      // },
      //获取商户的信息
      getSellerInfo() {
        const sellerid = this.sellerId;
        getSellerInfo({sellerId: sellerid}).then(response => {
          this.sellerinfo = response.data;
          this.sellerinfo.Balance = response.data.Balance / 100;
          this.sellerinfo.FrozenMoney = response.data.FrozenMoney / 100;
          this.drawableCash = this.minus(this.sellerinfo.Balance, this.sellerinfo.FrozenMoney);
        });
      },
      //获取商户的银行卡列表
      getBankcardList() {
        getBankcardList({sellerId: this.sellerId}).then(response => {
          this.banklist = response.data.list
        });
      },

      /** 查询商户提现列表 */
      getList() {
        this.getSellerInfo()
        this.getBankcardList()
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {};
        this.resetForm("form");
      },

      /** 提交按钮 */
      submitForm() {
        // inSureCashOut 为true的时候，则不能不能不能点击提现按钮，操作提现，false的时候，才能点击操作提现
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.sellerId = this.sellerId;
            // 再次校验 提现信息
            if(!this.form.sellerId) {
              this.$message({type: 'error',message: '商户信息有误！'});
              return;
            }
            if(this.form.money < 100 ) {
              this.$message({type: 'error',message: '提现金额不能小于100'});
              return;
            }
            if(this.form.money > this.drawableCash ) {
              this.$message({type: 'error',message: '可提现金额不足哦！'});
              return;
            }
            addWithdrawlog(this.form).then(response => {
              if (response.code == 0) {
                this.msgSuccess(response.msg);
                this.getList();
              } else {
                this.$message({type: 'error',message: response.msg});
              }
            });
          }
        });
      },
    } //methods结束
  };
</script>
<style scoped>
  .app-container {
    height: 100%;
  }

  .box-card {
    height: 100%;
  }

  .box-card /deep/ .el-card__body {
    height: 100%;
    overflow: hidden;
  }

  .el-table {
    height: calc(100% - 120px);
  }

  .ruleFormshop {
    width: 500px;
    margin: 0 0 0 180px;
  }
</style>
