<template>
  <div class="search-menu">
    <div class="menu-item" @click="changeSelect(1)">
      <div :class="`item-icon ${select == 1 ? 'active' : ''}`"><FileSearchOutlined /></div>
      <div class="item-text">搜索</div>
    </div>
    <div class="menu-item" @click="changeSelect(2)">
      <div :class="`item-icon ${select == 2 ? 'active' : ''}`"
        ><Icon style="font-size: 20px" icon="gis:satellite"
      /></div>
      <div class="item-text">卫星</div>
    </div>
    <div class="menu-item" @click="changeSelect(3)">
      <div :class="`item-icon ${select == 3 ? 'active' : ''}`"
        ><Icon style="font-size: 20px" icon="cbi:reolink-811"
      /></div>
      <div class="item-text">摄像头</div>
    </div>
    <div class="menu-item" @click="changeSelect(4)">
      <div :class="`item-icon ${select == 4 ? 'active' : ''}`"
        ><Icon style="font-size: 20px" icon="gis:drone"
      /></div>
      <div class="item-text">无人机</div>
    </div>
    <div class="menu-item" @click="open = true">
      <div :class="`item-icon ${select == 5 ? 'active' : ''}`"><StarFilled /></div>
      <div class="item-text">收藏</div>
    </div>
    <div class="menu-content" v-if="[1, 2, 3].includes(select)">
      <Search v-if="select == 1" />
      <Satellite v-if="select == 2" />
      <Camera v-if="select == 3" />
    </div>
    <!-- 弹窗 -->
    <a-modal
      v-model:open="open"
      :footer="false"
      @cancel="open = false"
      :width="compare ? '1020px' : '510px'"
      style="top: 20px"
    >
      <div class="modal-content-div">
        <div class="title-text">
          {{ compare ? '国家云查询结果(对比模式)' : '国家云查询结果' }}
          <Icon
            class="split-button"
            style="font-size: 20px"
            icon="bi:layout-split"
            @click="changeCompare"
          />
        </div>
        <div style="display: flex; width: 100%">
          <div :style="`display: block; width: ${compare ? '50%' : '100%'};`">
            <CloudQueryModal />
          </div>
          <div style="display: block; width: 50%; margin-left: 20px" v-if="compare">
            <CloudQueryModal />
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { FileSearchOutlined, StarFilled } from '@ant-design/icons-vue';
  import Search from './Search/index.vue';
  import Satellite from './Satellite/index.vue';
  import Camera from './Camera/index.vue';
  import Icon from '@/components/Icon/Icon.vue';
  import { ref } from 'vue';
  import CloudQueryModal from './CloudQueryModal/index.vue';
  const select = ref(0);
  const open = ref(false);
  const compare = ref(false);
  const changeSelect = (value) => {
    if (select.value == value) {
      select.value = 0;
      return;
    }
    select.value = value;
  };
  const changeCompare = () => {
    compare.value = !compare.value;
    console.log('compare.value', compare.value);
  };
</script>

<style lang="scss" scoped>
  .modal-content-div {
    padding: 53px 20px 10px 20px;
    width: 100%;
    .title-text {
      display: flex;
      justify-content: center;
      font-size: 18px;
      color: #2f83d9;
      text-decoration: underline;
      font-weight: 600;
      position: relative;
    }
    .split-button {
      font-size: 20px;
      display: inline-flex;
      position: absolute;
      right: 8px;
      top: 2px;
      color: #000000a3;
      cursor: pointer;
    }
  }
  .search-menu {
    width: 50px;
    height: 355px;
    background-color: #fff;
    position: absolute;
    top: 30px;
    left: 20px;
    border-radius: 25px;
    padding-top: 19px;
  }
  .active {
    background: repeating-linear-gradient(to left, rgb(38, 51, 231), rgb(20, 118, 230));
    color: #fff;
  }
  .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 7px;
    cursor: pointer;
    .item-icon {
      font-size: 20px;
      margin-bottom: 2px;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      transition: 0.2s;
    }
    .item-text {
      user-select: none;
    }
  }
  .menu-content {
    padding: 10px;
    background: #fff;
    position: absolute;
    top: 0px;
    left: 70px;
    width: 420px;
  }
</style>
