<template>
  <msg-card class="item item-trafficFlow" title="交通流量">
    <el-tabs v-model="tabsActiveName" @tab-click="tabsHandleClick">
      <el-tab-pane name="cross" label="路口">
        <div id="trafficFlowcross" class="full-h"></div>
      </el-tab-pane>
      <el-tab-pane name="road" label="路段">
        <div id="trafficFlowroad" class="full-h"></div>
      </el-tab-pane>
    </el-tabs>
  </msg-card>
</template>

<script>
import msgCard from "../../../components/Standard/msg-card.vue";
import { getFontSize } from "../../../config/holo/fontSize.js";
import { getData } from "../../../dao/requestByUrl.js";
export default {
  components: { msgCard },
  data() {
    return {
      // 交通流量
      tabsActiveName: "cross",
      charts: {},
      corssFlowApi: "",
      roadFlowApi: "",
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      let req = await fetch("DATA.json");
      let allData = await req.json();
      this.corssFlowApi = allData.intersectionGroups.apis.trafficFlowCross.url;
      this.roadFlowApi = allData.intersectionGroups.apis.trafficFlowRoad.url;
      this.getcrossData();
    },
    getcrossData() {
      getData(this.corssFlowApi).then((res) => {
        this.refreshChart(res.content, "cross");
      });
    },
    getroadData() {
      getData(this.roadFlowApi).then((res) => {
        this.refreshChart(res.content, "road");
      });
    },
    refreshChart(content, id) {
      let option = {
        color: ["#53c188", "#318af5", "#6a38e1"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
          textStyle: {
            fontSize: getFontSize(12),
          },
          confine: true,
        },
        legend: {
          top: getFontSize(0),
          itemGap: getFontSize(16),
          itemWidth: getFontSize(12),
          itemHeight: getFontSize(12),
          textStyle: {
            color: "rgba(126, 139, 166, 1)",
            fontSize: getFontSize(12),
            lineHeight: getFontSize(15),
          },
          pageTextStyle: {
            color: "rgba(126, 139, 166, 1)",
            fontSize: getFontSize(12),
          },
          pageIconColor: "white",
          pageIconSize: getFontSize(12),
          pageIconInactiveColor: "rgba(153, 153, 153, 1)",
          type: "scroll",
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: getFontSize(44),
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: content.timeList,
          axisLabel: {
            fontSize: getFontSize(12),
            color: "rgba(126, 139, 166, 1)",
          },
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(255, 255, 255, 0.2)",
            },
          },
          type: "value",
          axisLabel: {
            fontSize: getFontSize(12),
            color: "rgba(126, 139, 166, 1)",
          },
        },
        series: (() => {
          let series = [];
          content.flowList.forEach((flow) => {
            series.push({
              name: flow.name,
              type: "bar",
              barWidth: getFontSize(22),
              stack: "total",
              label: {
                show: false,
              },
              emphasis: {
                focus: "series",
              },
              data: flow.list,
            });
          });
          return series;
        })(),
      };
      this.charts[id] = echarts.init(
        document.getElementById(`trafficFlow${id}`)
      );
      this.charts[id] && this.charts[id].setOption(option);
    },
    tabsHandleClick(tab) {
      this.$nextTick(() => {
        this[`get${tab.name}Data`]();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.item-trafficFlow {
  position: relative;

  ::v-deep .el-tabs__content {
    padding: 6px;
    height: calc(100% - 42px);
  }

  ::v-deep .el-tabs__active-bar {
    background: transparent;
  }

  ::v-deep .el-tabs__item.is-active {
    color: white;
    background-color: rgba(1, 23, 50, 1);
  }

  ::v-deep .el-tab-pane {
    height: 100%;
  }

  ::v-deep .el-tabs__nav-wrap::after {
    height: 0;
  }

  ::v-deep .el-tabs__item {
    padding: 0;
    height: 42px;
    line-height: 42px;
    width: 50%;
    font-size: 14px;
    color: rgba(126, 139, 166, 1);
    text-align: center;
    border-bottom: unset;
  }

  ::v-deep .el-tabs__nav {
    float: unset;
    border: 1px solid #04396f;
  }

  ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: 1px solid rgba(2, 43, 83, 1);
  }

  ::v-deep .el-tabs__header {
    margin: 0;
    background-color: transparent;
  }

  ::v-deep .el-tabs {
    height: 100%;
  }
}
</style>
