<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    :title="title"
    width="1000px"
    style="top: 10px; max-height: 100%; overflow-y: auto"
    :showCancelBtn="false"
    :showOkBtn="false"
    :wrapperFooterOffset="10"
    :centered="true"
    :bodyStyle="bodyStyle"
    :destroyOnClose="true"
    :footer="false"
  >
    <div class="cp-view">
  
      <div class="photo-box flex-row-center-center" @mousewheel="onWheel">
        <img
          :class="['photo-item', isCovered && 'drag']"
          ref="photoRef"
          :src="currentPath"
          alt=""
          @mousedown="onDrag"
          :style="{ transform: `rotate(${rotateDeg}deg) scale(${scale})` }"
        />
      </div>
      <div class="photo-btns flex-row-center-center">
        <div class="title">
          <span class="imageName">{{ imgTitle }}</span>
          <span class="imageNumber">{{ imgIndex }}</span>
        </div>
        <div class="tool">
          <zoom-in-outlined class="pointer tool-btn" @click="onScale(0.1)" />
          <zoom-out-outlined class="pointer tool-btn" @click="onScale(-0.1)" />
          <span :class="['pointer', 'reset-btn', scale === 1 && 'disabled']" @click="scale = 1">1:1</span>
          <redo-outlined class="pointer tool-btn" @click="onRotate" />
        </div>
      </div>
      <left-circle-outlined :class="['icon-left', pathList.indexOf(currentPath) === 0 && 'disabled']" @click="handleSwiper(-1)" />
      <right-circle-outlined :class="['icon-right', pathList.indexOf(currentPath) === pathList.length - 1 && 'disabled']" @click="handleSwiper(1)" />
    </div>
  </BasicModal>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import { ZoomInOutlined, ZoomOutOutlined, RedoOutlined, LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { BasicModal, useModalInner } from '/@/components/Modal';

export default defineComponent({
  components: {
    ZoomInOutlined,
    ZoomOutOutlined,
    RedoOutlined,
    LeftCircleOutlined,
    RightCircleOutlined,

    BasicModal,
  },
  setup() {
    const currentPath = ref('');
    const pathList = ref([]);
    const imgList = ref([]);
    const rotateDeg = ref(0);
    const width = ref(0);
    const height = ref(0);
    const cWidth = ref(0);
    const cHeight = ref(0);
    const scale = ref(1);
    const isCovered = ref(false);

    const title = ref('图片预览');
    const imgTitle = ref('图片名称');
    const imgIndex = ref('1/10');

    const photoRef = ref(null);

    const [register, { closeModal }] = useModalInner(async (data) => {
      console.log('参数：', data);

      currentPath.value = data.data.current.filePath;
      imgList.value = data.data.imgList;
      //测试数据
      // imgList.value.push({
      //     filePath: 'path/to/image9.jpg',
      //     fileName: 'Image 9',
      //   });
      //   imgList.value.push({
      //     filePath: 'path/to/image10.jpg',
      //     fileName: 'Image 10',
      //   });
      //   imgList.value.push({
      //     filePath: 'path/to/image11.jpg',
      //     fileName: 'Image 11',
      //   });
      //   imgList.value.push({
      //     filePath: 'path/to/image12.jpg',
      //     fileName: 'Image 12',
      //   });
      //   imgList.value.push({
      //     filePath: 'path/to/image13.jpg',
      //     fileName: 'Image 13',
      //   });
      //   imgList.value.push({
      //     filePath: 'path/to/image14.jpg',
      //     fileName: 'Image 14',
      //   });
      //   imgList.value.push({
      //     filePath: 'path/to/image15.jpg',
      //     fileName: 'Image 15',
      //   });
      //   imgList.value.push({
      //     filePath: 'path/to/image16.jpg',
      //     fileName: 'Image 16',
      //   });
      //   imgList.value.push({
      //     filePath: 'path/to/image17.jpg',
      //     fileName: 'Image 17',
      //   });
      //   imgList.value.push({
      //     filePath: 'path/to/image18.jpg',
      //     fileName: 'Image 18',
      //   });
      //   imgList.value.push({
      //     filePath: 'path/to/image19.jpg',
      //     fileName: 'Image 19',
      //   });
      //   imgList.value.push({
      //     filePath: 'path/to/image20.jpg',
      //     fileName: 'Image 20',
      //   });
      const imgAry = imgList.value.map((item) => {
        return item.filePath;
      });
      

      pathList.value = imgAry;

      imgTitle.value = data.data.current.fileName;
      const currentIndex = pathList.value.indexOf(currentPath.value);
      imgTitle.value = imgList.value[currentIndex].fileName;
      imgIndex.value = `${currentIndex + 1}/${pathList.value.length}`;

      //初始化
      scale.value = 1;
      rotateDeg.value = 0;
    });

    // // 图片前后切换
    // const handleSwiper = (prevOrNext: Number) => {
    //   //初始化信息
    //   scale.value = 1;
    //   rotateDeg.value = 0;

    //   //   debugger;
    //   const index = pathList.value.indexOf(currentPath.value);
    //   if ((index === pathList.value.length - 1 && prevOrNext === 1) || (index === 0 && prevOrNext === -1)) return;
    //   console.log(index);
    //   if (prevOrNext === -1) {
    //     currentPath.value = pathList.value[index - 1];
    //   } else if (prevOrNext === 1) {
    //     currentPath.value = pathList.value[index + 1];
    //   }
    //   const currentIndex = pathList.value.indexOf(currentPath.value);
    //   imgTitle.value = imgList.value[currentIndex].fileName;
    //   imgIndex.value = `${currentIndex + 1}/${pathList.value.length}`;
    // };

    const handleSwiper = (prevOrNext: Number) => {
      //初始化信息
      scale.value = 1;
      rotateDeg.value = 0;

      const index = pathList.value.indexOf(currentPath.value);
      if (prevOrNext === -1) {
        currentPath.value = pathList.value[index - 1] || pathList.value[pathList.value.length - 1];
      } else if (prevOrNext === 1) {
        currentPath.value = pathList.value[index + 1] || pathList.value[0];
      }
      const currentIndex = pathList.value.indexOf(currentPath.value);
      imgTitle.value = imgList.value[currentIndex].fileName;
      imgIndex.value = `${currentIndex + 1}/${pathList.value.length}`;
    };

    function onDrag(e) {
      const img = photoRef.value;
      e.preventDefault();
      const l = e.clientX - img.offsetLeft;
      const t = e.clientY - img.offsetTop;
      document.onmousemove = function (e) {
        img.style.left = e.clientX - l + 'px';
        img.style.top = e.clientY - t + 'px';
      };
      img.onmouseup = function () {
        document.onmousemove = null;
        img.onmouseup = null;
      };
    }

    function onRotate() {
      rotateDeg.value += 90;
      if (rotateDeg.value >= 360) {
        rotateDeg.value = 0;
      }
      const img = photoRef;
      if (rotateDeg.value === 90 || rotateDeg.value === 270) {
        if (cWidth.value > cHeight.value) {
          // 宽大于高
          img.width = height.value;
        } else if (cWidth.value < cHeight.value) {
          // 宽小于高
          img.height = height.value;
        }
      } else {
        // 还原
        if (cWidth.value > cHeight.value) {
          // 宽大于高
          img.width = width.value;
        } else if (cWidth.value < cHeight.value) {
          // 宽小于高
          img.height = height.value;
        }
      }
    }

    function onScale(val) {
      if (val < 0 && scale.value <= 0.2) {
        return;
      }
      if (val > 0 && scale.value >= 4) {
        return;
      }
      scale.value += val;
    }

    function onWheel(e) {
      if (e.deltaY > 0) {
        this.onScale(-0.1);
      } else if (e.deltaY < 0) {
        this.onScale(0.1);
      }
    }

    watch(currentPath, (val) => {
      rotateDeg.value = 0;
      const img = document.createElement('img');
      img.src = val || '';
      img.onload = () => {
        let w = (cWidth.value = img.width);
        let h = (cHeight.value = img.height);
        if (w > 1000) {
          w = 1000;
        }
        if (h > 500) {
          h = 500;
        }
        if (w < 500) {
          h = 500;
        }
        if (h < 300) {
          h = 300;
        }
        width.value = w;
        height.value = h;
      };
    });

    watch(scale, (val) => {
      const img = photoRef;
      if (img.width * val > width.value + 50 || img.height * val > height.value + 50) {
        isCovered.value = true;
      } else {
        isCovered.value = false;
      }
    });

    return {
      currentPath,
      pathList,
      rotateDeg,
      width,
      height,
      cWidth,
      cHeight,
      scale,
      isCovered,
      title,
      imgTitle,
      imgIndex,

      photoRef,
      register,

      handleSwiper,
      onDrag,
      onRotate,
      onScale,
      onWheel,

      bodyStyle: {
        backgroundColor: 'rgba(12, 41, 61) !important;',
        padding: '0px 30px',
      },
    };
  },
});
</script>

<style lang="less" scoped>
.cp-view {
  position: relative;
  margin-bottom: 40px;
  width: 100%;
  height: 100%;
  min-height: 800px;
  // border: 1px red solid;

  &:hover {
    .icon-left,
    .icon-right {
      display: block;
    }
  }
  .icon-left,
  .icon-right {
    user-select: none;
    position: absolute;
    font-size: 34px;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50);
    display: none;
    &.disabled {
      color: #999;
      cursor: not-allowed;
    }
  }
  .icon-left {
    left: 0;
  }
  .icon-right {
    right: 0;
  }
  // overflow: hidden;
  .photo-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    margin: 0 auto;
    // border: 2px solid red;
    display: flex;
    align-items: center;
    justify-content: center;

    .photo-item {
      position: absolute;
      max-width: 100%;
      max-height: 100%;
      vertical-align: middle;
      // user-select: none;
      pointer-events: auto;
      // max-height: 500px;
      // max-width: 1000px;
      // display: block;
      &.drag {
        cursor: move;
      }
    }
  }
  .photo-btns {
    width: 100%;
    user-select: none;
    position: absolute;
    bottom: 0x;
    // border: 1px red solid;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-content: center;
    color: #ffffffd9;
    list-style: none;
    background: rgba(0, 0, 0, 0.1);

    .title {
      font-size: 16px;
      display: flex;
      justify-content: start;
      padding-left: 10px;
      font-weight: bold;

      .imageName {
        height: 100%;
        line-height: 40px;
        color: white;
      }
      .imageNumber {
        height: 100%;
        line-height: 40px;
        color: white;
        margin-left: 10px;
      }
    }

    .tool {
      display: flex;
      justify-content: right;
      height: 40px;
      line-height: 40px;
      align-items: center;

      .reset-btn {
        margin: 2px 10px 2px 10px;
        font-size: 18px;
        padding: 0px 2px;
        /* text-align: center; */
        /* margin-top: -3px; */
        background: #00be7e;
        border: 1px solid #00be7e;
        border-radius: 3px;
        color: #fff;
        height: 30px;
        line-height: 30px;
        // border: 1px red solid;
        /* display: block;*/

        &.disabled {
          border-color: #ccc;
          background: none;
          color: #ccc;
          cursor: default;
        }
      }

      .tool-btn {
        padding: 1px 2px;
        margin: 0px 10px 0px 10px;
        font-size: 20px;
      }
    }
  }
}
</style>
