<template>
	<view class="components-qrCode-content">
    <uni-popup ref="qrCodePopup" type="center" :is-mask-click="false" :mask-click="false">
      <view class="qr-code-content">
        <image class="image" :src="qr_code"></image>
        <view class="close-qr-code" @click="qrCodeClose()">关闭</view>
      </view>
    </uni-popup>
	</view>
</template>

<script>

import {getQrCodeLink} from "@/api/api";

export default {
  props: {
    // 是否显示
    isShow: {
      type: Boolean,
      default: false
    },
    // 小程序码生成信息
    params: {
      type: Object,
      default() {
        return {};
      }
    },


  },
  components: {},
  data() {
    return {
      qr_code: '',
    };
  },
  watch: {
    isShow: {
      handler(newValue) {
        // console.log('状态变更',newValue)
        if(newValue) this.getQrCodeInfo();
        else this.$refs.qrCodePopup.close();
      },
      deep: true
    },
  },
  mounted() {},
  methods: {
    // 获取二维码信息
    getQrCodeInfo(){
      let _this = this;
      uni.showLoading({title: '处理中...', mask: true})
      getQrCodeLink(_this.params).then(res => {
        if (res.status == 200) {
          _this.qr_code = res.data.qr_code || '';
          _this.qrCodeShow();
        }
      }).catch(err => {
        this.$util.Tips({title: err});
      });
    },
    // 二维码弹框显示
    qrCodeShow(){
      this.$refs.qrCodePopup.open('center');
      uni.hideLoading();
    },
    // 二维码弹框关闭
    qrCodeClose(){
      this.$emit('close');
    },




  }
}
</script>

<style scoped lang="scss">
.components-qrCode-content{
  // 二维码弹框
  .qr-code-content{
    width: 80vw;
    .image{
      width: 80vw;
      height: 80vw;
    }
    .close-qr-code{
      position: fixed;
      top: 35rpx;
      right: 70rpx;
      color: #FFFFFF;
      border: 2rpx solid #FFFFFF;
      height: 40rpx;
      line-height: 36rpx;
      padding: 0 20rpx;
      border-radius: 50rpx;
    }
  }
}
</style>
