<!--  -->
<template>
  <div class="cbdbox">
    <div class="cbdboxs_search">
      <el-input
        v-model="idinput"
        placeholder="请输入诱捕器ID"
        size="mini"
      ></el-input>
      <el-input
        v-model="nameinput"
        placeholder="请输入填报人"
        size="mini"
      ></el-input>
      <el-select
        v-model="inoffvalue"
        placeholder="请选择所在监测点"
        size="mini"
      >
        <el-option
          v-for="item in inoffoptions"
          :key="item.point_id"
          :label="item.point_name"
          :value="item.point_id"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="versionsvalue2"
        placeholder="请选择隶属海关"
        size="mini"
      >
        <el-option
          v-for="item in versionsoptions2"
          :key="item.org_name"
          :label="item.org_name"
          :value="item.org_name"
        >
        </el-option>
      </el-select>
      <!-- <el-cascader
        :change-on-select="true"
        :options="versionsoptions"
        v-model="versionsvalue"
        :props="defaultParams"
        :clearable="true"
        size="mini"
        placeholder="请选择隶属海关"
      ></el-cascader> -->
      <el-date-picker
        v-model="timevalue"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="oickchange"
        size="mini"
      >
      </el-date-picker>
      <el-button type="info" @click="search" size="mini">搜索</el-button>
      <el-button @click="reset" size="mini">重置</el-button>
      <el-button type="info" size="mini" @click="deriveVisible = true"
        >导出数据</el-button
      >
    </div>
    <el-card class="box-card" style="margin-top: 15px">
      <div class="cbdboxs_table" v-loading="loading">
        <el-table :data="tableData" style="width: 100%" :stripe="true">
          <el-table-column prop="index" label="序号" width="60px"> </el-table-column>
          <el-table-column prop="trap_number" label="编号"></el-table-column>
          <el-table-column prop="org_name" label="组织">
            <template slot-scope="scope">
              <span v-if="scope.row.org_name.split(',').length == 1">{{
                scope.row.org_name
              }}</span>
              <el-popover
                ref="popover"
                placement="right"
                title=""
                width="150"
                trigger="hover"
                v-else
              >
                <div class="popover-content" v-html="content"></div>
                <span @mouseover="orglisthover(scope.row)" slot="reference"
                  >{{ scope.row.org_name.split(',')[0] }}...</span
                >
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="point_name" label="监测点"> </el-table-column>
          <el-table-column prop="inducer_name" label="诱剂"> </el-table-column>
          <el-table-column prop="pest_name" label="有害生物"> </el-table-column>
          <el-table-column prop="pest_number" label="有害生物数量">
          </el-table-column>
          <el-table-column prop="user_name" label="填报人"> </el-table-column>
          <el-table-column prop="report_status" label="填报渠道">
          </el-table-column>
          <el-table-column prop="create_time" label="填报时间" width="200">
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="pageChange"
      >
      </el-pagination>
    </el-card>
    <el-dialog title="提示" :visible.sync="deriveVisible" width="30%">
      <div class="derivebox">
        <p><span>*</span>文件名称：</p>
        <el-input
          v-model="derivefilename"
          placeholder="请输入文件名称"
          size="mini"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deriveVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="deriveclick" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

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

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      idinput: "",
      nameinput: "",
      inoffvalue: "",
      inoffoptions: [],
      versionsvalue: "",
      versionsoptions: [],
      versionsvalue2: "",
      versionsoptions2: [],
      queryInfo: {
        page: 1,
        trap_number: "", //   设备编号 搜索项
        point_name: "", //       设备所属监测点 搜索项
        org_name: "", //         设备所属组织   搜索项
        user_name: "", //        填报人名字 搜索项
        start_time: "", //       开始时间 搜索项
        end_time: "", //         结束时间 搜索项
      },
      tableData: [],
      device_id: "",
      total: 10,
      loading: false,
      timevalue: "", //时间段
      deriveVisible: false, //导出弹框
      derivefilename: "", //导出文件名称
      defaultParams: {
        label: "org_name",
        value: "id",
        children: "childrens",
      },
      content:""
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getcbdlist() {
      //获取设备列表
      this.loading = true;
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=monitor_manage.trap_manage.trap_pest_record",
        data: this.qs.stringify({
          page_size: 10,
          page: this.queryInfo.page,
          trap_number: this.queryInfo.trap_number, //              非必传(string)               设备编号 搜索项
          point_name: this.queryInfo.point_name, //                  非必传(string)               设备所属监测点 搜索项
          org_name: this.queryInfo.org_name, //                    非必传(string)               设备所属组织   搜索项
          user_name: this.queryInfo.user_name, //                   非必传(string)               填报人名字 搜索项
          start_time: this.queryInfo.start_time, //                  非必传(string)               开始时间 搜索项
          end_time: this.queryInfo.end_time, //                    非必传(string)               结束时间 搜索项
        }),
      }).then((res) => {
        this.loading = false;
        console.log(res.data.data);
        this.total = res.data.data.pest_num;
        this.tableData = res.data.data.trap_data;
        for (var i = 0; i < this.tableData.length; i++) {
          this.tableData[i]["index"] = i + 1;
        }
      });
    },
    // getmon() {
    //   //获取监测点列表 组织列表
    //   this.$axios({
    //     method: "POST",
    //     url: "/api/api_gateway?method=sysmenage.usermanager.org_list",
    //   }).then((res) => {
    //     console.log(res.data.data);
    //     this.versionsoptions = res.data.data.page_list; //组织
    //     this.inoffoptions = res.data.data.point_data;
    //   });
    // },
    getmon2() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=monitor_manage.trap_manage.pest_trap_org",
      }).then((res) => {
        console.log(res.data.data);
        this.versionsoptions2 = res.data.data.org_list;
        // this.versionsoptions = res.data.data.page_list; //组织
        this.inoffoptions = res.data.data.point_data;
      });
    },
    search() {
      this.queryInfo.trap_number = this.idinput;
      this.queryInfo.user_name = this.nameinput;
      console.log(this.inoffoptions);
      if (this.inoffvalue) {
        this.queryInfo.point_name =
          this.inoffoptions[this.inoffvalue - 1].point_name;
      }
      this.queryInfo.org_name = this.versionsvalue2;
      // console.log(this.versionsvalue2)
      this.getcbdlist();
    },
    oickchange(e) {
      //搜索时间段
      console.log(e);
      this.queryInfo.start_time = this.tabtime(e[0]);
      this.queryInfo.end_time = this.tabtime(e[1]);
    },
    tabtime(times) {
      //时间转换
      var years = times.getFullYear();
      var month = times.getMonth() + 1;
      var date = times.getDate();
      return years + "-" + month + "-" + date;
    },
    pageChange(e) {
      // console.log(e)
      this.queryInfo.page = e;
      this.getcbdlist();
    },
    reset() {
      //重置
      this.idinput = "";
      this.nameinput = "";
      this.inoffvalue = "";
      this.versionsvalue = "";
      this.timevalue = "";
      this.queryInfo.start_time = "";
      this.queryInfo.end_time = "";
      this.getcbdlist();
    },
    downloadFile(res, name) {
      let link = document.createElement("a");
      link.href = window.URL.createObjectURL(new Blob([res.data]));
      link.target = "_blank";
      //文件名和格式
      link.download = name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    deriveclick() {
      // this.deriveVisible = false;
      this.$axios({
        method: "POST",
        url: "/api/pest_export",
        data: this.qs.stringify({
          trap_number: this.queryInfo.trap_number,
          point_name: this.queryInfo.point_name,
          org_name: this.queryInfo.org_name,
          trap_status: this.queryInfo.trap_status,
          file_name: this.derivefilename,
          start_time: this.queryInfo.start_time,
          end_time: this.queryInfo.end_time,
          user_name: this.queryInfo.user_name,
          user: localStorage.getItem("usernme"),
        }),
        responseType: "blob",
      }).then((res) => {
        console.log(res);
        this.downloadFile(res, this.derivefilename + ".xls");
      });
    },
    orglisthover(e){
      console.log(e.org_name);
      var data = e.org_name.split(',')
      var str = ``;
      for (var i = 0; i < data.length; i++) {
        str += `<p>` + data[i] + `</p>`;
      }
      this.content = str;
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.getmon();
    this.getmon2();
    this.getcbdlist();
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.cbdboxs_search {
  display: flex;
  justify-content: flex-start;
  // height: 40px;
  /deep/.el-select {
    width: 220px;
    margin-right: 15px;
  }
  /deep/.el-input {
    width: 220px;
    margin-right: 15px;
  }
  /deep/.el-date-editor {
    width: 250px !important;
    margin-right: 15px;
  }
}
.cbdboxs_table {
  margin-top: 15px;
  /deep/.el-table__header-wrapper {
    th {
      background-color: #fafafa;
    }
  }
}
.derivebox {
  display: flex;
  p {
    width: 100px;
    line-height: 28px;
    span {
      color: red;
    }
  }
  .el-input {
    width: 250px;
  }
}
/deep/.el-button--info {
  background-color: #409eff;
  border-color: #409eff;
}
</style>