<template>
  <div id="body">
    <el-card class="box-card"
      shadow="always">
      <div slot="header"
        class="clearfix">
        <span>卫星分布</span>
      </div>
      <div class="main_s"
        v-if="!showEmpty">
        <div style="width: 100%; height: 100%;"
          id="echart"
          ref="echart"></div>
      </div>
      <el-empty :image-size="100"
        v-if="showEmpty"></el-empty>
    </el-card>
  </div>
</template>

<script>
import { china } from '@/assets/icon/china';
import * as echarts from 'echarts';

export default {
  data() {
    return {
      showEmpty: false, // 初始设置为 false，显示图表
      china: china(),
      echart: null,
      simulatedData: {
        BeiDou: [
          { name: 'PRN1', value: [10, 60] },
          { name: 'PRN2', value: [20, 120] },
          { name: 'PRN3', value: [30, 180] },
          { name: 'PRN4', value: [40, 240] },
          { name: 'PRN5', value: [50, 300] }
        ]
      }
    };
  },
  mounted() {
    // 使用模拟数据初始化图表
    this.setSite(this.simulatedData);

  },
  methods: {
    /** 使用 */
    setSite(newVal) {
      let list = [];
      let push = newVal;
      if (newVal == null) {
        this.showEmpty = true; // 显示空白图表
        if (this.chart) {
          this.chart.dispose()
          this.chart = null; // 清空图表实例
        }
        return;
      } else {
        this.showEmpty = false; // 显示图表
        list.BeiDou = this.siftSite(push.BeiDou);
        this.$nextTick(() => {
          this.initEchart(list); // 在 DOM 更新后初始化图表
        });
      }
    },
    /** 筛选卫星 */
    siftSite(siteData) {
      const outPut = [];
      const prnSet = new Set(); // 用于存储已经添加过的 prn 值
      siteData.forEach(satellite => {
        const prn = satellite.name;
        if (!prnSet.has(prn)) { // 如果 prn 值没有被添加过
          let i = 90 - satellite.value[0];
          if (i === 0) {
            i = 0.1;
          }
          const newSatellite = [i, satellite.value[1]]; // 创建新的卫星数据数组
          outPut.push({
            name: prn,
            value: newSatellite
          }); // 添加当前卫星数据到新数组中
          prnSet.add(prn); // 将 prn 值添加到已添加过的集合中
        }
      });
      return outPut;
    },

    /** 初始化或更新echarts */
    initEchart(list) {
      this.chart = echarts.init(this.$refs.echart);


      const option = {
        tooltip: {
          formatter: function (params) {
            var prn = params.name;
            var value = params.value;
            var seriesName = params.seriesName;
            var correctedElevation = 90 - value[0];

            return '卫星系统: ' + seriesName + '<br/>' + '卫星编号: ' + prn + '<br/>' + '俯仰角: ' + '[' + correctedElevation + ',' + value[1] + ']';
          }
        },
        legend: {
          orient: 'vertical',
          right: '25px',
          top: '15px',
          itemWidth: 25, // 图例项宽度
          itemHeight: 25 // 图例项高度
        },
        polar: {
          center: ['50%', '50%']
        },
        angleAxis: {
          type: 'value',
          data: [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 360],
          max: 360,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#708eb1',
              type: 'dashed'
            }
          }
        },
        radiusAxis: {
          show: false,
          type: 'value',
          data: [0, 30, 60, 90],
          minInterval: 30,
          splitLine: {
            show: false,
            lineStyle: {
              color: '#708eb1',
              show: false
            }
          },
          axisLine: {
            show: false
          }
        },
        series: [
          {
            name: 'BDS',
            type: 'scatter',
            coordinateSystem: 'polar',
            data: list.BeiDou,
            symbol: this.china, // 使用图片作为散点符号
            symbolSize: function (val) {
              return 23; // 控制图片大小
            },
            symbolOffset: [0, 0], // 调整图片的垂直偏移量，使其居中显示在极坐标系上
            itemStyle: {
              opacity: 1 // 设置图片的透明度
            },
            symbolRotate: 0, // 调整图片旋转角度，使其与极坐标系对齐
            symbolBoundingData: 90 // 设置图片的包围数据，以确保图片在极坐标系内完全显示
          },
        ]
      };

      // 设置图表配置项并渲染图表
      this.chart.setOption(option);
      window.addEventListener('resize', () => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    },


  }
}
</script>

<style scoped>
#body {
  position: relative;
  /* 设置为相对定位 */
  width: 100%;
  height: 100%;
}

.body-container {
  height: calc(100% - 80px);
  /* 减去头部高度，根据实际情况调整 */
}

.box-card {
  height: 100%;
}

.main_s {
  position: absolute;
  /* 设置为绝对定位 */
  top: 35px;
  /* 头部高度，根据实际情况调整 */
  left: 0;
  right: 0;
  bottom: 0;
}
</style>
