<template>
  <a-collapse v-model:activeKey="activeKey" ghost expandIconPosition="right">
    <a-collapse-panel key="2">
      <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>
      <a-form-item :label="t('指标')" :colon="false" labelAlign="left">
        <BindApiColumns
          v-model:value="data.options.valueKey"
          :apiColumns="data.options.apiColumns"
        />
      </a-form-item>
    </a-collapse-panel>
    <a-collapse-panel key="3">
      <template #header><NodeHead nodeName="漏斗图设置" /> </template>
      <a-form-item :label="t('最小值')" :colon="false" labelAlign="left">
        <a-input-number v-model:value="data.options.echarts.series[0].min" />
      </a-form-item>
      <a-form-item :label="t('最大值')" :colon="false" labelAlign="left">
        <a-input-number v-model:value="data.options.echarts.series[0].max" />
      </a-form-item>
      <a-form-item :label="t('最小尺寸')" :colon="false" labelAlign="left">
        <a-input v-model:value="data.options.echarts.series[0].minSize" />
      </a-form-item>
      <a-form-item :label="t('最大尺寸')" :colon="false" labelAlign="left">
        <a-input v-model:value="data.options.echarts.series[0].maxSize" />
      </a-form-item>
      <a-form-item :label="t('图形宽度')" :colon="false" labelAlign="left">
        <a-input v-model:value="data.options.echarts.series[0].width" />
      </a-form-item>
      <a-form-item :label="t('左边距')" :colon="false" labelAlign="left">
        <a-input v-model:value="data.options.echarts.series[0].left" />
      </a-form-item>
      <a-form-item :label="t('上边距')" :colon="false" labelAlign="left">
        <a-input-number v-model:value="data.options.echarts.series[0].top" />
      </a-form-item>
      <a-form-item :label="t('下边距')" :colon="false" labelAlign="left">
        <a-input-number v-model:value="data.options.echarts.series[0].bottom" />
      </a-form-item>
      <a-form-item :label="t('数据排序')" :colon="false" labelAlign="left">
        <a-select v-model:value="data.options.echarts.series[0].sort" style="width: 100%">
          <a-select-option value="ascending">{{ t('正序') }}</a-select-option>
          <a-select-option value="descending">{{ t('倒序') }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="t('数据间距')" :colon="false" labelAlign="left">
        <a-input-number v-model:value="data.options.echarts.series[0].gap" />
      </a-form-item>
    </a-collapse-panel>
    <a-collapse-panel key="4">
      <template #header><NodeHead nodeName="文本标签" /> </template>
      <Label v-model:label="data.options.echarts.series[0].label" :formatterText="formatterText" />
    </a-collapse-panel>
    <a-collapse-panel key="5">
      <template #header><NodeHead nodeName="图例设置" /> </template>
      <Legend
        v-model:legend="data.options.echarts.legend"
        :formatterText="legendFormatterText"
        v-model:autoWidth="data.options.autoWidth"
      />
    </a-collapse-panel>
    <a-collapse-panel key="6" 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 { 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 SelectApi from '/@/views/generator/desktop/components/designer/properties/collapse/complex/SelectApi.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(() => {});

  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 formatterText = `参数说明
{a}：系列名。

{b}：数据名。

{c}：数据值。

{d}：百分比。

{e}：换行。

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

{@[n]}：数据中维度 n 的值，如 {@[3]}表示维度 3 的值，从 0 开始计数。`;
  const legendFormatterText = `参数说明
{name}：数据名。

{value}：数据值。`;
</script>

<style lang="less" scoped></style>
