<template>
<section class="dm-wrap">
  <div class="step-wrap">
    <div class="step">
      <el-steps class="step-inner" :active="step" finish-status="success">
        <el-step title="充值"></el-step>
        <el-step title="支付"></el-step>
        <el-step title="状态"></el-step>
      </el-steps>
     </div>
   </div>
  <article v-if="step === 0">
    <!-- <el-card class="box-card mb20">
      <div slot="header" class="clearfix">
        <span>温馨提示</span>
      </div>
      <p class="fz12 gray line-height2">1、我们提供在线充值服务（目前仅支持微信）</p>
      <p class="fz12 gray line-height2">2、请尽量保障账户余额大于您日常使用的额度，避免因余额不足导致业务中断</p>
      <p class="fz12 gray line-height2">3、若未能及时充值或其他问题，请联系客户经理或客服人员</p>
      <p class="fz12 gray line-height2">4、各项服务单价：短信验证码{{allUnitFee.smsfee}}元/条，语音验证码{{allUnitFee.voiceIfee}}元/条，双向呼叫{{allUnitFee.callfee}}元/分钟</p>
    </el-card> -->
    <div class="step0-box">
      <div>
        <span class="fz14 w80 inline-block text-right">余额</span>
        <span class="inline-block ml10">￥{{(balance/100).toFixed(2)}}</span>
      </div>
      <div class="pt20">
        <span class="fz14 w80 inline-block text-right">充值金额</span>
        <el-input-number controls-position="right" class="w200 ml10" v-model="count" :precision="0" :min="0" placeholder="填写大于100的整数" @blur="checkCount"></el-input-number>
      </div>
      <div class="pt20">
        <span class="fz14 w80 inline-block text-right">充值方式</span>
        <img width="120" height="26" class="wechat-icon inline-block ml10 vertical-middle border1 border-radius__default" src="../../assets/img/bank_weui.png">
      </div>
       <div class="wechat-btn pt20">
         <el-button type="primary" @click="toStep1" :disabled="disabled">下一步</el-button>
      </div>
    </div>

  </article>
  <article v-if="step === 1">
    <div class="mt20 mb20">
      <div class="clearfix qrcode-wrap">
        <div class="fz16 pt20 pb20">付款金额：<span class="fz20">￥{{parseInt(count).toFixed(2)}}</span></div>
        <div class="text-center left">
          <div class="inline-block" v-loading="loading">
            <vue-qr class="qrcode" :logoSrc="wexinLogo" :text="qcText" :size="216" :margin="0" :logoMargin="10"></vue-qr>
            <div class="qrcode-tips">
              <i class="iconfont icon-saomiao place-font-color"></i>
              <span class="fz14">打开手机微信扫一扫继续付款</span>
            </div>
          </div>
          <p class="blue pt10" @click="rechargeStep2">已支付但没反应？试试刷新页面</p>
        </div>
        <!-- <div class="fr width50 text-center">
          <img src="../../assets/img/recharge_phone.png" alt="" srcset="">
          <p>打开微信，选择发现，点击扫一扫，扫描左侧二维码完成支付</p>
        </div> -->
        <el-button  @click="step = 0">上一步</el-button>
      </div>
    </div>
  </article>
  <article v-if="step === 2">
    <div class="success-wrap">
    <i class="success-color el-icon-success success-icon"></i>
    <p>支付成功！</p>
    <el-button  @click="$router.go(-1)">手动返回</el-button>
    <span class="fz13 pl20">5S后自动返回</span>
    </div>
  </article>
</section>
</template>
<script>
import {rechargeStep0,rechargeStep1,rechargeStep2} from '@/service/api/rechargeApi.js'
import VueQr from 'vue-qr'

