<template>
  <a-collapse v-model:activeKey="activeKey" ghost expandIconPosition="right">
    <a-collapse-panel key="1">
      <template #header>
        <NodeHead nodeName="数据配置" />
        <PlusCircleFilled class="add-custom" @click.stop="addDataList" />
      </template>
      <a-form-item :colon="false" labelAlign="left">
        <div class="card-box" v-if="data.options.dataList && data.options.dataList.length > 0">
          <div
            class="card-item"
            v-for="(item, index) in data.options.dataList"
            :key="index"
            @click="changeApiIndex(index)"
          >
            <a-form-item
              :label="t('名称')"
              :label-col="{ style: { width: '112px' } }"
              :colon="false"
              labelAlign="left"
            >
              <a-input v-model:value="item.title" />
            </a-form-item>
            <a-form-item
              :label="t('数据')"
              :label-col="{ style: { width: '112px' } }"
              :colon="false"
              labelAlign="left"
            >
              <SelectApi
                v-model:value="item.apiConfig"
                :exampleStr="exampleStr"
                from="pageDesign"
                :refreshComponent="data.options.refreshComponent"
                @save="
                  (val) => {
                    saveApiConfig(val, index);
                  }
                "
              />
            </a-form-item>
            <a-form-item
              :label="t('维度')"
              :label-col="{ style: { width: '112px' } }"
              :colon="false"
              labelAlign="left"
            >
              <a-select
                v-model:value="item.valueKey"
                style="width: 100%"
                allowClear
                @change="changeIndicatorData"
              >
                <a-select-option
                  v-for="(val, valIndex) in data.options.dataList[index].apiColumns"
                  :key="valIndex"
                  :value="val.prop"
                  >{{ val.label }}</a-select-option
                >
              </a-select>
            </a-form-item>

            <div class="indicator-box">
              <div class="indicator-item" v-for="(val, valIndex) in item.indicator" :key="valIndex">
                <IconFontSymbol
                  v-if="val.type == 'line'"
                  class="indicator-icon"
                  icon="zhexiantu"
                  :size="14"
                  @click="changeIndicatorType(index, valIndex, 'bar')"
                />
                <IconFontSymbol
                  v-if="val.type == 'bar'"
                  class="indicator-icon"
                  icon="ic_statistics24px"
                  :size="14"
                  @click="changeIndicatorType(index, valIndex, 'line')"
                />
                <a-input
                  v-model:value="val.name"
                  style="width: 53px; margin-right: 5px"
                  @change="changeIndicatorData"
                />
                <a-select
                  v-model:value="val.value"
                  style="width: 212px; margin-right: 5px"
                  allowClear
                  @change="changeIndicatorData"
                >
                  <a-select-option
                    v-for="(col, coIndex) in data.options.dataList[index].apiColumns"
                    :key="coIndex"
                    :value="col.prop"
                    >{{ col.label }}</a-select-option
                  >
                </a-select>
                <SelectColor v-model:value="val.color" @change="changeIndicatorData" />
                <a-popover :title="t('高级设置')">
                  <template #content>
                    <template v-if="val.type == 'line'">
                      <a-form-item :label="t('面积图')" :colon="false" labelAlign="left">
                        <a-switch
                          v-model:checked="val.showAreaStyle"
                          @change="changeIndicatorData"
                        />
                      </a-form-item>
                      <a-form-item
                        :label="t('渐变开始')"
                        :colon="false"
                        labelAlign="left"
                        v-if="val.showAreaStyle"
                      >
                        <SelectColor
                          v-model:value="val.gradualStartColor"
                          @change="changeIndicatorData"
                          style="min-width: 200px"
                        />
                      </a-form-item>
                      <a-form-item
                        :label="t('渐变结束')"
                        :colon="false"
                        labelAlign="left"
                        v-if="val.showAreaStyle"
                      >
                        <SelectColor
                          v-model:value="val.gradualEndColor"
                          style="min-width: 200px"
                          @change="changeIndicatorData"
                        />
                      </a-form-item>
                    </template>
                    <template v-if="val.type == 'bar'">
                      <a-form-item :label="t('是否堆叠')" :colon="false" labelAlign="left">
                        <a-switch v-model:checked="val.stack" @change="changeIndicatorData" />
                      </a-form-item>
                    </template>
                  </template>
                  <Icon icon="icon-park-solid:setting-two" :size="20" class="setting-icon" />
                </a-popover>
                <Icon
                  v-if="item.indicator && item.indicator.length > 1"
                  icon="tabler:trash-filled"
                  :size="20"
                  class="delete-icon"
                  @click="deleteIndicator(index, valIndex)"
                />
              </div>
              <a-button type="dashed" class="indicator-btn" @click="addIndicator(index)">{{
                t('添加指标')
              }}</a-button>
            </div>
            <div
              class="close-icon"
              v-if="data.options.dataList && data.options.dataList.length > 1"
            >
              <IconFontSymbol
                icon="chongzhishibai"
                style="fill: rgb(255 84 97 / 50%)"
                :size="14"
                @click="deleteDataList(index)"
              />
            </div>
          </div>
        </div>
      </a-form-item>
    </a-collapse-panel>
    <a-collapse-panel key="2">
      <template #header>
        <NodeHead nodeName="Y轴配置" />
        <PlusCircleFilled
          class="add-custom"
          v-if="data.options.yAxis && data.options.yAxis.length == 1"
          @click.stop="addYAxis"
        />
      </template>
      <a-form-item :colon="false" labelAlign="left">
        <div class="card-box">
          <div v-for="(yAxis, index) in data.options.yAxis" :key="index" class="card-item">
            <a-form-item :label="t('名称')" :label-col="{ style: { width: '112px' } }">
              <a-input v-model:value="yAxis.name" @change="changeAxisData" />
            </a-form-item>
            <a-form-item :label="t('名称位置')" :label-col="{ style: { width: '112px' } }">
              <a-select
                v-model:value="yAxis.nameLocation"
                style="width: 100%"
                allowClear
                @change="changeAxisData"
              >
                <a-select-option value="start">{{ t('开头') }}</a-select-option>
                <a-select-option value="center">{{ t('中间') }}</a-select-option>
                <a-select-option value="end">{{ t('末尾') }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item :label="t('名称颜色')" :label-col="{ style: { width: '112px' } }">
              <SelectColor v-model:value="yAxis.nameTextStyle.color" @change="changeAxisData" />
            </a-form-item>
            <a-form-item :label="t('名称大小')" :label-col="{ style: { width: '112px' } }">
              <a-input-number
                v-model:value="yAxis.nameTextStyle.fontSize"
                @change="changeAxisData"
              />
            </a-form-item>
            <a-form-item :label="t('名称粗细')" :label-col="{ style: { width: '112px' } }">
              <a-select
                v-model:value="yAxis.nameTextStyle.fontWeight"
                style="width: 100%"
                allowClear
                @change="changeAxisData"
              >
                <a-select-option value="normal">{{ t('正常') }}</a-select-option>
                <a-select-option value="bold">{{ t('加粗') }}</a-select-option>
                <a-select-option value="bolder">{{ t('更粗') }}</a-select-option>
                <a-select-option value="lighter">{{ t('细') }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item :label="t('最小值')" :label-col="{ style: { width: '112px' } }">
              <a-input-number v-model:value="yAxis.min" @change="changeAxisData" />
            </a-form-item>
            <a-form-item :label="t('最大值')" :label-col="{ style: { width: '112px' } }">
              <a-input-number v-model:value="yAxis.max" @change="changeAxisData" />
            </a-form-item>
            <a-form-item :label="t('分割间隔')" :label-col="{ style: { width: '112px' } }">
              <a-input-number v-model:value="yAxis.interval" @change="changeAxisData" :min="0" />
            </a-form-item>
            <a-form-item :label="t('轴位置')" :label-col="{ style: { width: '112px' } }">
              <a-select
                v-model:value="yAxis.position"
                style="width: 100%"
                allowClear
                @change="changeAxisData"
              >
                <a-select-option value="left">{{ t('左') }}</a-select-option>
                <a-select-option value="right">{{ t('右') }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item :label="t('数值类型')" :label-col="{ style: { width: '112px' } }">
              <a-select
                v-model:value="yAxis.type"
                style="width: 100%"
                allowClear
                @change="changeAxisData"
              >
                <a-select-option value="value">{{ t('数值') }}</a-select-option>
                <a-select-option value="category">{{ t('类目') }}</a-select-option>
                <a-select-option value="time">{{ t('时间') }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item :label="t('数值格式')" :label-col="{ style: { width: '112px' } }">
              <div class="flex">
                <a-input
                  class="flex-1"
                  v-model:value="yAxis.axisLabel.formatter"
                  @change="changeAxisData"
                />
                <FormatterText :formatterText="formatterText" />
              </div>
            </a-form-item>
            <a-form-item :label="t('数值颜色')" :label-col="{ style: { width: '112px' } }">
              <SelectColor v-model:value="yAxis.axisLabel.color" @change="changeAxisData" />
            </a-form-item>
            <a-form-item
              :label="t('线条显示')"
              :label-col="{ style: { width: '112px' } }"
              :wrapperCol="{
                style: { textAlign: 'right', paddingRight: '10px' },
              }"
            >
              <a-switch v-model:checked="yAxis.axisLine.show" @change="changeAxisData" />
            </a-form-item>
            <a-form-item :label="t('线条颜色')" :label-col="{ style: { width: '112px' } }">
              <SelectColor
                v-model:value="yAxis.axisLine.lineStyle.color"
                @change="changeAxisData"
              />
            </a-form-item>
            <div class="close-icon" v-if="data.options.yAxis && data.options.yAxis.length > 1">
              <IconFontSymbol
                icon="chongzhishibai"
                style="fill: rgb(255 84 97 / 50%)"
                :size="14"
                @click="deleteYAxis"
              />
            </div>
          </div>
        </div>
      </a-form-item>
    </a-collapse-panel>
    <a-collapse-panel key="3">
      <template #header><NodeHead nodeName="X轴配置" /> </template>
      <a-form-item :colon="false" labelAlign="left">
        <div class="card-box">
          <div v-for="(xAxis, index) in data.options.xAxis" :key="index" class="card-item">
            <a-form-item :label="t('轴位置')" :label-col="{ style: { width: '112px' } }">
              <a-select
                v-model:value="xAxis.position"
                style="width: 100%"
                allowClear
                @change="changeAxisData"
              >
                <a-select-option value="top">{{ t('上') }}</a-select-option>
                <a-select-option value="bottom">{{ t('下') }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item :label="t('名称')" :label-col="{ style: { width: '112px' } }">
              <a-input v-model:value="xAxis.name" @change="changeAxisData" />
            </a-form-item>
            <a-form-item :label="t('名称位置')" :label-col="{ style: { width: '112px' } }">
              <a-select
                v-model:value="xAxis.nameLocation"
                style="width: 100%"
                allowClear
                @change="changeAxisData"
              >
                <a-select-option value="start">{{ t('开头') }}</a-select-option>
                <a-select-option value="center">{{ t('中间') }}</a-select-option>
                <a-select-option value="end">{{ t('末尾') }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item :label="t('名称颜色')" :label-col="{ style: { width: '112px' } }">
              <SelectColor v-model:value="xAxis.nameTextStyle.color" @change="changeAxisData" />
            </a-form-item>
            <a-form-item :label="t('名称大小')" :label-col="{ style: { width: '112px' } }">
              <a-input-number
                v-model:value="xAxis.nameTextStyle.fontSize"
                @change="changeAxisData"
              />
            </a-form-item>
            <a-form-item :label="t('名称粗细')" :label-col="{ style: { width: '112px' } }">
              <a-select
                v-model:value="xAxis.nameTextStyle.fontWeight"
                style="width: 100%"
                allowClear
                @change="changeAxisData"
              >
                <a-select-option value="normal">{{ t('正常') }}</a-select-option>
                <a-select-option value="bold">{{ t('加粗') }}</a-select-option>
                <a-select-option value="bolder">{{ t('更粗') }}</a-select-option>
                <a-select-option value="lighter">{{ t('细') }}</a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item :label="t('类型')" :label-col="{ style: { width: '112px' } }">
              <a-select
                v-model:value="xAxis.type"
                style="width: 100%"
                allowClear
                @change="changeAxisData"
              >
                <a-select-option value="value">{{ t('数值') }}</a-select-option>
                <a-select-option value="category">{{ t('类目') }}</a-select-option>
                <a-select-option value="time">{{ t('时间') }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item :label="t('格式')" :label-col="{ style: { width: '112px' } }">
              <div class="flex">
                <a-input
                  class="flex-1"
                  v-model:value="xAxis.axisLabel.formatter"
                  @change="changeAxisData"
                />
                <FormatterText :formatterText="formatterText" />
              </div>
            </a-form-item>
            <a-form-item :label="t('数值颜色')" :label-col="{ style: { width: '112px' } }">
              <SelectColor v-model:value="xAxis.axisLabel.color" @change="changeAxisData" />
            </a-form-item>
            <a-form-item
              :label="t('线条显示')"
              :label-col="{ style: { width: '112px' } }"
              :wrapperCol="{
                style: { textAlign: 'right', paddingRight: '10px' },
              }"
            >
              <a-switch v-model:checked="xAxis.axisLine.show" @change="changeAxisData" />
            </a-form-item>
            <a-form-item :label="t('线条颜色')" :label-col="{ style: { width: '112px' } }">
              <SelectColor
                v-model:value="xAxis.axisLine.lineStyle.color"
                @change="changeAxisData"
              />
            </a-form-item>
          </div>
        </div>
      </a-form-item>
    </a-collapse-panel>
    <a-collapse-panel key="4">
      <template #header><NodeHead nodeName="柱状图" /> </template>
      <a-form-item
        :label="t('是否堆叠')"
        :label-col="{ style: { width: '112px' } }"
        :wrapperCol="{
          style: { textAlign: 'right', paddingRight: '10px' },
        }"
      >
        <a-switch v-model:checked="data.options.bar.stack" @change="changeIndicatorData" />
      </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.bar.label.show" @change="changeIndicatorData" />
      </a-form-item>
      <a-form-item :label="t('文本颜色')" :colon="false" labelAlign="left">
        <SelectColor v-model:value="data.options.bar.label.color" @change="changeIndicatorData" />
      </a-form-item>
    </a-collapse-panel>
    <a-collapse-panel key="5">
      <template #header><NodeHead nodeName="折线图" /> </template>
      <a-form-item
        :label="t('平滑')"
        :label-col="{ style: { width: '112px' } }"
        :wrapperCol="{
          style: { textAlign: 'right', paddingRight: '10px' },
        }"
      >
        <a-switch v-model:checked="data.options.line.smooth" @change="changeIndicatorData" />
      </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.line.showSymbol" @change="changeIndicatorData" />
      </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.line.showAreaStyle" @change="changeIndicatorData" />
      </a-form-item>
      <a-form-item
        :label="t('渐变开始')"
        :colon="false"
        labelAlign="left"
        v-if="data.options.line.showAreaStyle"
      >
        <SelectColor
          v-model:value="data.options.line.gradualStartColor"
          @change="changeIndicatorData"
        />
      </a-form-item>
      <a-form-item
        :label="t('渐变结束')"
        :colon="false"
        labelAlign="left"
        v-if="data.options.line.showAreaStyle"
      >
        <SelectColor
          v-model:value="data.options.line.gradualEndColor"
          @change="changeIndicatorData"
        />
      </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.line.stack" @change="changeIndicatorData" />
      </a-form-item>
    </a-collapse-panel>
    <a-collapse-panel key="6">
      <template #header><NodeHead nodeName="文本标签" /> </template>
      <Label
        v-model:label="data.options.seriesLabel"
        :formatterText="labelFormatterText"
        @change="changeIndicatorData"
      />
    </a-collapse-panel>
    <a-collapse-panel key="7">
      <template #header><NodeHead nodeName="图例设置" /> </template>
      <Legend
        v-model:legend="data.options.legend"
        :formatterText="legendFormatterText"
        @change="changeIndicatorData"
      />
    </a-collapse-panel>
  </a-collapse>
</template>

<script setup lang="ts">
  import { inject, onMounted, onUnmounted, ref, watch } from 'vue';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import SelectApi from '/@/views/generator/desktop/components/designer/properties/collapse/complex/SelectApi.vue';
  import SelectColor from '/@/views/generator/desktop/components/designer/properties/SelectColor.vue';
  import Label from '/@/views/generator/desktop/components/designer/properties/collapse/Label.vue';
  import * as echarts from 'echarts';
  import Legend from '/@/views/generator/desktop/components/designer/properties/collapse/Legend.vue';
  import Icon from '/@/components/Icon/index';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { cloneDeep } from 'lodash-es';
  import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
  import { PlusCircleFilled } from '@ant-design/icons-vue';
  import FormatterText from '/@/views/generator/desktop/components/designer/properties/collapse/FormatterText.vue';

  import {
    chartLineDataListsConfig,
    chartLineEchartsConfig,
    chartLineIndicatorConfig,
    chartLineSeriesConfig,
    chartLineYAxis,
    colors,
  } from './properties';

  import { changePageDesignApiOptions } from '../../../types/tool';

  const { t } = useI18n();
  const widgetFormModel = inject('widgetFormModel', ref<any>({}));
  const data = inject('selectWidget', ref<any>({}));
  const dataApiIndex = ref(0);
  const activeKey = ref(['1']);

  watch(
    () => data.value.options.isCrosswise,
    () => {
      changeIndicatorData();
    },
  );
  watch(
    () => data.value.options.count,
    () => {
      changeIndicatorData();
    },
    { deep: true },
  );

  onMounted(async () => {
    let api = data.value.options.dataList[0].apiConfig;

    if (api.path) {
      let res = await changePageDesignApiOptions(api, widgetFormModel.value);
      if (res.list && Array.isArray(res.list)) {
        data.value.options.dataList[0].apiData = res.list;
      } else {
        data.value.options.dataList[0].apiData = [];
      }
      if (res.columns && Array.isArray(res.columns)) {
        data.value.options.dataList[0].apiColumns = res.columns;
      } else {
        resetApiData();
      }
      if (res.total) {
        data.value.options.dataList[0].total = res.total;
      } else {
        data.value.options.dataList[0].total = 0;
      }
      changeIndicatorData();
    }
  });
  onUnmounted(() => {});
  function changeApiIndex(index: number) {
    dataApiIndex.value = index;
  }
  async function saveApiConfig(val, index) {
    dataApiIndex.value = index;

    data.value.options.dataList[dataApiIndex.value].apiConfig = cloneDeep(val);

    if (val.path) {
      let res = await changePageDesignApiOptions(val, widgetFormModel.value);
      if (res.list && Array.isArray(res.list)) {
        data.value.options.dataList[dataApiIndex.value].apiData = res.list;
      } else {
        data.value.options.dataList[dataApiIndex.value].apiData = [];
      }
      if (res.columns && Array.isArray(res.columns)) {
        data.value.options.dataList[dataApiIndex.value].apiColumns = res.columns;
      } else {
        resetApiData();
      }

      if (res.total) {
        data.value.options.dataList[dataApiIndex.value].total = res.total;
      } else {
        data.value.options.dataList[dataApiIndex.value].total = 0;
      }
    }
    changeIndicatorData();
  }

  function resetApiData() {
    data.value.options.dataList[dataApiIndex.value].apiColumns = [];
    data.value.options.dataList[dataApiIndex.value].valueKey = '';
    data.value.options.dataList[dataApiIndex.value].indicator = data.value.options.dataList[
      dataApiIndex.value
    ].indicator.map((ele) => {
      ele.name = '';
      ele.title = '';
      ele.color = '';
      ele.value = '';
      ele.showAreaStyle = false;
      ele.gradualStartColor = '';
      ele.gradualEndColor = '';
      return ele;
    });
  }
  function addDataList() {
    data.value.options.echarts.push({
      ...cloneDeep(chartLineEchartsConfig),
      color: cloneDeep(colors),
    });
    data.value.options.dataList.push(cloneDeep(chartLineDataListsConfig));
  }
  function deleteDataList(index) {
    data.value.options.echarts.splice(index, 1);
    data.value.options.dataList.splice(index, 1);
  }
  function addIndicator(index) {
    dataApiIndex.value = index;

    data.value.options.dataList[index].indicator.push(cloneDeep(chartLineIndicatorConfig));
    data.value.options.echarts[index].series.push(cloneDeep(chartLineSeriesConfig));
    changeIndicatorData();
  }

  function changeIndicatorType(index: number, subindex: number, type: string) {
    dataApiIndex.value = index;
    data.value.options.dataList[index].indicator[subindex].type = type;
    changeIndicatorData();
  }
  function deleteIndicator(index: number, subindex: number) {
    dataApiIndex.value = index;
    data.value.options.dataList[index].indicator.splice(subindex, 1);
    data.value.options.echarts[index].series.splice(subindex, 1);
    changeIndicatorData();
  }
  function changeIndicatorData() {
    let index = dataApiIndex.value;
    if (!data.value.options.dataList) return;
    let newcolor = data.value.options.dataList[index].indicator.map((ele, eleIndex) => {
      return ele.color ? ele.color : colors[eleIndex];
    });
    data.value.options.echarts[index].color = newcolor;
    let legendData: Array<string> = [];
    if (
      data.value.options.dataList[index].apiData &&
      data.value.options.dataList[index].apiData.length > 0
    ) {
      data.value.options.echarts[index].xAxis[0].data = data.value.options.dataList[
        index
      ].apiData.map((cate) => {
        return data.value.options.dataList[index].valueKey
          ? cate[data.value.options.dataList[index].valueKey]
          : '';
      });
    } else {
      data.value.options.echarts[index].xAxis[0].data = [];
    }
    //是否为横向
    data.value.options.echarts[index].xAxis.forEach(
      (x) => (x.type = data.value.options.isCrosswise ? 'value' : 'category'),
    );
    data.value.options.echarts[index].yAxis.forEach(
      (x) => (x.type = data.value.options.isCrosswise ? 'category' : 'value'),
    );
    if (data.value.options.dataList[index].indicator.length > 0) {
      data.value.options.dataList[index].indicator.forEach((item, itemIndex) => {
        legendData.push(item.name);
        let valueData = data.value.options.dataList[index].apiData.map((ele) => {
          return item.value ? ele[item.value] : 0;
        });
        data.value.options.echarts[index].series[itemIndex].data = valueData;
        data.value.options.echarts[index].series[itemIndex].name = item.name;
        data.value.options.echarts[index].series[itemIndex].type = item.type;
        // bar 样式
        if (item.type == 'bar') {
          data.value.options.echarts[index].series[itemIndex].stack =
            item.stack || data.value.options.bar.stack ? 'total' : '';
          data.value.options.echarts[index].series[itemIndex].label.show =
            data.value.options.bar.label.show;
          data.value.options.echarts[index].series[itemIndex].label.color =
            data.value.options.bar.label.color;
        }
        if (item.type == 'line') {
          data.value.options.echarts[index].series[itemIndex].stack = data.value.options.line.stack
            ? 'total'
            : '';
          data.value.options.echarts[index].series[itemIndex].smooth = data.value.options.line
            .smooth
            ? data.value.options.line.smooth
            : false;
          data.value.options.echarts[index].series[itemIndex].symbol = data.value.options.line
            .showSymbol
            ? 'emptyCircle'
            : 'none';
          data.value.options.echarts[index].series[itemIndex].areaStyle = data.value.options.line
            .showAreaStyle
            ? {}
            : null;
          if (
            data.value.options.line.showAreaStyle &&
            data.value.options.line.gradualStartColor &&
            data.value.options.line.gradualEndColor
          ) {
            data.echarts[index].series[itemIndex].areaStyle.color =
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: data.line.gradualStartColor,
                },
                {
                  offset: 1,
                  color: data.line.gradualEndColor,
                },
              ]);
          }
          data.value.options.echarts[index].series[itemIndex].label =
            data.value.options.seriesLabel;
        }
      });
    }
    data.value.options.echarts[index].legend = {
      ...data.value.options.legend,
      data: legendData,
    };
  }
  function addYAxis() {
    data.value.options.yAxis.push({
      ...chartLineYAxis,
      position: 'right',
    });
    setAxisData();
  }
  function deleteYAxis(index: number) {
    data.value.options.yAxis.splice(index, 1);
    setAxisData();
  }
  function changeAxisData() {
    let yAxisConfig = data.value.options.yAxis;
    data.value.options.echarts.forEach((_element, index) => {
      data.value.options.echarts[index].yAxis = yAxisConfig;
    });
    let xAxisConfig = data.value.options.xAxis;
    data.value.options.echarts.forEach((_element, index) => {
      data.value.options.echarts[index].xAxis = xAxisConfig;
    });
    changeIndicatorData();
  }
  function setAxisData() {
    changeAxisData();
  }

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

  {b}：数据名。

  {c}：数据值。

  {d}：百分比。

  {e}：换行。

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

  {@[n]}：数据中维度 n 的值，如 {@[3]}表示维度 3 的值，从 0 开始计数。`;
  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>
  .indicator-box {
    display: flex;
    flex-direction: column;
  }

  .indicator-box .indicator-item {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 42px;
    margin: 0 0 10px;
    background-color: #eaedf1;
    border-radius: 4px;
    padding: 5px;
    border: 1px solid #d3dbe5;

    :deep(input[type='color']) {
      margin-left: 0;
    }
  }

  .indicator-box .indicator-icon {
    background: @primary-color;
    fill: #fff !important;
    border-radius: 4px;
    padding: 4px;
    width: 32px;
    height: 32px;
    margin-right: 5px;
    flex: none;
  }

  .delete-icon {
    color: @clear-color;
  }

  .setting-icon {
    color: @primary-color;
    margin-right: 5px;
    margin-left: 5px;
  }

  .indicator-box :deep(.rule-input) {
    display: none;
  }
</style>
