<template>
  <v-charts
    v-if="renderChart && hasData"
    :option="options"
    :autoresize="autoresize"
    :style="{ width, height }"
    @click="handleClick"
    @zr:click="handleZrClick"
    :key="key"
  />
  <div v-else class="none-data">暂无数据</div>
  <t-dialog
    :visible="visible"
    header=""
    :width="1200"
    attach="body"
    :closeOnOverlayClick="false"
    :footer="false"
    @close="visible = false"
  >
    <div style="height: calc(100vh - 150px)">
      <v-charts
        v-if="renderChart"
        :option="options"
        :autoresize="autoresize"
        :style="{ width, height }"
      />
    </div>
  </t-dialog>
</template>

<script setup>
import { ref, computed, nextTick, watch } from 'vue';
import VCharts from 'vue-echarts';
import { useAppStore } from '@/store';
const visible = ref(false);
const emits = defineEmits(['chartClick']);
const key = ref(new Date().getTime() + '');
const props = defineProps({
  options: {
    type: Object,
    default() {
      return {};
    },
  },
  autoresize: {
    type: Boolean,
    default: true,
  },
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '100%',
  },
});

const appStore = useAppStore();
const hasData = computed(() => {
  let IS_PIE = props.options?.series?.find((item) => item.type === 'pie');
  let pieHasData = IS_PIE?.data?.length;
  let IS_RADAR = props.options?.series?.find((item) => item.type === 'radar');
  let hasRadarData = IS_RADAR?.data?.length;
  let IS_NORMAL = props.options?.customType === 'NORMAL';
  let hasNormalData = props.options?.series?.length;

  return IS_PIE
    ? pieHasData
    : IS_RADAR
    ? hasRadarData
    : IS_NORMAL
    ? hasNormalData
    : true;
});
watch(hasData, () => {
  key.value = new Date().getTime() + '';
});

const renderChart = ref(false);
const handleClick = (params) => {
  console.log('params:', params);
  emits('chartClick', params);
};
const handleZrClick = (params) => {
  if (
    params.topTarget &&
    params.topTarget.parent.anid &&
    params.target === undefined
  ) {
    console.log('点击x或y轴');
  }
};
nextTick(() => {
  renderChart.value = true;
});

const maximize = () => {
  visible.value = true;
};
defineExpose({
  maximize,
});
</script>

<style scoped lang="less">
.none-data {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ccc;
  font-size: 14px;
}
</style>
