// 人员布控名单配置
<template>
  <div class="app-container">
    <el-form :inline="true" :model="page.data">
      <el-form-item class="margin-left input">
        <el-select
          v-model="page.data.warningGrade"
          filterable
          clearable
          placeholder="请选择预警等级"
        >
          <el-option
            v-for="item in option"
            :key="item.code"
            :label="item.desc"
            :value="item.code"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-input
          v-model="page.data.name"
          clearable
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-select
          v-model="page.data.documentType"
          filterable
          clearable
          placeholder="请选择证件类型"
        >
          <el-option label="护照" :value="1"></el-option>
          <el-option label="身份证号" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-input
          clearable
          v-model="page.data.idNumber"
          placeholder="请输入证件号"
        ></el-input>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-input
          clearable
          v-model="page.data.warningType"
          placeholder="请输入布控人员类型"
        ></el-input>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-input
          clearable
          v-model="page.data.taskName"
          placeholder="请输入任务名称"
        ></el-input>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-select
          v-model="page.data.controlAdminId"
          filterable
          clearable
          placeholder="请选择布控单位"
        >
          <el-option
            v-for="item in logAdminList"
            :key="item.adminId"
            :label="item.username"
            :value="item.adminId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left">
        <el-date-picker
          v-model="page.data.controlStartStartTime"
          type="date"
          placeholder="选择布控开始时间"
          value-format="yyyy-MM-dd"
          style="width: 180px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item class="margin-left">
        <el-date-picker
          v-model="page.data.controlStartEndTime"
          type="date"
          placeholder="选择布控结束时间"
          value-format="yyyy-MM-dd"
          style="width: 180px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-select
          v-model="page.data.taskStatus"
          clearable
          placeholder="请选择任务状态"
        >
          <el-option label="未开始" :value="1"></el-option>
          <el-option label="进行中" :value="2"></el-option>
          <el-option label="已完结" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-input
          clearable
          v-model="page.data.manageName"
          placeholder="请输入负责人姓名"
        ></el-input>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-input
          clearable
          v-model="page.data.managePhone"
          placeholder="请输入负责人手机号"
        ></el-input>
      </el-form-item>
      <el-form-item class="margin-left">
        <el-button type="primary" @click="fetchData" icon="el-icon-search"
          >搜索</el-button
        >
      </el-form-item>
      <el-form-item class="margin-left">
        <el-button type="danger" plain @click="delpersonBachAll"
          >批量删除</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 主体表格 -->
    <el-table
      :data="tableData"
      v-loading="listLoading"
      border
      fit
      highlight-current-row
      class="table"
    >
      <el-table-column align="center" width="80" label="序号">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="warningGrade" label="预警等级">
        <template v-slot="{ row }">
          <el-tag class="tag-color" color="#B60ED1" v-if="row.warningGrade == 1"
            >Ⅰ级</el-tag
          >
          <el-tag class="tag-color" color="#FF5C66" v-if="row.warningGrade == 2"
            >Ⅱ级</el-tag
          >
          <el-tag class="tag-color" color="#FF8B49" v-if="row.warningGrade == 3"
            >Ⅲ级</el-tag
          >
          <el-tag class="tag-color" color="#FFC52F" v-if="row.warningGrade == 4"
            >Ⅳ级</el-tag
          >
          <el-tag class="tag-color" color="#78D1E5" v-if="row.warningGrade == 5"
            >Ⅴ级</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="人员姓名">
      </el-table-column>
      <el-table-column align="center" prop="documentType" label="证件类型">
        <template v-slot="{ row }">
          <el-tag type="warning" effect="plain" v-if="row.documentType == 2"
            >身份证</el-tag
          >
          <el-tag effect="plain" v-else>护照</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="idNumber" label="证件号">
      </el-table-column>
      <el-table-column align="center" prop="warningType" label="布控人员类型">
      </el-table-column>
      <el-table-column align="center" prop="taskName" label="任务名称">
      </el-table-column>
      <el-table-column align="center" prop="controlUsername" label="布控单位">
      </el-table-column>
      <el-table-column align="center" label="布控时间段">
        <template v-slot="{ row }">
          {{ row.controlStartTime }}至{{ row.controlEndTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createUsername" label="创建单位">
      </el-table-column>
      <el-table-column align="center" prop="taskStatus" label="任务状态">
        <template v-slot="{ row }">
          <el-tag type="info" v-if="row.taskStatus == 1">未开始</el-tag>
          <el-tag type="success" v-if="row.taskStatus == 2">进行中</el-tag>
          <el-tag v-if="row.taskStatus == 3">已完结</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="hitNum" label="命中次数">
      </el-table-column>
      <el-table-column align="center" prop="manageName" label="负责人">
      </el-table-column>
      <el-table-column align="center" prop="managePhone" label="负责人手机号">
        <template v-slot="{ row }">
          {{ (row.managePhone || []).join(",") || "无" }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="historyControlNum"
        label="历史被布控次数"
      >
      </el-table-column>
      <el-table-column align="center" label="操作区" width="120">
        <template v-slot="{ row }">
          <el-button
            type="danger"
            size="small"
            @click="delOrder(row.warningPersonId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
      <!--分页栏-->
    </el-table>
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import {
  getwarningPersonGrade,
  getwarningPersonLogAdminList,
  getwarningPersonPageList,
  getwarningPersonDelete,
  getpersonBatchDelete,
} from "@/api/personnelWarning";
export default {
  components: { Pagination },
  data() {
    return {
      listLoading: false,
      option: [], //预警等级
      logAdminList: [],
      tableData: [],
      total: 0,
      // 页面
      page: {
        // 搜索表单
        data: {
          warningGrade: "",
          name: "",
          documentType: "",
          idNumber: "",
          warningType: "",
          taskName: "",
          controlAdminId: "",
          controlStartStartTime: "",
          controlStartEndTime: "",
          taskStatus: "",
          manageName: "",
          managePhone: "",
        },
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.fetchData();
    this.getwarningGrade();
    this.getLogAdminList();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getwarningPersonPageList(this.page).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    async getwarningGrade() {
      const res = await getwarningPersonGrade();
      this.option = res.data;
    },
    async getLogAdminList() {
      const res = await getwarningPersonLogAdminList();
      this.logAdminList = res.data;
    },
    // 删除
    delOrder(id) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        getwarningPersonDelete(id).then((res) => {
          this.fetchData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      });
    },
    delpersonBachAll() {
      this.$confirm("确定要删除当前查询条件的数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        getpersonBatchDelete(this.page.data).then((res) => {
          this.fetchData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      });
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.margin-left {
  margin: 10px 0 0 10px;
}
.input {
  width: 180px;
}
.tag-color {
  color: #fff !important;
}
</style>
