<template>
  <div class="weatherBox">
    <div class="weatherContain">
      <leftTree ref="sideTree"></leftTree>
      <div class="rightTable">
        <div class="dataBox">
          <div class="fatherTableShowBox" v-if="!childFlag">
            <el-table
              :data="tableData"
              style="width: 100%"
              height="calc(100% - 40px)"
            >
              <el-table-column prop="line" label="线路"> </el-table-column>
              <el-table-column prop="pole" label="杆塔"> </el-table-column>
              <el-table-column prop="terminal" label="终端"> </el-table-column>
              <el-table-column prop="time" label="时间"> </el-table-column>
              <el-table-column prop="temperature" label="温度(℃)">
              </el-table-column>
              <el-table-column prop="humidity" label="湿度(%RH)">
              </el-table-column>
              <el-table-column prop="windSpeed" label="瞬时风速(m/s)">
              </el-table-column>
              <el-table-column prop="windDirection" label="瞬时风向(°)">
              </el-table-column>
              <el-table-column prop="rainfall" label="雨量(mm/hour)">
              </el-table-column>
              <el-table-column prop="pressure" label="气压(hPa(百帕))">
              </el-table-column>
              <el-table-column prop="sunlight" label="日照(W/m2)">
              </el-table-column>
            </el-table>
            <div class="pageNation">
              <el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page="page"
                :page-size="pageSize"
                layout="sizes, prev, pager, next, jumper,total"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
          <div class="childBox" v-else>
            <div class="searchBox" ref="searchref">
              <el-form
                :inline="true"
                :model="formdata"
                class="demo-form-inline"
              >
                <el-form-item label="开始日期">
                  <el-date-picker
                    v-model="formdata.starttime"
                    type="date"
                    placeholder="开始日期"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="结束日期">
                  <el-date-picker
                    v-model="formdata.endtime"
                    type="date"
                    placeholder="结束日期"
                    class="ml10"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="childTableShowBox">
              <el-table :data="childTableDate" style="width: 100%">
                <el-table-column prop="time" label="时间"></el-table-column>
                <el-table-column
                  prop="temperature"
                  label="温度(℃)"
                ></el-table-column>
                <el-table-column
                  prop="humidity"
                  label="湿度(%RH)"
                ></el-table-column>
                <el-table-column
                  prop="windSpeed"
                  label="瞬时风速(m/s)"
                ></el-table-column>
                <el-table-column
                  prop="windDirection"
                  label="瞬时风向(°)"
                ></el-table-column>
                <el-table-column
                  prop="rainfall"
                  label="雨量(mm/hour)"
                ></el-table-column>
                <el-table-column
                  prop="pressure"
                  label="气压(hPa(百帕))"
                ></el-table-column>
                <el-table-column
                  prop="sunlight"
                  label="日照(W/m2)"
                ></el-table-column>
                <el-table-column
                  prop="minuteAverageWindSpeed"
                  label="1分钟平均风速(m/s)"
                ></el-table-column>
                <el-table-column
                  prop="minuteAverageWindDirection"
                  label="1分钟平均风向(°)"
                ></el-table-column>
                <el-table-column
                  prop="tenMinuteAverageWindSpeed"
                  label="10分钟平均风速(m/s)"
                ></el-table-column>
                <el-table-column
                  prop="tenMinuteAverageWindDirection"
                  label="10分钟平均风向(°)"
                ></el-table-column>
                <el-table-column
                  prop="tenMinuteMaxWindSpeed"
                  label="10分钟最大风速(m/s)"
                ></el-table-column>
              </el-table>
            </div>
            <div class="pageNation">
              <el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page="page"
                :page-size="pageSize"
                layout="sizes, prev, pager, next, jumper,total"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import leftTree from "../../fubingCommon/leftTree";
