<template>
    <el-dialog v-model="dialogFormVisible" 
    :show-close="false" 
    :title="dialogTitle"
    :close-on-press-escape="false" :close-on-click-modal="false" 
    :width="width+40+'px'">
        <div
            class="PictureComparison"
            :style="'width:' + width + 'px;height:' + height + 'px'">
            <div class="before-image" :style="'width:' + data.x + 'px'" @click.stop="goLeft">
            <div :style="'width:' + width + 'px;height:' + height + 'px'">
                <slot name="left"></slot>
            </div>
            </div>
            <div class="after-image" @click.stop="goRight">
            <div :style="'width:' + width + 'px;height:' + height + 'px'">
                <slot name="right"></slot>
            </div>
            </div>
            <div
            class="divider-bar"
            :style="'left:' + data.x + 'px'"
            @mousedown.prevent="onmouseDown($event)"
            ></div>
            <span class="spanHandle" :style="{ left:  data.x - 24+'px' }"
            @mousedown.prevent="onmouseDown($event)"></span>
        </div>
        <template #footer>
            <div class="dialog-footer">
            <el-button @click="close" :disabled="setLoading">取消</el-button>
            <el-button type="primary" @click="submit" :loading="setLoading">
                确认替换
            </el-button>
            </div>
      </template>
    </el-dialog>
    
    
  </template>
   
  <script lang="ts" setup>
  import { reactive, ref, onMounted } from "vue";
  import { storeToRefs } from 'pinia'
  import AliyunUpload from '@/utils/upload/aliyun'
  import { useSlidesStore, useMainStore } from '@/store'

  const mainStore = useMainStore()
  const slidesStore = useSlidesStore()
  const { handleElement, handleElementId } = storeToRefs(mainStore)
  const dialogFormVisible = ref(true)
  const dialogTitle = ref('原图/高清图对比')
  const setLoading = ref(false)
    const props = defineProps({
        width: { type: String, default: "500" },
        height: { type: String, default: "300" },
        newImg: { type: String, default: "" }
    })
      const data = reactive({
        isDown: false, //鼠标是否正按住
        moveX: 0, //鼠标移动的位置
        x: props.width / 2, //设置位置
      })
      const upperImg = 'data:image/png;base64,'+props.newImg; // 上层图
    const emit = defineEmits<{
        (event: 'close'): void,
        (event: 'success'): void,
    }>()
    const onmouseDown = (event) => {
        data.isDown = true;
        data.x = event.target.offsetLeft;
        var disX = event.clientX - event.target.offsetLeft;
    
        document.onmousemove = function (event) {
            if (data.isDown == false) {
                return;
            }
            data.x = event.clientX - disX;
            if (data.x >= props.width) {
                data.x = props.width;
            } else if (data.x <= 0) {
                data.x = 0;
            }
        };
    
        document.onmouseup = function () {
            data.isDown = false;
            document.onmousemove = document.onmouseup = null;
            return false;
        };
    }
   
   
      const goLeft = () => {
        data.x = 0;
      }
      const goRight = () => {
        data.x = props.width;
      }
      const close = () =>{
        dialogFormVisible.value = false
        emit('close')
    }
    const submit = () => {
      let text = '此操作将替换原图,请谨慎处理！'
        ElMessageBox.confirm(
            `${text}`,
            '提示',
            {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            }
        ).then(() => {
            setImg()
        }).catch(() => {})
    }
    const setImg = async () =>{
        setLoading.value = true
        let name = new Date().getTime()+".png"
        const file = dataURLtoFile(upperImg, name)
        let url = await AliyunUpload.UploadAsync(file,`pptist/desgin/${name}`)
        if(url != ''){
            const props = { src: url }
            slidesStore.updateElement({
                id: handleElementId.value,
                props
            })
            emit('success')
        }
        setLoading.value = false
    }
    const dataURLtoFile = (dataurl:string, filename:string) => {
        let arr = dataurl.split(",")
        let mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, { type: mime });
    }
  </script>
   
  <style scoped>
  .PictureComparison {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    overflow: hidden;
  }
  .before-image {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 50%;
      overflow: hidden;
    }
   
    .after-image {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
    }
   
    .divider-bar {
      cursor: move;
      position: absolute;
      width: 1px;
      left: 40%;
      top: 0;
      bottom: 0px;
      background: white;
      height: 100%;
      display: block;
      z-index: 2;
      /* box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4); */
    }
    .divider-bar::after {
        /* content: "<->";
        position: absolute;
        color: #000;
        font-weight: bold;
        text-align: center;
        line-height: 32px;
        width: 50px;
        height: 30px;
        background: #fff;
        border-radius: 15px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); */
      }
      .spanHandle {
        cursor: move;
        position: absolute; /*决定定位还是一样的*/
        z-index: 2; /* 样式很多，都不是关键的，只有这里，需要注意层次要低于inputRange*/
        height: 48px;
        width: 48px;
        position: center;
        font-size: 24px;
        border: 1px;
        border-radius: 50%;
        top: calc(50% - 24px);
        background-color: rgb(255, 255, 255, 0.5);
    }

    .spanHandle:before {
        left: 5px;
        transform: rotate(-45deg);
    }
    .spanHandle:after {
        right: -5px;
        transform: rotate(135deg);
    }
    .spanHandle:after,
    .spanHandle:before {
        border-left: 2px solid;
        border-top: 2px solid;
        content: "";
        height: 10px;
        position: absolute;
        top: 50%;
        transform-origin: 0 0;
        width: 10px;
    }
  </style>