<template>
  <!-- line chart  -->
  <div class="line-chart__wrapper">
    <div class="line-chart__custom-legend flex" v-if="legend.length">
      <!-- <span>产线1 - 产线5</span> -->
      <ul style="" class="flex">
        <li v-for="(v, i) in legend" :key="i">{{ v }}</li>
      </ul>
    </div>
    <div :id="id" style="width: 100%; height: 100%"></div>
    <div
      v-show="legend.length === 0"
      style="
        position: absolute;
        top: 0;
        left: 0;
        background: #eee0;
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        font-size: 24px;
        color: #eee8;
        user-select: none;
      "
    >
      无数据
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts/core";
import { LineChart } from "echarts/charts";

import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
} from "echarts/components";

import { LabelLayout, UniversalTransition } from "echarts/features";

import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
]);

function adjust(v) {
  return v * 2;
}

export default {
  name: "LineChart",
  props: {
    id: {
      type: String,
      default: "line-chart",
    },
    config: {
      type: Object,
      default: () => ({
        title: { text: "default chart" },
      }),
    },
    unit: {
      type: "String",
      default: "单位/m³",
    },
    legend: {
      type: Array,
      default: () => [],
    },
    series: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      chart: null,
      colors: [
        "#18c7f3",
        "#FFD160",
        "#F31868",
        "#30E89A",
        "#2760FF",
        "#7138FF",
        "#F318D8",
        "#C0F318",
        "#f77",
        "#19f",
        "#98f",
      ],
      data: [],
      legendtext: [
        "asdfsadf",
        "asdfsadf",
        "asdfsadf",
        "asdfsadf",
        "asdfsadf",
        "asdfsadf",
        "asdfsadf",
        "asdfsadf",
      ],
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    series: {
      deep: true,
      handler: function () {
        console.log("LineChart: series changed!");
        this.init();
      },
    },
  },
  methods: {
    updateXAxis() {
      const hour = +new Date().getHours();
      return Array(24)
        .fill(1)
        .map((_, index) => {
          if (hour - index < 0) {
            return 24 + hour - index + ":00";
          }
          return hour - index + ":00";
        })
        .reverse();
    },
    init() {
      if (!this.chart)
        this.chart = echarts.init(document.getElementById(this.id));
      this.chart.setOption({
        grid: {
          top: adjust(32),
          left: adjust(32),
          bottom: adjust(24),
          right: adjust(12),
        },
        xAxis: {
          data: this.updateXAxis(),
          axisLine: {
            lineStyle: {
              color: "#5982b2a0",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#fff9",
            fontSize: adjust(8),
            lineHeight: adjust(1),
            margin: adjust(8),
            rotate: 30,
          },
        },
        yAxis: {
          type: "value",
          name: this.unit,
          nameTextStyle: {
            color: "#fff9",
            fontSize: adjust(9),
            align: "",
          },
          axisLine: {
            show: true,
            lineStyle: {
              // width: 1,
              color: "#5982b2a0",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#fff9",
            fontSize: adjust(8),
            lineHeight: adjust(1),
          },
          splitLine: {
            lineStyle: {
              color: "#5982b2a0",
            },
          },
          // data: [100, 200, 300, 400, 500],
        },
        color: this.colors,
        // series: Array(5)
        // 	.fill(1)
        // 	.map((_, index) => ({
        // 		name: Math.random(),
        // 		type: "line",
        // 		symbol: "circle",
        // 		symbolSize: adjust(3),
        // 		lineStyle: {
        // 			width: adjust(1),
        // 		},
        // 		areaStyle: {
        // 			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        // 				{ offset: 0, color: this.colors[index] + "33" },
        // 				{ offset: 1, color: "transparent" },
        // 			]),
        // 		},
        // 		data: Array(31)
        // 			.fill(1)
        // 			.map(() => {
        // 				let v = Math.floor(Math.random() * 5000);
        // 				while (v < 3000) v = Math.floor(Math.random() * 5000);
        // 				return v;
        // 			}),
        // 	})),
        series: Array(this.legend.length)
          .fill(1)
          .map((_, index) => {
            let lgd = this.legend[index];
            // console.log("series: ", lgd, index, this.series[lgd]);
            return {
              name: lgd,
              type: "line",
              symbol: "circle",
              symbolSize: adjust(3),
              lineStyle: {
                width: adjust(1),
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: this.colors[index] + "33" },
                  { offset: 1, color: "transparent" },
                ]),
              },
              data: this.series[lgd],
            };
          }),
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "../../assets/styles/functions";

::-webkit-scrollbar {
  // display: none;
  height: adjust(2px);
}

::-webkit-scrollbar-thumb {
  height: adjust(2px);
  border-radius: adjust(2px);
  background: #ccc3;
}

// ::-webkit-scrollbar-track {
// height: adjust(1px);
// background: blue;
// }

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: adjust(20px);
}

ul {
  // padding: 0 adjust(8px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  height: adjust(28px);
  // background: #eeec;
  overflow-x: hidden;
  white-space: pre-wrap;
  padding-bottom: adjust(2px);
}

li {
  text-align: right;
  position: relative;
  min-width: 40px;
  margin-right: adjust(9px);
  padding: 0 adjust(2px);
}

li:not(:last-child) {
  // margin-right: adjust(16px);
}

.line-chart__custom-legend {
  position: absolute;
  top: adjust(-32px);
  right: 0;
  font-size: adjust(9px);
  font-family: Ubuntu, sans-serif;
  padding: 0;
  // max-width: 100%;
  width: 65%;
  align-items: flex-start;
  justify-content: flex-end;
}

li::before {
  content: "";
  position: absolute;
  top: adjust(2px);
  left: adjust(-8px);
  width: adjust(8px);
  height: adjust(8px);
  border-radius: adjust(1px);
  background: #eee6;
}

li:nth-child(1)::before {
  background: #18c7f3;
}
li:nth-child(2)::before {
  background: #ffd160;
}
li:nth-child(3)::before {
  background: #f31868;
}
li:nth-child(4)::before {
  background: #30e89a;
}
li:nth-child(5)::before {
  background: #2760ff;
}
li:nth-child(6)::before {
  background: #7138FF;
}
li:nth-child(7)::before {
  background: #F318D8;
}
li:nth-child(8)::before {
  background: #C0F318;
}
li:nth-child(9)::before {
  background: #f77;
}
li:nth-child(10)::before {
  background: #19f;
}
li:nth-child(11)::before {
  background: #98f;
}

.line-chart__wrapper {
  position: relative;
  background: #7771;
  border-radius: adjust(3px);
  backdrop-filter: blur(adjust(2px));
  box-shadow: inset 0 0 adjust(10px) adjust(2px) rgba($color: #fff, $alpha: 0.1);
  height: 100%;
  width: adjust(1px);
}
</style>
