<template>
  <!-- 雷达图 -->
  <DesignPropertiesBox v-if="data.show">
    <a-collapse v-model:activeKey="activeKey" ghost expandIconPosition="right">
      <a-collapse-panel key="1" :header="t('基础配置')">
        <a-form-item :label="t('标题')" :colon="false" labelAlign="left">
          <a-input v-model:value="data.info.config.title" />
        </a-form-item>
      </a-collapse-panel>
      <a-collapse-panel key="2" :header="t('数据配置')">
        <a-form-item :label="t('数据视图')" :colon="false" labelAlign="left">
          <ApiSelect
            v-model:value="data.info.config.apiConfig"
            :exampleStr="exampleStr"
            @save="saveApiConfig"
          />
        </a-form-item>
        <a-form-item :label="t('维度')" :colon="false" labelAlign="left">
          <BindApiColumns
            v-model:value="data.info.config.labelKey"
            :apiColumns="data.info.config.apiColumns"
            @change="resetDisplay"
          />
        </a-form-item>
        <RadarIndicator
          v-model:indicator="data.info.config.echarts.radar.indicator"
          :apiColumns="data.info.config.apiColumns"
          @change="changeIndicator"
        />
      </a-collapse-panel>
      <a-collapse-panel key="3" :header="t('雷达图')">
        <a-form-item :label="t('半径大小')" :colon="false" labelAlign="left">
          <a-slider v-model:value="data.info.config.echarts.radar.radius" @change="resetDisplay" />
        </a-form-item>
        <a-form-item :label="t('标记形状')" :colon="false" labelAlign="left">
          <a-select
            v-model:value="data.info.config.echarts.series[0].symbol"
            style="width: 100%"
            :options="symbolType"
            @change="changeIndicator"
          />
        </a-form-item>
        <a-form-item :label="t('区域填充')" :colon="false" labelAlign="left">
          <a-slider
            v-model:value="data.info.config.echarts.showAreaStyle"
            :max="1"
            :step="0.1"
            @change="changeIndicator"
          />
        </a-form-item>
      </a-collapse-panel>
      <a-collapse-panel key="4" :header="t('文本标签')">
        <Label
          v-model:label="data.info.config.echarts.series[0].label"
          :formatterText="formatterText"
          @change="resetDisplay"
        />
      </a-collapse-panel>
      <a-collapse-panel key="5" :header="t('图例设置')">
        <Legend
          v-model:legend="data.info.config.echarts.legend"
          formatterText=""
          @change="resetDisplay"
        />
      </a-collapse-panel>
      <a-collapse-panel key="6" :header="t('配色设置')">
        <Colors v-model:info="data.info" @change="resetDisplay" />
      </a-collapse-panel>
      <a-collapse-panel key="7" :header="t('大小定位')">
        <Location v-model:info="data.info.h" />
      </a-collapse-panel>
    </a-collapse>
  </DesignPropertiesBox>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref, watch } from 'vue';
  import { DesignPropertiesBox } from '/@/components/Desktop';
  import { chartBarInfo } from '../config/info';
  import { LegendType } from '/@/enums/desktop';
  import { ChartBarInfo } from '/@/model/mobileDesign/designer';
  import ApiSelect from './ApiSelect.vue';
  import Location from './collapse/Location.vue';
  import Label from './collapse/Label.vue';
  import Legend from './collapse/Legend.vue';
  import BindApiColumns from './collapse/BindApiColumns.vue';
  import RadarIndicator from './collapse/RadarIndicator.vue';
  import Colors from './collapse/Colors.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const props = withDefaults(
    defineProps<{
      info: ChartBarInfo;
    }>(),
    {
      info: () => {
        return chartBarInfo;
      },
    },
  );
  watch(
    () => props.info,
    (val: ChartBarInfo) => {
      if (val) data.info = val;
    },
    {
      deep: true,
    },
  );
  const data: {
    show: boolean;
    info: any;
  } = reactive({
    show: false,
    info: chartBarInfo,
  });
  const activeKey = ref(['1', '2']);
  onMounted(() => {
    data.info = props.info;
    data.show = true;
  });

  function saveApiConfig() {
    resetApiData();
    resetDisplay();
  }
  function resetApiData() {
    data.info.config.apiData = [];
    data.info.config.apiColumns = [];
    data.info.config.labelKey = '';
    data.info.config.echarts.radar.indicator = data.info.config.echarts.radar.indicator.map(
      (ele) => {
        ele.value = '';
        // ele.max = 0;
        return ele;
      },
    );
  }
  function changeIndicator() {
    data.info.config.echarts.series[0].data = [];
    data.info.config.echarts.series[0].areaStyle = data.info.config.echarts.showAreaStyle
      ? {
          opacity: data.info.config.echarts.showAreaStyle,
        }
      : null;
    data.info.config.echarts.radar.indicator.forEach((element, index) => {
      if (data.info.config.echarts.series[0].data[index]) {
        data.info.config.echarts.series[0].data[index].name = element.name;
      } else {
        data.info.config.echarts.series[0].data[index] = {
          name: element.name,
          value: [],
        };
      }
    });
    resetDisplay();
  }

  function resetDisplay() {
    if (data.info.config.renderKey >= 0) {
      data.info.config.renderKey++;
    }
  }
  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.SQUARE,
    },
    // {
    //   label: t('圆角矩形'),
    //   value: LegendType.ROUND_RECT,
    // },
    {
      label: t('三角形'),
      value: LegendType.TRIANGLE,
    },
  ];

  const formatterText = `参数说明
 
{b}：数据名。

{c}：数据值。

{d}：百分比。

{e}：换行。

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

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