<template>
  <div class="realtimeStatistics">
    <div class="left">
      <n-space>
        <n-input
          placeholder="泵站名称"
          v-model:value="searchValue1"
          autosize
          clearable
          style="width: 250px"
        />
        <n-select
          v-model:value="searchValue2"
          filterable
          :options="options"
          style="width: 250px"
        />
      </n-space>
      <div class="model_box">
        <img src="../../../assets/Imgs/weixiufenxi3.png" alt="" />
      </div>
    </div>
    <div class="right">
      <div class="water_level common" :class="[sysTheme ? 'dark' : '']">
        <div class="title">泵房水位</div>
        <div class="chart">
            <LineChart></LineChart>
        </div>
      </div>
      <div class="flow common" :class="[sysTheme ? 'dark' : '']">
        <div class="title">瞬时流量</div>
        <div class="chart">
          <BarChart></BarChart>
        </div>
      </div>
      <div class="pump_status common" :class="[sysTheme ? 'dark' : '']">
        <div class="title">泵机状态</div>
        <div class="table">
          <div class="table_head">
            <span>泵机号</span>
            <span class="time">操作时间</span>
            <span>模式</span>
            <span>状态</span>
          </div>
          <ul class="table_body">
            <li v-for="(v, i) in tableList" :key="i">
              <span>{{ v.bengName }}</span>
              <span class="time">{{ v.time }}</span>
              <span>{{ v.pattern }}</span>
              <span :class="v.status == '开启' ? 'open' : ''">{{
                v.status
              }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs,computed } from "vue";
import { useStore } from "vuex";

import BarChart from "./components/barChart.vue";
import LineChart from "./components/lineChart.vue";
export default {
  name: "realtimeStatistics",
  components: {
    BarChart,
    LineChart
  },
  setup() {
    let store = useStore();

    const state = reactive({
      searchValue1: "",
      searchValue2: "全部",
      options: [{ label: "全部", value: 0 }],
      tableList: [
        {
          bengName: "01",
          time: "2020.07.14 15:18",
          pattern: "手动",
          status: "开启",
        },
        {
          bengName: "01",
          time: "2020.07.14  15:18",
          pattern: "手动",
          status: "关闭",
        },
        {
          bengName: "01",
          time: "2020.07.14 15:18",
          pattern: "手动",
          status: "关闭",
        },
        {
          bengName: "01",
          time: "2020.07.14 15:18",
          pattern: "手动",
          status: "开启",
        },
        {
          bengName: "01",
          time: "2020.07.14 15:18",
          pattern: "手动",
          status: "开启",
        },
        {
          bengName: "01",
          time: "2020.07.14 15:18",
          pattern: "手动",
          status: "开启",
        },
      ],
      sysTheme: "",
    });
    state.sysTheme = computed(() => {
      return store.getters.sysTheme;
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="less" scoped>
.realtimeStatistics {
  display: flex;
  height: 100%;
  .left {
    padding: 50px 20px 30px;
    width: 70%;
    height: 100%;
    background: var(--bg-menu);
    .model_box {
      margin-top: 30px;
      padding: 60px 10px;
      width: 100%;
      height: calc(100% - 60px);
      background: #c4d5fb;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .right {
    margin-left: 20px;
    width: calc(30% - 20px);
    height: 100%;
    // background: var(--bg-menu);
    &:last-child {
      margin-bottom: 0;
    }
    .common {
      margin-bottom: 10px;
      background: url("../../../assets/Imgs/yunwei_jianchaBg.png");
      background-size: 100% 100%;
      height: calc((100% - 20px) / 3);
      .title {
        padding-left: 20px;
        line-height: 34px;
        font-size: 18px;
        font-family: Alibaba PuHuiTi;
        font-weight: bold;
      }
    }
    .dark {
      background: url("../../../assets/Imgs/statistics_dackBg.png");
    }
    .water_level {
        .chart {
        width: 100%;
        height: 240px;
      }
    }
    .flow {
      .chart {
        width: 100%;
        height: 240px;
      }
    }
    .pump_status {
      .table {
        margin: 10px 20px;
        .table_head {
          margin-bottom: 7px;
          display: flex;
          align-items: center;
          line-height: 26px;
          background: var(--bg-table--odd);
          span {
            width: 20%;
            text-align: center;
            font-size: 14px;
            font-family: DIN;
          }
          .time {
            width: 40%;
          }
        }
        .table_body {
          height: 190px;
          overflow: auto;
          li {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            line-height: 30px;
            background: var(--bg-table--odd);
            span {
              width: 20%;
              text-align: center;
              font-size: 14px;
              font-family: DIN;
            }
            .time {
              width: 40%;
            }
            .open {
              color: #2fd37c;
            }
          }
        }
      }
    }
  }
}
::-webkit-scrollbar {
  display: none;
}
</style>