<template>
  <div class="pay-pop-box">
    <div class="content-box" v-if="!isCodeShow">
      <i class="el-icon-close" @click="$emit('closePayPop')"></i>
      <div class="tips-cen">
        <div class="name">活动名称：</div>
        <div class="js">2021年第{{periods}}期“1+x金融产品数字化营销职业技能等级证书(中级)”师资培训费</div>
      </div>
      <div class="tips-cen mar-t-20">
        <div class="name">费&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用：</div>
        <div class="money">2000<span>元</span></div>
      </div>
      <div class="tips-top">
        <div class="name">支付方式：</div>
        <div class="pay-method">
          <div :class="payMethod == 2 ? 'li active' : 'li'" @click="tabPayMethod(2)">
            <div class="select-icon"></div>
            <div class="icon"></div>
            <div class="pay-text">支付宝支付</div>
          </div>
          <div :class="payMethod == 1 ? 'li active' : 'li'" @click="tabPayMethod(1)">
            <div class="select-icon"></div>
            <div class="icon"></div>
            <div class="pay-text">微信支付</div>
          </div>
        </div>
      </div>
      <div class="pay-btn" @click="getOrder">去支付</div>
      <div class="tips-text">注：请核对报名表信息，支付后将不能修改报名信息。</div>
    </div>
    <div class="content-box ewm-code" v-if="isCodeShow">
      <i class="el-icon-close" @click="closeClear"></i>
      <div class="title">{{ payMethod == 1 ? '微信支付' : '支付宝支付' }}</div>
      <div class="ewm-box">
        <div class="block">
          <qrcode-vue :value="payInfo.url" size="200"></qrcode-vue>
        </div>
        <div class="text">{{ payMethod == 1 ? '微信' : '支付宝' }}扫一扫支付</div>
      </div>
    </div>
  </div>
</template>
<script>
import action from '@action'
import QrcodeVue from 'qrcode.vue'
export default {
  components: {
    QrcodeVue
  },
  props: {
    formData: {
      type: Object
    },
    periods: {
      type: Number,
      default: '1'
    }
  },
  data() {
    return {
      payMethod: 2,
      isCodeShow: false,
      product_id: '6787934443077107712',
      payInfo: {},
      time: null
    }
  },
  methods: {
    tabPayMethod(n) {
      this.payMethod = n
    },
    getOrder() {
      const param = {
        pay_type: this.payMethod,
        product_id: this.product_id,
        form_id: this.formData.id && this.formData.id.toString()
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      action.articleAction.getOrder(param).then(res => {
        if (res.code === 200) {
          this.payInfo = res.data
          this.isCodeShow = true
          clearInterval(this.time)
          this.time = setInterval(() => {
            this.checkPay(res.data.order_no)
          }, 2000)
          loading.close()
        } else {
          this.$message.error(res.msg)
          loading.close()
        }
        // isCodeShow = true
      })
    },
    checkPay(id) {
      action.articleAction.checkPay(id).then(res => {
        if (res.code === 0) {
          if (res.order.status === 1) {
            this.$message({
              message: '支付成功',
              type: 'success'
            })
            this.payEnd(res.order.order_no)
            this.$emit('payStatus')
            clearInterval(this.time)
          } else if (res.order.status !== 0) {
            clearInterval(this.time)
          }
        }
        // isCodeShow = true
      })
    },
    closeClear() {
      this.isCodeShow = false
      this.$emit('closePayPop')
      // clearInterval()
    },
    payEnd(orderOn) {
      const param = {
        order_no: orderOn,
        form_id: this.formData.id.toString()
      }
      action.articleAction.payEnd(param).then(res => {
      })
    }
  },
  beforeDestroy() {
    // clearInterval(this.time)
  }
}
</script>
<style lang="scss" scoped>
.pay-pop-box{
  width: 100%;
  height: 100%;
  .content-box{
    &.ewm-code{
      padding: 21px 21px 88px;
      .title{
        font-size: 18px;
        color: #333333;
        line-height: 25px;
      }
      .ewm-box{
        width: 220px;
        margin: 43px auto 0;
        text-align: center;
        .block{
          height: 200px;
          padding: 10px;
          border: 1px solid #D0D0D0;
        }
        .text{
          font-size: 16px;
          color: #999999;
          line-height: 22px;
          margin-top: 6px;
        }
      }
    }
    padding: 51px 64px 82px;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    width: 735px;
    height: 426px;
    background: #FFFFFF;
    border-radius: 2px;
    .el-icon-close{
      color: #999999;
      position: absolute;
      top: 17px;
      right: 24px;
      font-size: 24px;
      cursor: pointer;
    }
    .tips-cen{
      display: flex;
      align-items: center;
      &.mar-t-20{
        margin-top: 20px;
      }
      .name{
        font-size: 16px;
        color: #333333;
        margin-right: 10px;
      }
      .js{
        width: 495px;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
      }
      .money{
        color: rgba(192, 21, 64, 1);
        font-size: 34px;
        span{
          color: rgba(51, 51, 51, 1);
          font-size: 20px;
        }
      }
    }
    .tips-top{
      display: flex;
      margin-top: 15px;
      .name{
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        margin-right: 10px;
      }
      .pay-method{
        .li{
          cursor: pointer;
          .select-icon{
            width: 16px;
            height: 16px;
            background: url(https://zws-imgs-pub.ezijing.com/static/public/0157a86b05bd8eff993c4b82433acc90.png);
            background-size: 100% 100%;
            margin-right: 13px;
          }
          &.active{
            .select-icon{
              background: url(https://zws-imgs-pub.ezijing.com/static/public/04aad91c8b16f98505ee11f13c13464d.png);
              background-size: 100% 100%;
            }
          }
          &:nth-child(1){
            .icon{
              width: 25px;
              height: 25px;
              background: url(https://zws-imgs-pub.ezijing.com/static/public/189526ea395b7a1a3b47ffea73d25b95.png);
              background-size: 100% 100%;
            }
            &.active{
              .icon{
                background: url(https://zws-imgs-pub.ezijing.com/static/public/189526ea395b7a1a3b47ffea73d25b95.png);
                background-size: 100% 100%;
              }
            }
          }
          &:nth-child(2){
            margin-top: 15px;
            .icon{
              width: 26px;
              height: 23px;
              background: url(https://zws-imgs-pub.ezijing.com/static/public/e7db788a3194460535d6543cc358a5f5.png);
              background-size: 100% 100%;
            }
            &.active{
              .icon{
                background: url(https://zws-imgs-pub.ezijing.com/static/public/e7db788a3194460535d6543cc358a5f5.png);
                background-size: 100% 100%;
              }
            }
          }
          display: flex;
          align-items: center;
          .icon{
            margin-right: 13px;
          }
          .text{
            font-size: 16px;
            color: #999999;
            line-height: 22px;
          }
        }
      }
    }
    .pay-btn{
      width: 120px;
      height: 38px;
      background: #C01540;
      border-radius: 2px;
      margin: 28px 0 0 91px;
      color: #fff;
      text-align: center;
      line-height: 38px;
      cursor: pointer;
    }
    .tips-text{
      font-size: 14px;
      color: #BF1A09;
      line-height: 20px;
      margin-top: 15px;
    }
  }
}
</style>