export default {
  name: "weather",
  components: {
    leftTree,
  },
  data() {
    return {
      msg: "",
      childFlag: false,
      tableData: [],
      childTableDate: [],
      formdata: {},
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
    };
  },
  created() {
    var that = this;
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      if (key === 13) {
        that.onSubmit(); // 触发事件
      }
    };
  },
  mounted() {
    this.$set(
      this.formdata,
      "starttime",
      new Date(new Date().toLocaleDateString()).getTime()
    );
    this.$set(this.formdata, "endtime", new Date().getTime());
  },
  methods: {
    getCurrentData(data) {
      console.log("执行父组件", data);
      if (data.dyValue) {
        console.log("电压");
        this.msg = "公司所有数据";
        this.childFlag = false;
        this.tableData = [
          {
            line: "线路A",
            pole: "杆塔1",
            terminal: "终端1",
            time: "2023-03-15 08:00:00",
            temperature: "25℃",
            humidity: "60%",
            windSpeed: "0.5m/s",
            windDirection: "120°",
            rainfall: "0mm/hour",
            pressure: "1015hPa",
            sunlight: "500W/m2",
          },
          {
            line: "线路B",
            pole: "杆塔2",
            terminal: "终端2",
            time: "2023-03-15 09:00:00",
            temperature: "23℃",
            humidity: "70%",
            windSpeed: "0.3m/s",
            windDirection: "90°",
            rainfall: "0mm/hour",
            pressure: "1013hPa",
            sunlight: "350W/m2",
          },
          {
            line: "线路C",
            pole: "杆塔3",
            terminal: "终端3",
            time: "2023-03-15 10:00:00",
            temperature: "27℃",
            humidity: "55%",
            windSpeed: "0.7m/s",
            windDirection: "60°",
            rainfall: "0mm/hour",
            pressure: "1017hPa",
            sunlight: "650W/m2",
          },
          {
            line: "线路D",
            pole: "杆塔4",
            terminal: "终端4",
            time: "2023-03-15 11:00:00",
            temperature: "24℃",
            humidity: "65%",
            windSpeed: "0.4m/s",
            windDirection: "30°",
            rainfall: "0mm/hour",
            pressure: "1016hPa",
            sunlight: "450W/m2",
          },
          {
            line: "线路E",
            pole: "杆塔5",
            terminal: "终端5",
            time: "2023-03-15 12:00:00",
            temperature: "28℃",
            humidity: "50%",
            windSpeed: "0.6m/s",
            windDirection: "90°",
            rainfall: "0mm/hour",
            pressure: "1018hPa",
            sunlight: "750W/m2",
          },
        ];
      } else if (data.bsManufacturer) {
        this.msg = "杆塔下所有数据";
        this.childFlag = false;
        this.tableData = [
          {
            line: "线路F",
            pole: "杆塔6",
            terminal: "终端6",
            time: "2023-03-15 13:00:00",
            temperature: "26℃",
            humidity: "60%",
            windSpeed: "0.5m/s",
            windDirection: "150°",
            rainfall: "0mm/hour",
            pressure: "1017hPa",
            sunlight: "600W/m2",
          },
          {
            line: "线路G",
            pole: "杆塔7",
            terminal: "终端7",
            time: "2023-03-15 14:00:00",
            temperature: "29℃",
            humidity: "45%",
            windSpeed: "0.7m/s",
            windDirection: "180°",
            rainfall: "mm/hour, ",
            pressure: "184hPa（百帕） ",
            sunlight: "789W/m²",
          },
          {
            line: "线路H",
            pole: "杆塔8 ",
            terminal: "终端8 ",
            time: "24-Mar-23 16:45 ",
            temperature: "24℃（摄氏度） ",
            humidity: "78% （百分比） ",
            windSpeed: "1.8m/s（米/秒） ",
            windDirection: "88 °（度） ",
            rainfall: "至今无数据 ",
            pressure: "184hPa（百帕） ",
            sunlight: " 无数据 ",
            comment: " 天气晴朗，适合户外活动。",
          },
        ];
      } else {
        console.log("杆塔");
        this.msg = "装置当天数据";
        this.childFlag = true;
        this.childTableDate = [
          {
            time: "2023-03-15 08:00:00",
            temperature: "25℃",
            humidity: "60%",
            windSpeed: "0.5m/s",
            windDirection: "120°",
            rainfall: "0mm/hour",
            pressure: "1015hPa",
            sunlight: "500W/m2",
            minuteAverageWindSpeed: "无数据",
            minuteAverageWindDirection: "无数据",
            tenMinuteAverageWindSpeed: "无数据",
            tenMinuteAverageWindDirection: "无数据",
            tenMinuteMaxWindSpeed: "无数据",
          },
          {
            time: "2023-03-15 09:00:00",
            temperature: "23℃",
            humidity: "70%",
            windSpeed: "0.3m/s",
            windDirection: "90°",
            rainfall: "0mm/hour",
            pressure: "1013hPa",
            sunlight: "350W/m2",
            minuteAverageWindSpeed: "无数据",
            minuteAverageWindDirection: "无数据",
            tenMinuteAverageWindSpeed: "无数据",
            tenMinuteAverageWindDirection: "无数据",
            tenMinuteMaxWindSpeed: "无数据",
          },
        ];
      }
    },
    onSubmit() {},
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      // this.picList = [];
      // this.getPicData();
    },
    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      //this.getPicData();
    },
  },
};
</script>
<style lang="less">
.weatherBox {
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  padding: 12px 12px;
  background: #fff;
  .weatherContain {
    display: flex;
    height: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  .rightTable {
    display: flex;
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: hidden;
    border-left: 1px solid #ddd;
    .dataBox {
      width: calc(100% - 24px);
      height: calc(100% - 24px);
      padding: 12px 12px;
      background: #fff;
    }
    .fatherTableShowBox {
      height: calc(100% - 0px);
    }
    .childBox {
      height: calc(100% - 50px);
      .childTableShowBox {
        height: calc(100% - 50px);
      }
    }
  }
}
</style>
