<template>
  <!-- 配色 -->
  <div class="color-box">
    <PlusCircleFilled class="add-custom !right-33px !top-15px" @click="addColor" />
    <a-form
      v-if="
        data.info.config &&
        data.info.config.colors &&
        Array.isArray(data.info.config.colors) &&
        data.info.config.colors.length > 0
      "
    >
      <a-form-item
        :colon="false"
        labelAlign="left"
        :wrapperCol="{
          style: { paddingLeft: '10px', paddingRight: '10px' },
        }"
      >
        <div class="card-box">
          <div class="card-item" v-for="(_item, index) in data.info.config.colors" :key="index">
            <SelectColor v-model:value="data.info.config.colors[index]" @change="changeInfo" />

            <div class="close-icon" v-if="data.info.config.colors.length > 0">
              <IconFontSymbol
                icon="chongzhishibai"
                style="fill: rgb(255 84 97 / 50%)"
                :size="14"
                @click="deleteColor(index)"
              />
            </div>
          </div>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
  import { computed, reactive } from 'vue';
  import { EChartsOption } from 'echarts';
  import SelectColor from './../SelectColor.vue';
  import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
  import { PlusCircleFilled } from '@ant-design/icons-vue';
  const props = withDefaults(
    defineProps<{
      info: {
        config: {
          colors: Array<string>;
          echarts: EChartsOption;
        };
      };
    }>(),
    {
      info: () => {
        return {
          config: {
            colors: [],
            echarts: {
              alignTicks: true,
            },
          },
        };
      },
    },
  );
  const colorLength = computed(() => {
    return data.info.config.echarts.series && data.info.config.echarts.series[0].data
      ? data.info.config.echarts.series[0].data
      : 0;
  });
  const emit = defineEmits(['update:info', 'change']);
  const data = reactive({
    info: props.info,
  });
  function changeInfo() {
    initChartColors();
    emit('update:info', data.info);
    emit('change');
  }
  function addColor() {
    if (data.info.config.colors) {
      data.info.config.colors.push('');
    } else {
      data.info.config.colors = [''];
    }
    changeInfo();
  }
  function deleteColor(idx) {
    data.info.config.colors.splice(idx);
    changeInfo();
  }
  function initChartColors() {
    if (!data.info.config.echarts.color) {
      data.info.config.echarts.color = [];
    }
    data.info.config.echarts.color = [];
    let colors = data.info.config.colors.filter((ele) => {
      return ele;
    });
    if (colors.length == 0) {
      // 默认颜色
      colors = [
        '#5470c6',
        '#91cc75',
        '#fac858',
        '#ee6666',
        '#73c0de',
        '#3ba272',
        '#fc8452',
        '#9a60b4',
        '#ea7ccc',
      ];
    }
    for (let index = 0; index < colorLength.value.length; index++) {
      let colorIndex = index % colors.length;
      let color = colors[index] ? colors[index] : colors[colorIndex] ? colors[colorIndex] : '';
      data.info.config.echarts.color.push(color);
    }
  }
</script>

<style scoped>
  .color-box {
    margin-bottom: 12px;
  }
</style>
