<template>
  <div class="twoDimensionalCode">
    <!--二维码页面 -->
    <a-modal
      :visible="codevisible"
      :footer="null"
      :closable="closableQR"
      wrapClassName="codeModal"
      style="margin-top: 400px"
      :zIndex="9999"
      @cancel="qr_exit"
    >
      <div id="qrcode" class="QR">
        <div class="qr_header"></div>
        <div class="qr_main">
          <div class="qrm_header">
            <span style="title">{{
              codeInfo.title ? codeInfo.title : ""
            }}</span>
            <div class="close_exit" @click="closeCodeModal"></div>
          </div>
          <div class="downloadCode" style="">
            <div class="qrm_body">
              <div class="codename">
                {{ codeInfo.name ? codeInfo.name : "" }}
              </div>
              <qrcode-vue
                :value="codeInfo.url.startsWith('/')?(domain+codeInfo.url):codeInfo.url"
                :size="qrcodeSize"
                style="width: 200px; height: 200px"
              ></qrcode-vue>
            </div>
          </div>
          <div class="codeUrl" :style="{ display: showUrl ? 'flex' : 'none' }">
            <div class="codeUrlLink">链接</div>
            <a-input
              :value="codeInfo.url.startsWith('/')?(domain+codeInfo.url):codeInfo.url"
              disabled
              class="codeUrlInp"
            />
            <a-input
              :value="codeInfo.url.startsWith('/')?(domain+codeInfo.url):codeInfo.url"
              id="courseUrl"
              class="codeUrlInp"
              style="position: absolute; opacity: 0; z-index: -1"
            />
            <div @click="copyUrl" class="codeUrlCopy">复制链接</div>
          </div>
          <div class="qrm_footer">
            <span
              style="color: #387df7; cursor: pointer"
              @click="downloadQr(200)"
              >下载二维码</span
            >
            <!-- <div class="qrmbtn" @click="downloadQr(200)">
              <div class="btntext">200*200</div>
            </div> -->
            <!-- <div class="qrmbtn" @click="downloadQr(200)">
              <div class="btntext">400*400</div>
            </div>
            <div class="qrmbtn" @click="downloadQr(200)">
              <div class="btntext">800*800</div>
            </div> -->
          </div>
        </div>
      </div>
    </a-modal>
    <!--二维码页面 -->
  </div>
