<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="handleChange"
    />
    <CusForm
      v-if="activeTab === '2'"
      :columns="formItems"
      :formModel="props"
      @change="handleFormChange"
    />
  </div>
</template>

<script setup lang="ts">
import type { IFormItem } from "../../../../cusForm";
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 } from "../../../../cusForm";
import { componentProps } from "./props";
import { chartFormItemsMap } from "../../../config/chartFormItemsMap";
import { set, cloneDeep, get } from "lodash-es";

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

const baseSeries: IFormItem[] = [
  {
    label: "线",
    prop: "",
    type: "divider",
  },
  {
    label: "线条样式",
    prop: "series.line.lineStyle.type",
    type: "select",
    fieldProps: {
      options: [
        { label: "实线", value: "solid" },
        { label: "虚线", value: "dashed" },
        { label: "点线", value: "dotted" },
      ],
    },
  },
  {
    label: "线宽",
    prop: "series.line.lineStyle.width",
    type: "inputNumber",
    fieldProps: {
      min: 0,
      addonAfter: "px",
    },
  },
  {
    label: "形态",
    prop: "series.line.lineType",
    type: "radioGroupButton",
    fieldProps: {
      options: [
        { label: "普通", value: "normal" },
        { label: "平滑", value: "smooth" },
        { label: "阶梯", value: "step" },
      ],
    },
    format: (formatModel, value) => {
      switch(value) {
        case 'smooth':
          formatModel.value["series.line.smooth"] = true;
          formatModel.value["series.line.step"] = false;
          break;
        case 'step':
          formatModel.value["series.line.smooth"] = false;
          formatModel.value["series.line.step"] = 'end';
          break;
        default:
          formatModel.value["series.line.smooth"] = false;
          formatModel.value["series.line.step"] = false;
      }
    },
    valueToForm: (_, model) => {
      const step = get(model, 'series.line.step');
      const smooth = get(model, 'series.line.smooth');
      return step ? 'step' : smooth ? 'smooth' : 'normal';
    },
  },
  {
    label: "标记点",
    prop: "",
    type: "divider",
  },
  {
    label: "图形",
    prop: "series.line.symbol",
    type: "select",
    fieldProps: {
      options: [
        { label: "圆", value: "circle" },
        { label: "方", value: "rect" },
        { label: "三角", value: "triangle" },
        { label: "菱形", value: "diamond" },
        { label: "标记", value: "pin" },
        { label: "箭头", value: "arrow" },
        { label: "无", value: "none" },
      ],
    },
  },
  {
    label: "大小",
    prop: "series.line.symbolSize",
    type: "inputNumber",
    fieldProps: {
      min: 0,
      addonAfter: "px",
    },
  },
  {
    label: "旋转",
    prop: "series.line.symbolRotate",
    type: "inputNumber",
    fieldProps: {
      min: 0,
      addonAfter: "°",
    },
  }
];

const formItems = [
  chartFormItemsMap.title,
  chartFormItemsMap.legend,
  chartFormItemsMap.label,
  {
    ...chartFormItemsMap.series,
    children: (chartFormItemsMap.series.children as IFormItem[]).concat(
      baseSeries
    ),
  },
  chartFormItemsMap.tooltip,
  chartFormItemsMap.background,
];

const handleChange = (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>
