<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" type="normal" :title="'核销二维码'">
      <template v-slot:default>
        <div style="display: flex;justify-content: center;flex-wrap: wrap;">
          <img style="width: 150px;height: 150px;margin: 0 auto;display: inline-block;" :src="qrcode" alt="">
          <!-- <div style="width: 100%;text-align: center;margin-top: 20px;">
            <el-button
                    type="primary"
                    icon="el-icon-download"
                    class="btn-qr"
                    @click="downloadQR"
                    >下载二维码</el-button
                  >
          </div> -->

        </div>
      </template>

    </xy-dialog>
  </div>
</template>

<script>
import {show,save} from "@/api/activity"

export default {
  components:{
  },
  data() {
    return {
      isShow:false,
      id:'',
      qrcode:'',
      active_name:''
    }
  },
  created(){
  },
  methods: {
    async getDetail(){
      const res = await show({id:this.id})
      this.qrcode = res.qrcode
      this.active_name = res.active_name
    },
    downloadQR() {
      if (!this.qrcode) return;
      // 直接下载图片
      const link = document.createElement("a");
      link.href = this.qrImgUrl;
      const fileName =`${this.active_name}-签到二维码.png`
      link.download = fileName;
      link.target = "_blank";
      link.click();
      link.remove(); // 清理临时元素
    },
  },
  watch:{
    isShow(newVal){
      if(newVal){
        this.getDetail()
      }else{
        this.id = ''
        this.qrcode = ""
        this.active_name = ""
        this.$refs['dialog'].reset()
      }
    }
  }

}
</script>

<style scoped lang="scss">
.xy-table-item-label{
  width: 160px;
}
.img__delete{
  transform: scale(0.8,0.8);

  position: absolute;
  top: 4px;
  right: 4px;
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
::v-deep .el-upload--picture-card {
  font-size: 28px;
  color: #8c939d;
  width: 80px !important;
  height: 80px !important;
  line-height: 80px !important;
  text-align: center;
}
::v-deep .avatar-uploader-icon{
  font-size: 28px;
  color: #8c939d;
  width: 80px !important;
  height: 80px !important;
  line-height: 80px !important;
  text-align: center;
}
::v-deep .avatar {
  width: 80px !important;
  display: block;
  border-radius: 6px;
}

::v-deep .xy-table-item-label{
  width: 160px !important;
}

::v-deep .el-date-editor .el-range-separator{
  width: auto !important;
}

::v-deep .el-input-number .el-input__inner{
  text-align: left !important;
}
  .searchCompanys{
    display: flex;
    justify-content: space-between;
    margin-bottom:16px;
    .el-input{
      width:80%
    }
  }
</style>
