<!--  -->
<template>
  <div class="cbdbox">
    <div class="baselistbox_top">
      <div class="baselistbox_top_title">
        <p>查看图片</p>
      </div>
      <p class="baselistbox_top_line"></p>
      <div class="baselistbox_top_search">
        <div class="left_search">
          <div class="secsearch">
            <el-select
              v-model="device_id"
              size="mini"
              filterable
              placeholder="请选择"
              @change="idchange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="right_search">
          <div
            :class="timeindex == 1 ? 'timebtn timebtn1' : 'timebtn timebtn2'"
            @click="empty(1)"
          >
            近一天
          </div>
          <div
            :class="timeindex == 2 ? 'timebtn timebtn1' : 'timebtn timebtn2'"
            @click="empty(2)"
          >
            近七天
          </div>
          <div
            :class="timeindex == 3 ? 'timebtn timebtn1' : 'timebtn timebtn2'"
            @click="empty(3)"
          >
            近一月
          </div>
          <div
            :class="timeindex == 4 ? 'timebtn timebtn1' : 'timebtn timebtn2'"
            @click="empty(4)"
          >
            近三月
          </div>
          <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
            @change="timechange"
          >
          </el-date-picker>
        </div>
      </div>
    </div>
    <div class="baselistbox_table">
      <el-table :data="baseimglist" style="width: 100%">
        <el-table-column prop="updateTime" label="更新时间" width="180">
          <template slot-scope="scope">
            <p>{{ +new Date(scope.row.updateTime) | formatTime }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="devid" label="设备ID" width="180">
        </el-table-column>
        <el-table-column prop="air_t" label="空气温度"> </el-table-column>
        <el-table-column prop="air_rh" label="空气湿度"> </el-table-column>
        <el-table-column prop="earth_t" label="土壤温度"> </el-table-column>
        <el-table-column prop="earth_rh" label="土壤湿度"> </el-table-column>
        <el-table-column prop="wind_o" label="风向">
          <template slot-scope="scope">
            <p>{{ fengobj[scope.row.wind_o] }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="wind_speed" label="风速"> </el-table-column>
        <el-table-column prop="rainfull" label="降雨量"> </el-table-column>
        <el-table-column prop="vasp" label="蒸发量"> </el-table-column>
        <el-table-column prop="sunlight" label="光照强度"> </el-table-column>
        <el-table-column prop="pressure" label="大气压强"> </el-table-column>
        <el-table-column prop="ec" label="土壤EC值"> </el-table-column>
        <el-table-column prop="ludian" label="露点温度"> </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next,sizes,jumper"
          :total="totalNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="page_size"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-size.sync="page"
          :key="pagekey"
        >
        </el-pagination>
        <!-- this.pagekey = Math.random()*10+1; -->
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import feng from "./feng.json";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      options: [],
      device_id: "",
      time: "",
      timeindex: 1,
      baseimglist: [],
      totalNum: 10,
      imgIndexNumber: 0,
      end_time: "",
      start_time: "",
      page: 1,
      page_size: "10",
      fengobj: {},
      pagekey: 1,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getbaselist() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=device.device_picture.pp_device_list",
        data: this.qs.stringify({
          device_type: 5,
          page: "1",
          page_size: "9999999",
        }),
      }).then((res) => {
        console.log(res);
        if (res.data.message == "") {
          var data = res.data.data.data;
          for (let i = 0; i < data.length; i++) {
            var obj = {
              value: data[i].device_id,
              label: data[i].device_name + "/" + data[i].device_id,
            };
            this.options.push(obj);
          }
          this.device_id = data[0].device_id;
          this.getbaseimglist();
        }
      });
    },
    empty(index) {
      this.timeindex = index;
      this.end_time = Math.floor(+new Date() / 1000);
      var time = new Date();
      if (index == 1) {
        this.start_time = this.end_time - 24 * 60 * 60;
      } else if (index == 2) {
        this.start_time = this.end_time - 7 * 24 * 60 * 60;
      } else if (index == 3) {
        var mouth = time.getMonth();
        this.start_time = Math.floor(time.setMonth(mouth - 1) / 1000);
        // console.log(time2)
      } else if (index == 4) {
        var mouth = time.getMonth();
        this.start_time = Math.floor(time.setMonth(mouth - 3) / 1000);
      }
      this.page = 1;
      this.pagekey = Math.random() * 10 + 1;
      this.getbaseimglist();
    },
    timechange(e) {
      if (e) {
        this.start_time = Math.floor(+new Date(e[0]) / 1000);
        this.end_time = Math.floor(+new Date(e[1]) / 1000);
        this.page = 1;
        this.pagekey = Math.random() * 10 + 1;
        this.getbaseimglist();
      } else {
        this.empty(1);
      }
    },
    idchange(e) {
      this.device_id = e;
      this.page = 1;
      this.pagekey = Math.random() * 10 + 1;
      this.getbaseimglist();
    },
    getbaseimglist() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=device.device_picture.pp_qxz_data_list",
        data: this.qs.stringify({
          device_id: this.device_id,
          start_time: this.formatTime(this.start_time * 1000),
          end_time: this.formatTime(this.end_time * 1000),
          page: this.page,
          page_size: this.page_size,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.baseimglist = res.data.data.data;
          this.totalNum = res.data.data.num;
        } else {
          this.baseimglist = [];
          this.totalNum = 12;
        }
      });
    },
    handleSizeChange(e) {
      this.page_size = e;
      this.page = 1;
      this.pagekey = Math.random() * 10 + 1;
      this.getbaseimglist();
    },
    handleCurrentChange(e) {
      this.page = e;
      this.getbaseimglist();
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.end_time = Math.floor(+new Date() / 1000);
    this.start_time = this.end_time - 24 * 60 * 60;
    this.getbaselist();
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    //   console.log(feng["E"])
    this.fengobj = feng;
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.cbdbox {
  width: 100%;
  height: 100%;
  .baselistbox_top {
    width: 100%;
    height: 130px;
    background-color: #fff;
    border-radius: 10px;
    .baselistbox_top_title {
      width: 100%;
      height: 65px;
      display: flex;
      padding: 20px;
      box-sizing: border-box;
      line-height: 25px;
      justify-content: space-between;
      p:first-child {
        font-size: 18px;
        font-weight: 700;
      }
    }
    .baselistbox_top_line {
      width: 100%;
      height: 1px;
      background-color: #f2f2f2;
    }
    .baselistbox_top_search {
      width: 100%;
      height: 68px;
      display: flex;
      padding: 20px;
      box-sizing: border-box;
      line-height: 28px;
      justify-content: space-between;
      .left_search {
        display: flex;
        .firstsearch,
        .secsearch {
          display: flex;
          margin-right: 40px;
          /deep/.el-input {
            width: 240px;
          }
          .biaoti {
            font-size: 14px;
            margin-right: 20px;
          }
        }
      }
      .right_search {
        display: flex;
        .timebtn {
          width: 68px;
          height: 26px;
          border: 1px solid #4f71ff;
          text-align: center;
          border-radius: 3px;
          font-size: 14px;
          margin-right: 20px;
          line-height: 26px;
          cursor: pointer;
        }
        .timebtn1 {
          background-color: #4f71ff;
          color: #fff;
        }
        .timebtn2 {
          color: #4f71ff;
        }
      }
    }
  }
  .baselistbox_table {
    width: 100%;
    // height: calc(100% - 140px);
    background-color: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    border-radius: 10px;
    .img {
      width: 100%;
    }
    .imgtime {
      text-align: center;
      font-size: 14px;
      margin-top: 10px;
    }
    .none {
      width: 100%;
      display: flex;
      justify-content: space-around;
    }
    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      /deep/.el-pager {
        .active {
          background-color: #4f71ff !important;
        }
      }
      /deep/.el-input__inner:hover {
        border-color: #4f71ff;
      }
    }
  }
}
</style>