<template>
  <a-layout has-sider>
    <a-layout-content>
      <!-- 图表拖拽区域 -->
      <content-edit></content-edit>
    </a-layout-content>
    <!-- 右侧配置 -->
    <a-layout-sider theme="light" style="background-color: #f2f3f5" collapse-mode="transform" :width="collapsed ? 0 : 350" collapsible :trigger="null">
      <content-box class="custom-content-configurations" :show-top="false" :depth="2">
        <a-tabs v-model:activeKey="activeKey" class="page-tab" type="card" v-if="!selectTarget" size="small">
          <a-tab-pane key="1" tab="页面配置">
            <PageConfig />
          </a-tab-pane>
        </a-tabs>
        <a-tabs v-model:activeKey="tabsSelect" class="other-tab" type="card" v-if="selectTarget" size="small">
          <a-tab-pane key="chartSetting" tab="定制">
            <ChartSetting />
          </a-tab-pane>
          <a-tab-pane key="chartData" tab="数据">
            <ChartData />
          </a-tab-pane>
          <a-tab-pane key="chartEvent" tab="事件">
            <ChartEvent />
          </a-tab-pane>
        </a-tabs>
      </content-box>
    </a-layout-sider>
  </a-layout>
</template>

<script setup name="ContentConfigurations">
import { ref, toRefs, computed, defineAsyncComponent } from 'vue';
import { useChartLayoutStore } from '@/store/modules/chart/chartLayoutStore';
import { useChartEditStore } from '@/store/modules/chart/chartEditStore';

const ContentEdit = defineAsyncComponent(() => import('../content-edit/index.vue'));
const ContentBox = defineAsyncComponent(() => import('../content-box/index.vue'));
const PageConfig = defineAsyncComponent(() => import('./config/page-config.vue'));
const ChartSetting = defineAsyncComponent(() => import('./config/chart-setting.vue'));
const ChartData = defineAsyncComponent(() => import('./config/chart-data.vue'));
const ChartEvent = defineAsyncComponent(() => import('./config/chart-event.vue'));

const { getDetails } = toRefs(useChartLayoutStore());
const { setItem } = useChartLayoutStore();
const chartEditStore = useChartEditStore();
const collapsed = computed(() => {
  return getDetails.value;
});

const tabsSelect = ref('chartSetting');

const activeKey = ref('1');

const selectTarget = computed(() => {
  const selectId = chartEditStore.getTargetChart.selectId;
  // 排除多个
  if (selectId.length !== 1) return undefined;
  const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()];
  if (target?.isGroup) {
    tabsSelect.value = 'chartSetting';
  }
  return target;
});
</script>

<style scoped lang="less">
.custom-content-configurations {
  overflow: hidden;
  box-sizing: border-box;
}

.page-tab {
  padding: 10px;
  box-sizing: border-box;

  :deep(.ant-tabs-tab) {
    width: 328px;
    display: flex;
    justify-content: center;
    padding: 5px 15px !important;
    border-radius: 8px !important;
  }
  :deep(.ant-tabs-nav-operations) {
    display: none;
  }
}

.other-tab {
  padding: 10px;
  box-sizing: border-box;
  height: 100%;
  :deep(.ant-tabs-tab) {
    width: 108px;
    display: flex;
    justify-content: center;
    padding: 5px 15px !important;
    border-radius: 8px !important;
  }
  :deep(.ant-tabs-nav-operations) {
    display: none;
  }
  :deep(.ant-tabs-content-holder) {
    height: 100%;
    overflow-y: auto;
  }
}
</style>
