<template>
  <div class="flow-container">
    <div class="left-div">
      <div class="date">
        <Date />
      </div>
      <div
        v-for="(item, index) of listData"
        :key="index"
        class="echart-content"
      >
        <BarEchart :echartData="item" />
      </div>
    </div>
    <div class="right-div">
      <div
        v-for="(item, index) of dataList"
        :key="index"
        :class="'div' + index"
      >
        <div>{{ item.title }}</div>
        <div v-for="(it, i) of item.data" :key="i">
          <Process :itemData="it"></Process>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElMessage } from "element-plus";
import myApi from "@/api/myApi.js";
import BarEchart from "./BarEchart.vue";
import Process from "./Process.vue";
import Date from "@/components/Date.vue";
export default {
  name: "Flow",
  components: {
    BarEchart,
    Process,
    Date
  },
  setup() {
    const state = reactive({
      listData: [
        {
          id: "echart0",
          title: "UF产水流量-柱状图",
          legend: ["UF产水流量-柱状图"],
          color: ["#6fdbce", "#eafbf7"],
        },
        {
          id: "echart1",
          title: "自来水前端流量-柱状图",
          legend: ["自来水前端流量-柱状图"],
          color: ["#308286", "#eafbf7"],
        },
        {
          id: "echart2",
          title: "供水流量-柱状图",
          legend: ["供水流量-柱状图"],
          color: ["#308286", "#eafbf7"],
        },
        {
          id: "echart3",
          title: "自来水后端流量-柱状图",
          legend: ["自来水后端流量-柱状图"],
          color: ["#62d3ff", "#eafbf7"],
        },
      ],
      dataList: [
        {
          title: "UF产水瞬时流量:m3/H:",
          data: [
            {
              id: "0",
              color: "#6fdbce",
              label: "Q1",
              value: "20",
            },
          ],
        },
        {
          title: "UF产水累计流量:m3",
          data: [
            {
              id: "1",
              color: "#00baff",
              label: "Q2",
              value: "80",
            },
          ],
        },
        {
          title: "自来水前端瞬时流量:m3/H",
          data: [
            {
              id: "3",
              color: "#308286",
              label: "Q3",
              value: "80",
            },
          ],
        },
        {
          title: "自来水前端累计流量:m3",
          data: [
            {
              id: "4",
              color: "#00baff",
              label: "Q4",
              value: "80",
            },
          ],
        },
        {
          title: "供水瞬时流量:m3/H",
          data: [
            {
              id: "5",
              color: "#00baff",
              label: "Q5",
              value: "80",
            },
          ],
        },
        {
          title: "供水累计流量:m3",
          data: [
            {
              id: "6",
              color: "#00baff",
              label: "Q6",
              value: "80",
            },
          ],
        },
        {
          title: "自程谥来水后端瞬时流量:m3/H",
          data: [
            {
              id: "7",
              color: "#00baff",
              label: "Q7",
              value: "10",
            },
          ],
        },
        {
          title: "自来水后端累计弃流量:m3",
          data: [
            {
              id: "8",
              color: "#00baff",
              label: "Q8",
              value: "40",
            },
          ],
        }
      ],
    });
    onMounted(async () => {});

    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.flow-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  .left-div {
    width: 75%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    .echart-content {
      width: 49%;
      height: 46%;
    }
  }
  .right-div {
    width: 22%;
    height: 100%;
  }
  .date {
  width: 100%;
  display: flex;
  justify-content: end;
  height: 3%;
}
}
</style>
