<template>
  <div class="comparisonModal">
    <div class="closeButton">
      <LeftOutlined style="color: white; font-size: 20px; margin-right: 10px" />
      <div
        class="changeButton"
        :style="{
          background: typeOpen ? '#2A7DC9' : '#5D5F61',
        }"
        @click="typeOpen = !typeOpen"
      >
        变化检测
        <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">
        <div class="jiancejiluDiv_title">
          <span style="margin-left: 15px; font-size: 16px; font-weight: bold">检测记录</span>
        </div>
        <div class="jiancejiluDiv_filter">
          <div class="jiancejiluDiv_filter_row1">
            <a-range-picker v-model:value="value1" />
            <SearchOutlined
              class="SearchOutlined"
              :style="{
                color: showSearch ? '#2D8CF0' : '#ffffff',
              }"
              @click="showSearch = !showSearch"
            />
          </div>
          <div class="jiancejiluDiv_filter_row2" v-if="showSearch">
            <a-input
              v-model:value="value2"
              placeholder="按检测名称搜索"
              style="width: 90%"
            ></a-input>
          </div>
        </div>
        <div class="jiancejiluDiv_dropdown">
          <a-dropdown>
            <a class="jiancejiluDiv_dropdown_showtitle" @click.prevent>
              {{ dropdownSelect }}
              <CaretDownOutlined />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <a @click="dropdownSelect = '所有航点航线'">所有航点航线</a>
                </a-menu-item>
                <a-menu-item>
                  <a @click="dropdownSelect = '巡检航点航线'">巡检航点航线</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </div>
      <div
        class="imageDiv"
        :style="{
          width: typeOpen ? 'calc(100% - 360px)' : '100%',
        }"
      >
        <div class="imageDiv_Comparison">
          <div class="imageDiv_Comparison_title">视窗1</div>
          <div class="imageDiv_Comparison_1">1</div>
        </div>
        <div class="imageDiv_Comparison">
          <div class="imageDiv_Comparison_title">视窗2</div>
          <div class="imageDiv_Comparison_2">2</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import {
    LeftOutlined,
    CaretDownOutlined,
    CaretUpOutlined,
    SearchOutlined,
  } from '@ant-design/icons-vue';

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

  const typeOpen = ref(true);
  const showSearch = ref(false);
  const dropdownSelect = ref('所有航点航线');
</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;

        // 标题
        .jiancejiluDiv_title {
          position: relative;
          top: 0px;
          left: 0px;
          color: #ffffff;
          height: 50px;
          width: 100%;
          border-bottom: 1px solid #ffffff55;
          display: flex;
          align-items: center;
          justify-content: flex-start;
        }

        // 查询
        .jiancejiluDiv_filter {
          position: relative;
          top: 0px;
          left: 0px;
          width: 100%;
          height: auto;
          margin-top: 10px;
          margin-bottom: 10px;
          display: block;

          .jiancejiluDiv_filter_row1 {
            display: flex;
            align-items: center;
            justify-content: center;

            .SearchOutlined {
              color: #ffffff;
              font-size: 22px;
              margin-left: 12px;
            }
          }

          .jiancejiluDiv_filter_row2 {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
          }
        }

        // 下拉框
        .jiancejiluDiv_dropdown {
          position: relative;
          top: 0px;
          left: 0px;

          .jiancejiluDiv_dropdown_showtitle {
            color: #ffffff;
            margin-left: 18px;
          }
        }
      }

      .imageDiv {
        position: relative;
        display: flex;
        // width: 100%;
        width: calc(100% - 360px);
        gap: 5px;

        .imageDiv_Comparison {
          position: relative;
          width: 50%;
          height: 100%;

          .imageDiv_Comparison_title {
            position: relative;
            color: #ffffff;
            font-size: 20px;
            margin-left: 35px;
            margin-top: 8px;
          }

          .imageDiv_Comparison_1 {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 0px;
            top: 30px;
            background: #2773c3;
            width: 30px;
            height: 25px;
            border-radius: 10px 0px 0px 10px;
          }

          .imageDiv_Comparison_2 {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 0px;
            top: 30px;
            background: #cb8824;
            width: 30px;
            height: 25px;
            border-radius: 0px 10px 10px 0px;
          }

          .imageDiv_Comparison_2 {
          }
        }
      }
    }
  }
</style>
