<template>
  <a-collapse v-model:activeKey="activeKey" ghost expandIconPosition="right">
    <a-collapse-panel key="1" style="position: relative">
      <template #header><NodeHead nodeName="数据配置" /> </template>
      <a-form-item :label="t('数据视图')" :colon="false" labelAlign="left">
        <SelectApi
          v-model:value="data.options.apiConfig"
          :exampleStr="exampleStr"
          from="pageDesign"
          :refreshComponent="data.options.refreshComponent"
        />
      </a-form-item>
      <a-form-item :label="t('维度')" :colon="false" labelAlign="left">
        <BindApiColumns
          v-model:value="data.options.labelKey"
          :apiColumns="data.options.apiColumns"
        />
      </a-form-item>
      <RadarIndicator
        v-model:indicator="data.options.echarts.radar.indicator"
        :apiColumns="data.options.apiColumns"
        @change="changeIndicator"
      />
    </a-collapse-panel>
    <a-collapse-panel key="2">
      <template #header><NodeHead nodeName="雷达图" /> </template>
      <a-form-item :label="t('半径大小')" :colon="false" labelAlign="left">
        <a-slider v-model:value="data.options.echarts.radar.radius" />
      </a-form-item>
      <a-form-item :label="t('标记形状')" :colon="false" labelAlign="left">
        <a-select
          v-model:value="data.options.echarts.series[0].symbol"
          style="width: 100%"
          :options="symbolType"
          @change="changeIndicator"
        />
      </a-form-item>
      <a-form-item
        :label="t('区域填充')"
        :label-col="{ style: { width: '112px' } }"
        :wrapperCol="{
          style: { textAlign: 'right', paddingRight: '10px' },
        }"
      >
        <a-switch v-model:checked="data.options.echarts.showAreaStyle" @change="changeIndicator" />
      </a-form-item>
    </a-collapse-panel>
    <a-collapse-panel key="3">
      <template #header><NodeHead nodeName="文本标签" /> </template>
      <Label v-model:label="data.options.echarts.series[0].label" :formatterText="formatterText" />
    </a-collapse-panel>
    <a-collapse-panel key="4">
      <template #header><NodeHead nodeName="图例设置" /> </template>
      <Legend v-model:legend="data.options.echarts.legend" formatterText="" />
    </a-collapse-panel>
    <a-collapse-panel key="5" style="position: relative">
      <template #header><NodeHead nodeName="配色设置" /> </template>
      <Colors v-model:colors="data.options.colors" />
    </a-collapse-panel>
  </a-collapse>
</template>

<script setup lang="ts">
  import { inject, onMounted, ref } from 'vue';

  import { LegendType } from '/@/enums/desktop';
  import SelectApi from '/@/views/generator/desktop/components/designer/properties/collapse/complex/SelectApi.vue';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import Label from '/@/views/generator/desktop/components/designer/properties/collapse/Label.vue';
  import Legend from '/@/views/generator/desktop/components/designer/properties/collapse/Legend.vue';
  import BindApiColumns from '/@/views/generator/desktop/components/designer/properties/collapse/BindApiColumns.vue';
  import RadarIndicator from '../RadarIndicator.vue';
  import Colors from '../Colors.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const data = inject('selectWidget', ref<any>({}));
  const activeKey = ref(['1']);
  onMounted(() => {});

  function changeIndicator() {
    data.value.options.echarts.series[0].data = [];
    data.value.options.echarts.series[0].areaStyle = data.value.options.echarts.showAreaStyle
      ? {}
      : null;
    data.value.options.echarts.radar.indicator.forEach((element, index) => {
      if (data.value.options.echarts.series[0].data[index]) {
        data.value.options.echarts.series[0].data[index].name = element.name;
      } else {
        data.value.options.echarts.series[0].data[index] = {
          name: element.name,
          value: [],
        };
      }
    });
  }

  const exampleStr = ` {
      code: 0,
      msg: 'success',
      data: {
        columns: [
          {prop:'name',label:'测试1'},
          {prop:'value',label:'测试2'}
        ],
        list: [
          {name:'demo1',value:10},
          {name:'demo2',value:30}
        ],
      },
    }`;

  const symbolType = [
    {
      label: t('无'),
      value: LegendType.NONE,
    },
    {
      label: t('圆形'),
      value: LegendType.CIRCLE,
    },
    {
      label: t('菱形'),
      value: LegendType.DIAMOND,
    },
    {
      label: t('箭头'),
      value: LegendType.ARROW,
    },
    {
      label: t('水滴'),
      value: LegendType.PIN,
    },
    {
      label: t('矩形'),
      value: LegendType.RECT,
    },
    {
      label: t('圆角矩形'),
      value: LegendType.ROUND_RECT,
    },
    {
      label: t('三角形'),
      value: LegendType.TRIANGLE,
    },
  ];

  const formatterText = `参数说明
{a}：系列名。

{b}：数据名。

{c}：数据值。

{d}：百分比。

{e}：换行。

{@xxx}：数据中名为 'xxx' 的维度的值，如 {@product} 表示名为'product' 的维度的值。

{@[n]}：数据中维度 n 的值，如 {@[3]}表示维度 3 的值，从 0 开始计数。`;
</script>
