<template>
  <div class="change-img">
    <div>
      <a id="link"></a>
      <div class="course-container" id="myImage">
        <template v-if="backimg">
          <div class="course">
            <img :src="backimg" />
          </div>
        </template>
        <template v-else>
          <div class="empty-background"></div>
        </template>
        <template v-if="MarkImg.list.length">
          <div class="drag-img-parent">
            <template v-for="item in MarkImg.list" :key="item.id">
              <ImageDarg
                :id="item.id"
                :img="item.img"
                @delete="DeleteImg"
              ></ImageDarg>
            </template>
          </div>
        </template>
      </div>
    </div>
    <div class="custom-tools">
      <UploadImg
        @SubmitImg="SubmitBackImg"
        :list_len="MarkImg.list.length"
        label="选择背景图"
      ></UploadImg>
      <div class="custom-line"></div>
      <div class="chose-other-img-box">
        <UploadImg
          @SubmitImg="SubmitImg"
          :list_len="MarkImg.list.length"
          label="选择其他图片"
        ></UploadImg>
        <TButton @click="DeleteLast">删除最后一张子图</TButton>
      </div>
      <TButton class="save-button" @click="save()">保存</TButton>
    </div>
  </div>
</template>

<script setup lang="ts">
import html2canvas from 'html2canvas';
import { reactive, ref } from 'vue';
import { Button as TButton } from 'tdesign-vue-next';
import ImageDarg from './img_darg.vue';
import UploadImg from './upload.vue';
// 添加可以拖拽功能,放大缩小功能
const backimg = ref('');
// 上传的列表
const MarkImg = reactive({
  list: [],
});
// 删除最后一个
const DeleteLast = () => {
  if (MarkImg.list.length) {
    MarkImg.list.pop();
  }
};
// menu事件
const DeleteImg = (item: any, id: string) => {
  // 找到对应的id删除
  let index = MarkImg.list.findIndex((it: any) => it.id == id);
  if (index !== -1) {
    MarkImg.list.splice(index, 1);
  }
};
// 背景图
const SubmitBackImg = (obj: any) => {
  backimg.value = obj.img;
};
// 返回的图片base64
const SubmitImg = (obj: any) => {
  MarkImg.list.push(obj);
};
const save = () => {
  html2canvas(document.querySelector('#myImage')).then((canvas) => {
    // var image = canvas
    //   .toDataURL('image/png')
    //   .replace('image/png', 'image/octet-stream');

    //save as download without name and extension
    //window.location.href = image;
    var link = document.getElementById('link');
    link.setAttribute('download', 'my.png');
    link.setAttribute(
      'href',
      canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')
    );
    link.click();
  });
};
</script>

<style scoped lang="less">
.change-img {
  display: flex;
  .custom-tools {
    position: relative;
    flex: 1;
    padding-left: 30px;
    box-sizing: border-box;
    .save-button {
      position: absolute;
      right: 0;
      bottom: 0;
    }
    .custom-line {
      height: 30px;
    }
    .chose-other-img-box {
      display: flex;
      & > :last-child {
        margin-left: 12px;
      }
    }
  }
}
.course-container {
  height: 0;
  width: 66vw;
  padding-top: 100%;
  position: relative;
}
.course {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
  }
}
.empty-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px dashed #00f9f9;
}
.code {
  z-index: 2;
  position: absolute;
  width: 150px;
  height: 150px;
  img {
    width: 100%;
    height: 100%;
    cursor: move;
  }
}
.drag-img-parent {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
</style>
