<template>
  <div class="systemManage">
    <div
      style="
        width: 130px;
        height: 40px;
        background: #4ea6ff;
        border-radius: 8px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      "
      @click="showDrawer"
    >
      添加投票
    </div>
    <div>
      <add-vote v-model:addvoteVisible="visible" />
    </div>
    <a-radio v-model:checked="checked" @click="changeRadio">Option A</a-radio>
    <a-upload
      v-model:file-list="fileList"
      name="avatar"
      action="/api/file/upload"
      list-type="picture-card"
      class="avatar-uploader"
      :show-upload-list="false"
      :before-upload="beforeUpload"
      @change="handleChange"
    >
      <!-- <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
      <div v-else>
        <loading-outlined v-if="loading"></loading-outlined>
        <plus-outlined v-else></plus-outlined>
        <div class="ant-upload-text">Upload</div>
      </div> -->
    </a-upload>

    <div
      style="
        width: 130px;
        height: 40px;
        background: #4ea6ff;
        border-radius: 8px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      "
      @click="golearningpath"
    >
      跳转
    </div>
    <draggable
      v-model="draggableList"
      chosenClass="chosen"
      forceFallback="true"
      group="people"
      animation="1000"
      @start="onStart"
      @end="onEnd"
    >
      <template #item="{ element }">
        <div class="item" :key="element.id">
          {{ element.name }}
        </div>
      </template>
    </draggable>
    <div id="qrcode" style="display: flex; flex-direction: column">
      <div>下载二维码</div>
      <qrcode-vue
        :value="qrcodeUrl"
        :size="qrcodeSize"
        style="width: 200px; height: 200px"
      ></qrcode-vue>
    </div>
    <div @click="downloadQr(200)">下载200</div>
    <!-- <div @click="downloadQr(400)">下载400</div>
    <div @click="downloadQr(800)">下载800</div> -->
  </div>

  <div @click="changeCodevisible">显示二维码弹窗</div>
  <two-dimensional-code
    v-model:codevisible="codevisible"
    :codeInfo="codeInfo"
    index="0"
    type="课程二维码"
  />

  <div @click="changeCodevisible2">显示二维码弹窗22</div>
  <two-dimensional-code
    v-model:codevisible="codevisible2"
    :codeInfo="codeInfo2"
    index="1"
    type="签到二维码"
  />

  <a-table
    :columns="columns"
    :data-source="data"
    :row-selection="{
      selectedRowKeys: selectedRowKeys,
      onChange: onSelectChange,
    }"
  />
</template>
<script>
import { reactive, toRefs } from "vue";
import AddVote from "../../components/vote/AddVote";
// import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import * as api from "../../api/index1";
// function getBase64(img, callback) {
//   const reader = new FileReader();
//   reader.addEventListener("load", () => callback(reader.result));
//   reader.readAsDataURL(img);
// }
import { useRouter } from "vue-router";
import draggable from "vuedraggable";
import QrcodeVue from "qrcode.vue";
import html2canvas from "html2canvas";

