<template>
  <!-- 左侧所有组件的展示列表 -->
  <content-box
    class="go-content-charts"
    :class="{ scoped: !getCharts }"
    title="组件"
    :depth="1"
    :backIcon="false"
  >
    <template #icon>
      <n-icon size="14" :depth="2">
        <bar-chart-icon></bar-chart-icon>
      </n-icon>
    </template>

    <template #top-right>
      <charts-search v-show="getCharts" :menuOptions="menuOptionsList"></charts-search>
    </template>
    <!-- 图表 -->
    <aside>
      <div class="menu-width-box">
        <n-menu
          class="menu-width"
          v-model:value="selectValue"
          :options="menuOptionsList"
          :icon-size="16"
          :indent="18"
          @update:value="clickItemHandle"
        ></n-menu>
        <div class="menu-component-box">
          <go-skeleton
            :load="!selectOptions"
            round
            text
            :repeat="2"
            style="width: 90%"
          ></go-skeleton>
          <charts-option-content
            v-if="selectOptions"
            :selectOptions="selectOptions"
            :key="selectValue"
          ></charts-option-content>
        </div>
      </div>
    </aside>
  </content-box>
  <a-modal
    class="photo-control-modal"
    v-model:open="photoModalStateStore.getOpen"
    width="1340px"
    style="top: 90px"
    :footer="null"
    :closable="false"
  >
    <PhotoModal :readonly="false"/>
  </a-modal>
</template>

<script setup lang="ts">
  import { ContentBox } from '../ContentBox/index';
  import { ChartsOptionContent } from './components/ChartsOptionContent';
  import { ChartsSearch } from './components/ChartsSearch';
  import { useAsideHook } from './hooks/useAside.hook';
  import PhotoModal from './components/PhotoModal/index.vue';
  import { photoModalStore } from '@/store/modules/photoModal';
  import { onMounted, ref } from 'vue';
  import { customComponentList } from '@/api/path/project.api';
  import { icon } from '@/plugins';
  import { renderIcon } from '@/utils';

  const { GridIcon } = icon.ionicons5;
  const {
    getCharts,
    BarChartIcon,
    themeColor,
    selectOptions,
    selectValue,
    clickItemHandle,
    menuOptions,
  } = useAsideHook();
  const photoModalStateStore = photoModalStore();
  const menuOptionsList = ref(menuOptions);
  const getCustomComponentList = async () => {
    const data = await customComponentList({
      page: 1,
      limit: 999,
    });
    let list = [];
    data.items.forEach((item) => {
      let obj = JSON.parse(item.content);
      list.push({
        ...obj,
        id: item.id,
      });
    });
    return list;
  };
  onMounted(async () => {
    getCustomComponentList().then((res) => {
      menuOptionsList.value.push({
        key: 'Group',
        label: '分组',
        icon: renderIcon(GridIcon),
        list: res,
      });
    });
  });
</script>

<style lang="scss" scoped>
  /* 整体宽度 */
  $width: 330px;
  /* 列表的宽度 */
  $widthScoped: 65px;
  /* 此高度与 ContentBox 组件关联 */
  $topHeight: 40px;

  @include go(content-charts) {
    width: $width;
    @extend .go-transition;
    &.scoped,
    .menu-width {
      width: $widthScoped;
    }
    .menu-width-box {
      display: flex;
      height: calc(100vh - #{$--header-height} - #{$topHeight});
      .menu-width {
        flex-shrink: 0;
        @include fetch-bg-color('background-color2');
        overflow: auto;
      }
      .menu-component-box {
        flex-shrink: 0;
        width: $width - $widthScoped;
        overflow: hidden;
      }
    }
    @include deep() {
      .menu-width {
        .n-menu-item {
          height: auto !important;
          &.n-menu-item--selected {
            &::after {
              content: '';
              position: absolute;
              left: 2px;
              top: 0;
              height: 100%;
              width: 3px;
              background-color: v-bind('themeColor');
              border-top-right-radius: 3px;
              border-bottom-right-radius: 3px;
            }
          }
          .n-menu-item-content {
            display: flex;
            flex-direction: column;
            padding: 6px 12px !important;
            font-size: 14px !important;
          }
          .n-menu-item-content__icon {
            font-size: 18px !important;
            margin-right: 0 !important;
          }
        }
      }
    }
  }
</style>
<style lang="scss">
  .photo-control-modal {
    .ant-modal-content {
      padding: 0px;
    }
  }
</style>
