<template>
  <div id="DataNow">
    <div id="LeftBox">
      <n-input
        v-model:value="search.searchStr"
        type="text"
        placeholder="站点名称"
      />
      <n-button @click="GetSiteData" style="width: 100%; margin-top: 10px"
        >搜索</n-button
      >
      <div id="listBox">
        <div
          class="DataLists"
          v-for="(item, index) in NowData"
          :key="index"
          @click="NowDataClick(item)"
          :class="{ SiteListCheck: clickSite == item.stCode }"
        >
          <p class="p1">{{ item.stName }}</p>
          <p class="p2">{{ item.stCode }}</p>
        </div>
      </div>
    </div>
    <div id="RightBox">
      <div id="Data_Now">
        <n-data-table :columns="columns" :data="data1" :bordered="false" />
      </div>
      <div id="Data_History">
        <n-space>
          <span class="searchList"> 选择时间:</span>
          <n-date-picker v-model:value="range" type="datetimerange" clearable />
          <n-button @click="GetDataHistory">搜索</n-button>
        </n-space>

        <n-data-table
          :columns="columns"
          :data="data2"
          :bordered="false"
          style="margin-top: 10px"
          :pagination="pagination"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted } from "vue";

import { formatDate } from "../../../utils/util";
import {
  getHeads,
  getHistoryData,
  getCurrentData,
  huangjiList,
} from "@/services";

export default {
  name: "DataNow",
  setup() {
    const allData = reactive({
      search: {
        page: 1,
        limit: 9999,
        proNo: "111188",
        searchStr: "",
      }, //搜索条件
      NowData: [],
      clickSite: "",
      //   数据表头
      columns: [],
      //   实时数据
      data1: [],
      //   历史数据
      range: [new Date().getTime() - 3 * 24 * 3600 * 1000, new Date()],
      data2: [],
    });
    // 分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 50],
      showQuickJumper: true,
      pageCount: 10,
      itemCount: 100,
      onChange: (page) => {
        paginationReactive.page = page;
        GetDataHistory();
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
        GetDataHistory();
      },
    });
    // 获取所有站点数据
    async function GetSiteData() {
      let res = await huangjiList(allData.search);
      if (res.code == 0) {
        allData.NowData = res.result.list;
        allData.clickSite = allData.NowData[0].stCode;
        GetDataHeader(allData.NowData[0].stCode);
        GetDataNow(allData.NowData[0].stCode);
        GetDataHistory();
      }
    }
    // 获取数据表头
    async function GetDataHeader(Sitecode) {
      let res = await getHeads({
        stCode: Sitecode,
      });
      if (res.code == 0) {
        allData.columns = res.data;
      }
    }
    // 获取实时数据
    async function GetDataNow(Sitecode) {
      let res = await getCurrentData({
        stCode: Sitecode,
      });
      if (res.code == 0) {
        allData.data1[0] = res.result;
      }
    }
    // 获取历史数据
    async function GetDataHistory() {
      let params = {
        proNo: "111188",
        stCode: allData.clickSite,
        startTime: formatDate(allData.range[0]),
        endTime: formatDate(allData.range[1]),
        page: paginationReactive.page,
        limit: paginationReactive.pageSize,
      };
      let res = await getHistoryData(params);
      //   if (res.code == 0) {
      allData.data2 = res.rows;
      paginationReactive.itemCount = res.total;
      //   无用
      paginationReactive.pageCount = 10;
      // allData.clickSite = allData.NowData[0].stCode;
      //   }
    }
    // 点击站点列表
    function NowDataClick(item) {
      allData.clickSite = item.stCode;
      GetDataHeader(item.stCode);
      GetDataNow(item.stCode);
    }
    onMounted(() => {
      GetSiteData();
    });
    return {
      ...toRefs(allData),
      ...toRefs(paginationReactive),
      pagination: paginationReactive,
      GetSiteData,
      NowDataClick,
      GetDataHeader,
      GetDataNow,
      GetDataHistory,
    };
  },
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
#DataNow {
  width: 100%;
  height: 100%;

  #LeftBox {
    width: 300px;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
    float: left;
    background: #0c5c5f;

    #listBox {
      width: 100%;
      height: calc(100% - 85px);
      overflow: auto;
      margin-top: 15px;

      .DataLists {
        width: calc(100% - 20px);
        height: 60px;
        line-height: 36px;
        text-align: center;
        border: 1px solid;
        cursor: pointer;
        margin-left: 10px;
        margin-top: 10px;

        .p1 {
          width: 100%;
          height: 36px;
          line-height: 36px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .p2 {
          width: 100%;
          height: 20px;
          line-height: 20px;
        }
      }

      .SiteListCheck {
        border-color: chartreuse;
      }

      .DataLists:hover {
        box-shadow: 0px 0px 5px 5px #888888;
      }
    }
  }

  #RightBox {
    width: calc(100% - 300px);
    height: 100%;
    box-sizing: border-box;
    float: left;
    padding: 5px;

    #Data_Now {
      width: 100%;
      height: 120px;
      box-sizing: border-box;
      border-bottom: 1px solid;
    }

    #Data_History {
      width: 100%;
      height: calc(100% - 120px);
      box-sizing: border-box;
      padding-top: 10px;

      .searchList {
        margin-left: 20px;
        height: 36px;
        display: inline-block;
        line-height: 36px;
      }
    }
  }
}
</style>