<template>
  <div class="leftMenu">
    <div class="leftMenuContent">
      <div class="leftMenuContent_2" v-if="leftMenuShow">
        <div class="leftMenuContent_title">
          {{ showMenuInfoName }}
        </div>
        <a-input-search
          v-model:value="searchValue"
          placeholder="按标注名称搜索"
          style="width: 90%; margin: 10px"
          @search="handleChangeAnnotationSearch"
          allowClear
          size="small"
        />
        <div class="leftMenuContent_tree">
          <a-tree :expanded-keys="expandedKeys" :tree-data="treeData" defaultExpandAll>
            <template #title="{ dataRef }">
              <div
                class="showMenuInfo_annotation"
                @mouseenter="
                  dataRef.mouse = true;
                  dataRef.deleteClickNum = 0;
                "
                @mouseleave="
                  dataRef.mouse = false;
                  dataRef.deleteClickNum = 0;
                "
              >
                <AntDesignOutlined v-if="dataRef.type == 0" />
                <ExpandAltOutlined v-if="dataRef.type == 1" />
                <BorderOutlined v-if="dataRef.type == 2" />
                <LogoutOutlined v-if="dataRef.type == 3" />
                <div
                  class="eye"
                  v-if="!dataRef.children"
                  @click="
                    dataRef.state == 0 ? hideThisAnnotation(dataRef) : showThisAnnotation(dataRef)
                  "
                  :style="{ background: dataRef.state == 0 ? '#2d8cf0' : '#000000' }"
                >
                  <EyeOutlined v-if="dataRef.state == 0" style="color: #ffffff; font-size: 16px" />
                  <EyeInvisibleOutlined
                    v-if="dataRef.state == 1"
                    style="color: #ffffff; font-size: 16px"
                  />
                </div>
                <span
                  :class="dataRef.mouse ? 'title_mouse' : 'title_nomouse'"
                  @click="setNowShowAnnotationData(dataRef)"
                >
                  {{ dataRef.title }}
                </span>
                <div class="buttonSwitch" v-if="dataRef.children">
                  <a-switch
                    v-model:checked="dataRef.showOrHide"
                    checked-children="显示"
                    un-checked-children="隐藏"
                    @change="changeWorkSpaceShowOrHide"
                  />
                </div>
                <div class="buttonRight2" v-if="!dataRef.children && dataRef.mouse">
                  <a-tooltip placement="top">
                    <template #title>
                      <span>回中</span>
                    </template>
                    <AimOutlined @click="handlerLocation(dataRef)" />
                  </a-tooltip>
                </div>
                <div
                  class="buttonRight1"
                  v-if="!dataRef.children && dataRef.mouse"
                  :style="{ background: dataRef.deleteClickNum == 1 ? '#FF0000' : '' }"
                >
                  <a-tooltip placement="top">
                    <template #title>
                      <span>{{ dataRef.deleteClickNum == 0 ? '删除' : '再次点击删除' }}</span>
                    </template>
                    <DeleteOutlined
                      @click="
                        dataRef.deleteClickNum == 1
                          ? deleteAnnotation(dataRef)
                          : dataRef.deleteClickNum++
                      "
                    />
                  </a-tooltip>
                </div>
              </div>
            </template>
          </a-tree>
        </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>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import {
    AntDesignOutlined,
    DoubleLeftOutlined,
    DoubleRightOutlined,
    ExpandAltOutlined,
    BorderOutlined,
    LogoutOutlined,
    EyeOutlined,
    EyeInvisibleOutlined,
    AimOutlined,
    DeleteOutlined,
  } from '@ant-design/icons-vue';
  import { UpdateWorkArea, UpdateAnnotation } from '@/api/demo/mediaLibrary';
  import { cloneDeep } from 'lodash-es';
  import dayjs from 'dayjs';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage, createConfirm } = useMessage();

  const props = defineProps([
    'leftMenuShow',
    'allWorkspaceDataList',
    'allAnnotationDataList',
    'nowShowAnnotationData',
  ]);
  const emits = defineEmits([
    'changeLeftMenuShow',
    'handlerLocation',
    'setNowShowAnnotationData',
    'setAllAnnotationData',
    'deleteAnnotation',
    'treeDataShowOrHide',
  ]);

  const showMenuInfoName = ref('地图标注');

  function updateShowMenuInfoList(type) {
    if (type == '地图标注') {
      handleChangeAnnotationSearch();
    }
  }

  // 目录-隐藏或者显示
  function changeLeftMenuShow() {
    emits('changeLeftMenuShow');
  }
  // 项目级别的显示或者隐藏
  function changeWorkSpaceShowOrHide() {
    treeDataShowOrHideList = [];
    treeData.value.forEach((tree) => {
      treeDataShowOrHideList.push({
        id: tree.key,
        showOrHide: tree.showOrHide,
      });
    });
    let showIdList: any = [];
    treeDataShowOrHideList.map((item) => {
      if (item.showOrHide) {
        showIdList.push(item.id);
      }
    });
    emits('treeDataShowOrHide', showIdList);
  }
  // 查找项目级别的显示或者隐藏
  function getShowOrHide(id) {
    if (treeDataShowOrHideList.length > 0) {
      const item = treeDataShowOrHideList.find((item) => item.id === id);
      return item ? item.showOrHide : true;
    } else {
      return true;
    }
  }

  // 地图标注-搜索
  const treeData: any = ref([]);
  // 记录项目级别的显示或者隐藏
  let treeDataShowOrHideList: any = [];
  // 展开
  const expandedKeys: any = ref([]);
  // 搜索
  const searchValue = ref('');
  function handleChangeAnnotationSearch() {
    treeData.value = [];
    // 项目一级
    let allWorkspaceDataList = props.allWorkspaceDataList.sort((a, b) => {
      return dayjs(a.CreateTime) - dayjs(b.CreateTime);
    });
    allWorkspaceDataList.forEach((item) => {
      treeData.value.push({
        key: item.Id,
        title: item.WorkspaceName,
        showOrHide: getShowOrHide(item.Id),
        children: [],
      });
    });
    // 展示全部
    expandedKeys.value = allWorkspaceDataList.map((item) => item.Id);
    // 标注一级
    let allAnnotationDataList = props.allAnnotationDataList.sort((a, b) => {
      return dayjs(a.createTime) - dayjs(b.createTime);
    });
    allAnnotationDataList.forEach((annotation) => {
      treeData.value.forEach((tree) => {
        if (tree.key == annotation.workSpaceId) {
          tree.children.push({
            ...annotation,
            key: annotation.id,
            title: annotation.name,
          });
        }
      });
    });
    // 搜索
    if (searchValue.value) {
      treeData.value.forEach((tree) => {
        tree.children = tree.children.filter((item) => item.title.includes(searchValue.value));
      });
    }
  }

  // 地图标注-删除标注
  function deleteAnnotation(show) {
    show.deleteClickNum = 0;
    emits('deleteAnnotation', show);
  }
  // 地图标注-显示该标注
  function showThisAnnotation(value) {
    setNowShowAnnotationData({
      ...value,
      state: 0,
    });
    UpdateAnnotation({
      ...value,
      properties: JSON.stringify(value.properties),
      state: 0,
    }).then((res) => {
      emits('setAllAnnotationData');
    });
  }
  // 地图标注-隐藏该标注
  function hideThisAnnotation(value) {
    setNowShowAnnotationData({
      ...value,
      state: 1,
    });
    UpdateAnnotation({
      ...value,
      properties: JSON.stringify(value.properties),
      state: 1,
    }).then((res) => {
      emits('setAllAnnotationData');
    });
  }

  // 设定当前标记
  function setNowShowAnnotationData(value) {
    emits('setNowShowAnnotationData', value);
  }

  // 移动到中心位置
  function handlerLocation(position) {
    emits('handlerLocation', {
      lng: parseFloat(position.properties.centerPoint[0]),
      lat: parseFloat(position.properties.centerPoint[1]),
    });
  }

  watch(
    () => props.nowShowAnnotationData,
    () => {
      treeData.value.forEach((tree) => {
        tree.children?.forEach((t) => {
          if (t.id == props.nowShowAnnotationData.id) {
            t.title = props.nowShowAnnotationData.name;
          }
        });
      });
    },
    {
      deep: true,
    },
  );

  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;
      .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: calc(100%-50px);
      // height: 800px;

      .leftMenuContent_2 {
        position: relative;
        width: 275px;
        height: 100%;

        .leftMenuContent_title {
          margin-top: 10px;
          margin-left: 10px;
          color: #ffffff;
          font-size: 16px;
        }

        .leftMenuContent_tree {
          overflow-y: auto;
          max-height: 750px;
          width: 100%;
        }
      }
    }
  }

  // 地图标注
  .showMenuInfo_annotation {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    color: #ffffff;
    height: 30px;
    width: 100%;
    gap: 5px;

    .eye {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
    }
    .title_mouse {
      position: relative;
      width: 135px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .title_nomouse {
      position: relative;
      width: 170px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .buttonSwitch {
      position: absolute;
      right: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 20px;
    }
    .buttonRight2 {
      position: absolute;
      right: 30px;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .buttonRight1 {
      position: absolute;
      right: 5px;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .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;
  }

  ::v-deep .ant-tree-list {
    background: #232323 !important;
  }
  ::v-deep .ant-tree {
    color: #ffffff !important;
  }
  ::v-deep .ant-tree-treenode {
    width: 100% !important;
  }
  ::v-deep .ant-tree-node-content-wrapper {
    width: 100% !important;
  }
  ::v-deep .ant-tree-switcher {
    color: #ffffff !important;
  }
  ::v-deep .ant-tree-node-selected {
    background: #25384c !important;
  }
</style>
