<template>
  <el-dialog title="商品链接" :visible.sync="modalData.show" width="450px">
    <div class="dialog-body">
      <div class="wechat-url" style="margin-bottom:30px;">
        <p style="font-weight: 600;margin-bottom:15px">
          页面链接
        </p>
        <div style="display:flex;align-items: center">
          <el-input
            type="textarea"
            :rows="2"
            v-model="modalData.pageUrl"
            disabled
          />
          <a
            href="javaScript:void(0)"
            style="width:40px;margin-left:20px"
            v-clipboard:copy="modalData.pageUrl"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          >复制</a>
        </div>
      </div>
      <div class="wechat-img-box" v-loading="modalData.loading">
        <p style="font-weight: 600;margin-bottom:15px">
          小程序二维码
        </p>
        <img :src="modalData.imgUrl" class="wechat-img" style="width:140px;height:140px;">
      </div>
      <div class="wechat-force" style="margin-bottom:0">
        <p>温馨提示：通过二维码兑换，仅校验会员适用等级</p>
      </div>
      <div class="wechat-force">
        <el-button type="primary" @click="force">
          重新生成
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
// import request from '../../../service/request.js';
import request from '../service/request';
export default {
  props: {
    modalData: {
      type: Object,
    },
    integralMallProId: {
      type: String,
      default () {
        return '';
      },
    },
    saleType: {
      type: String,
      default () {
        return '';
      },
    },
  },
  data () {
    return {
      // loading:true,
      forceIntegralMallProId: '',
      forceType: '',
    };
  },
  watch: {
    integralMallProId: function (value) {
      this.forceIntegralMallProId = value;
    },
    saleType: function (value) {
      this.forceType = value;
    },
  },
  methods: {
    onCopy (e) {
      this.$message.success('复制成功');
    },
    onError (e) {
      this.$message.error('复制失败');
    },
    force () {
      const params = {
        integralMallProId: this.forceIntegralMallProId,
        type: this.forceType,
        isForce: '1',
      };
      this.modalData.show = true;
      request.get('/api-integral-mall/get-qRCode', { params }).then(res => {
        if (res.data.errorCode === 0) {
          this.modalData.show = true;
          this.modalData.pageUrl = res.data.result.page;
          this.modalData.imgUrl = res.data.result.url;
          this.modalData.loading = false;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
  },
};
</script>
<style scoped>
.wechat-img-box {
  margin: 0 auto;
  text-align: center;
}
.wechat-img {
  width: 200px;
  height: 200px;
}
.wechat-force {
  margin: 30px auto 50px;
  text-align: center;
}
/* .force-button {
  background: #1890ff;
  color: #fff;
  border-color: #1890ff;
  font-size: 14px;
  line-height: 14px;
  padding: 8px 15px;
} */
</style>
