<template>
  <div class="chart-config">
    <div class="config-tab">
      <Tabs v-model:activeKey="activeTab" size="small" centered>
        <TabPane key="1">
          <template #tab>
            <DatabaseOutlined />
            <span>数据设置</span>
          </template>
        </TabPane>
        <TabPane key="2">
          <template #tab>
            <SkinOutlined />
            <span>样式设置</span>
          </template>
        </TabPane>
      </Tabs>
    </div>

    <DataConfig
      v-if="activeTab === '1'"
      :dataSource="dataSource"
      @change="handleDataSourceChange"
    />
    <CusForm
      v-if="activeTab === '2'"
      :columns="formItems"
      :formModel="props"
      @change="handleFormChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from "vue";
import { Tabs, TabPane } from "ant-design-vue";
import { DatabaseOutlined, SkinOutlined } from "@ant-design/icons-vue";
import DataConfig from "../../../DataConfig.vue";
import { CusForm, IFormItem } from "../../../../cusForm";
import { componentProps } from "./props";
import { chartFormItemsMap } from "../../../config/chartFormItemsMap";
import { set, cloneDeep } from "lodash-es";
import { colorPreset } from "../../../config/index";

const props = defineProps(componentProps);
const activeTab = ref("1");
const emit = defineEmits(["change"]);

const formItems: IFormItem[] = [
  chartFormItemsMap.title,
  chartFormItemsMap.legend,
  chartFormItemsMap.label,
  {
    label: "图形",
    prop: "",
    type: "group",
    children: [
      {
        label: "形状",
        prop: "seriesExtend.shape",
        type: "select",
        fieldProps: {
          options: [
            { label: "三维柱形", value: "3d" },
            { label: "圆柱", value: "circle" },
            { label: "三角", value: "triangle" },
            { label: "三维三角", value: "3dTriangle" },
            // { label: "曲线三角", value: "smoothTriangle" },
            // { label: "三维曲线三角", value: "3dSmoothTriangle" },
          ]
        }
      },
      {
        label: "配色",
        prop: "color",
        type: "colorScheme",
        defaultValue: colorPreset[0].color,
      },
    ]
  },
  chartFormItemsMap.xAxis,
  chartFormItemsMap.yAxis,
  chartFormItemsMap.tooltip,
];

const handleDataSourceChange = (data: any) => {
  emit("change", {
    ...props,
    dataSource: data,
  });
};
const handleFormChange = (formatData: any) => {
  const obj = cloneDeep(props);
  Object.keys(formatData).forEach((key) => {
    set(obj, key, formatData[key]);
  });
  emit("change", obj);
};
</script>

<style lang="less" scoped>
.config-tab {
  text-align: center;
  margin-bottom: 12px;
}
</style>
