<template>
  <!-- 左侧所有组件的展示列表 -->
  <content-box class="custom-content-charts" :class="{ scoped: !getCharts }" title="组件" :depth="1" :backIcon="false">
    <template #icon>
      <bar-chart-outlined></bar-chart-outlined>
    </template>
    <!-- 图表 -->
    <aside>
      <div class="menu-width-box">
        <a-menu v-model:selectedKeys="selectedKeys" mode="line" class="menu-parent" theme="light" @select="clickItemHandle">
          <a-menu-item v-for="mItem in menuOptions" :key="mItem.key">
            <div class="menu-parent-title">
              <div class="menu-parent-title-icon"><block-outlined /></div>
              <div class="menu-parent-title-label">{{ mItem.label }}</div>
            </div>
          </a-menu-item>
        </a-menu>
        <charts-option-content
          v-if="selectOptions"
          :getCharts="getCharts"
          :selectOptions="selectOptions"
          :key="selectedKeys"
        ></charts-option-content>
      </div>
    </aside>
  </content-box>
</template>

<script setup name="ContentChart">
import { toRefs, ref, onMounted } from 'vue';
import ContentBox from '../content-box/index.vue';
import { packagesList } from '../echart/index';
// 布局
import { useChartLayoutStore } from '@/store/modules/chart/chartLayoutStore';
import ChartsOptionContent from './charts-option-content.vue';
import { Menu as AMenu, MenuItem as AMenuItem } from 'ant-design-vue';

const { getCharts } = toRefs(useChartLayoutStore());

// 默认选中
const selectedKeys = ref([]);

const menuOptions = ref([]);

const packagesListObj = {
  Charts: {
    label: '图表'
  },
  Informations: {
    label: '信息'
  },
  Tables: {
    label: '列表'
  },
  Decorates: {
    label: '小组件'
  },
  Photos: {
    label: '图片'
  }
};

const selectOptions = ref(null);

onMounted(() => {
  handlePackagesList();
});

// 处理列表
const handlePackagesList = () => {
  for (const val in packagesList) {
    menuOptions.value.push({
      key: val,
      // @ts-ignore
      icon: packagesListObj[val].icon,
      // @ts-ignore
      label: packagesListObj[val].label,
      // @ts-ignore
      list: packagesList[val] ?? []
    });
  }
  selectedKeys.value = [menuOptions.value[0].key];
  selectOptions.value = menuOptions.value[0];
};

const clickItemHandle = ({ key }) => {
  let itemData = menuOptions.value.filter(item => item.key == key);
  selectOptions.value = itemData[0];
};
</script>

<style scoped lang="less">
.custom-content-charts {
  width: 330px;
  transition: all 0.4s;

  &.scoped,
  .menu-width {
    width: 65px;
  }
  .menu-width-box {
    display: flex;
    height: calc(100vh - 100px);
    .menu-width {
      flex-shrink: 0;
      background-color: #f8f8f9;
    }
    .menu-component-box {
      flex-shrink: 0;
      width: 330px - 65px;
      overflow: hidden;
    }
  }

  .menu-parent {
    width: 65px;
    padding: 6px 8px;
    background-color: #f8f8f9;

    :deep(.ant-menu-item) {
      padding: 0;
      display: flex;
      justify-content: center;
      border-radius: 8px;
      height: 60px;
    }

    :deep(.ant-menu-item-selected) {
      box-shadow: 0 0 2px var(--primary-2);
    }

    .menu-parent-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      div {
        line-height: 20px !important;
      }

      .menu-parent-title-icon {
        :deep(.anticon) {
          line-height: 20px !important;
          font-size: 20px;
        }
      }
    }
  }
}
</style>
