<template>
  <!-- 侧边栏和数据分发处理 -->
  <div class="custom-chart-common" v-show="getCharts">
    <a-menu
      v-show="hidePackageOneCategory"
      class="chart-menu-width"
      v-model:selectedKeys="selectValue"
      theme="light"
      @select="clickItemHandle"
    >
      <a-menu-item v-for="mItem in packages.menuOptions" :key="mItem.key">
        {{ mItem.label }}
      </a-menu-item>
    </a-menu>
    <div class="chart-content-list">
      <charts-item-box :menuOptions="packages.selectOptions"  @deletePhoto="deleteHandle"></charts-item-box>
    </div>
  </div>
</template>

<script setup name="ChartsOptionContent">
import { ref, watch, computed, reactive, defineAsyncComponent } from 'vue';
import { useSettingStore } from '@/store/modules/chart/settingStore';
import { usePackagesStore } from '@/store/modules/chart/packagesStore'
import { Menu as AMenu, MenuItem as AMenuItem } from 'ant-design-vue';

const ChartsItemBox = defineAsyncComponent(() => import('./charts-item-box.vue'));

const props = defineProps({
  selectOptions: {
    type: Object,
    default: () => {}
  },
  getCharts: Boolean
});

// 隐藏设置
const settingStore = useSettingStore();
const packagesStore = usePackagesStore()

const hidePackageOneCategory = computed(() => {
  if (packages.categorysNum > 1) return true;
  return !settingStore.getHidePackageOneCategory;
});

let packages = reactive({
  // 侧边栏
  menuOptions: [],
  // 当前选择
  selectOptions: {},
  // 分类归档
  categorys: {
    all: []
  },
  categoryNames: {
    all: '所有'
  },
  // 分类归档数量
  categorysNum: 0,
  // 存储不同类别组件进来的选中值
  saveSelectOptions: {}
});

const selectValue = ref([]);

// 设置初始列表
const setSelectOptions = categorys => {
  for (const val in categorys) {
    packages.selectOptions = categorys[val];
    break;
  }
};

watch(
  // @ts-ignore
  () => props.selectOptions,
  newData => {
    packages.categorysNum = 0;
    if (!newData) return;
    newData.list.forEach(e => {
      const value = packages.categorys[e.category];
      // @ts-ignore
      packages.categorys[e.category] = value && value.length ? [...value, e] : [e];
      packages.categoryNames[e.category] = e.categoryName;
      packages.categorys['all'].push(e);
    });
    for (const val in packages.categorys) {
      packages.categorysNum += 1;
      packages.menuOptions.push({
        key: val,
        label: packages.categoryNames[val]
      });
    }
    setSelectOptions(packages.categorys);
    // 默认选中处理
    selectValue.value = [packages.menuOptions[0]['key']];
  },
  {
    immediate: true
  }
);

watch(
  () => packagesStore.newPhoto,
  newPhoto => {
    if (!newPhoto) return
    const newPhotoCategory = newPhoto.category
    packages.categorys[newPhotoCategory].splice(1, 0, newPhoto)
    packages.categorys['all'].splice(1, 0, newPhoto)
  }
)

// 删除图片
const deleteHandle = (item, index) => {
  packages.categorys[item.category].splice(index, 1)
  packages.categorys['all'].splice(index, 1)
}

// 处理点击事件
const clickItemHandle = ({ key }) => {
  packages.selectOptions = packages.categorys[key];
};
</script>

<style scoped lang="less">
.custom-chart-common {
  display: flex;
  width: 265px;
  height: calc(100vh - 100px);

  .chart-menu-width {
    width: 65px;
    flex-shrink: 0;
    background-color: #fff;

    width: 65px;
    padding: 2px 8px;
    border-color: #fff;

    :deep(.ant-menu-item) {
      padding: 0;
      display: flex;
      justify-content: center;
      border-radius: 8px;
      height: auto;
    }
  }
  .chart-content-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
