<template>
  <el-dialog
    :title="finalyText"
    :visible.sync="visible"
    width="1060px"
    @close="cancel"
  >
    <div
      v-show="listData.length"
      ref="chartLine"
      class="chartLine"
      :key="componentKeys"
    ></div>
    <div v-show="!listData.length" style="font-size: 20px; text-align: center">
      <i
        class="el-icon-warning"
        style="color: orange; margin-right: 10px"
      />暂无数据
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { pictorialStatement } from '../../api.js';
import * as echarts from "echarts";

export default {
  props: {
    flag: {
      type: Number,
      default: 0
    },
    curInfo: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: false,
      componentKeys: 0,
      listData: [],
      title: ''
    }
  },
  watch: {
    flag: {
      immediate: true,
      handler(newV) {
        this.visible = !!newV;
      }
    },
    curInfo(newV) {
      if (newV) {
        this.componentKeys++;
        this.init();
      }
    }
  },
  computed: {
    finalyText() {
      return '驻波比图形分析(' + this.title + ')';
    }
  },
  methods: {
    init() {
      pictorialStatement(this.curInfo).then((res) => {
        if (JSON.stringify(res.collect) !== '{}') {
          let keyList = Object.keys(res.collect);
          let valueList = Object.values(res.collect);
          let finallyList = [];
          this.title = keyList.length > 1 ? '' : keyList[0];
          for (var i = 0; i < keyList.length; i++) {
            let obj = {};
            let source = [];
            valueList[i].map(item => {
              let arr = [];
              arr.push(parseFloat(item.distance), parseFloat(item.value));
              source.push(arr);
            })
            obj.dimensions = [`${keyList[i]}`];
            obj.source = source;
            finallyList.push(obj);
          }
          this.listData = finallyList;
          finallyList.length ? this.getLine(finallyList) : '';
        } else {
          this.title = '';
          this.listData = [];
        }
      })
    },
    getLine(data) {
      if (data.length) {
        this.myChartLine = echarts.init(this.$refs.chartLine)
        let option = {
          legend: {},
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              if (params.length > 1) {
                let str = params[0].data[0] + "<br />"
                params.forEach(item => {
                  str += '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' + item.color + '"></span>'
                    + '<span style="display:inline-block;width:70px;margin-right:5px;">' + item.seriesName + '</span>'
                    + "  驻波比"
                    + '<span style="font-weight:700;">' + item.data[1] + "</span><br />";
                })
                return str;
              } else {
                let str = params[0].data[0] + "<br />"
                str += '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' + params[0].color + '"></span>'
                  + '<span style="display:inline-block;width:70px;margin-right:5px;">' + params[0].seriesName + '</span>'
                  + "  驻波比"
                  + '<span style="font-weight:700;">' + params[0].data[1] + "</span><br />";
                return str;
              }
            },
          },
          dataset: data,
          xAxis: {
            type: "value",
            boundaryGap: false,
            axisLabel: {
              color: "#30eee9",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#397cbc",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#195384",
              },
            },

          },
          yAxis: [
            {
              type: "value",
              name: "",
              min: 0,
              axisLabel: {
                formatter: "{value}",
                textStyle: {
                  color: "#2ad1d2",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#27b4c2",
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#195384",
                },
              },
            },
          ],
          series: [
            {
              type: 'line',
              datasetIndex: 0
            },
            {
              type: 'line',
              datasetIndex: 1
            }, {
              type: 'line',
              datasetIndex: 2
            }, {
              type: 'line',
              datasetIndex: 3
            }, {
              type: 'line',
              datasetIndex: 4
            }
          ]
        };
        this.lineOption = option
        this.myChartLine.setOption(option)
        window.addEventListener("resize", () => {
          this.myChartLine.resize()
        })
      }
    },
    cancel() {
      this.visible = false;
      this.$emit('cancel');
    }
  }
}
</script>

<style>
.chartLine {
  width: 1000px;
  height: 500px;
}
</style>