<template>
  <div class="leftMenu">
    <div
      class="leftMenuTitle"
      :style="{
        width: leftMenuShow ? '340px' : '0px',
      }"
    >
      <div class="leftMenu_closeButton">
        <a-tooltip placement="right">
          <template #title> 关闭弹窗 </template>
          <CloseOutlined
            style="font-size: 24px; margin: 8px; color: white"
            @click="closePathModal"
          />
        </a-tooltip>
      </div>
      <a-tooltip placement="right">
        <template #title> {{ props.floderName }} </template>
        <div class="title">{{ props.floderName }}</div>
      </a-tooltip>
    </div>
    <div class="leftMenuContent">
      <div class="leftMenuContent_2" v-if="leftMenuShow">
        <div class="leftMenuContent_search">
          <a-select
            v-model:value="tagSelect"
            mode="multiple"
            style="width: 90%"
            placeholder="标签筛选"
            size="small"
            allowClear
            maxTagCount="3"
            :options="tagOptions"
            @change="handleChangeImageSearch"
          >
          </a-select>
          <a-select
            v-model:value="imageTypeSelect"
            mode="multiple"
            style="width: 90%; margin-top: 5px"
            placeholder="类型选择"
            allowClear
            size="small"
            maxTagCount="2"
            :options="imageOptions"
            @change="handleChangeImageSearch"
          >
          </a-select>
          <a-input-search
            v-model:value="searchValue"
            placeholder="按照媒体名称搜索"
            style="width: 90%; margin-top: 5px"
            @search="handleChangeImageSearch"
            allowClear
            size="small"
          />
        </div>
        <div class="leftMenuContent_list">
          <!-- 列表 -->
          <div v-for="show in showMenuInfoList" :key="show.id">
            <div
              class="showMenuInfo_image"
              v-if="showMenuInfoName == '地图照片'"
              :style="{
                background:
                  props.nowShowImageData && props.nowShowImageData.id == show.id
                    ? '#274D75'
                    : show.mouse
                      ? '#393939'
                      : '',
              }"
            >
              <FileImageOutlined />
              <div
                class="eye"
                @click="funShowOnMapOrDisplay(show, 'display')"
                :style="{ background: show.display ? '#2d8cf0' : '#000000' }"
              >
                <EyeOutlined v-if="show.display == 1" style="color: #ffffff; font-size: 16px" />
                <EyeInvisibleOutlined
                  v-if="show.display != 1"
                  style="color: #ffffff; font-size: 16px"
                />
              </div>
              <a-tooltip placement="top">
                <template #title>
                  <div> {{ show.name }}</div>
                </template>
                <div
                  :style="{
                    width: show.mouse ? '160px' : '210px',
                    'white-space': 'nowrap',
                    overflow: 'hidden',
                    'text-overflow': 'ellipsis',
                  }"
                  @click="setNowShowImageData(show)"
                >
                  {{ show.name }}
                </div>
              </a-tooltip>
              <a-tooltip placement="top">
                <template #title>
                  <span>回中</span>
                </template>
                <AimOutlined @click="handlerLocation(show)" />
              </a-tooltip>
              <a-popconfirm
                placement="right"
                title="您是否将该照片在地图上取消加载？取消后照片将不在地图上显示。"
                ok-text="确认"
                cancel-text="取消"
                @confirm="funShowOnMapOrDisplay(show, 'showOnMap')"
              >
                <a-tooltip placement="top">
                  <template #title>
                    <span>
                      {{ show.showOnMap ? '在地图上取消加载' : '在地图上加载' }}
                    </span>
                  </template>
                  <div style="display: flex; align-items: center">
                    <div v-if="show.showOnMap == 1" class="svg-container" v-html="showOnMap_1" />
                    <div v-if="show.showOnMap != 1" class="svg-container" v-html="showOnMap_0" />
                  </div>
                </a-tooltip>
              </a-popconfirm>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="suojinButton" @click="changeLeftMenuShow">
      <DoubleLeftOutlined v-if="leftMenuShow" style="font-size: 16px" />
      <DoubleRightOutlined v-if="!leftMenuShow" style="font-size: 16px" />
    </div>

    <div class="closeButton" v-if="!leftMenuShow">
      <a-tooltip placement="right">
        <template #title> 关闭弹窗 </template>
        <CloseOutlined style="font-size: 24px; margin: 8px; color: white" @click="closePathModal" />
      </a-tooltip>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch, onMounted } from 'vue';
  import {
    CloseOutlined,
    AntDesignOutlined,
    DoubleLeftOutlined,
    DoubleRightOutlined,
    EnvironmentOutlined,
    CodeSandboxOutlined,
    ExpandAltOutlined,
    BorderOutlined,
    LogoutOutlined,
    EyeOutlined,
    EyeInvisibleOutlined,
    AimOutlined,
    DeleteOutlined,
    FileImageOutlined,
    CheckCircleOutlined,
    StopOutlined,
  } from '@ant-design/icons-vue';
  import { showOnMap_1, showOnMap_0 } from './svg';
  import {
    UpdatePicStatus,
    Deletepic,
    UpdatePicName,
    UpdatePicParentKey,
  } from '@/api/demo/mediaLibrary';
  import { cloneDeep } from 'lodash-es';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage, createConfirm } = useMessage();

  const props = defineProps(['leftMenuShow', 'floderName', 'allImageDataList', 'nowShowImageData']);
  const emits = defineEmits([
    'changeLeftMenuShow',
    'handlerLocation',
    'closePathModal',
    'setNowShowImageData',
    'handleSuccessPath',
    'funUpdateDisplayOrShowOnMapData',
  ]);
  const showMenuInfoList = ref(props.allImageDataList);
  const showMenuInfoName = ref('地图照片');
  function updateShowMenuInfoList(type) {
    if (type == '地图照片') {
      handleChangeImageSearch();
    }
  }
  // 选择
  function setNowShowImageData(value) {
    emits('setNowShowImageData', value);
  }

  // 目录-隐藏或者显示
  function changeLeftMenuShow() {
    emits('changeLeftMenuShow');
  }
  // 弹窗-关闭弹窗
  function closePathModal() {
    emits('closePathModal');
  }

  // 地图图片-------------------------------------------------
  // 地图图片-搜索
  const filterAfterImageDataList = ref();
  // 标签筛选
  const tagSelect = ref([]);
  const tagOptions: any = ref([]);

  // 图片类型
  const imageTypeSelect = ref([]);
  const imageOptions: any = ref([
    {
      value: '广角照片',
      label: '广角照片',
    },
    {
      value: '变焦照片',
      label: '变焦照片',
    },
    {
      value: '红外照片',
      label: '红外照片',
    },
    {
      value: '全景图',
      label: '全景图',
    },
    {
      value: '码流截图',
      label: '码流截图',
    },
  ]);
  // 按照媒体名称搜索
  const searchValue = ref('');
  function handleChangeImageSearch() {
    // let filterImageData = props.allImageDataList;
    let filterImageData = props.allImageDataList.filter((item) => item.showOnMap == 1);
    // 标签筛选
    if (tagSelect.value.length > 0) {
      tagSelect.value.forEach((tag) => {
        filterImageData = filterImageData.filter((item) => item.fileTags.includes(tag));
      });
    }
    // 图片类型
    // if (tagSelect.value.length > 0) {
    //   imageTypeSelect.value.forEach((imagetype) => {
    //     filterImageData = filterImageData.filter((item) => item.fileTags.includes(imagetype));
    //   });
    // }
    // 按照媒体名称搜索
    if (searchValue.value) {
      filterImageData = filterImageData.filter((item) => item.name.includes(searchValue.value));
    }
    filterAfterImageDataList.value = filterImageData;
    showMenuInfoList.value = filterAfterImageDataList.value;
  }

  watch(
    () => props.allImageDataList,
    () => {
      filterAfterImageDataList.value = props.allImageDataList;
      // 标签选项
      let tagList: any = [];
      tagOptions.value = [];
      props.allImageDataList.forEach((item) => {
        if (item.fileTags && item.fileTags.length > 0) {
          item.fileTags.forEach((tag) => {
            if (!tagList.includes(tag)) {
              tagList.push(tag);
            }
          });
        }
      });
      tagList.forEach((tag) => {
        tagOptions.value.push({
          value: tag,
          label: tag,
        });
      });
      handleChangeImageSearch();
    },
    {
      deep: true,
      immediate: true,
    },
  );

  // 加载到地图上
  function funShowOnMapOrDisplay(show, type) {
    if (type == 'showOnMap') {
      if (show.showOnMap == 1) {
        show.showOnMap = 0;
      } else {
        show.showOnMap = 1;
      }
    }
    if (type == 'display') {
      if (show.display == 1) {
        show.display = 0;
      } else {
        show.display = 1;
      }
    }
    UpdatePicStatus({
      id: show.id,
      fileTags: JSON.stringify(show.fileTags),
      graffitiJson: JSON.stringify(show.graffitiJson),
      display: show.display,
      showOnMap: show.showOnMap,
    }).then((res) => {
      if (type == 'showOnMap') {
        if (show.showOnMap) {
          createMessage.success('在地图上加载成功');
        } else {
          createMessage.success('在地图上取消加载成功');
        }
      }
      emits('handleSuccessPath');
      emits('funUpdateDisplayOrShowOnMapData', show);
    });
  }

  // 移动到中心位置
  function handlerLocation(position) {
    if (showMenuInfoName.value == '地图照片') {
      emits('handlerLocation', {
        lng: position.lng,
        lat: position.lat,
      });
    }
  }

  defineExpose({
    updateShowMenuInfoList,
  });