import TwoDimensionalCode from "../../components/TwoDimensionalCode.vue";
export default {
  name: "SystemManage",
  components: {
    AddVote,
    // LoadingOutlined,
    // PlusOutlined,
    draggable,
    QrcodeVue,
    TwoDimensionalCode,
  },

  setup() {
    const state = reactive({
      visible: false,
      checked: true,
      imageUrl: "",
      loading: false,
      fileList: [],

      draggableList: [
        {
          id: 1,
          name: "拖拽一",
        },
        {
          id: 2,
          name: "拖拽二",
        },
        {
          id: 3,
          name: "拖拽三",
        },
        {
          id: 4,
          name: "拖拽四",
        },
        {
          id: 5,
          name: "拖拽五",
        },
        {
          id: 6,
          name: "拖拽六",
        },
      ],

      qrcodeUrl: "https://www.baidu.com/",
      qrcodeSize: 800,

      codevisible: false,
      codeInfo: {},
      codevisible2: false,
      codeInfo2: {},

      columns: [
        {
          title: "Name",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "Age",
          dataIndex: "age",
          key: "age",
          width: "12%",
        },
        {
          title: "Address",
          dataIndex: "address",
          width: "30%",
          key: "address",
        },
      ],
      data: [
        {
          key: 1,
          name: "John Brown sr.",
          age: 60,
          address: "New York No. 1 Lake Park",
        },
        {
          key: 2,
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
        },
        {
          key: 3,
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
        },
        {
          key: 4,
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
        },
        {
          key: 5,
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
        },
        {
          key: 6,
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
        },
        {
          key: 7,
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
        },
      ],
      selectedRowKeys: [],
    });

    const showDrawer = () => {
      state.visible = true;
    };
    const changeRadio = () => {
      state.checked = false;
    };
    const handleChange = (info) => {
      if (info.file.status === "uploading") {
        console.log("uploading", info.file);
        state.loading = true;
        return;
      }

      if (info.file.status === "done") {
        console.log("done", info.file);
        let obj = {
          file: info.file,
        };
        api
          .uploadFile(obj)
          .then((res) => {
            console.log("res", res);
          })
          .then((err) => {
            console.log("err", err);
          });
        // Get this url from response in real world.
        // getBase64(info.file.originFileObj, (base64Url) => {
        //   state.imageUrl = base64Url;
        //   state.loading = false;
        // });
      }

      if (info.file.status === "error") {
        state.loading = false;
        message.error("upload error");
      }
    };

    const beforeUpload = (file) => {
      console.log("file", file);
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";

      if (!isJpgOrPng) {
        message.error("You can only upload JPG file!");
      }

      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        message.error("Image must smaller than 2MB!");
      }
      if (isJpgOrPng && isLt2M) {
        let obj = {
          file: file,
        };
        api
          .uploadFile(obj)
          .then((res) => {
            console.log("res", res);
          })
          .then((err) => {
            console.log("err", err);
          });
        // Get this url from response in real world.
        // getBase64(info.file.originFileObj, (base64Url) => {
        //   state.imageUrl = base64Url;
        //   state.loading = false;
        // });
      }
      // return isJpgOrPng && isLt2M;
    };
    const router = useRouter();
    const golearningpath = () => {
      router.push({ path: "/learningpath", params: { id: 1 } });
    };

    //下载二维码图片
    const downloadQr = (num) => {
      console.log("num", num);
      state.qrcodeSize = num;
      let filename = `${new Date().getTime()}.png`;
      let canvas = document.getElementsByTagName("canvas")[0];
      let imageUrl = canvas.toDataURL("image/png");

      let canvasBox = document.createElement("canvas");
      let ctx = canvasBox.getContext("2d");
      var img = new Image();
      // 需要添加文字的图片
      img.src = imageUrl;
      // 等待图片加载完成
      img.onload = function () {
        // 将图片添加到canvas
        ctx.drawImage(img, 0, 0, 1240, 2208);
        // 设置字体
        ctx.font = "73px 微软雅黑 bolder";
        // 设置字体颜色
        ctx.fillStyle = "#955f17";
        ctx.textAlign = "center";
        // 添加文字和位置
        ctx.fillText("微信名", 621, 1050);

        // 导出为图片
        let url = canvasBox.toDataURL("image/png");
        let a = document.createElement("a");
        a.style.display = "none";
        a.download = filename;
        a.href = url;
        document.body.appendChild(a);
        a.click();
      };

      // let a = document.createElement("a");
      // a.style.display = "none";
      // a.download = filename;
      // a.href = imageUrl;
      // document.body.appendChild(a);
      // a.click();

      html2canvas(document.querySelector("#qrcode"), {
        useCORS: true, //支持图片跨域
      }).then((canvas) => {
        // var extra_canvas = document.createElement("canvas");
        //                 extra_canvas.setAttribute('width',num);
        //                 extra_canvas.setAttribute('height',num);
        //                 var ctx = extra_canvas.getContext('2d');
        //                 ctx.drawImage(canvas,0,0,num,num);
        //                 let filename = `${new Date().getTime()}.png`;
        //                 var imageUrl = extra_canvas.toDataURL("image/png",1.0);

        console.log("canvas", canvas, canvas.width, canvas.style.width);

        // //   let ctx = canvas.getContext('2d');
        // //           ctx.drawImage(canvas,0,0,canvas.width, canvas.height);
        // //            canvas.width=num
        // //  canvas.height=num
        // //  canvas.style.width=num+'px'
        // // canvas.style.height=num+'px'
        //   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 changeCodevisible = () => {
      state.codevisible = true;
      state.codeInfo = {
        title: "签到二维码",
        name: "管理者进阶面授课程",
        url: "https://www.baidu.com/",
      };
    };
    const changeCodevisible2 = () => {
      state.codevisible2 = true;
      state.codeInfo2 = {
        title: "签到二维码2222",
        name: "管理者进阶面授课程2222",
        url: "https://blog.csdn.net/qq_44034384/article/details/93612152",
      };
    };

    const onSelectChange = (selectedRowKeys) => {
      console.log("selectedRowKeys changed: ", selectedRowKeys);

      if (selectedRowKeys.length > 2) {
        return;
      }
      state.selectedRowKeys = selectedRowKeys;
    };
    return {
      ...toRefs(state),
      showDrawer,
      changeRadio,
      handleChange,
      beforeUpload,
      golearningpath,
      downloadQr,
      changeCodevisible,
      changeCodevisible2,

      onSelectChange,
    };
  },
};
</script>
<style lang="scss">
.systemManage {
  width: 100%;

  .ant-input-textarea-show-count {
    position: relative;
  }
  .ant-input-textarea-show-count::after {
    position: absolute;
    right: 0px;
    bottom: 0px;
  }
  .item {
    width: 100px;
    height: 50px;
    background-color: pink;
    border: 1px solid #000;
  }
}
.drawerStyle {
  .drawerMain {
    .header {
      height: 73px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .headerTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
        margin-left: 24px;
      }
    }
    .contentMain {
      .vote {
        display: flex;
        align-items: center;
        margin-top: 32px;
        margin-left: 20px;
        .votebox {
          width: 100px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          // background-color: pink;
          .voteimg {
            width: 10px;
            height: 10px;
            margin-right: 5px;
          }
          .votename {
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            line-height: 20px;
          }
        }

        .votebtn {
          width: 130px;
          height: 40px;
          background: #4ea6ff;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          line-height: 20px;
        }
        .voteclassify {
          font-size: 14px;
          font-weight: 400;
          color: #999999;
          line-height: 20px;
          margin-top: 16px;
        }
        .ant-picker {
          width: 424px;
        }
      }
    }
  }
}
</style>
