<template>
  <a-space :size="25">
    <a-button type="text" style="margin-left: -25px" @click="back"><home-outlined /></a-button>
    <a-space>
      <!-- 模块展示按钮 -->
      <a-tooltip v-for="item in btnList" :key="item.key" placement="bottom" trigger="hover">
        <template #title>
          {{ item.title }}
        </template>
        <a-button style="border-radius: 8px" @click="clickHandle(item)" :type="selectBtnType(item)" :ghost="selectBtnGhost(item)">
          <bar-chart-outlined v-if="item.key == 'charts'" />
          <codepen-outlined v-if="item.key == 'layers'" />
          <heat-map-outlined v-if="item.key == 'details'" />
        </a-button>
      </a-tooltip>
    </a-space>
    <a-divider type="vertical" style="height: 15px; border-color: #ccc" />
    <a-space>
      <a-tooltip v-for="item in historyList" :key="item.key" placement="bottom" trigger="hover">
        <template #title>
          {{ item.title }}
        </template>
        <a-button style="border-radius: 8px" :disabled="!item.select" @click="clickHistoryHandle(item)">
          <arrow-left-outlined v-if="item.key == 'backStack'" />
          <arrow-right-outlined v-if="item.key == 'forwardStack'" />
        </a-button>
      </a-tooltip>
    </a-space>
  </a-space>
</template>

<script setup name="ChartHeaderLeft">
import { reactive, computed, toRefs, onMounted } from 'vue';
import { useChartEditStore } from '@/store/modules/chart/chartEditStore';
import { useChartHistoryStore } from '@/store/modules/chart/chartHistoryStore';
import { useChartLayoutStore } from '@/store/modules/chart/chartLayoutStore';
import { useRemoveKeyboard } from '../../hook/useKeyboard.hook';
import { useRouter } from 'vue-router';
import { Space as ASpace, Tooltip as ATooltip, Divider as ADivider } from 'ant-design-vue';

const router = useRouter();
const { setItem } = useChartLayoutStore();
const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore());
const chartHistoryStore = useChartHistoryStore();
const chartEditStore = useChartEditStore();

// 后退
const isBackStack = computed(() => chartHistoryStore.getBackStack.length > 1);
// 前进
const isForwardStack = computed(() => chartHistoryStore.getForwardStack.length > 0);

const btnList = reactive([
  {
    key: 'charts',
    select: getCharts,
    title: '图表组件'
  },
  {
    key: 'layers',
    select: getLayers,
    title: '图层控制'
  },
  {
    key: 'details',
    select: getDetails,
    title: '详情设置'
  }
]);

const historyList = reactive([
  {
    key: 'backStack',
    // 一定会有初始化画布
    select: isBackStack,
    title: '后退'
  },
  {
    key: 'forwardStack',
    select: isForwardStack,
    title: '前进'
  }
]);

onMounted(() => {});

// 布局处理
const clickHandle = item => {
  setItem(item.key, !item.select);
};

// 历史记录处理
const clickHistoryHandle = item => {
  switch (item.key) {
    case 'backStack':
      chartEditStore.setBack();
      break;
    case 'forwardStack':
      chartEditStore.setForward();
      break;
  }
};

const selectBtnType = item => {
  if (item.key == 'details') {
    return item.select ? '' : 'primary';
  }
  return item.select ? 'primary' : '';
};

const selectBtnGhost = item => {
  if (item.key == 'details') {
    return item.select ? false : true;
  }
  return item.select ? true : false;
};

const back = () => {
  useRemoveKeyboard();
  router.push('/mid/app/report');
};
</script>

<style></style>
