<template>
  <div class="modelDiv">
    <div class="title">
      <div class="title-1">{{ props.nowPreviewRecord.name }}</div>
      <div class="title-2">
        {{ props.nowPreviewRecord.createTime }}
      </div>
    </div>
    <div class="closeButton">
      <CloseOutlined @click="closeModal" style="font-size: 25px; color: white" />
    </div>

    <div class="modelDiv_2D3D">
      <PreviewModel2D
        v-if="props.nowPreviewRecord.type.includes('2D')"
        :nowPreviewRecord="nowPreviewRecord"
      />
      <PreviewModel3D
        v-if="props.nowPreviewRecord.type.includes('3D')"
        :nowPreviewRecord="nowPreviewRecord"
      />
    </div>
    <div class="modelDiv_bottom">
      <div class="buttonList">
        <!-- 下载 -->
        <div class="button">
          <DownloadOutlined @click="fetchAndDownloadImage(props.nowPreviewRecord.url)" />
        </div>
        <!-- 删除 -->
        <div class="button"> <DeleteOutlined @click="deleteCanvas" /> </div>
      </div>
      <div class="imageList">
        <div v-for="li in props.previewRecordList" :key="li.id" @click="chooseNowPreviewRecord(li)">
          <div
            v-if="li.type.includes('model')"
            :class="li.id == props.nowPreviewRecord.id ? 'bottom_div_choose' : 'bottom_div'"
          >
            <FileOutlined style="font-size: 60px; color: white" />
            <div
              v-if="li.type.includes('2D')"
              style="
                position: absolute;
                top: 20px;
                left: 35px;
                font-size: 25px;
                color: #ffffff;
                pointer-events: none;
              "
            >
              2D
            </div>
            <div
              v-if="li.type.includes('3D')"
              style="
                position: absolute;
                top: 20px;
                left: 35px;
                justify-content: center;
                font-size: 25px;
                color: #ffffff;
                pointer-events: none;
              "
            >
              3D
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 上一张、下一张图片 -->
    <div class="leftButton" @click="clickLeftOrRightButton('left')">
      <LeftOutlined style="color: #ffffff; font-size: 30px" />
    </div>
    <div class="rightButton" @click="clickLeftOrRightButton('right')">
      <RightOutlined style="color: #ffffff; font-size: 30px" />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, watch, computed } from 'vue';
  import {
    CloseOutlined,
    RightOutlined,
    LeftOutlined,
    DownloadOutlined,
    DeleteOutlined,
    FileOutlined,
  } from '@ant-design/icons-vue';
  import { PreviewModel2D, PreviewModel3D } from './priview2D3D';

  const props = defineProps(['nowPreviewRecord', 'previewRecordList']);
  const emit = defineEmits(['closeModal', 'chooseNowPreviewRecord', 'reloadTable']);

  // 上一张、下一张图片
  function clickLeftOrRightButton(direction) {
    const list = props.previewRecordList.filter((item) => item.type.includes('model'));
    for (let index = 0; index < list.length; index++) {
      if (list[index].id == props.nowPreviewRecord.id) {
        if (direction == 'left') {
          if (index == 0) {
            chooseNowPreviewRecord(list[list.length - 1]);
          } else {
            chooseNowPreviewRecord(list[index - 1]);
          }
        }
        if (direction == 'right') {
          if (index == list.length - 1) {
            chooseNowPreviewRecord(list[0]);
          } else {
            chooseNowPreviewRecord(list[index + 1]);
          }
        }
      }
    }
  }

  // 选择
  function chooseNowPreviewRecord(value) {
    emit('chooseNowPreviewRecord', value);
  }

  // 关闭弹窗
  function closeModal() {
    emit('closeModal');
  }
</script>
<style lang="less" scoped>
  .modelDiv {
    position: relative;
    width: 100%;
    height: 920px;
    display: block;
  }

  .title {
    pointer-events: none;
    position: absolute;
    top: 10px;
    left: 15px;
    z-index: 100;

    .title-1 {
      font-size: 20px;
      color: #ffffff;
    }
    .title-2 {
      font-size: 16px;
      color: #f0f3f3;
    }
  }
  .closeButton {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 50;
  }

  .modelDiv_2D3D {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 800px;
    background: #000000;
  }
  .modelDiv_bottom {
    // 页面不能被选中
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;

    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 130px;
    background: #1c1c1c;
    display: block;

    .buttonList {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50px;

      .button {
        position: relative;
        padding-left: 10px;
        padding-right: 10px;
        color: #ffffff;
        font-size: 22px;
      }
    }

    .imageList {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 60px;

      .bottom_div {
        position: relative;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 20px;
        padding-right: 20px;
        margin-left: 5px;
        margin-right: 5px;
        border-radius: 10px;
        background: #282828;
      }

      .bottom_div_choose {
        position: relative;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 20px;
        padding-right: 20px;
        outline: 3px solid #1088f2;
        margin-left: 5px;
        margin-right: 5px;
        border-radius: 10px;
        background: #282828;
      }
    }
  }

  // 上一张、下一张
  .leftButton {
    position: absolute;
    left: 40px;
    top: 40%;
    z-index: 200;
    background: #9c9c9c;
    border-radius: 80px;
    width: 80px;
    height: 80px;

    display: flex;
    align-items: center;
    justify-content: center;
  }
  .rightButton {
    position: absolute;
    right: 40px;
    top: 40%;
    z-index: 200;
    background: #9c9c9c;
    border-radius: 80px;
    width: 80px;
    height: 80px;

    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
