<template>
  <div class="comparisonModal">
    <div class="closeButton">
      <LeftOutlined
        style="color: white; font-size: 20px; margin-right: 10px"
        @click="closeComparisonModal"
      />
      <div
        class="changeButton"
        :style="{
          background: typeOpen ? '#2A7DC9' : '#5D5F61',
        }"
        @click="changeTypeOpen"
      >
        变化检测
        <CaretUpOutlined v-if="typeOpen" />
        <CaretDownOutlined v-if="!typeOpen" />
      </div>
    </div>
    <div class="topDiv"> 照片 AI 变化检测 Beta</div>
    <div class="bodyDiv">
      <!-- 检测记录 -->
      <div v-if="typeOpen" class="jiancejiluDiv">
        <RecordList
          v-if="!isNewBuildStatus"
          :recordList="recordList"
          :nowRecord="nowRecord"
          @chooseNowRecord="chooseNowRecord"
          @openIsNewBuildStatus="openIsNewBuildStatus"
        />
        <RecordNewBuild v-if="isNewBuildStatus" @closeIsNewBuildStatus="closeIsNewBuildStatus" />
      </div>
      <!-- 对比部分 -->
      <div
        class="imageDiv"
        :style="{
          width: typeOpen ? 'calc(100% - 360px)' : '100%',
        }"
      >
        <ImageContrast :recordList="recordList" :nowRecord="nowRecord" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { LeftOutlined, CaretUpOutlined } from '@ant-design/icons-vue';
  import { RecordList, RecordNewBuild, ImageContrast } from './comparison';

  const props = defineProps(['']);
  const emit = defineEmits(['closeComparisonModal']);

  // 右侧窗口是否展示
  const typeOpen = ref(true);
  function changeTypeOpen() {
    typeOpen.value = !typeOpen.value;
  }

  const recordList = ref([
    {
      id: '0',
      name: '变化检测_2024-05-15 17:13:27',
      time: '2024-05-15 17:13:27',
      createtime1: '2023-08-15 17:13:27',
      createtime2: '2024-05-15 17:13:27',
      changeRegion: '47',
      imageGroup: [
        {
          id: '01',
          show1: {
            title: 'DJL_20230825170915_0003_W_广角1',
            time: '2023-08-25 17:22:56',
            size: '8M',
            width: 1024,
            height: 576,
            url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
            imageJson: [],
          },
          show2: {
            title: 'DJL_20240925170915_0003_W_广角1',
            time: '2024-09-25 17:22:56',
            size: '8M',
            width: 1024,
            height: 576,
            url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
            imageJson: [],
          },
        },
        {
          id: '02',
          show1: {
            title: 'DJL_20230825170915_0003_W_广角2',
            time: '2023-08-25 17:22:56',
            size: '8M',
            width: 1024,
            height: 576,
            url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
            imageJson: [],
          },
          show2: {
            title: 'DJL_20240925170915_0003_W_广角2',
            time: '2024-09-25 17:22:56',
            size: '8M',
            width: 1024,
            height: 576,
            url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
            imageJson: [],
          },
        },
        {
          id: '03',
          show1: {
            title: 'DJL_20230825170915_0003_W_广角3',
            time: '2023-08-25 17:22:56',
            size: '8M',
            width: 1024,
            height: 576,
            url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
            imageJson: [],
          },
          show2: {
            title: 'DJL_20240925170915_0003_W_广角3',
            time: '2024-09-25 17:22:56',
            size: '8M',
            width: 1024,
            height: 576,
            url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
            imageJson: [],
          },
        },
      ],
    },
    {
      id: '1',
      name: '变化检测_2024-05-25 17:13:27',
      time: '2024-05-25 17:13:27',
      createtime1: '2024-05-25 17:13:27',
      createtime2: '2024-05-25 17:13:27',
      changeRegion: '47',
      imageGroup: [
        {
          id: '11',
          show1: {
            title: 'DJL_20230825170915_0003_W_广角1',
            time: '2023-08-25 17:22:56',
            size: '8M',
            width: 1024,
            height: 576,
            url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
            imageJson: [],
          },
          show2: {
            title: 'DJL_20240925170915_0003_W_广角1',
            time: '2024-09-25 17:22:56',
            size: '8M',
            width: 1024,
            height: 576,
            url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
            imageJson: [],
          },
        },
      ],
    },
    {
      id: '2',
      name: '变化检测_2024-06-05 17:13:27',
      time: '2024-06-05 17:13:27',
      createtime1: '2024-06-05 17:13:27',
      createtime2: '2024-06-05 17:13:27',
      changeRegion: '47',
      imageGroup: [
        {
          id: '21',
          show1: {
            title: 'DJL_20230825170915_0003_W_广角1',
            time: '2023-08-25 17:22:56',
            size: '8M',
            width: 1024,
            height: 576,
            url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
            imageJson: [],
          },
          show2: {
            title: 'DJL_20240925170915_0003_W_广角1',
            time: '2024-09-25 17:22:56',
            size: '8M',
            width: 1024,
            height: 576,
            url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
            imageJson: [],
          },
        },
      ],
    },
    {
      id: '3',
      name: '变化检测_2024-06-25 17:13:27',
      time: '2024-06-25 17:13:27',
      createtime1: '2024-06-25 17:13:27',
      createtime2: '2024-06-25 17:13:27',
      changeRegion: '47',
    },
    {
      id: '4',
      name: '变化检测_2024-06-25 17:13:27',
      time: '2024-06-25 17:13:27',
      createtime1: '2024-06-25 17:13:27',
      createtime2: '2024-06-25 17:13:27',
      changeRegion: '47',
    },
    {
      id: '5',
      name: '变化检测_2024-06-25 17:13:27',
      time: '2024-06-25 17:13:27',
      createtime1: '2024-06-25 17:13:27',
      createtime2: '2024-06-25 17:13:27',
      changeRegion: '47',
    },
  ]);
  const nowRecord = ref(recordList.value[0]);
  // 选择当前记录
  function chooseNowRecord(value) {
    nowRecord.value = value;
  }
  // 关闭窗口
  function closeComparisonModal() {
    emit('closeComparisonModal');
  }

  // 是否展示新建检测
  const isNewBuildStatus = ref(false);
  // 开启
  function openIsNewBuildStatus() {
    isNewBuildStatus.value = true;
  }
  // 关闭
  function closeIsNewBuildStatus() {
    isNewBuildStatus.value = false;
  }
</script>
<style lang="less" scoped>
  .comparisonModal {
    position: relative;
    width: 100%;
    height: 920px;
    background: #000000;

    // 页面不能被选中
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;

    // 关闭按钮
    .closeButton {
      position: absolute;
      top: 12px;
      left: 0px;
      height: 40px;
      width: 200px;

      display: flex;
      align-items: center;
      justify-content: center;

      .changeButton {
        height: 30px;
        width: 120px;
        border-radius: 5px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    // 标题
    .topDiv {
      background: #101010;
      color: #ffffff;
      width: 100%;
      height: 60px;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    // 内容
    .bodyDiv {
      background: #000000;
      width: 100%;
      display: flex;
      height: calc(100% - 60px);

      // 检测记录
      .jiancejiluDiv {
        position: relative;
        background: #232323;
        color: #ffffff;
        width: 360px;
        height: 100%;
        border-radius: 10px;
      }

      .imageDiv {
        position: relative;
        width: calc(100% - 360px);
      }
    }
  }
</style>
