<template>
  <div class="pay-pop-box">
    <div class="content-box" v-if="!isShowQrCode">
      <i class="el-icon-close" @click="$emit('close')"></i>
      <div class="tips-cen">
        <div class="name">活动名称：</div>
        <div class="js">{{ train.title }}</div>
      </div>
      <div class="tips-cen mar-t-20">
        <div class="name">费&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用：</div>
        <div class="money">{{ train.price }}<span>元</span></div>
      </div>
      <div class="tips-top">
        <div class="name">支付方式：</div>
        <div class="pay-method">
          <div
            v-for="item in payMethodList"
            :key="item.value"
            :class="{ li: true, active: payMethod == item.value }"
            @click="payMethod = item.value">
            <div class="select-icon"></div>
            <div class="icon"></div>
            <div class="pay-text">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="pay-btn" @click="createOrder">去支付</div>
      <div class="tips-text">注：请核对报名表信息，支付后将不能修改报名信息。</div>
    </div>
    <div class="content-box qr-code" v-if="isShowQrCode">
      <i class="el-icon-close" @click="closeClear"></i>
      <div class="title">{{ payMethod == 1 ? '微信' : '支付宝' }}支付</div>
      <div class="qr-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 * as api from '@/api/article'
import QrcodeVue from 'qrcode.vue'
export default {
  components: { QrcodeVue },
  props: {
    form: { type: Object },
    train: { type: Object },
  },
  data() {
    return {
      payMethod: 2,
      payMethodList: [
        { name: '支付宝支付', value: 2 },
        { name: '微信支付', value: 1 },
      ],
      isShowQrCode: false,
      payInfo: {},
      timer: null,
    }
  },
  methods: {
    async createOrder() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      await api
        .createOrder({
          pay_type: this.payMethod,
          shop_id: this.train.shop_id,
          spu_id: this.train.spu_id,
          sku_id: this.train.sku_id,
          form_id: this.form.id,
        })
        .then((res) => {
          if (res.code === 200) {
            this.payInfo = res.data
            this.isShowQrCode = true
            clearInterval(this.timer)
            this.timer = setInterval(() => {
              this.checkPay(res.data.pay_order_id, res.data.order_no)
            }, 2000)
            loading.close()
          } else {
            this.$message.error(res.msg)
            loading.close()
          }
        })
    },
    async checkPay(id, order_no) {
      const { code, data } = await api.checkPay(id)
      if (code === 0) {
        const [order = {}] = data
        if (order.status === 1) {
          this.$message({ message: '支付成功', type: 'success' })
          await this.payEnd(order_no)
          this.$emit('success')
          clearInterval(this.timer)
        } else if (order.status !== 0) {
          clearInterval(this.timer)
        }
      }
    },
    closeClear() {
      this.isShowQrCode = false
      this.$emit('close')
      clearInterval(this.timer)
    },
    async payEnd(orderNo) {
      await api.payEnd({ order_no: orderNo, form_id: this.form.id })
    },
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
}
</script>
<style lang="scss" scoped>
.pay-pop-box {
  width: 100%;
  height: 100%;
  .content-box {
    &.qr-code {
      padding: 21px 21px 88px;
      .title {
        font-size: 18px;
        color: #333333;
        line-height: 25px;
      }
      .qr-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%;
    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%;
            }
          }
          &: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%;
            }
          }
          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>
