<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 { basicPieProps } from "./props";
import { chartFormItemsMap } from "../../../config/chartFormItemsMap";
import { set, cloneDeep } from "lodash-es";

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

const baseSeries: IFormItem[] = [
  {
    label: "样式",
    prop: "",
    type: "divider",
  },
  {
    label: "起始角度",
    prop: "series.pie.startAngle",
    type: "inputNumber",
    fieldProps: {
      min: 0,
      max: 360,
      addonAfter: "°",
    },
  },
  {
    label: "完结角度",
    prop: "series.pie.endAngle",
    type: "inputNumber",
    fieldProps: {
      min: 0,
      max: 360,
      addonAfter: "°",
    },
  },
  {
    label: "内径占比",
    prop: "series.pie.radius",
    type: "slider",
    format: (formatModel, value) => {
      console.log("formatModel", formatModel);
      const inner = value * 0.75;
      formatModel.value["series.pie.radius"] = [inner + "%", "75%"];
      return value * 100;
    },
    valueToForm: (value) => {
      const inner = (value || ["0%", "75%"])[0].replace("%", "");
      return inner / 0.75;
    },
  },
];

const formItems = [
  chartFormItemsMap.title,
  chartFormItemsMap.legend,
  chartFormItemsMap.label,
  {
    ...chartFormItemsMap.series,
    children: (chartFormItemsMap.series.children as IFormItem[]).concat(
      baseSeries
    ),
  },
  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>
