<template>
  <div class="box">
    <div class="fixed">
      <div
        class="fixed-item"
        v-for="(item, index) in dataConfig.dataList"
        :key="index"
        :class="index === data.itemIndex ? 'active' : ''"
        @click="showIndex(index)"
      >
        {{ item.title }}
      </div>
    </div>

    <div
      class="echarts-tag-box"
      v-if="dataConfig && dataConfig.count && dataConfig.count.show && dataConfig.dataList"
    >
      <div class="echarts-tag-content">
        <div class="echarts-tag-num">
          {{ dataConfig.dataList[data.itemIndex]?.total }}
          <span class="echarts-tag-unit">{{ dataConfig.count.unit }}</span>
        </div>
        <div class="echarts-tag-label">{{ dataConfig.count.title }}</div>
      </div>
    </div>
    <LineBar
      v-if="dataConfig.dataList && dataConfig.dataList[data.itemIndex]"
      :echarts="dataConfig.echarts[data.itemIndex]"
      :config="dataConfig"
      :refreshkey="lineKey"
      :key="compkey"
      class="box-item"
    />
  </div>
</template>
<script lang="ts" setup>
  import { inject, ref } from 'vue';
  import LineBar from './LineBar.vue';
  import { computed, onMounted, watch } from 'vue';
  import { cloneDeep } from 'lodash-es';
  import { refreshChart } from '../../../types/tool';
  const props = defineProps({
    config: { type: Object, default: () => {} },
    refreshkey: String,
    compkey: String,
  });
  const dataConfig = ref(cloneDeep(props.config) || {});
  const data = ref({ itemIndex: -1 });
  const widgetFormModel = inject('widgetFormModel', ref<any>({}));
  const lineKey = ref(0);
  onMounted(async () => {
    if (Array.isArray(props.config.echarts)) {
      await changeData(true);
      data.value.itemIndex = 0;
      lineKey.value++;
    }
  });
  watch(
    () => [props.config, props.refreshkey],
    async () => {
      if (Array.isArray(props.config.echarts)) {
        await changeData(true);
        data.value.itemIndex = 0;
        lineKey.value++;
      }
    },
    {
      deep: true,
    },
  );

  let fontcolor = computed(() => {
    return props.config && props.config.condition && props.config.condition.color
      ? props.config.condition.color
      : '#595959';
  });
  let selectedcolor = computed(() => {
    return props.config && props.config.condition && props.config.condition.selected
      ? props.config.condition.selected
      : '#3399ff';
  });
  let boxheight = computed(() => {
    resizeChart();
    return props.config && props.config.count
      ? props.config.count.show
        ? 'calc(100% - 86px)'
        : '100%'
      : '100%';
  });

  async function changeData(isFirst) {
    dataConfig.value = cloneDeep(props.config) || {};

    if (dataConfig.value.dataList.length > 0) {
      if (isFirst) {
        await firstInit(dataConfig.value);
      }
    }
  }
  async function firstInit(config) {
    for (let index = 0; index < config.dataList.length; index++) {
      let element = config.dataList[index];
      let newconfig = cloneDeep(element);
      await refreshChart(newconfig.apiConfig, newconfig, widgetFormModel.value);
      newconfig.indicator.forEach((item, itemIndex) => {
        let valueData = newconfig.apiData.map((ele) => {
          return item.value ? ele[item.value] : 0;
        });
        config.echarts[index].series[itemIndex].data = valueData;
        config.echarts[index].series[itemIndex].showAreaStyle = item.showAreaStyle;
        config.echarts[index].series[itemIndex].gradualEndColor = item.gradualEndColor;
        config.echarts[index].series[itemIndex].gradualStartColor = item.gradualStartColor;
        config.echarts[index].series[itemIndex].name = item.name;
        config.echarts[index].series[itemIndex].type = item.type;
        config.echarts[index].xAxis[0].data = config.dataList[index].apiData.map((cate) => {
          return config.dataList[index].valueKey ? cate[config.dataList[index].valueKey] : '';
        });
      });
    }
  }
  function resizeChart() {
    lineKey.value++;
  }
  function showIndex(index: any) {
    data.value.itemIndex = index;
  }
</script>
<style lang="less" scoped>
  .box {
    width: 100%;
    height: 100%;

    .box-item {
      width: 100%;
      height: v-bind(boxheight);
      overflow-y: auto;
      overflow-x: hidden;
    }

    .fixed {
      position: absolute;
      top: 5px;
      right: 6px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      display: flex;
      align-items: center;

      .fixed-item {
        padding: 0 20px;
        cursor: pointer;
        margin: 0 4px;
        color: v-bind(fontcolor);
      }

      .fixed-item:hover {
        // color: #262626;
        color: v-bind(fontcolor);
        background-color: #f5f5f5;
      }

      .active {
        color: #fff;
        // background-color: @primary-color;
        background-color: v-bind(selectedcolor);
        border-radius: 4px;
      }

      .active:hover {
        color: #fff;
        // background-color: @primary-color;
        background-color: v-bind(selectedcolor);
        border-radius: 4px;
      }
    }

    .item {
      height: 100%;
      width: 100%;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      position: relative;
    }
  }

  .echarts-tag-box {
    // position: absolute;
    height: 86px;
    padding: 20px 24px;
    width: 100%;
    top: 0;
    left: 0;

    .echarts-tag-content {
      position: relative;
      height: 100%;
      width: 100%;
      background-color: #fff;
      box-shadow: 0 3px 6px 1px rgb(0 0 0 / 16%);
      display: flex;
      justify-content: space-between;
      padding: 0 16px;
      align-items: center;
    }

    .echarts-tag-num {
      font-size: 30px;
      color: #5e95ff;
    }

    .echarts-tag-label {
      font-size: 18px;
      color: #707070;
    }
  }
</style>
