<template>
  <div class="inOut">
    <div ref="inOut"></div>
    <el-row>
      <el-col :span="12">
        <div class="inoutItem">
          <div class="after"></div>
          <el-row v-if="select.input">
            <el-col :span="20"> 流入({{ inDataText() }}) </el-col>
            <el-col :span="4">
              {{ pFormat(select.in) }}
            </el-col>
          </el-row>
          <el-row
            v-for="(v, i) in select.input"
            :key="i + '0'"
            :style="{ color: '#232323' }"
          >
            <el-col :span="4">
              {{ v.channel }}
            </el-col>

            <el-col :span="16">
              {{ v.epg_name }}
            </el-col>
            <el-col :span="4">
              {{ pFormat(v.value) }}
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="inoutItem inoutStyle">
          <div class="after"></div>
          <el-row v-if="select.output">
            <el-col :span="20"> 流出({{ inDataText() }}) </el-col>
            <el-col :span="4">
              {{ pFormat(select.out) }}
            </el-col>
          </el-row>
          <el-row
            v-for="(v, i) in select.output"
            :key="i + '0'"
            :style="{ color: '#232323' }"
          >
            <el-col :span="4">
              {{ v.channel }}
            </el-col>

            <el-col :span="16">
              {{ v.epg_name }}
            </el-col>
            <el-col :span="4">
              {{ pFormat(v.value) }}
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import * as echarts from "echarts";

import * as echarts from "echarts/core";
import { LineChart } from "echarts/charts";
import { LegendComponent, VisualMapComponent } from "echarts/components";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  LegendComponent,
  VisualMapComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LineChart,
  CanvasRenderer,
]);

let chart = undefined;
export default {
  name: "inOut",
  props: ["list"],
  watch: {},
  data: function() {
    return {
      leftList: [],
      rightList: [],
      select: {},
      chart: undefined,
    };
  },
  filters: {},
  computed: {},
  methods: {
    inDataText() {
      let s = this.select.start_x,
        e = this.select.end_x;
      return (
        s[8] +
        s[9] +
        ":" +
        s[10] +
        s[11] +
        "~" +
        e[8] +
        e[9] +
        ":" +
        e[10] +
        e[11]
      );
    },
    pFormat(v) {
      return (v || 0).toFixed(4) + "%";
    },
    read(v) {
      if (isNaN(v)) return 0;
      let o = v;
      if (v > 10000) {
        o = (v / 10000).toFixed(4) + "万";
      }
      return o;
    },
    formatte() {
      let source = {
        key: [],
        val: [],
        li: [],
      };
      source.key.push(this.list[0].start_x);
      source.val.push(this.list[0].start_y * 100);

      this.list.map((v, o) => {
        let start =
          (v.start_x[8] + v.start_x[9]) * 60 +
          (v.start_x[10] + v.start_x[11]) * 1;
        let end =
          (v.end_x[8] + v.end_x[9]) * 60 + (v.end_x[10] + v.end_x[11]) * 1;
        let e = start > end ? start : end;
        let s = start < end ? start : end;
        let y1 = v.start_y * 100;
        let y2 = v.end_y * 100;
        let k = (y1 - y2) / (start - end);
        let b = y1 - k * start;
        if (o === 0) source.li.push(e - s + 1);
        else source.li.push(e - s);
        for (let i = s; i < e; i++) {
          let t = Math.floor(i / 60) + "" + (i % 60);
          let ny = k * i + b;
          let nk =
            v.start_x
              .split("")
              .splice(0, 8)
              .join("") +
            t +
            "00";
          source.val.push(ny);
          source.key.push(nk);
        }
      });

      return source;
    },
    format(v) {
      if (isNaN(v)) return 0;
      let o = v.toFixed(4);
      if (v > 10000) {
        o = (v / 10000).toFixed(4) + "万";
      }

      return o;
    },
    createChart() {
      if (!this.$refs.inOut) return;
      const source = this.formatte();
      chart = echarts.init(this.$refs.inOut);
      chart.resize({
        height: (this.$refs.inOut.offsetWidth * 6) / 16,
      });
      let d = [],
        baseNum = 0;
      const _this = this;

      for (let i = 0; i < source.li.length; i++) {
        let n = baseNum + source.li[i] * 1;
        d.push({
          gte: baseNum,
          lt: n,
          color:
            source.val[n] * 10000 < source.val[baseNum] * 10000
              ? "#ba7dff"
              : "#fcc543",
        });
        baseNum = n;
      }

      var option = {
        legend: {},
        tooltip: {
          trigger: "axis",
          triggerOn: "mousemove",
          axisPointer: {
            type: "line",
            axis: "x",
          },
          formatter(params) {
            let o = params[0].dataIndex,
              p = 0,
              u = 0;

            for (let i = 0; i < source.li.length - 1; i++) {
              if (o > p && o <= p + source.li[i]) {
                u = i;
                break;
              }
              p += source.li[i];
            }
            _this.select = _this.list[u];
            return "";
          },
        },
        xAxis: {
          type: "category",
          data: source.key,
          axisLabel: {
            formatter: arr => {
              let l = arr.split("");
              let t = l[8] + l[9] + ":" + l[10] + l[11];
              return t;
            },
          },
        },
        yAxis: {
          type: "value",
          scale: true,
        },
        visualMap: {
          show: false,
          dimension: 0,
          pieces: d,
        },
        series: [
          {
            data: source.val,
            type: "line",
            showAllSymbol: false,
            itemStyle: {
              opacity: 0,
            },
          },
        ],
      };
      option && chart.setOption(option);
    },
    setSelect(num) {
      this.select = this.list[num || 0];
    },
  },
  mounted() {
    this.setSelect(0);
    this.$nextTick(() => {
      this.createChart();
    });
  },
  beforeUnmount: function() {
    chart.dispose();
  },
  components: {},
};
</script>
<style>
.inOut .inoutItem {
  border-radius: 5px;
  color: #fcc543;
  font-size: 14px;
  margin: 1em;
  position: relative;
}
.inOut .inoutItem .el-row {
  line-height: 1.8em;
}
.inOut .inoutItem .after {
  position: absolute;
  left: -10px;
  display: block;
  width: 5px;
  min-height: 5em;
  height: 100%;
  background-color: #fcc543;
}
.inOut .inoutStyle .after {
  background-color: #ba7dff;
}
.inOut .inoutStyle {
  color: #ba7dff;
}
</style>