</template>
<script>
import { reactive, toRefs, watch } from "vue";
import QrcodeVue from "qrcode.vue";
import html2canvas from "html2canvas";
import { message } from "ant-design-vue";
export default {
  name: "TwoDimensionalCode",
  components: {
    QrcodeVue,
  },
  props: {
    codevisible: {
      type: Boolean,
      default: false,
    },
    codeInfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
    index: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
  },
  setup(props, ctx) {
    const state = reactive({
      qrcodeSize: 800,
      codeInfo: {},
      courseUrl: "https://www.baidu.com/",
      showUrl: false,
      domain: location.protocol+'//'+location.host
    });

    //下载二维码图片
    const downloadQr = (num) => {
      state.qrcodeSize = num;
      html2canvas(
        document.querySelectorAll(".downloadCode")[Number(props.index)],
        {
          useCORS: true, //支持图片跨域
        }
      ).then((canvas) => {
        // console.log("canvas", canvas, canvas.width, canvas.style.width);
        let filename = `${new Date().getTime()}.png`;
        let imageUrl = canvas.toDataURL("image/png");
        let a = document.createElement("a");
        a.style.display = "none";
        a.download = filename;
        a.href = imageUrl;
        document.body.appendChild(a);
        a.click();
      });
      //           let canvas =document.getElementsByClassName('codeModal')[Number(props.index)].getElementsByTagName('canvas')[0];
      //           let filename = `${new Date().getTime()}.png`;
      //           let imageUrl = canvas.toDataURL("image/png");
      //           let a = document.createElement("a");
      //           a.style.display = "none";
      //           a.download = filename;
      //           a.href = imageUrl;
      //           document.body.appendChild(a);
      //           a.click();
    };
    //复制链接
    const copyUrl = () => {
      // const range = document.createRange(); //创建range对象
      // 	range.selectNode(document.getElementById('courseUrl')); //获取复制内容的 id 选择器
      // 	const selection = window.getSelection();  //创建 selection对象
      // 	if (selection.rangeCount > 0) selection.removeAllRanges(); //如果页面已经有选取了的话，会自动删除这个选区，没有选区的话，会把这个选取加入选区
      // 	selection.addRange(range); //将range对象添加到selection选区当中，会高亮文本块
      // 	document.execCommand("Copy"); //复制选中的文字到剪贴板
      // 	message.success('复制成功')
      // 	selection.removeRange(range); // 移除选中的元素

      var input = document.createElement("input"); // 创建input对象
      input.value = state.codeInfo.url.startsWith('/')?(state.domain+state.codeInfo.url):state.codeInfo.url; // 设置复制内容
      document.body.appendChild(input); // 添加临时实例
      input.select(); // 选择实例内容
      document.execCommand("Copy"); // 执行复制
      document.body.removeChild(input); // 删除临时实例
      message.success("复制成功！");
    };
    const closeCodeModal = () => {
      ctx.emit("update:codevisible", false);
    };
    watch(() => {
      let obj = {
        title: "",
        name: "",
        url: "",
      };
      state.codeInfo = Object.assign(obj, props.codeInfo);
      console.log("codeInfo22222", state.codeInfo, props.index, props.type);

      if (props.type === "签到二维码") {
        state.showUrl = false;
        console.log(" state.showUrl", state.showUrl);
      } else if (props.type === "课程二维码") {
        state.showUrl = true;
      }
    });
    return {
      ...toRefs(state),
      downloadQr,
      closeCodeModal,
      copyUrl,
    };
  },
};
</script>
<style scoped lang="scss">
.twoDimensionalCode {
}
.codeModal {
  .ant-modal {
    .ant-modal-content {
      width: 479px !important;
      .ant-modal-body {
        .QR {
          z-index: 9999;
          width: 520px;
          background: #ffffff;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
          position: absolute;
          left: 50%;
          top: 10%;
          transform: translate(-50%, -50%);
          .qr_header {
            position: absolute;
            width: calc(100%);
            height: 40px;
            background: linear-gradient(
              rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%
            );
          }
          .qr_main {
            width: 100%;
            position: relative;
            .qrm_header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;
              .title {
                font-size: 16px;
                font-weight: 600;
                color: #333333;
                line-height: 22px;
              }
              .close_exit {
                position: absolute;
                right: 42px;
                cursor: pointer;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/images/coursewareManage/close.png);
                background-size: 100% 100%;
              }
            }
            .qrm_body {
              width: 100%;
              padding-top: 22px;
              padding-bottom: 32px;
              display: flex;
              flex-direction: column;
              align-items: center;
              .codename {
                font-size: 18px;
                font-weight: 400;
                color: #333333;
                line-height: 25px;
                margin-bottom: 20px;
                margin-left: 20px;
                margin-right: 20px;
              }
            }
            .codeUrl {
              display: flex;
              align-items: center;
              justify-content: center;
              margin-bottom: 24px;
              .codeUrlLink {
                width: 72px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                font-weight: 400;
                color: #c7cbd2;
                line-height: 20px;
                border: 1px solid #c7cbd2;
                border-right: 0px solid #c7cbd2;
              }
              .codeUrlInp {
                width: 305px;
                height: 40px;
                border: 1px solid #c7cbd2;
              }
              .ant-input-disabled {
                background-color: rgba(0, 0, 0, 0) !important;
              }
              .ant-input[disabled] {
                background-color: rgba(0, 0, 0, 0) !important;
              }
              .codeUrlCopy {
                width: 96px;
                height: 40px;
                background-color: #4ea6ff;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                font-weight: 400;
                color: #ffffff;
                line-height: 20px;
                cursor: pointer;
                margin-left: 8px;
              }
            }
            .qrm_footer {
              display: flex;
              align-items: center;
              justify-content: center;
              margin-bottom: 44px;
              .qrmbtn {
                width: 80px;
                height: 32px;
                display: flex;
                line-height: 32px;
                justify-content: center;
                border-radius: 4px;
                border: 1px solid #387df7;
                // margin-left: 16px;
                cursor: pointer;
                .btntext {
                  color: #387df7;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
