<template>
  <div id="body">
    <el-card class="box-card"
      shadow="always">
      <div slot="header"
        class="clearfix">
        <span>卫星载躁比</span>
        <el-dropdown style="float: right; padding: 3px 0"
          trigger="click"
          @command="handleCommand">
          <span class="el-dropdown-link">
            卫星类型<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="BDS">BDS</el-dropdown-item>
            <el-dropdown-item command="GPS">GPS</el-dropdown-item>
            <el-dropdown-item command="Galileo">Galileo</el-dropdown-item>
            <el-dropdown-item command="GLONASS">GLONASS</el-dropdown-item>

          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="main_e"
        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 * as echarts from 'echarts';

export default {
  data() {
    return {
      showEmpty: false,
      chart: null,
      chartData: null
    };
  },

  mounted() {
    // 使用模拟数据
    this.processData({
      B1C: [
        { prn: 1, snr: 35 },
        { prn: 2, snr: 40 },
        { prn: 3, snr: 45 }
      ],
      B2I: [
        { prn: 1, snr: 32 },
        { prn: 2, snr: 38 },
        { prn: 3, snr: 42 }
      ],
      'B2-a': [
        { prn: 1, snr: 30 },
        { prn: 2, snr: 36 },
        { prn: 3, snr: 40 }
      ],
      B1I: [
        { prn: 1, snr: 33 },
        { prn: 2, snr: 39 },
        { prn: 3, snr: 43 }
      ],
      B3I: [
        { prn: 1, snr: 31 },
        { prn: 2, snr: 37 },
        { prn: 3, snr: 41 }
      ]
    });
  },

  methods: {

    handleCommand(command) {
      console.log(command);
      if (command === 'Galileo') {
        this.chart.dispose()
        console.log(this.chart);
        this.chart = null;
        console.log(this.chart);


      }
      if (command === 'GLONASS') {
        this.processData({
          B1C: [
            { prn: 1, snr: 35 },
            { prn: 2, snr: 40 },
            { prn: 3, snr: 45 }
          ],
          B2I: [
            { prn: 1, snr: 32 },
            { prn: 2, snr: 38 },
            { prn: 3, snr: 42 }
          ],
          'B2-a': [
            { prn: 1, snr: 30 },
            { prn: 2, snr: 36 },
            { prn: 3, snr: 40 }
          ],
          B1I: [
            { prn: 1, snr: 33 },
            { prn: 2, snr: 39 },
            { prn: 3, snr: 43 }
          ],
          B3I: [
            { prn: 1, snr: 31 },
            { prn: 2, snr: 37 },
            { prn: 3, snr: 41 }
          ]
        });
      }
    },
    /** 处理接收数据 */
    processData(data) {
      const prnData = {};
      const seriesColors = ['#ffbcc7', '#ff738a', '#ff4463', '#d91b3a', '#ae162e'];

      for (const groupKey in data) {
        const group = data[groupKey];
        group.forEach(satellite => {
          const prn = satellite.prn.toString();
          if (!prnData.hasOwnProperty(prn)) {
            prnData[prn] = new Array(5).fill(null);
          }
          switch (groupKey) {
            case 'B1C':
              prnData[prn][0] = satellite.snr;
              break;
            case 'B2I':
              prnData[prn][1] = satellite.snr;
              break;
            case 'B2-a':
              prnData[prn][2] = satellite.snr;
              break;
            case 'B1I':
              prnData[prn][3] = satellite.snr;
              break;
            case 'B3I':
              prnData[prn][4] = satellite.snr;
              break;
            default:
              break;
          }
        });
      }

      const chartData = {
        xAxis: {
          type: 'category',
          data: Object.keys(prnData)
        },
        series: []
      };

      for (let i = 0; i < 5; i++) {
        const seriesData = Object.values(prnData).map(data => data[i]);
        chartData.series.push({
          name: i === 0 ? 'B1C' : i === 1 ? 'B2I' : i === 2 ? 'B2-a' : i === 3 ? 'B1I' : 'B3I',
          type: 'bar',
          data: seriesData,
          itemStyle: {
            color: seriesColors[i]
          }
        });
      }

      this.chartData = chartData;
      this.initEcharts(chartData);
    },



    /** 初始化echart */
    initEcharts(data) {
      this.chart = echarts.init(this.$refs.echart);

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          right: 'center',
          top: '15px'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          max: 60
        },
        xAxis: {
          type: 'category',
          data: data.xAxis.data
        },
        series: data.series,
        animation: false
      };

      this.chart.setOption(option);
      window.addEventListener('resize', () => {
        this.chart.resize();
      });
    }
  }
}
</script>

<style scoped>
#body {
  position: relative;
  width: 100%;
  height: 100%;
}

.box-card {
  height: 100%;
}

.main_e {
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  bottom: 0;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
