<!--  -->
<template>
  <div class="warnbox">
    <div class="baselistbox_top">
      <div class="baselistbox_top_title">
        <p @click="goBackPage()" style="cursor: pointer">
          <i class="el-icon-back"></i>
          <span>返回</span>
        </p>
        <p>查看预警</p>
      </div>
      <div class="baselistbox_top_sel">
        <el-select
          v-model="warnvalue"
          size="mini"
          @change="tupechange"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div class="btnbox" @click="allread">一键已读</div>
      </div>
    </div>
    <div class="warnlistbox">
      <div class="warnlistbox_text">
        <!-- 测报灯 -->
        <el-collapse accordion v-if="warnvalue == 1">
          <el-collapse-item v-for="(item, index) in cbdinfo" :key="index">
            <template slot="title">
              <div class="warnlistbox_text_item" @click="read(item.d_id)">
                <p :style="{ color: item.status == 1 ? '' : '#4f71ff' }">
                  测报灯：
                  {{ item.device_id }}
                  {{ cbdtype[item.warning_status] }}
                </p>
                <p :style="{ color: item.status == 1 ? '' : '#4f71ff' }">
                  {{
                    item.status == 1 ? "已读" : "未读"
                  }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                    (item.upltime * 1000) | formatTime
                  }}
                </p>
              </div>
            </template>
            <div style="display: flex">
              <p v-for="(items, key) in item.warning_content" :key="key">
                {{ key }}：{{ items }}
                <span>、</span>
              </p>
            </div>
          </el-collapse-item>
        </el-collapse>
        <!-- 墒情站 -->
        <el-collapse accordion v-if="warnvalue == 2 || warnvalue == 3">
          <el-collapse-item v-for="(item, index) in sqzinfo" :key="index">
            <template slot="title">
              <div class="warnlistbox_text_item" @click="read(item.d_id)">
                <p :style="{ color: item.status == 1 ? '' : '#4f71ff' }">
                  <span>{{ warnvalue == 2 ? "墒情站" : "气象站" }}：</span>
                  {{ item.device_id }}
                  {{ item.warning_content }}
                </p>
                <p :style="{ color: item.status == 1 ? '' : '#4f71ff' }">
                  {{
                    item.status == 1 ? "已读" : "未读"
                  }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                    (item.upltime * 1000) | formatTime
                  }}
                </p>
              </div>
            </template>
            <div style="display: flex">
              当前{{ item.ekey.split("#")[0] }}{{ item.current_value
              }}{{ item.ekey.split("#")[1]
              }}{{ item.warning_content.slice(0, 2) }}用户设置预警值{{
                item.set_value
              }}{{ item.ekey.split("#")[1] }}
            </div>
          </el-collapse-item>
        </el-collapse>
        <!-- 孢子仪 -->
        <el-collapse accordion v-if="warnvalue == 4">
          <el-collapse-item v-for="(item, index) in bzyinfo" :key="index">
            <template slot="title">
              <div class="warnlistbox_text_item" @click="read(item.d_id)">
                <p :style="{ color: item.status == 1 ? '' : '#4f71ff' }">
                  <span>病害监测：</span>
                  {{ item.device_id }}
                  {{ item.title }}
                </p>
                <p :style="{ color: item.status == 1 ? '' : '#4f71ff' }">
                  {{
                    item.status == 1 ? "已读" : "未读"
                  }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                    (item.upltime * 1000) | formatTime
                  }}
                </p>
              </div>
            </template>
            <div style="display: flex">
              {{ item.describe }}
            </div>
          </el-collapse-item>
        </el-collapse>
        <!-- 农作物 -->
        <el-collapse accordion v-if="warnvalue == 5">
          <el-collapse-item v-for="(item, index) in cropinfo" :key="index">
            <template slot="title">
              <div class="warnlistbox_text_item" @click="read(item.d_id)">
                <p :style="{ color: item.status == 1 ? '' : '#4f71ff' }">
                  <span>基地名称：</span>
                  {{ item.base_name }}
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <span>地块名称：</span>
                  {{ item.massif_name }}
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <span>作物名称：</span>
                  {{ item.crop_name }}
                </p>
                <p :style="{ color: item.status == 1 ? '' : '#4f71ff' }">
                  {{
                    item.status == 1 ? "已读" : "未读"
                  }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                    (item.upltime * 1000) | formatTime
                  }}
                </p>
              </div>
            </template>
            <div style="display: flex">
              {{ item.base_name }}中的{{ item.massif_name }}在{{
                item.cycle_date
              }}月预测会产生虫害：{{ item.pest_pest }}，病害：{{
                item.pest_disease
              }}
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next,sizes,jumper"
          :total="totalNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="page_size"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-size.sync="page"
          :key="pagekey"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

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

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      totalNum: 10,
      page: 1,
      page_size: 10,
      options: [
        {
          value: "3",
          label: "气象",
        },
        {
          value: "2",
          label: "墒情",
        },
        {
          value: "1",
          label: "虫情",
        },
        {
          value: "4",
          label: "病害",
        },
        {
          value: "5",
          label: "农作物",
        },
      ],
      warnvalue: "3",
      cbdinfo: [],
      cbdtype: {
        1: "害虫目标种类预警",
        2: "指定害虫数量预警",
        3: "害虫数量总和预警",
        4: "害虫综合预警",
      },
      cropinfo: [],
      bzyinfo: [],
      qxzinfo: [],
      sqzinfo: [],
      pagekey:1
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goBackPage() {
      this.$router.go(-1);
    },
    handleSizeChange(e) {
      this.page = 1;
      this.pagekey = Math.random()*10+1
      this.page_size = e;
      if (this.warnvalue == 1) {
        this.getcbdlist();
      } else if (this.warnvalue == 2) {
        this.getsqzlist();
      } else if (this.warnvalue == 3) {
        this.getqxzlist();
      } else if (this.warnvalue == 4) {
        this.getbzylist();
      } else if (this.warnvalue == 5) {
        this.getcroplist();
      }
    },
    handleCurrentChange(e) {
      this.page = e;
      if (this.warnvalue == 1) {
        this.getcbdlist();
      } else if (this.warnvalue == 2) {
        this.getsqzlist();
      } else if (this.warnvalue == 3) {
        this.getqxzlist();
      } else if (this.warnvalue == 4) {
        this.getbzylist();
      } else if (this.warnvalue == 5) {
        this.getcroplist();
      }
    },
    tupechange(e) {
      this.page = 1;
      this.pagekey = Math.random()*10+1
      if (e == 1) {
        this.getcbdlist();
      } else if (e == 2) {
        this.getsqzlist();
      } else if (e == 3) {
        this.getqxzlist();
      } else if (e == 4) {
        this.getbzylist();
      } else if (e == 5) {
        this.getcroplist();
      }
    },
    allread() {
      if (this.warnvalue == 1) {
        this.cbdyiduall();
      } else if (this.warnvalue == 2) {
        this.sqzyiduall();
      } else if (this.warnvalue == 3) {
        this.qxzyiduall();
      } else if (this.warnvalue == 4) {
        this.bzyyiduall();
      } else if (this.warnvalue == 5) {
        this.cropyiduall();
      }
    },
    read(d_id) {
      if (this.warnvalue == 1) {
        this.cbdyidu(d_id);
      } else if (this.warnvalue == 2) {
        this.sqzyidu(d_id);
      } else if (this.warnvalue == 3) {
        this.qxzyidu(d_id);
      } else if (this.warnvalue == 4) {
        this.bzyyidu(d_id);
      } else if (this.warnvalue == 5) {
        this.cropyidu(d_id);
      }
    },
    //测报灯
    getcbdlist() {
      this.seedialogVisible = true;
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.cbd_pest_warning",
        data: this.qs.stringify({
          page: this.page,
          page_size: this.page_size,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          console.log(res.data.data.data);
          this.cbdinfo = res.data.data.data;
          // this.$nextTick(() => {
          //   document.getElementsByClassName("number")[0].innerText = "首页";
          //   var length = document.getElementsByClassName("number").length;
          //   document.getElementsByClassName("number")[length - 1].innerText =
          //     "末页";
          // });
        }
      });
    },
    // 单条信息已读
    cbdyidu(id) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.cbd_pest_warning",
        data: this.qs.stringify({
          d_id: id,
        }),
      }).then((res) => {
        console.log(res.data.data);
        if (res.data.data == true) {
          this.getcbdlist();
        }
      });
    },
    cbdyiduall() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.cbd_pest_warning",
        data: this.qs.stringify({
          status: "yes",
        }),
      }).then((res) => {
        if (res.data.data == true) {
          this.getcbdlist();
        }
      });
    },
    //孢子仪
    getbzylist() {
      this.seedialogVisible = true;
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=device.device_picture.bzy_warning_list",
        data: this.qs.stringify({
          page: this.page,
          page_size: this.page_size,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          console.log(res.data.data);
          this.bzyinfo = res.data.data.data;
          this.totalNum = res.data.data.num;
          // this.$nextTick(() => {
          //   document.getElementsByClassName("number")[0].innerText = "首页";
          //   var length = document.getElementsByClassName("number").length;
          //   document.getElementsByClassName("number")[length - 1].innerText =
          //     "末页";
          // });
        }
      });
    },
    // 单条信息已读
    bzyyidu(id) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=device.device_picture.bzy_warning_read",
        data: this.qs.stringify({
          d_id: id,
        }),
      }).then((res) => {
        console.log(res.data.data);
        if (res.data.data == true) {
          this.getbzylist();
        }
      });
    },
    // 单条信息已读
    bzyyiduall() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=device.device_picture.bzy_warning_read",
        data: this.qs.stringify({}),
      }).then((res) => {
        console.log(res.data.data);
        if (res.data.data == true) {
          this.getbzylist();
        }
      });
    },
    //气象站
    getqxzlist() {
      this.seedialogVisible = true;
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.qxz_warning",
        data: this.qs.stringify({
          page: this.page,
          page_size: this.page_size,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          console.log(res.data.data.data);
          this.sqzinfo = res.data.data.data;
          this.totalNum = res.data.data.nusm;
          // this.$nextTick(() => {
          //   document.getElementsByClassName("number")[0].innerText = "首页";
          //   var length = document.getElementsByClassName("number").length;
          //   document.getElementsByClassName("number")[length - 1].innerText =
          //     "末页";
          // });
        }
      });
    },
    // 单条信息已读
    qxzyidu(id) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.qxz_warning",
        data: this.qs.stringify({
          d_id: id,
        }),
      }).then((res) => {
        console.log(res.data.data);
        if (res.data.data == true) {
          this.getqxzlist();
        }
      });
    },
    // 一键已读
    qxzyiduall() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.qxz_warning",
        data: this.qs.stringify({
          status: "yes",
        }),
      }).then((res) => {
        if (res.data.data == true) {
          this.getqxzlist();
        }
      });
    },
    //墒情站
    getsqzlist() {
      this.seedialogVisible = true;
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.qxz_warning",
        data: this.qs.stringify({
          page: this.page,
          page_size: this.page_size,
          device_type: "8",
        }),
      }).then((res) => {
        if (res.data.message == "") {
          console.log(res.data.data.data);
          this.sqzinfo = res.data.data.data;
          this.totalNum = res.data.data.nusm;
          // this.$nextTick(() => {
          //   document.getElementsByClassName("number")[0].innerText = "首页";
          //   var length = document.getElementsByClassName("number").length;
          //   document.getElementsByClassName("number")[length - 1].innerText =
          //     "末页";
          // });
        }
      });
    },
    // 一键已读
    sqzyiduall() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.qxz_warning",
        data: this.qs.stringify({
          status: "yes",
          device_type: "8",
        }),
      }).then((res) => {
        if (res.data.data == true) {
          this.getsqzlist();
        }
      });
    },
    // 单条信息已读
    sqzyidu(id) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.qxz_warning",
        data: this.qs.stringify({
          d_id: id,
        }),
      }).then((res) => {
        console.log(res.data.data);
        if (res.data.data == true) {
          this.getsqzlist();
        }
      });
    },
    //农作物
    getcroplist() {
      this.seedialogVisible = true;
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=device.device_picture.crops_warning_list",
        data: this.qs.stringify({
          page: this.page,
          page_size: this.page_size,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          console.log(res.data.data.data);
          this.cropinfo = res.data.data.data;
          this.totalNum = res.data.data.num;
          //   this. =
          // this.$nextTick(() => {
          //   document.getElementsByClassName("number")[0].innerText = "首页";
          //   var length = document.getElementsByClassName("number").length;
          //   document.getElementsByClassName("number")[length - 1].innerText =
          //     "末页";
          // });
        }
      });
    },
    // 单条信息已读
    cropyidu(id) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=device.device_picture.crops_warning_read",
        data: this.qs.stringify({
          d_id: id,
        }),
      }).then((res) => {
        console.log(res.data.data);
        if (res.data.data == true) {
          this.getcroplist();
        }
      });
    },
    // 一键已读
    cropyiduall() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=device.device_picture.crops_warning_read",
        data: this.qs.stringify({}),
      }).then((res) => {
        console.log(res.data.data);
        if (res.data.data == true) {
          this.getcroplist();
        }
      });
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // this.getcbdlist();
    this.getqxzlist();
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.warnbox {
  width: 100%;
  height: 100%;
  .baselistbox_top {
    width: 100%;
    height: 70px;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    .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_sel {
      height: 65px;
      padding-right: 40px;
      display: flex;
      padding-top: 20px;
      box-sizing: border-box;
      .btnbox {
        width: 68px;
        height: 26px;
        border: 1px solid #4f71ff;
        text-align: center;
        border-radius: 3px;
        font-size: 14px;
        margin-left: 20px;
        cursor: pointer;
        background-color: #4f71ff;
        color: #fff;
        line-height: 26px;
      }
    }
  }
  .warnlistbox {
    margin-top: 15px;
    width: 100%;
    padding: 40px;
    background-color: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    .warnlistbox_text {
      width: 100%;
      .warnlistbox_text_item {
        width: 98%;
        display: flex;
        justify-content: space-between;
        p:first-child {
          width: 70%;
          // background-color: #4f71ff;
        }
      }
    }

    .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>