</script>
<style lang="less" scoped>
  .leftMenu {
    position: relative;
    width: 100%;
    height: 100%;
    background: #232323;

    .leftMenuTitle {
      position: relative;
      width: 100%;
      height: 50px;
      padding: 10px;
      border-bottom: 1px solid #ffffff55;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;

      .leftMenu_closeButton {
        position: relative;
        padding-top: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
      }
      .title {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 20px;
        color: #ffffff;
        width: 100%;

        /* 关键属性 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .leftMenuContent {
      position: relative;
      display: flex;
      width: 100%;
      height: 800px;

      .leftMenuContent_2 {
        position: relative;
        width: 100%;
        height: calc(100%-50px);

        .leftMenuContent_search {
          margin: 10px;
          gap: 5px;
        }

        .leftMenuContent_list {
          margin-top: 5px;
          overflow-y: auto;
          max-height: 720px;

          // 地图照片
          .showMenuInfo_image {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            color: #ffffff;
            height: 30px;
            padding-left: 15px;
            gap: 10px;

            .eye {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 20px;
              height: 20px;
            }
            .buttonRight2 {
              position: absolute;
              right: 35px;
            }
            .buttonRight1 {
              position: absolute;
              right: 10px;
            }
          }
        }
      }
    }
  }

  .suojinButton {
    position: absolute;
    top: 45%;
    right: -18px;
    height: 90px;
    width: 18px;
    background: #ffffff;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
  }

  .closeButton {
    position: absolute;
    top: 2%;
    right: -25px;
    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
  }
  .svg-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
