<!--
 * @Author: nxy
 * @Date: 2024-06-11 09:35:20
-->
<template>
  <content-box
    class="custom-content-layers"
    :class="{ scoped: !chartLayoutStore.getLayers }"
    title="图层"
    :depth="2"
    @back="backHandle"
    @mousedown="boxMousedownHandle($event)"
  >
    <template #icon>
      <codepen-outlined />
    </template>
    <template #top-right></template>

    <!-- 图层内容 -->
    <a-space v-if="reverseList.length === 0" justify="center">
      <span class="not-layer-text">暂无图层~</span>
    </a-space>

    <draggable item-key="id" v-model="layerList" ghostClass="ghost" @change="onMoveCallback">
      <template #item="{ element }">
        <div class="custom-content-layer-box">
          <!-- 组合 -->
          <layers-group-list-item v-if="element.isGroup" :componentGroupData="element" :layer-mode="layerMode"></layers-group-list-item>
          <!-- 单组件 -->
          <layers-list-item
            v-else
            :componentData="element"
            :layer-mode="layerMode"
            @mousedown="mousedownHandle($event, element)"
            @mouseenter="mouseenterHandle(element)"
            @mouseleave="mouseleaveHandle(element)"
            @contextmenu="handleContextMenu($event, element, optionsHandle)"
          ></layers-list-item>
        </div>
      </template>
    </draggable>
  </content-box>
</template>

<script setup name="ChartLayers">
import Draggable from 'vuedraggable';
import { cloneDeep } from 'lodash-es';
import { computed, ref, watch } from 'vue';
import ContentBox from '../content-box/index.vue';
import { useContextMenu } from '../../hook/useContextMenu.hook';
import { useChartEditStore } from '@/store/modules/chart/chartEditStore';
import { useChartLayoutStore } from '@/store/modules/chart/chartLayoutStore';
import LayersListItem from './layers-list-item.vue';
import LayersGroupListItem from './layers-group-list-item.vue';
import { Space as ASpace } from 'ant-design-vue';

const chartLayoutStore = useChartLayoutStore();
const chartEditStore = useChartEditStore();
const { handleContextMenu, onClickOutSide } = useContextMenu();

const layerList = ref([]);
const layerMode = ref(chartLayoutStore.getLayerType);

// 逆序展示
const reverseList = computed(() => {
  const list = cloneDeep(chartEditStore.getComponentList);
  return list.reverse();
});

watch(
  () => reverseList.value,
  newValue => {
    layerList.value = newValue;
  }
);

// 缩小
const backHandle = () => {
  chartLayoutStore.setItem('layers', false);
};

const boxMousedownHandle = e => {
  const box = document.querySelector('.custom-content-layer-box');
  if (e.target.contains(box)) {
    chartEditStore.setTargetSelectChart();
  }
};

// 右键事件
const optionsHandle = (targetList, allList, targetInstance) => {
  // 多选处理
  if (chartEditStore.getTargetChart.selectId.length > 1) {
    return targetList.filter(i => i.key === 'group');
  }
  const statusMenuEnums = [];
  // 处理锁定与隐藏
  if (targetInstance.status.lock) {
    statusMenuEnums.push('lock');
  } else {
    statusMenuEnums.push('unLock');
  }
  if (targetInstance.status.hide) {
    statusMenuEnums.push('hide');
  } else {
    statusMenuEnums.push('show');
  }
  return targetList.filter(item => !statusMenuEnums.includes(item.key));
};

// 移动结束处理
const onMoveCallback = val => {
  const { oldIndex, newIndex } = val.moved;
  if (newIndex - oldIndex > 0) {
    // 从上往下
    const moveTarget = chartEditStore.getComponentList.splice(-(oldIndex + 1), 1)[0];
    chartEditStore.getComponentList.splice(-newIndex, 0, moveTarget);
  } else {
    // 从下往上
    const moveTarget = chartEditStore.getComponentList.splice(-(oldIndex + 1), 1)[0];
    if (newIndex === 0) {
      chartEditStore.getComponentList.push(moveTarget);
    } else {
      chartEditStore.getComponentList.splice(-newIndex, 0, moveTarget);
    }
  }
};

// 点击事件
const mousedownHandle = (e, item) => {
  onClickOutSide();
  // 若此时按下了 CTRL, 表示多选
  const id = item.id;
  if (e.buttons === 1 && window.$KeyboardActive?.ctrl) {
    // 若已选中，则去除
    if (chartEditStore.targetChart.selectId.includes(id)) {
      const exList = chartEditStore.targetChart.selectId.filter(e => e !== id);
      chartEditStore.setTargetSelectChart(exList);
    } else {
      chartEditStore.setTargetSelectChart(id, true);
    }
    return;
  }
  chartEditStore.setTargetSelectChart(id);
};

// 进入事件
const mouseenterHandle = item => {
  chartEditStore.setTargetHoverChart(item.id);
};

// 移出事件
const mouseleaveHandle = item => {
  chartEditStore.setTargetHoverChart(undefined);
};

// 修改图层展示方式
const changeLayerType = value => {
  layerMode.value = value;
  chartLayoutStore.setItem('layerType', value);
};
</script>

<style scoped lang="less">
.custom-content-layers {
  width: 200px;
  overflow: hidden;
  transition: all 0.4s;

  .not-layer-text {
    position: relative;
    top: 10px;
    left: 100%;
    white-space: nowrap;
    opacity: 0.4;
  }
  &.scoped {
    width: 0;
  }
  .ghost {
    opacity: 0;
  }
  .custom-layer-mode-active {
    color: #51d6a9;
  }
}
</style>
