<!--  -->
<template>
  <div class="baselistbox">
    <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="firstsearch">
            <span class="biaoti">设备ID或名称</span>
            <el-input
              v-model="queryInfo.f_id"
              size="mini"
              placeholder="请输入设备ID或名称"
            ></el-input>
          </div>
          <div class="secsearch">
            <span class="biaoti">设备状态</span>
            <el-select
              v-model="queryInfo.is_online"
              size="mini"
              filterable
              placeholder="请选择"
            >
              <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="btnbox" @click="searchChange">查询</div>
          <div class="btnbox2" @click="empty">重置</div>
        </div>
      </div>
    </div>
    <div class="baselistbox_table">
      <el-table
        v-loading="loading"
        :data="equipList"
        stripe
        style="width: 100%"
        :default-sort="{ prop: 'device_name', order: 'addtime' }"
        height="560px"
      >
        <el-table-column
          prop="device_name"
          sortable
          label="设备名称"
          width="250"
        >
          <template slot-scope="scope">{{
            scope.row.device_name == "" ? "无" : scope.row.device_name
          }}</template>
        </el-table-column>
        <el-table-column prop="imei" label="设备ID" width="180">
          <template slot-scope="scope">{{ scope.row.imei }}</template>
        </el-table-column>
        <el-table-column prop="is_online" label="在线状态">
          <template slot-scope="scope">
            <p style="color: #17bb89" v-if="scope.row.is_online == 1">在线</p>
            <p style="color: #eb6765" v-if="scope.row.is_online == 0">离线</p>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="位置" width="280">
          <template slot-scope="scope">{{
            scope.row.address == "" ? "无" : scope.row.address
          }}</template>
        </el-table-column>
        <el-table-column prop="uptime" sortable label="最新上报时间">
          <template slot-scope="scope">{{
            (scope.row.uptime * 1000) | formatTime
          }}</template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <span
              style="color: #4f71ff; margin-right: 15px; cursor: pointer"
              @click="viewImage(scope.row.imei, scope.row.d_id)"
              >查看图片</span
            >
            <span
              style="color: #4f71ff; margin-right: 15px; cursor: pointer"
              @click="
                equipSet(scope.row.d_id, scope.row.imei, scope.row.device_name)
              "
              >设备控制</span
            >
            <span
              style="color: #4f71ff; margin-right: 15px; cursor: pointer"
              @click="dataDetail(scope.row)"
              >数据详情</span
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next,sizes,jumper"
          :total="totalNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryInfo.page_size"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-size.sync="queryInfo.page"
          :key="queryInfo.pagekey"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 设备控制对话框 -->
    <el-dialog
      title="设备控制"
      :visible.sync="setDialogVisible"
      @close="equipControlDialogClosed"
      width="770px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="equipContrlRef" :model="setFrom" label-width="180px">
        <el-form-item label="设备编号:">
          <el-input
            style="width: 217px"
            disabled
            v-model="equipInfo.device_id"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备名称:">
          <el-input
            :maxlength="10"
            size="mini"
            v-model="equipInfo.device_name"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="载玻片滴液时间(s): " prop="drop_time">
          <el-select v-model="setFrom.drop_time">
            <el-option
              v-for="item in 30"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="孢子培养时间(h): " prop="cul_time">
          <div class="sliderParent">
            <div class="block">
              <el-slider
                v-model="setFrom.cul_time"
                show-input
                :min="1"
                :max="24"
              ></el-slider>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="保温仓设定温度(℃): " prop="set_temp">
          <div class="sliderParent">
            <div class="block">
              <el-slider
                v-model="setFrom.set_temp"
                show-input
                :min="10"
                :max="40"
              ></el-slider>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="数据上传时间间隔(min): " prop="datt">
          <div class="sliderParent">
            <div class="block">
              <el-slider
                v-model="setFrom.datt"
                show-input
                :min="10"
                :max="60"
              ></el-slider>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="采集开启和关闭时间: ">
          <div class="timeSet">
            <el-time-select
              size="mini"
              placeholder="起始时间"
              v-model="coll_time.time01"
              :picker-options="{
                start: '01:00',
                step: '1:00',
                end: '23:00',
              }"
            ></el-time-select>
            <span>至</span>
            <el-time-select
              size="mini"
              placeholder="结束时间"
              v-model="coll_time.time02"
              :picker-options="{
                start: '01:00',
                step: '1:00',
                end: '23:00',
                minTime: coll_time.time01,
              }"
            ></el-time-select>
          </div>
          <div class="timeSet">
            <el-time-select
              size="mini"
              placeholder="起始时间"
              v-model="coll_time.time03"
              :picker-options="{
                start: '01:00',
                step: '1:00',
                end: '23:00',
                minTime: coll_time.time02,
              }"
            ></el-time-select>
            <span>至</span>
            <el-time-select
              size="mini"
              placeholder="结束时间"
              v-model="coll_time.time04"
              :picker-options="{
                start: '01:00',
                step: '1:00',
                end: '23:00',
                minTime: coll_time.time03,
              }"
            ></el-time-select>
          </div>
          <div class="timeSet">
            <el-time-select
              size="mini"
              placeholder="起始时间"
              v-model="coll_time.time05"
              :picker-options="{
                start: '01:00',
                step: '1:00',
                end: '23:00',
                minTime: coll_time.time04,
              }"
            ></el-time-select>
            <span>至</span>
            <el-time-select
              size="mini"
              placeholder="结束时间"
              v-model="coll_time.time06"
              :picker-options="{
                start: '01:00',
                step: '1:00',
                end: '23:00',
                minTime: coll_time.time05,
              }"
            ></el-time-select>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="setDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="equipSetSubm()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 15) {
        return value.slice(0, 15) + "...";
      }
      return value;
    },
    momentTime(data) {
      return moment(Number(data * 1000)).format("YYYY-MM-DD HH:mm:ss");
    },
    subDeviceId(data) {
      if (!data) return "";
      let id = data.substring(data.length - 6);
      return id;
    },
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      queryInfo: {
        page_size: "10",
        page: "1",
        is_online: "",
        f_id: "",
        pagekey:1
      },
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "1",
          label: "在线",
        },
        {
          value: "0",
          label: "离线",
        },
      ],
      equipList: [],
      loading: false,
      setDialogVisible: false,
      equipContrlForm: {},
      equipInfo: {},
      totalNum: 0,
      setFrom: {
        drop_time: "1", //载玻片滴液时间
        imgres: "0", //图片上传分辨率
        cul_time: 0, //孢子培养时间
        set_temp: 0, //保温仓设定温度
        datt: 0, //数据上传时间间隔(h)-m
        coll_time: [], //采集开启和关闭时间
      },
      coll_time: {
        time01: "",
        time02: "",
        time03: "",
        time04: "",
        time05: "",
        time06: "",
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //获取设备列表
    getEquipList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.lamp_list",
        data: this.qs.stringify({
          device_type_id: 7,
          page_size: this.queryInfo.page_size,
          page: this.queryInfo.page,
          device_status: this.queryInfo.is_online,
          device_id: this.queryInfo.f_id,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.equipList = res.data.data.data;
          // insectVal
          for (var i = 0; i < this.equipList.length; i++) {
            if (this.equipList[i].disable == 0) {
              // 禁用
              this.equipList[i].insectVal = "禁用";
            } else if (this.equipList[i].disable == 1) {
              // 识别
              this.equipList[i].insectVal = "识别";
            } else if (this.equipList[i].disable == 2) {
              // 计数
              this.equipList[i].insectVal = "计数";
            }
          }
          this.equipList.insectVal = this.totalNum = res.data.data.counts;
          this.loading = false;
        }
        console.log(res.data.data.data);
        var data = res.data.data.data;
        for (var i = 0; i < data.length; i++) {
          if (data[i].disable == "2") {
            console.log(data[i].imei + "这是计数");
          } else if (data[i].disable == "1") {
            console.log(data[i].imei + "这是带识别的");
          }
        }
        // this.$nextTick(() => {
        //   document.getElementsByClassName("number")[0].innerText = "首页";
        //   var length = document.getElementsByClassName("number").length;
        //   document.getElementsByClassName("number")[length - 1].innerText =
        //     "末页";
        // });
      });
    },
    handleSizeChange(e) {
      this.queryInfo.page_size = e;
      this.getEquipList();
    },
    handleCurrentChange(e) {
      this.queryInfo.page = e;
      this.getEquipList();
    },
    searchChange() {
      this.queryInfo.page = 1;
      this.pagekey = Math.random()*10+1;
      this.getEquipList();
    },
    empty() {
      this.queryInfo.page = 1;
      this.pagekey = Math.random()*10+1;
      this.queryInfo.is_online = "";
      this.queryInfo.f_id = "";
      this.getEquipList();
    },
    equipSetSubm() {
      this.setFrom.coll_time = [];
      if (this.coll_time.time01 && this.coll_time.time02) {
        let t1 =
          this.coll_time.time01.slice(0, 2).charAt(0) != "0"
            ? this.coll_time.time01.slice(0, 2)
            : this.coll_time.time01.slice(1, 2);
        let t2 =
          this.coll_time.time02.slice(0, 2).charAt(0) != "0"
            ? this.coll_time.time02.slice(0, 2)
            : this.coll_time.time02.slice(1, 2);
        this.setFrom.coll_time.push(`${t1}-${t2}`);
      }
      if (this.coll_time.time03 && this.coll_time.time04) {
        let t1 =
          this.coll_time.time03.slice(0, 2).charAt(0) != "0"
            ? this.coll_time.time03.slice(0, 2)
            : this.coll_time.time03.slice(1, 2);
        let t2 =
          this.coll_time.time04.slice(0, 2).charAt(0) != "0"
            ? this.coll_time.time04.slice(0, 2)
            : this.coll_time.time04.slice(1, 2);
        this.setFrom.coll_time.push(`${t1}-${t2}`);
      }
      if (this.coll_time.time05 && this.coll_time.time06) {
        let t1 =
          this.coll_time.time05.slice(0, 2).charAt(0) != "0"
            ? this.coll_time.time05.slice(0, 2)
            : this.coll_time.time05.slice(1, 2);
        let t2 =
          this.coll_time.time06.slice(0, 2).charAt(0) != "0"
            ? this.coll_time.time06.slice(0, 2)
            : this.coll_time.time06.slice(1, 2);
        this.setFrom.coll_time.push(`${t1}-${t2}`);
      }
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.send_control.device_control",
        data: this.qs.stringify({
          device_type_id: 7,
          d_id: this.d_id,
          config: JSON.stringify(this.setFrom),
          device_name:this.equipInfo.device_name
        }),
      }).then((res) => {
        if (res.data.message == "") {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.success("设备控制修改成功");
          }
          this.getEquipList()
        } else {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.err("设备控制修改失败");
          }
        }
        this.setDialogVisible = false;
      });
    },
    equipSet(d_id, device_id, device_name) {
      this.d_id = d_id;
      this.equipInfo = { device_id, device_name };
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.send_control.device_control_info",
        data: this.qs.stringify({ d_id, cmd: "paramconf" }),
      }).then((res) => {
        if (res.data.data && Object.keys(res.data.data).length > 0) {
          let data = res.data.data;
          // this.setFrom = data;
          var obj = {};
          obj["cold_sw"] = parseInt(data.cold_sw);
          obj["cul_time"] = parseInt(data.cul_time);
          obj["drop_time"] = parseInt(data.drop_time);
          obj["on_off"] = parseInt(data.on_off);
          obj["set_temp"] = parseInt(data.set_temp);
          obj["datt"] = parseInt(data.datt);
          obj["coll_time"] = data.coll_time;
          obj["admin"] = data.admin;
          this.setFrom = obj;

          let { coll_time } = this.setFrom;
          for (let i in coll_time) {
            if (i == 0) {
              let arr = coll_time[i].split("-");
              this.coll_time.time01 =
                Number(arr[0]) < 10 ? "0" + arr[0] + ":00" : arr[0] + ":00";
              this.coll_time.time02 =
                Number(arr[1]) < 10 ? "0" + arr[1] + ":00" : arr[1] + ":00";
            } else if (i == 1) {
              let arr = coll_time[i].split("-");
              this.coll_time.time03 =
                Number(arr[0]) < 10 ? "0" + arr[0] + ":00" : arr[0] + ":00";
              this.coll_time.time04 =
                Number(arr[1]) < 10 ? "0" + arr[1] + ":00" : arr[1] + ":00";
            } else if (i == 2) {
              let arr = coll_time[i].split("-");
              this.coll_time.time05 =
                Number(arr[0]) < 10 ? "0" + arr[0] + ":00" : arr[0] + ":00";
              this.coll_time.time06 =
                Number(arr[1]) < 10 ? "0" + arr[1] + ":00" : arr[1] + ":00";
            }
          }
          console.log(this.coll_time);
        }
        this.setDialogVisible = true;
      });
    },
    equipControlDialogClosed() {
      this.$refs.equipContrlRef.resetFields();
      this.coll_time = {
        time01: "",
        time02: "",
        time03: "",
        time04: "",
        time05: "",
        time06: "",
      };
      // this.coll_time = {};
    },
    // 查看图片
    viewImage(device_id, d_id) {
      this.itemId = device_id;
      this.$router.push({
        path: "/index/bzyPhotos/" + device_id,
        query: { d_id: d_id },
      });
    },
    // 数据详情
    //数据详情
    dataDetail(data) {
      this.itemId = data.device_id;
      this.$router.push({
        path: `/index/dataDetail/${data.imei}/${data.d_id}`,
        query: {
          address: data.address,
          name: data.device_name,
        },
      });
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getEquipList();
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // console.log(document.getElementsByClassName("number")[0]).innerText = "888"
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.baselistbox {
  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;
      p:first-child {
        font-size: 14px;
        margin-right: 20px;
      }
      p:last-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;
        .btnbox,
        .btnbox2 {
          width: 68px;
          height: 28px;
          border: 1px solid #4f71ff;
          text-align: center;
          border-radius: 3px;
          font-size: 14px;
          margin-left: 20px;
          cursor: pointer;
        }
        .btnbox {
          background-color: #4f71ff;
          color: #fff;
        }
        .btnbox2 {
          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;
    /deep/.el-table__header {
      th {
        background-color: #f1f1f3;
      }
    }
    .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;
      }
    }
  }
}
.timeSet {
  margin-bottom: 10px;
}
/deep/.el-slider__bar {
  background-color: #4f71ff !important;
}
</style>