<template>
    <div class="level-container">
      <div class="content">
        <div class="top-div">
        </div>
        <div class="bottom-div">
          <div class="left-bottom">
            <BarEchart :echartData="echartData"/>
          </div>
          <div class="right-bottom">
            <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>
      </div>
      
    </div>
  </template>
  
  <script>
  import { onMounted, reactive, ref, toRefs } from "vue";
  import BarEchart from '@/components/BarEchart.vue';
  import Process from "@/components/Process.vue"
  import Menus from "@/components/Menus.vue";
  export default {
    name: "Level",
    components: {
      BarEchart,
      Process,
      Menus
    },
    setup() {
      const state = reactive({
        dataList:[
          {
            title: '当天液位数据:m',
            data: [
              {
                id: '0',
                color: '#00baff',
                label: 'H1',
                value: '20'
              }
            ]
          },
          {
            title: '5号井的液位设置参数:m',
            data: [
              {
                id: '1',
                color: '#00baff',
                label: 'Hmax',
                value: '80'
              },
              {
                id: '2',
                color: '#6fdbce',
                label: 'Hmin',
                value: '20'
              }
            ]
          },
          {
            title: '溢流堰液位:m',
            data: [
              {
                id: '3',
                color: '#308286',
                label: 'Hy',
                value: '80'
              }
            ]
          },
          {
            title: '未来待三天控制液位:m',
            data: [
              {
                id: '4',
                color: '#00baff',
                label: 'F1',
                value: '80'
              },
              {
                id: '5',
                color: '#6fdbce',
                label: 'F2',
                value: '80'
              },
              {
                id: '6',
                color: '#308286',
                label: 'F3',
                value: '60'
              }
            ]
          }
        ],
        echartData: {
          type:"day" ,
          title: "日液位-柱状图",
          id: "echart0",
          legend: ["日液位曲线"],
          color: ["#62d3ff", "#eafbf7"]
        }
      });
      onMounted(() => {
        
      });
      
      return {
        ...toRefs(state)
      };
    },
  };
  </script>
  
  <style lang="scss" scoped>
    .level-container {
      width: 100%;
      height:100%;
      display: flex;
      .menus {
        width: 4%;
        height: 700px;
      }
      .content {
        width: 100%;
        height: 100%;
        // border: 1px solid red;
        .top-div {
          height:40%;
          background: url('../assets/flow.png') no-repeat;
          background-size: 100% 100%;
        }
        .bottom-div {
          margin-top:2%;
          height:55%;
          justify-content: space-between;
          display: flex;
          .left-bottom {
            width: 60%;
            height:100%;
          }
          .right-bottom {
            width: 38%;
            height:100%;
            display:flex;
            flex-direction:column;
            flex-wrap: wrap;
            .div0 {
              width: 48%;
              height: 30%;
            }
            .div1 {
              width: 48%;
              height: 40%;
            }
            .div2 {
              width: 48%;
              height: 30%;
            }
            .div3 {
              width: 48%;
              height: 100%;
            }
          }
        }
      }
    }
    .value {
      font-size: 38px;
      color: #1baeae;
      font-weight: bold;
    }
  </style>