<template>
  <a-collapse v-model:activeKey="activeKey" ghost expandIconPosition="right">
    <a-collapse-panel key="1">
      <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="2">
      <template #header><NodeHead nodeName="饼图设置" /> </template>
      <a-form-item :label="t('圆心大小')" :colon="false" labelAlign="left">
        <a-slider
          v-model:value="data.options.pieConfig.centerOfCircleSize"
          @change="changeCenterOfCircleSize"
        />
      </a-form-item>
      <a-form-item :label="t('外圆大小')" :colon="false" labelAlign="left">
        <a-slider
          v-model:value="data.options.pieConfig.sizeOfOuterCircle"
          @change="changeSizeOfOuterCircle"
        />
      </a-form-item>
      <a-form-item :label="t('水平位置')" :colon="false" labelAlign="left">
        <a-slider
          v-model:value="data.options.pieConfig.horizontalPosition"
          @change="changeHorizontalPosition"
        />
      </a-form-item>
      <a-form-item :label="t('垂直位置')" :colon="false" labelAlign="left">
        <a-slider
          v-model:value="data.options.pieConfig.verticalPosition"
          @change="changeVerticalPosition"
        />
      </a-form-item>
      <a-form-item :label="t('南丁格尔')" :colon="false" labelAlign="left">
        <a-select
          v-model:value="data.options.echarts.series[0].roseType"
          style="width: 100%"
          allowClear
        >
          <a-select-option
            v-for="(item, index) in roseTypeOptions"
            :key="index"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item :label="t('圆角大小')" :colon="false" labelAlign="left">
        <a-slider
          v-model:value="data.options.pieConfig.borderRadius"
          @change="changeBorderRadius"
        />
      </a-form-item>
      <a-form-item :label="t('选中模式')" :colon="false" labelAlign="left">
        <a-select
          v-model:value="data.options.echarts.series[0].selectedMode"
          style="width: 100%"
          allowClear
        >
          <a-select-option
            v-for="(item, index) in selectedModeOptions"
            :key="index"
            :value="item.value"
            >{{ item.label }}</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.defaultSelect" :min="0" />
      </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="legendFormatterText"
        v-model:autoWidth="data.options.autoWidth"
      />
    </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 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 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 changeCenterOfCircleSize(val: number) {
    if (
      data.value.options.echarts &&
      Array.isArray(data.value.options.echarts.series) &&
      Array.isArray(data.value.options.echarts.series[0].radius)
    ) {
      data.value.options.echarts.series[0].radius[0] = val + '%';
    }
  }
  function changeSizeOfOuterCircle(val: number) {
    if (
      data.value.options.echarts &&
      Array.isArray(data.value.options.echarts.series) &&
      Array.isArray(data.value.options.echarts.series[0].radius)
    ) {
      data.value.options.echarts.series[0].radius[1] = val + '%';
    }
  }
  function changeHorizontalPosition(val: number) {
    if (
      data.value.options.echarts &&
      Array.isArray(data.value.options.echarts.series) &&
      Array.isArray(data.value.options.echarts.series[0].center)
    ) {
      data.value.options.echarts.series[0].center[0] = val + '%';
    }
  }
  function changeVerticalPosition(val: number) {
    if (
      data.value.options.echarts &&
      Array.isArray(data.value.options.echarts.series) &&
      Array.isArray(data.value.options.echarts.series[0].center)
    ) {
      data.value.options.echarts.series[0].center[1] = val + '%';
    }
  }
  function changeBorderRadius(val: number) {
    if (
      data.value.options.echarts &&
      Array.isArray(data.value.options.echarts.series) &&
      data.value.options.echarts.series[0].itemStyle &&
      data.value.options.echarts.series[0].itemStyle
    ) {
      data.value.options.echarts.series[0].itemStyle.borderRadius = val + '%';
    }
  }
  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 roseTypeOptions = [
    {
      label: t('圆心角数据百分比'),
      value: 'radius',
    },
    {
      label: t('圆心角相同'),
      value: 'area',
    },
  ];
  const selectedModeOptions = [
    {
      label: t('单选'),
      value: 'single',
    },
    {
      label: t('多选'),
      value: 'multiple',
    },
  ];
  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>
  .box {
    position: relative;
    padding-top: 50px;
    overflow: auto;
  }

  .item-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #262626;
    font-size: 14px;
    padding-left: 16px;
  }

  .item-title::after {
    content: '';
    display: block;
    position: absolute;
    height: 1px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f0f0f0;
  }
</style>
