<template>
  <div class="myreport-chartBox" :class="className">
    <VChart
      ref="myChart"
      class="myreport-echarts"
      :option="option"
      :autoresize="true"
      @click="handleChartClick"
    />
    <!-- 右侧自定义的内容 tooltis -->
    <div
      class="myreport-tooltip"
      :class="{
        'myreport-tooltipexpand': toggleType === 'expand',
        'myreport-tooltipfold': toggleType === 'fold',
      }"
      v-if="data.length"
    >
      <ul class="myreport-ul">
        <li
          v-for="(item, index) in data"
          :key="index"
          class="myreport-li"
          @mouseenter="onMouseenter(index)"
        >
          <div @click="onClick(item)" class="myreport-nameVal">
            <span class="myreport-name">
              <span
                class="myreport-dot"
                :style="{ background: item.itemStyle.color }"
              ></span>
              <span>{{ item.name }}</span>
            </span>
            <span class="myreport-value">{{ item.value }}</span>
          </div>
          <span
            v-if="item.children?.length"
            class="myreport-child"
            @click="onToggle"
          >
            <Icon :class="iconClass" size="16" />
          </span>
          <transition>
            <div v-if="toggleType === 'expand'" class="myreport-childinfo">
              <p v-for="(item, index) in item.children" :key="index">
                <span class="myreport-childname">{{ item.name }}</span>
                <span
                  class="myreport-childvalue"
                  :class="`myreport-${item.id}`"
                >
                  {{ item.value }}
                </span>
              </p>
            </div>
          </transition>
        </li>
      </ul>
    </div>
    <div class="myreport-zeroBox" v-else>
      <p class="myreport-zero">0</p>
    </div>
  </div>
</template>

<script setup>
import 'echarts';
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, computed, onMounted } from 'vue';
import { get } from 'lodash-es';
import { Icon } from '@king-design/vue';
const myChart = ref(null);
const toggleType = ref('fold'); // fold 折叠 expand 展开，默认折叠
const props = defineProps({
  option: Object,
  className: String,
});
const data = computed(() => props.option?.series[0]?.data);
const className = computed(() =>
  props.className ? `myreport-${props.className}` : '',
);
const iconClass = computed(() =>
  toggleType.value === 'fold' ? 'k-icon-down' : 'k-icon-up',
);
const onMouseenter = (index) => {
  myChart.value.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: index,
  });
};
const onClick = (item) => {
  // window.open(item.path);
};
const handleChartClick = (params) => {
  const path = get(params, 'data.totalPath', '');
  window.open(path);
};

// 展开折叠信息
const onToggle = (e) => {
  e.stopPropagation();
  toggleType.value = toggleType.value === 'fold' ? 'expand' : 'fold';
  console.log('onToggle');
};

</script>

<style lang="less" scoped>
.myreport-chartBox {
  position: relative;
  height: 75%;
}
.myreport-zeroBox {
  position: absolute;
  left: 23%;
  top: 18%;
}
.myreport-zero {
  font-size: 32px;
  font-weight: 700;
}
.myreport-dot {
  display: inline-block;
  width: 10px;
  height: 8px;
  border-radius: 3px;
  margin-right: 10px;
}
.myreport-tooltip {
  position: absolute;
  left: 50%;
  width: 45%;
  min-width: 120px;
}
.myreport-tooltipexpand {
  top: 10%;
}
.myreport-tooltipfold {
  top: 30%;
}

.myreport-ul {
  width: 100%;
  padding-left: 0px;
}
.myreport-li {
  line-height: 28px;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.myreport-nameVal {
  display: flex;
}
.myreport-nameVal:hover {
  color: #36acef;
}
.myreport-name {
  margin-right: 10px;
}
.myreport-value {
  margin-right: 0%;
  font-weight: 600;
}
.myreport-child {
  margin-left: 10px;
  position: absolute;
  top: 2px;
  right: 0px;
  cursor: pointer;
}
.myreport-child:hover {
    color: #36acef;
  }
.myreport-childinfo {
  margin-left: 20px;
  p {
    margin: 0px 35px 0px 0px;
    line-height: 25px;
  }
}
.myreport-childvalue {
  float: right;
  font-weight: 600;
}
.myreport-lowNum {
  color: #2cd8c5;
}
.myreport-middleNum {
  color: #ffc546;
}
.myreport-highNum {
  color: #ff4433;
}
</style>
