<template>
  <div class="liquid-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 class="height46">
        <div v-for="(item, index) of olddataList" :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 class="height46">
        <div v-for="(item, index) of puredataList" :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>
  </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: "原水箱液位-柱状图",
          legend: ['原水箱柱状图'],
          color: ["#6fdbce", "#eafbf7"],
        },
        {
          id: "echart1",
          title: "净水箱液位-柱状图",
          legend: ['净水箱柱状图'],
          color: ["#308286", "#eafbf7"],
        }
      ],
      olddataList: [
        {
          title: "原水箱液位数据（m）:",
          data: [
            {
              id: "0",
              color: "#6fdbce",
              label: "Q1",
              value: "20",
            },
          ],
        },
        {
          title: "原水箱历史最高值（m）:",
          data: [
            {
              id: "1",
              color: "#00baff",
              label: "Max",
              value: "80",
            },
          ],
        },
        {
          title: "原水箱历史最低值（m）:",
          data: [
            {
              id: "3",
              color: "#308286",
              label: "Min",
              value: "80",
            },
          ],
        }
      ],
      puredataList: [
        {
          title: "净水箱液位数据（m）:",
          data: [
            {
              id: "0",
              color: "#6fdbce",
              label: "Q2",
              value: "20",
            },
          ],
        },
        {
          title: "净水箱历史最高值（m）:",
          data: [
            {
              id: "1",
              color: "#00baff",
              label: "Max",
              value: "80",
            },
          ],
        },
        {
          title: "净水箱历史最低值（m）:",
          data: [
            {
              id: "3",
              color: "#308286",
              label: "Min",
              value: "80",
            },
          ]
        }
      ],
    });
    onMounted(async () => { });

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

<style lang="scss" scoped>
.liquid-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: 100%;
      height: 46%;
    }
  }

  .right-div {
    width: 22%;
    height: 100%;
    .height46 {
      height: 46%;
      display: flex;
      flex-direction: column;
      justify-content: end;
      padding: 10px;
    }
  }

  .date {
    width: 100%;
    display: flex;
    justify-content: end;
    height: 3%;
  }
}
</style>
