<template>
  <div >
    <Modal id="extension_pay_modal" v-model="showMd" :title="title" :footer-hide="true" class-name="vertical-center-modal" :width="440">
      <div class="extension_pay">
        <div class="payPrice">支付：<span>{{value.discounts}}</span>元</div>
        <div class="payQrcode">
          <div class="payQrcodeImage" v-show="way==1">
            <qrcode-vue :value="alipay" :size="size" level="H" v-if="alipay"></qrcode-vue>
          </div>
          <div class="payQrcodeImage" v-show="way==2">
            <qrcode-vue :value="wechat" :size="size" level="H" v-if="wechat"></qrcode-vue>
          </div>
        </div>
        <div class="payWay">
          <label :class="{payWayBtn:true,active:way==1}">
            <input type="radio" :value="1" v-model="way" class="wayBtnHide" />
            <i class="wayBtnIcon alipay"></i>
            <span class="wayBtnText">支付宝支付</span>
          </label>
          <label :class="{payWayBtn:true,active:way==2}">
            <input type="radio" :value="2" v-model="way" class="wayBtnHide" />
            <i class="wayBtnIcon wechat"></i>
            <span class="wayBtnText">微信支付</span>
          </label>
        </div>
        <div class="payNotice">活动期间，指定模板，不限次数，永久使用！</div>
        <div class="payCopyright">本次活动所有解释权最终归本公司所有</div>
      </div>
    </Modal>
  </div>
</template>
<script>
import QrcodeVue from 'qrcode.vue'
export default {
  name: "extension_pay",
  components: { QrcodeVue },
  props: {
    show: Boolean,
    value: Object,
  },
  data() {
    return {
      title: '',
      way: 1,
      size: 192,
      alipay: '',
      alipayTime: '',
      wechat: '',
      wechatTime: '',
    };
  },
  computed: {
    showMd: {
      get(n) {
        if(this.show){
          this.getData()
        }
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      }
    }
  },
  watch: {
    way (n) {
      if (this.alipay && this.wechat) {
        if (n == 1 && (this.alipayTime - (new Date()).getTime())/1000 > 1700) {
          this.getData()
        } else if (n == 2 && (this.wechatTime - (new Date()).getTime())/1000 > 1700) {
          this.getData()
        }
      } else
        this.getData()
    }
  },
  methods: {
    getData() {
      this.$api.applyFeature({way: this.way, id: this.value.id})
        .then(response => {
          if (response.code == 200) {
            if(way==1) {
              this.alipay = response.data;
              this.alipayTime = (new Date()).getTime()
            } else {
              this.wechat = response.data;
              this.wechatTime = (new Date()).getTime()
            }
          } else {
            this.$Message.error(response.msg)
          }
        })
    }
  },
  created() {
    
  },
};
</script>
<style scoped>
.extension_pay {
  padding: 10px 15px 20px;
}
.payPrice {
  font-size: 16px;
  color: #333;
  padding: 22px 0;
  text-align: center;
}
.payPrice span {
  font-size: 24px;
  color: #ED3C3C;
}
.payQrcode {
  padding: 14px;
}
.payQrcodeImage {
  width: 192px;
  height: 192px;
  background: #EBEBEB;
}
.payWay {
  margin-top: 31px;
  display: flex;
  justify-content: center;
}
.payWayBtn {
  width: 100px;
  height: 28px;
  border: 1px solid #999999;
  border-radius: 4px;
  font-size: 12px;
  color: #999;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  margin: 0 7px;
}
.wayBtnHide {
  opacity: 0;
  position: absolute;
}
.payWayBtn.active {
  color: #3B82FF;
  border-color: #3B82FF;
}
.wayBtnText {
  padding-left: 4px;
}
.payNotice {
  margin-top: 27px;
  font-size: 16px;
  color: #333;
  text-align: center;
}
.payCopyright {
  margin-top: 6px;
  font-size: 14px;
  color: #999;
  text-align: center;
}
</style>


