<template>
  <div>
    <el-col :span="24">
      <div class="balance">
        <div class="balance_name">账户余额（元）</div>
        <div class="balance_price">{{amount}}</div>
        <div class="balance_line"></div>
        <div class="balance_sign"><img src="../../../static/image/1.png" alt="" srcset=""> 为了您能高效发单，请保持账户资金充足</div>
      </div>
    </el-col>
    <el-col :span="18"  v-if="memberType !==3">
      <div class="recharge_title">充值金额</div>
      <div class="recharge_list">
        <div @click="chooseMoney(v,i)" :class="curIdx === i ? 'item item_ac' : 'item'" v-for="(v,i) in moneyList" :key="i">{{v.value}}元</div>
        <el-input type='num' @focus="open" v-model="value" clearable :class="curIdx === -1 ? 'item item_ac' : 'item'" placeholder="其他金额(最多2位小数)" />
      </div>
      <div class="recharge_title">支付方式</div>
      <div class="recharge_list">
        <div @click="paymentType = 1" :class="paymentType === 1 ? 'item item_ac' : 'item'"><img src="../../../static/image/alipay.png" alt="" srcset=""> 支付宝支付</div>
        <div @click="paymentType = 2" :class="paymentType === 2 ? 'item item_ac' : 'item'"><img src="../../../static/image/we-chat.png" alt="" srcset="">微信支付</div>
      </div>
      <div>
        <el-checkbox v-model="checked">我已阅读并同意 <span @click="getExplain" class="agreement">《充值协议》</span> </el-checkbox>
      </div>
      <el-button @click="recharge" class="recharge_color">去充值</el-button>
      <!-- <div class="agreement">充值即同意 <span @click="getExplain">《充值协议》</span> </div> -->
    </el-col>
    <!-- 支付二维码 -->
    <qr-code v-if="showCode" @paySuccess="paySuccess" @refreshCode="recharge" @closeCode="showCode = false" ref="code" :payAmount="payAmount" :link="link" :paymentType="paymentType" :orderSn="orderSn"></qr-code>
    <!-- 充值协议 -->
    <el-dialog :visible.sync="centerDialogVisible" width="800px" center>
      <div v-html="text"></div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getWallet,
  getRechargeList,
  recharge,
  getPayResult,
  getExplain,
} from "../../api/amount.js";
import qrCode from "../../common/qrCode.vue";
export default {
  props: {
    products: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      amount: 0,
      moneyList: [],
      curIdx: 0,
      paymentType: 1,
      money: 0,
      id: "",
      link: "",
      timer: null,
      orderSn: "",
      showCode: false,
      payAmount: 0,
      centerDialogVisible: false,
      text: "",
      value: "",
      checked: false,
      memberType: this.$store.state.userInfo.memberType,
    };
  },
  watch: {
    "$store.state.userInfo": {
      handler(newVal, oldVal) {
        this.memberType = newVal.memberType;
      },
      deep: true,
    },
  },
  components: {
    qrCode,
  },
  created() {
    this.getWallet();
    this.getRechargeList();
  },
  methods: {
    paySuccess() {
      this.showCode = false;
      this.getWallet();
    },
    getExplain() {
      getExplain({ type: 6 }).then((res) => {
        console.log("object", res);
        if (res.code === 200) {
          this.text = res.data;
          this.centerDialogVisible = true;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    getRechargeList() {
      getRechargeList().then((res) => {
        if (res.code === 200) {
          this.moneyList = res.data;
          this.money = this.moneyList[this.curIdx].value;
          this.id = this.moneyList[this.curIdx].id;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    getWallet() {
      getWallet().then((res) => {
        if (res.code === 200) {
          this.amount = res.data.amount;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    chooseMoney(v, i) {
      this.value = "";
      this.curIdx = i;
      this.money = v.value;
      this.id = v.id;
    },
    open() {
      this.curIdx = -1;
      this.money = ''
      this.id = ''
    },
    recharge() {
      let params = {
        money: this.value ? this.value : this.money,
        paymentType: this.paymentType,
        createType: 1,
        id: this.id,
      };
      if (!this.paymentType) {
        return this.$message({
          type: "info",
          message: "请先选择支付方式再充值！",
        });
      }
      let reg = new RegExp(/^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/);
      if (!reg.test(Number(params.money))) {
        return this.$message({
          type: "info",
          message: "请先输入正确充值金额再充值(最多2位小数)！",
        });
      }
      if (!this.checked) {
        return this.$message({
          type: "info",
          message: "请先勾选同意后再充值！",
        });
      }

      recharge(params).then((res) => {
        if (res.code === 200) {
          this.link = res.data.data;
          this.orderSn = res.data.orderSn;
          this.payAmount = res.data.amount;
          this.showCode = true;
          setInterval(() => {
            // this.getPayResult();
          }, 2000);
        } else {
          this.$message({
            type: "info",
            message: res.msg,
          });
        }
      });
    },
    getPayResult() {
      let params = {
        orderSn: this.orderSn,
        payType: this.paymentType === 1 ? this.paymentType : 0,
      };
      getPayResult(params).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: res.data === "success" ? "success" : "error",
            message: res.data === "success" ? "支付成功！" : "支付失败！",
          });
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.balance {
  width: 100%;
  height: 200px;
  border-radius: 5px;
  background: linear-gradient(to right, #5664e2, #13b2c1);
  padding-left: 42px;
  box-sizing: border-box;
  margin-bottom: 42px;
  .balance_name {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    padding-top: 36px;
  }
  .balance_price {
    font-size: 60px;
    font-weight: bold;
    color: #ffffff;
  }
  .balance_line {
    width: 100%;
    height: 1px;
    background: rgba($color: #ffffff, $alpha: 0.1);
    margin-top: 10px;
  }
  .balance_sign {
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    opacity: 0.6;
    line-height: 60px;
    display: flex;
    align-items: center;
    img {
      width: 13px;
      height: 13px;
      margin-right: 4px;
    }
  }
}
.recharge_title {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}
.recharge_color {
  background: #fc7200;
  color: #fff;
}
.agreement {
  font-size: 12px;
  font-weight: 400;
  color: #fc7200;
  margin-top: 10px;
  span {
    color: #3662a1;
    cursor: pointer;
  }
}
.recharge_list /deep/ .el-input__inner {
  border: none !important;
  text-align: center;
}
.recharge_list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 24px;
  margin-bottom: 40px;
  .item {
    width: 210px;
    height: 67px;
    border: 1px solid #e3e3e3;
    color: #222222;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    margin: 0 15px 15px 0;
    cursor: pointer;
    img {
      width: 24px;
      height: 24px;
      margin-right: 6px;
    }
  }
  .item_ac {
    border-color: #fc7200;
    color: #fc7200;
  }
}
</style>
