<template>
  <div style="height: calc(100vh)!important">
    <EchartsLine :lineData="lineDataParams && lineDataParams.chart || {}" :title="lineDataParams.chart && lineDataParams.chart.title || ''" style="height:500px;" class="w100 mt20 mb20"></EchartsLine>
    <div style="float: right;margin-top: 20px;margin-right: 30px;">
      <el-button type="primary" @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script>
  import EchartsLine from "@/components/echartsList/line.vue";
  import {taskRraphical} from "@/api/disRevenue/earnManage";
  export default {
    name: "busValCount_viewChart",
    components: {EchartsLine},
    data() {
      return {
        paramsData: {},
        echartData: {
          title: 'tux',
          titleSubtext: {subtext: '', bottom: '14%', x: '50%', textAlign: 'center', subtextStyle: {fontWeight: 'bold', fontSize: 14}},
          yAxisName: '',
          content: {},
          legend: {orient: 'vertical',bottom: '0%', formatter: true},
          gridBotm: '20%',
          hiddenTime: true,
          lineXData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sa', 'Sun'],
          dataList: [
            {name: '总发送流量值', data: []},
            {name: '总接收流量值', data: []},
            {name: '95带宽值', areaStyleNone: true, symbol: 'none', data: []},
          ]
        },
        lineDataParams: {chart: {}},
      }
    },
    created() {
      this.paramsData = this.$route && this.$route.query;
      this.chartList();
    },
    methods: {
      chartList() {
        let newChartData = JSON.parse(JSON.stringify(this.echartData));
        if (this.paramsData && this.paramsData.resourceType === '1') {
         newChartData.dataList.splice(1,1);
        }

        if (this.paramsData && this.paramsData.calculationType === '2') {
          newChartData.dataList[newChartData.dataList.length - 1].name = '月均日95值';
        }
        taskRraphical({id: this.paramsData.id}).then(res => {
          if(res && res.data) {
            let outContent = `最后一个值：${res && res.data && res.data.other && res.data.other.lastOutSpeedGb ? res.data.other.lastOutSpeedGb + 'G' : '0'}   平均值：${res && res.data && res.data.other && res.data.other.avgOutSpeedGb ? res.data.other.avgOutSpeedGb + 'G' : '0'}   最大值：${res && res.data && res.data.other && res.data.other.maxOutSpeedGb ? res.data.other.maxOutSpeedGb + 'G' : '0'}`;
            let inContent = `最后一个值：${res && res.data && res.data.other && res.data.other.lastInSpeedGb ? res.data.other.lastInSpeedGb + 'G' : '0'}   平均值：${res && res.data && res.data.other && res.data.other.avgInSpeedGb ? res.data.other.avgInSpeedGb + 'G' : '0'}   最大值：${res && res.data && res.data.other && res.data.other.maxInSpeedGb ? res.data.other.maxInSpeedGb + 'G' : '0'}`;
            let kdContent = `(${res && res.data && res.data.percentile95 ? res.data.percentile95 + 'mbit' : '0'}    out)`;
            newChartData.title = '【' + this.paramsData.taskName + '】';
            newChartData.titleSubtext.subtext = res && res.data && res.data.timeRange || ' ';
            newChartData.content[newChartData.dataList[0].name] = outContent;
            newChartData.yAxisName = res && res.data && res.data.other && res.data.other.recommendedUnit ? '单位' + res.data.other.recommendedUnit : '';
            newChartData.lineXData = res && res.data && res.data.xData || [];
            newChartData.dataList[0].data = res && res.data && res.data.yData && res.data.yData['netOutSpeedData'] || [];
            if (this.paramsData && this.paramsData.resourceType === '1') {
              newChartData.content[newChartData.dataList[1].name] = kdContent;
              newChartData.dataList[1].data = res && res.data && res.data.yData && res.data.yData['percentile95'] || [];
            } else {
              newChartData.content[newChartData.dataList[1].name] = inContent;
              newChartData.content[newChartData.dataList[2].name] = kdContent;
              newChartData.dataList[1].data = res && res.data && res.data.yData && res.data.yData['netInSpeedData'] || [];
              newChartData.dataList[2].data = res && res.data && res.data.yData && res.data.yData['percentile95'] || [];
            }
          }
          this.$set(this.lineDataParams, 'chart', newChartData);
        });
      },
      goBack() {
        this.$router.push("/earnManage/busValueCount");
      },
    }
  }
</script>

<style scoped>

</style>
