<!--  -->
<template>
  <div class="taskRegulator_box">
    <el-card :style="'height:' + fullHeight + 'px'">
      <!-- 筛选 -->
      <el-row>
        <el-col>
          <div class="search_box">
            <!-- 任务处理人 -->
            <el-select
              :loading="loading2"
              filterable
              v-model="input"
              clearable
              @change="searchData"
              @focus="selectList('operator')"
              placeholder="请选择任务处理人/实际处理人"
              size="mini"
            >
              <el-option
                v-for="item in conductorList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <!-- 任务监督人 -->
            <el-select
              filterable
              :loading="loading3"
              v-model="input2"
              @focus="selectList('supervisor')"
              clearable
              @change="searchData"
              placeholder="请选择任务监督人/实际监督人"
              size="mini"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <!-- 任务状态 -->
            <el-select
              filterable
              v-model="value"
              @change="searchData"
              clearable
              placeholder="请选择任务状态"
              size="mini"
            >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <!-- 时间筛选 -->
            <el-date-picker
              size="mini"
              v-model="value2"
              @change="searchData"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            >
            </el-date-picker>

            <div class="btn_box">
              <el-button type="primary" size="mini" @click="searchData"
                >搜索</el-button
              >
              <el-button size="mini" @click="reset">重置</el-button>

              <el-button type="primary" size="mini" @click="addTask"
                >新增任务</el-button
              >

              <el-button type="primary" size="mini" @click="exportData">
                <i v-if="loadingShow" class="el-icon-loading"></i>
                导出数据</el-button
              >
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table
        :data="tableData"
        v-loading="loading"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="ind" label="序号" width="80"></el-table-column>
        <el-table-column prop="task_id" label="任务编号" width="100">
        </el-table-column>
        <el-table-column prop="task_type" label="任务类型" width="180">
        </el-table-column>
        <el-table-column prop="operator_user" label="任务处理人" width="180">
        </el-table-column>
        <el-table-column prop="owner_user" label="任务发布人" width="180">
        </el-table-column>
        <el-table-column prop="supervisor_user" label="任务监督人" width="180">
        </el-table-column>
        <el-table-column
          prop="start_time"
          label="任务时间"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="last_time"
          label="任务结束时间"
          width="180"
        ></el-table-column>
        <el-table-column prop="end_time" label="任务完成时间" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.end_time || "暂无" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="actual_operator" label="实际处理人" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.actual_operator || "暂无" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="actual_supervisor"
          label="实际监督人"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.actual_supervisor || "暂无" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="task_status" label="任务状态" width="180">
          <template slot-scope="scope">
            <div v-for="(item, index) in type_status" :key="index">
              <span
                v-if="item.name == scope.row.task_status"
                :style="'color:' + item.color + '; font-weight: 550'"
                >{{ scope.row.task_status }}</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <a
              class="reset"
              href="javascript:;"
              @click="examineDetail(scope.row)"
              >查看</a
            >
            <span v-if="scope.row.task_status == '未开始'">
              <a
                class="reset"
                href="javascript:;"
                @click="redactData(scope.row)"
                >编辑</a
              >
              <a class="reset" href="javascript:;" @click="delData(scope.row)"
                >删除</a
              >
            </span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <!-- 分页 -->
      <el-pagination
        style="margin: 60px 0 0 0"
        :page-size="10"
        @current-change="newPage"
        :current-page="page"
        v-if="tableData.length > 0"
        background
        layout="prev, pager, next, jumper"
        :total="tableSum"
      >
      </el-pagination>
    </el-card>

    <!-- 新增任务 -->
    <el-dialog
      :title="titleData"
      :show-close="false"
      :visible.sync="dialogVisible"
      width="45%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div style="display: flex; flex-wrap: wrap">
          <!-- 任务处理人 -->
          <el-form-item label="任务处理人" prop="region">
            <el-select
              v-if="titleData == '发布任务'"
              clearable
              filterable
              :loading="loading2"
              @focus="addTaskSelectList('operator')"
              size="mini"
              v-model="ruleForm.region"
              placeholder="请选择任务处理人"
            >
              <el-option
                v-for="(item, index) in conductorList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-input
              style="width: 66%"
              v-else
              placeholder="请输入内容"
              clearable
              size="mini"
              filterable
              v-model="ruleForm.region"
              :disabled="true"
            >
            </el-input>
          </el-form-item>
          <!-- 任务监督人 -->
          <el-form-item label="任务监督人" prop="overseer">
            <el-select
              v-if="titleData == '发布任务'"
              clearable
              size="mini"
              :loading="loading3"
              @focus="addTaskSelectList('supervisor')"
              filterable
              v-model="ruleForm.overseer"
              placeholder="请选择任务监督人"
            >
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-input
              style="width: 63%"
              v-else
              placeholder="请输入内容"
              clearable
              size="mini"
              filterable
              v-model="ruleForm.overseer"
              :disabled="true"
            >
            </el-input>
          </el-form-item>

          <!-- 任务时间 -->
          <el-form-item label="任务时间" required>
            <el-form-item prop="date">
              <el-date-picker
                size="mini"
                v-model="ruleForm.date"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              >
              </el-date-picker>
            </el-form-item>
          </el-form-item>

          <!-- 任务类型 -->
          <el-form-item label="任务类型" prop="type">
            <el-select
              size="mini"
              v-model="ruleForm.type"
              clearable
              placeholder="请选择任务类型"
            >
              <el-option
                v-for="(item, index) in typeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>

        <!-- 诱捕器 -->
        <transition name="el-zoom-in-center">
          <el-form-item
            v-if="ruleForm.type == '有害生物监测'"
            label="诱捕器"
            prop="checkList"
            style="width: 90%"
          >
            <ul class="form_ul">
              <li class="form_li">
                <span class="form_li_tltie">+</span>
                <span class="form_li_add" @click="addrDevice">去选择</span>
              </li>

              <!-- 设备列表 -->
              <li
                class="form_li"
                v-for="(item, index) in ybqCheckList"
                :key="index"
              >
                <div>
                  <img
                    @click="deviceDelData(index)"
                    src="../../assets/images/taskRegulator/1.png"
                    alt=""
                  />
                  <span>{{ item.name }}</span>
                </div>
              </li>
            </ul>
          </el-form-item>
        </transition>

        <!-- 任务描述 -->
        <el-form-item label="任务描述" style="width: 86%">
          <el-input
            size="mini"
            type="textarea"
            resize="none"
            v-model="ruleForm.desc"
            :rows="5"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >发布</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 选择诱捕器 -->
    <el-dialog
      title="选择诱捕器"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="deviceVisible"
      width="45%"
    >
      <!-- 筛选 -->
      <ul class="device_seek">
        <!-- 监测点 -->
        <li class="device_seek_list">
          <el-select
            clearable
            filterable
            size="mini"
            @change="ybqSearchData"
            v-model="deviceForm.monitorDot"
            placeholder="监测点"
          >
            <el-option
              v-for="(item, index) in pointData"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </li>

        <!-- 组织 -->
        <li class="device_seek_list">
          <el-select
            clearable
            filterable
            size="mini"
            @change="ybqSearchData"
            v-model="deviceForm.tissue"
            placeholder="组织"
          >
            <el-option
              v-for="(item, index) in orgData"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </li>

        <!-- 设备编号 -->
        <li class="device_seek_list">
          <el-input
            @change="ybqSearchData"
            placeholder="设备编号"
            v-model="deviceForm.serial"
            size="mini"
            clearable
          >
          </el-input>
        </li>

        <!-- 搜索 -->
        <li class="device_seek_list">
          <el-button type="success" size="mini" @change="ybqSearchData"
            >搜索</el-button
          >
        </li>
      </ul>

      <!-- 设备列表 -->
      <div v-loading="loading5">
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            :label="item.value"
            v-for="item in ybqData"
            :key="item.value"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
        <el-empty v-if="ybqData.length == 0" :image-size="200"></el-empty>
      </div>

      <!-- 分页 -->
      <el-pagination
        style="margin: 60px 0 0 0"
        :page-size="10"
        @current-change="ybqNemPage"
        :current-page="page2"
        v-if="ybqData.length > 36"
        background
        layout="prev, pager, next, jumper"
        :total="listSum"
      >
      </el-pagination>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="ybqAddEnsure">取 消</el-button>
        <el-button size="mini" type="primary" @click="deviceVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight - 116, //

      titleData: "", // 弹框标题

      // 筛选
      input: "", // 任务处理人
      loading2: false, // 加载
      conductorList: [], // 任务处理人 - 列表
      input2: "", // 任务监督人
      loading3: false, // 加载
      options: [], // 任务监督人 - 列表
      value: "", // 任务状态
      options2: [
        {
          value: "未开始",
          label: "未开始"
        },
        {
          value: "处理中",
          label: "处理中"
        },
        {
          value: "已完成",
          label: "已完成"
        },
        {
          value: "未处理",
          label: "未处理"
        },
        {
          value: "逾期完成",
          label: "逾期完成"
        }
      ], // 任务状态 - 列表
      value2: "", //时间筛选
      startTime: "", // 开始时间
      endTime: "", // 结束时间
      loadingShow: false, // 导出按钮加载

      // 表格
      tableData: [],
      loading: false, // 加载

      // 分页
      page: 1, // 当前页码
      tableSum: 0, // 总页码
      // 任务状态展示
      type_status: [
        {
          name: "未开始",
          color: "#E6A23C"
        },
        {
          name: "处理中",
          color: "#E6A23C"
        },
        {
          name: "已完成",
          color: "#67C23A"
        },
        {
          name: "未处理",
          color: "#F56C6C"
        },
        {
          name: "逾期完成",
          color: "#409EFF"
        }
      ],

      // 新增任务弹框
      dialogVisible: false,
      ybqCheckList: [], // 选中的诱捕器列表
      ruleForm: {
        region: "", // 任务处理人
        overseer: "", // 任务监督人
        date: "", // 任务时间
        startTime: "", // 开始时间
        endTime: "", // 结束时间
        type: "", // 任务类型
        checkList: [], //诱捕器
        desc: "" // 任务描述
      },
      rules: {
        region: [
          { required: true, message: "请选择任务处理人", trigger: "blur" }
        ],
        overseer: [
          { required: true, message: "请选择任务监督人", trigger: "blur" }
        ],
        date: [{ required: true, message: "请选择任务时间", trigger: "blur" }],
        type: [{ required: true, message: "请选择任务类型", trigger: "blur" }],
        checkList: [
          { required: true, message: "请选择诱捕器", trigger: "blur" }
        ]
        // desc: [{ required: true, message: "请填写任务描述", trigger: "blur" }]
      },
      // 任务类型
      typeList: [
        {
          value: "有害生物监测",
          label: "有害生物监测"
        },
        {
          value: "入境口岸监测调查",
          label: "入境口岸监测调查"
        },
        {
          value: "外来有害杂草监测",
          label: "外来有害杂草监测"
        },
        {
          value: "其他监测任务",
          label: "其他监测任务"
        },
        {
          value: "挂放",
          label: "挂放"
        },
        {
          value: "维护",
          label: "维护"
        }
      ],

      // 选择诱捕器
      ybqData: [], // 诱捕器设备列表
      deviceVisible: false,
      deviceForm: {
        monitorDot: "", // 监测点
        tissue: "", // 组织
        serial: "" // 设备编号
      },
      loading5: false, // 加载
      page2: 1, //当前页码
      listSum: 0, // 总数量
      checkList: [], // 已选中设备列表
      orgData: [], // 组织列表
      pointData: [], // 监测点列表
      taskObj: {} // 点击编辑获取到的任务数据
    };
  },
  //监听属性 类似于data概念
  computed: {
    // // 新增任务 - 任务处理人
    // region() {
    //   return this.ruleForm.region;
    // },
    // // 新增任务 - 任务监督人
    // overseer() {
    //   return this.ruleForm.overseer;
    // },
  },
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },

    // 新增编辑任务弹框
    dialogVisible(val) {
      if (val == false) {
        this.taskObj = {};
        this.ruleForm.region = ""; // 任务处理人
        this.ruleForm.overseer = ""; //任务监督人
        this.ruleForm.date = ""; // 任务时间
        this.ruleForm.startTime = ""; // 开始时间
        this.ruleForm.endTime = ""; // 结束时间
        this.ruleForm.type = ""; // 任务类型
        this.ruleForm.checkList = []; // 诱捕器
        this.ruleForm.desc = ""; // 任务描述
        // this.$refs["ruleForm"].resetFields();
      }
    },

    // 选择诱捕器弹框
    deviceVisible(val) {
      if (val == false) {
        this.ybqData = []; // 诱捕器设备列表
        this.deviceForm.monitorDot = ""; // 监测点
        this.deviceForm.tissue = ""; // 组织
        this.deviceForm.serial = ""; // 设备编号
        this.page2 = this.listSum = 0; // 当前页码 // 总数量
        this.orgData = []; // 组织列表
        this.pointData = []; // 监测点列表
      }
    },
    checkList(val) {
      this.ybqCheckList = [];
      this.ruleForm.checkList = [];
      for (let i = 0; i < val.length; i++) {
        for (let j = 0; j < this.ybqData.length; j++) {
          // if (val[i] === this.ybqData[j].value)
          if (val[i] === this.ybqData[j].value) {
            this.ybqCheckList.push({ id: val[i], name: this.ybqData[j].label });
            this.ruleForm.checkList.push(val[i]);
          }
        }
      }
    }
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    // 筛选
    searchData() {
      if (this.value2) {
        this.startTime = this.formatTime(this.value2[0], "yyyy-MM-dd");
        this.endTime = this.formatTime(this.value2[1], "yyyy-MM-dd");
      } else {
        this.startTime = "";
        this.endTime = "";
      }

      this.loading = true;
      this.tableData = [];
      this.tableList();
    },

    // 重置
    reset() {
      this.input = ""; // 任务处理人
      this.input2 = ""; // 任务监督人
      this.value = ""; // 任务状态
      this.value2 = ""; // 时间筛选
      this.startTime = ""; // 开始时间
      this.endTime = ""; // 结束时间
      this.loading = true;
      this.tableData = [];
      this.tableList();
    },

    // 分页
    newPage(page) {
      this.page = page;
      this.loading = true;
      this.tableList();
    },

    // 表格数据
    tableList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=control_center.task.task_list",
        data: this.qs.stringify({
          page: this.page, //当前页码
          page_item: "10",
          operator_user_id: this.input, // 任务处理人id
          owner_user_id: this.input2, // 任务发布id
          start_time: this.startTime, // 开始时间
          end_time: this.endTime, // 结束时间
          task_status: this.value // 任务状态
        })
      })
        .then(res => {
          if (res.data.data.total_item !== 0) {
            var data = res.data.data.page_list;
            this.tableSum = res.data.data.total_item;
            var list = [];
            data.forEach((item, index) => {
              item.ind = index;
              list.push(item);
            });
            // console.log(list);
            this.tableData = list;
          }
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
          // console.log(err);
        });
    },

    // 查看
    examineDetail(data) {
      this.$router.push({
        path: "/index/taskRegulatorDetails",
        query: {
          id: data.task_id
        }
      });
    },

    // 编辑
    redactData(data) {
      // console.log(data);
      this.taskObj = data;
      this.titleData = "编辑任务";

      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=control_center.task.task_info",
        data: this.qs.stringify({
          task_id: data.task_id
        })
      }).then(res => {
        var data = res.data.data;
        this.ruleForm.region = data.operator_user; // 任务处理人
        this.ruleForm.overseer = data.supervisor_user; // 任务监督人
        this.ruleForm.date = [data.start_time, data.last_time]; // 任务时间
        this.ruleForm.type = data.task_type; // 任务类型
        this.ruleForm.desc = data.tesk_msg; //任务描述
        this.ybqCheckList = ""; // 诱捕器
        var list = [];
        data.trap_record_list.forEach(item => {
          var obj = {};
          obj["name"] = item.trap_number;
          obj["id"] = item.trap_id;
          list.push(obj);
        });
        // console.log(list);
        this.ybqCheckList = list;
        this.ruleForm.checkList = list;
        this.dialogVisible = true;
      });
    },

    // 删除
    delData(data) {
      this.$confirm("此操作将永久删除该条任务, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios({
            method: "POST",
            url: "/api/api_gateway?method=control_center.task.task_delete",
            data: this.qs.stringify({
              task_id: data.task_id
            })
          }).then(res => {
            // console.log(res);
            if (res.data.data == true) {
              this.$message({
                type: "success",
                message: "删除成功!",
                duration: 1500
              });
              this.tableData = [];
              this.loading = true;
              this.tableList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            duration: 1500
          });
        });
    },

    // 筛选列表 - 任务处理人
    conductorAxios(type, a, b, c) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=control_center.task.task_user_list",
        data: this.qs.stringify({
          user_type: type, // 用户类型，operator（任务处理人）, supervisor（任务监督人）, owner（任务发布人）
          operator_id: a, // 已经选择的任务处理人id
          supervisor_id: b, // 已经选择的任务监督人id
          owner_id: c // 已经选择的任务发布人id
        })
      })
        .then(res => {
          if (res.data.data.length !== 0) {
            var data = res.data.data;
            var list = [];
            data.forEach(item => {
              var obj = {};
              obj["value"] = item.user_id;
              obj["label"] = item.real_name;
              list.push(obj);
            });
            if (type == "operator") {
              // 任务处理人
              this.loading2 = false;
              this.conductorList = list;
            } else if (type == "supervisor") {
              // 任务监督人
              this.loading3 = false;
              this.options = list;
            } else if (type == "owner") {
              // 任务发布人
            }
          }
        })
        .catch(err => {});
    },

    // 筛选列表 - 任务处理人、任务监督人
    selectList(type) {
      if (type == "operator") {
        // 任务处理人
        var a = ""; //任务处理人
        var b = this.input2; //任务监督人
        var c = ""; //任务发布人
        this.loading2 = true;
      } else if (type == "supervisor") {
        // 任务监督人
        var a = this.input; //任务处理人
        var b = ""; //任务监督人
        var c = ""; //任务发布人
        this.loading3 = true;
      } else if (type == "owner") {
        // 任务发布人
        var a = this.input; //任务处理人
        var b = this.input2; //任务监督人
        var c = ""; //任务发布人
      }
      this.conductorAxios(type, a, b, c);
    },

    // 新建任务 - 弹框
    addTask() {
      this.titleData = "发布任务";
      this.dialogVisible = true;
    },

    // 筛选列表 - 任务处理人、任务监督人
    addTaskSelectList(type) {
      if (type == "operator") {
        // 任务处理人
        var a = ""; //任务处理人
        var b = this.ruleForm.overseer; //任务监督人
        var c = ""; //任务发布人
        this.loading2 = true;
      } else if (type == "supervisor") {
        // 任务监督人
        var a = this.ruleForm.region; //任务处理人
        var b = ""; //任务监督人
        var c = ""; //任务发布人
        this.loading3 = true;
      } else if (type == "owner") {
        // 任务发布人
        var a = this.ruleForm.region; //任务处理人
        var b = this.ruleForm.overseer; //任务监督人
        var c = ""; //任务发布人
      }
      this.conductorAxios(type, a, b, c);
    },

    // 新建任务 、 编辑任务 - 发布
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.ruleForm.date) {
            this.ruleForm.startTime = this.formatTime(
              this.ruleForm.date[0],
              "yyyy-MM-dd"
            );
            this.ruleForm.endTime = this.formatTime(
              this.ruleForm.date[1],
              "yyyy-MM-dd"
            );
          } else {
            this.ruleForm.startTime = "";
            this.ruleForm.endTime = "";
          }

          // 判断当前任务类型是否为有害生物
          if (this.ruleForm.type !== "有害生物监测") {
            this.ruleForm.checkList = [];
          }

          if (this.titleData == "发布任务") {
            this.$axios({
              method: "POST",
              url: "/api/api_gateway?method=control_center.task.task_add",
              data: this.qs.stringify({
                operator_id: this.ruleForm.region, // 任务处理人
                supervisor_id: this.ruleForm.overseer, // 任务监督人
                start_time: this.ruleForm.startTime, // 任务开始时间
                last_time: this.ruleForm.endTime, // 任务完成时间
                task_type: this.ruleForm.type, // 任务类型
                tesk_msg: this.ruleForm.desc, // 任务描述
                trap_id_list: JSON.stringify(this.ruleForm.checkList) // 诱捕器id列表
              })
            }).then(res => {
              if (res.data.message == "") {
                this.loading = true;
                this.tableData = [];
                this.dialogVisible = false;
                this.tableList();
                this.$message({
                  type: "success",
                  message: "新增成功!",
                  duration: 1500
                });
              }
            });
          } else if (this.titleData == "编辑任务") {
            this.$axios({
              method: "POST",
              url: "/api/api_gateway?method=control_center.task.task_modify",
              data: this.qs.stringify({
                task_id: this.taskObj.task_id,
                start_time: this.ruleForm.startTime, // 任务开始时间
                last_time: this.ruleForm.endTime, // 任务完成时间
                task_type: this.ruleForm.type, // 任务类型
                tesk_msg: this.ruleForm.desc, // 任务描述
                // trap_id_list: JSON.stringify(this.checkList) // 诱捕器id列表
                trap_id_list: JSON.stringify(this.ruleForm.checkList) // 诱捕器id列表
              })
            }).then(res => {
              // console.log(res);
              if (res.data.message == "") {
                this.loading = true;
                this.tableData = [];
                this.dialogVisible = false;
                this.tableList();
                this.$message({
                  type: "success",
                  message: "编辑成功!",
                  duration: 1500
                });
              }
            });
          }
        } else {
          return false;
        }
      });
    },

    // 新建任务 - 取消
    resetForm(formName) {
      this.ruleForm.region = ""; // 任务处理人
      this.ruleForm.overseer = ""; //任务监督人
      this.ruleForm.date = ""; // 任务时间
      this.ruleForm.startTime = ""; // 开始时间
      this.ruleForm.endTime = ""; // 结束时间
      this.ruleForm.type = ""; // 任务类型
      this.ruleForm.checkList = []; // 诱捕器
      this.ruleForm.desc = ""; // 任务描述
      // this.$refs[formName].resetFields();
      this.dialogVisible = false;
    },

    // 新建任务- 诱捕器 - 列表
    ybqList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=monitor_manage.trap_manage.trap_list",
        data: this.qs.stringify({
          trap_number: this.deviceForm.serial, // 设备编号
          point_id: this.deviceForm.monitorDot, // 设备所属监测点id
          org_id: this.deviceForm.tissue, // 设备所属组织id
          trap_status: "", // 诱捕器状态 0停用 1正常
          page: this.page2, // 页码
          page_size: "36" //每页数量，默认为10
        })
      })
        .then(res => {
          if (res.data.data.total_item !== 0) {
            var data = res.data.data;
            this.listSum = data.total_item;
            var list = [];
            data.page_list.forEach(item => {
              var obj = {};
              obj["value"] = item.trap_id;
              obj["label"] = item.trap_number;
              list.push(obj);
            });
            this.ybqData = list;
          }
          this.loading5 = false;
        })
        .catch(err => {
          this.loading5 = false;
        });
    },

    // 新建任务 - 诱捕器 - 筛选项 - 组织、监测点 - 列表
    ybqScreenList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=monitor_manage.trap_manage.trap_org"
      })
        .then(res => {
          // console.log(res);
          var data = res.data.data;

          // 组织
          if (data.org_data.length !== 0) {
            var list = [];
            data.org_data.forEach(item => {
              var obj = {};
              obj["value"] = item.org_id;
              obj["label"] = item.org_name;
              list.push(obj);
            });
            this.orgData = list;
          }

          // 监测点
          if (data.point_data.length !== 0) {
            var list2 = [];
            data.org_data.forEach(item => {
              var obj = {};
              obj["value"] = item.org_id;
              obj["label"] = item.org_name;
              list2.push(obj);
            });
            this.pointData = list2;
          }
        })
        .catch(err => {
          // console.log(err);
        });
    },

    // 新建任务 - 诱捕器 - 筛选
    ybqSearchData() {
      this.loading5 = true;
      this.ybqData = [];
      this.ybqList();
    },

    // 新建任务 - 诱捕器 - 列表 - 分页
    ybqNemPage(page) {
      this.page2 = page;
      this.ybqData = [];
      this.ybqList();
    },

    // 新建任务 - 诱捕器  - 取消
    ybqAddEnsure() {
      this.ybqData = []; // 诱捕器设备列表
      this.deviceForm.monitorDot = ""; // 监测点
      this.deviceForm.tissue = ""; // 组织
      this.deviceForm.serial = ""; // 设备编号
      this.page2 = this.listSum = 0; // 当前页码 // 总数量
      // this.checkList = []; // 已选中设备列表
      this.orgData = []; // 组织列表
      this.pointData = []; // 监测点列表
      if (!this.taskObj.task_id) {
        this.checkList = []; // 已选中设备列表
      }
      this.deviceVisible = false;
    },

    // 新建任务 - 选中后的诱捕器删除
    deviceDelData(index) {
      this.$delete(this.ybqCheckList, index);
    },

    // 新建任务 - 诱捕器 - 添加
    addrDevice() {
      this.loading5 = true;
      this.ybqData = [];
      if (this.ybqCheckList.length !== 0) {
        var list = [];
        for (var i = 0; i < this.ybqCheckList.length; i++) {
          list.push(this.ybqCheckList[i].id);
        }
        this.checkList = list;
      } else {
        this.checkList = [];
      }
      // console.log(this.checkList);
      this.ybqList(); // 设备列表
      this.ybqScreenList(); // 设备筛选列表
      this.deviceVisible = true;
    },

    // 导出数据
    exportData() {
      this.loadingShow = true;
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=control_center.task.task_export",
        responseType: "blob"
      })
        .then(res => {
          this.downloadFile(res, "任务列表.xls");
          this.loadingShow = false;
        })
        .catch(err => {
          this.loadingShow = false;
        });
    },

    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);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.loading = true;
    this.tableList(); // 表格数据
    // this.conductorAxios(); // 筛选列表 - 任务处理人
  }
};
</script>
<style lang="less" scoped>
.taskRegulator_box {
  // 搜索
  .search_box {
    display: flex;
    /deep/.el-select {
      margin: 0 15px 0 0;
    }
    /deep/.el-input {
      margin: 0 15px 0 0;
    }
    .btn_box {
      margin: 0 0 0 15px;
      // width: 50%;
      display: flex;
      justify-content: start;
    }

    /deep/.el-range-editor--mini.el-input__inner {
      width: 20%;
    }
  }

  a {
    text-decoration: none;
  }
  .reset {
    color: #1890ff;
  }

  /deep/.el-card {
    overflow: hidden;
    overflow-y: auto;
  }

  // 新增弹框
  /deep/.el-form-item {
    width: 50%;
  }
  /deep/.el-date-editor {
    // width: 195px;
    width: 200px;
  }
  /deep/.el-form-item__error {
    width: 130px;
  }

  .form_ul {
    // border: 1px solid #000;
    display: flex;
    flex-wrap: wrap;
    .form_li {
      margin: 0 25px 0 0;
      div {
        position: relative;
        img {
          cursor: pointer;
          position: absolute;
          right: -10px;
          top: 4px;
          width: 15px;
          height: 15px;
        }
        span {
        }
      }
      .form_li_tltie {
        cursor: pointer;
        font-size: 15px;
      }
      .form_li_add {
        cursor: pointer;
        color: #1890ff;
      }
    }
  }

  // 诱捕器选择弹框
  .device_seek {
    display: flex;
    justify-content: space-between;
    .device_seek_list {
    }
  }

  /deep/.el-checkbox {
    margin: 10px 30px 10px 0;
  }
}
</style>