let timer = null;
let countDown = null;
export default {
  name:'recharge-do',
  data(){
    return {
      loading:false,
      step:0,
      balance:0,
      transactionCode:'',
      allUnitFee:{},
      count:100,
      disabled:true,
      countDown:5,
      wexinLogo:require('../../assets/img/qclogo.png'),
      qcText:''
    }
  },
  created(){
    this.rechargeStep0();
    this.$store.commit('mutations_breadcrumb',[{name:'企业管理',path:''},{name:'计费中心',path:'/recharge'},{name:'充值',path:''}]);
  },
  components:{
    VueQr
  },
  destroyed() {
    clearInterval(timer);
    clearInterval(countDown);
  },
  watch: {
    step(val) {
      if (val !== 1) {
        clearInterval(timer);
      }
    },
    count:{
      handler(val) {
        if (parseInt(val) >=100) {
          this.disabled = false;
        } else {
          this.disabled = true;
        }
      },
      immediate:true
    }
  },
  methods:{
    checkCount(){
      if (this.count<100 || this.count%1 !== 0) {
        this.$tips({type:"warning",message:'金额必须为大于100的整数'});
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
    toStep1() {
      this.checkCount();
      this.step = 1;
      this.rechargeStep1();
    },

    //第一步请求
    async rechargeStep0() {
      try {
        let res = await rechargeStep0();
        if (res.errorCode === 0) {
          this.balance = res.result.balance;
          this.transactionCode = res.result.transactionCode;
          this.allUnitFee = res.result.allUnitFee;
        } else {
          this.$tips({type:"error",message:'初始化失败'});
        }
      } catch (err) {

      }
    },
    async rechargeStep1() {
      this.loading = true;
      try {
        let res = await rechargeStep1({money:this.count,transactionCode:this.transactionCode});
        if (res.errorCode === 0 && res.result.url) {
          this.qcText = res.result.url;
          this.config = {
            value: 'https://www.baidu.com',
            imagePath: '../../assets/img/logo.jpg',
            filter: 'color'
          };
            timer = setInterval(_ => {
              this.rechargeStep2();
            },5000)
        } else {
          this.$tips({type:"warning",message:'二维码异常，请稍后再试'});
        }
      } catch (err) {

      }
      this.loading = false;
    },
    async rechargeStep2() {
      try {
        let res = await rechargeStep2({transactionCode:this.transactionCode});
        if (res.errorCode === 0 && res.result) {
          clearInterval(timer);
          this.step = 2;
          countDown = setInterval(_ => {
            this.countDown --;
            if (this.countDown === 0) {
              this.$router.go(-1);
            }
          },1000)
        }
      } catch (err) {

      }
    },
  }
}
</script>

<style lang="scss" scoped>
.step-wrap{
    width: calc(100% + 40px);
    height: 100px;
    border-bottom: 1px solid #DCDFE6;
    margin-left: -20px;
    margin-top: 20px;
    .step{
      width: 100%;
    .step-inner{
      width: 60%;
      margin: 0 auto;
      }
    }
}
.step0-box{
  margin: 50px auto 50px;
  width: 300px;

}
.qrcode-wrap{
  text-align: center;
  .left{
    padding-bottom: 20px;
    .qrcode{
      width: 216px;
      height: 216px;
      padding: 20px;
      border: 1px solid #DDD;
      /deep/ img {
        width: 100%;
        height: 100%;
      }
    }
    .qrcode-tips{
      width: 216px;
      // background: #333;
      padding: 20px;
      border: 1px solid #DDD;
      border-top:none;
      .iconfont{
        font-size: 30px;
        vertical-align: middle;
      }
      span{
        text-align: left;
        color: #333;
        line-height: 1;
        position: relative;
        font-size: 14px;
        width: 134px;
        display: inline-block;
        height: auto;
        vertical-align: middle;
        position: relative;
        top: 0px;
        left:10px;
      }

    }
  }
}
.success-wrap{
  margin-top: 100px;
  text-align: center;
  p{
    margin: 20px auto 40px;
  }
}
.success-icon{
  font-size: 57px;
}
.wechat-icon {
  padding: 6px 39px;
}
.wechat-btn {
    position: relative;
    left: 92px;
}
</style>

