// 人员预警记录
<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
          clearable
          v-model="page.data.name"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-select
          v-model="page.data.documentType"
          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">
        <el-date-picker
          v-model="page.data.startTime"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item class="margin-left">
        <el-date-picker
          v-model="page.data.endTime"
          type="datetime"
          placeholder="选择结束时间"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-select
          v-model="page.data.warningHitType"
          clearable
          placeholder="请选择预警类型"
        >
          <el-option
            v-for="item in warningHitType"
            :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
          clearable
          v-model="page.data.warningAddress"
          placeholder="请输入预警地点"
        ></el-input>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-select
          v-model="page.data.dataType"
          clearable
          placeholder="请选择预警来源"
        >
          <el-option
            v-for="item in warningSource"
            :key="item.code"
            :label="item.desc"
            :value="item.code"
          ></el-option>
        </el-select>
      </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-button type="primary" @click="fetchData" icon="el-icon-search"
          >搜索</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="photo" label="人员照片">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.photo"
            style="width: 100px; height: 100px"
            :src="scope.row.photo"
            :preview-src-list="[scope.row.photo]"
          ></el-image>
          <span v-else>无</span>
        </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 effect="plain" v-if="row.documentType == 2">身份证</el-tag>
          <el-tag type="warning" 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="warningTime" label="预警时间">
      </el-table-column>
      <el-table-column align="center" prop="warningReason" label="预警内容">
      </el-table-column>
      <el-table-column
        align="center"
        prop="warningHitTypeList"
        label="预警类型"
      >
        <template v-slot="{ row }">
          <el-tag
            style="color: #53c1ff; border-color: #53c1ff; margin: 5px"
            effect="plain"
            v-if="row.warningHitTypeList.includes(2)"
            >七类重点预警</el-tag
          >
          <el-tag
            style="color: #53c1ff; border-color: #53c1ff; margin: 5px"
            effect="plain"
            v-if="row.warningHitTypeList.includes(3)"
            >民族预警</el-tag
          >
          <el-tag
            style="color: #53c1ff; border-color: #53c1ff; margin: 5px"
            effect="plain"
            v-if="row.warningHitTypeList.includes(4)"
            >年龄预警</el-tag
          >
          <el-tag
            style="color: #3bd3dc; border-color: #3bd3dc; margin: 5px"
            effect="plain"
            v-if="row.warningHitTypeList.includes(1)"
            >布控预警</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column align="center" prop="warningAddress" label="预警地点">
      </el-table-column>
      <el-table-column align="center" prop="sn" label="设备sn">
      </el-table-column>
      <el-table-column align="center" prop="dataType" label="预警来源">
        <template v-slot="{ row }">
          <el-tag effect="plain">{{
            row.dataType == 1
              ? "人员闸口记录"
              : row.dataType == 2
              ? "人员摄像头记录"
              : row.dataType == 3
              ? "人员进出港记录"
              : "车辆卡口记录"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="controlUsername" label="布控单位">
        <!-- <template v-slot="{ row }">
          {{
            (row.detailList || [])
              .filter((v) => v.controlUsername)
              .map((item) => item.controlUsername)
              .join("、") || "无"
          }}
        </template> -->
        <template v-slot="{ row }">
          <el-button
            v-if="row.detailVoList.length > 0"
            type="primary"
            size="small"
            @click="getNameList(row.detailVoList)"
            >单位名单</el-button
          >
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作区" width="180">
        <template v-slot="{ row }">
          <el-button type="primary" size="small" @click="getDetail(row)"
            >详情</el-button
          >
          <el-button
            type="primary"
            v-if="row.personId && row.idNumber && archivesAuth"
            plain
            size="small"
            @click="getInfo(row)"
            >人员档案</el-button
          >
        </template>
      </el-table-column>
      <!--分页栏-->
    </el-table>
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
    <!-- 详情 -->
    <el-dialog
      title="预警记录详情"
      :visible.sync="dialogVisible"
      width="900px"
      :close-on-click-modal="false"
    >
      <div class="detail-box">
        <!-- 基本信息 -->
        <div class="item-layout">
          <span class="prompt">基本信息</span>
          <div style="margin-top: 15px">
            <el-descriptions :column="1">
              <el-descriptions-item label="人员照片"
                ><el-image
                  v-if="detailData.photo"
                  style="width: 93px; height: 124px"
                  :src="detailData.photo"
                  alt=""
                />
                <span style="width: 93px; height: 124px" v-else
                  >无</span
                ></el-descriptions-item
              >
              <el-descriptions-item label="人员姓名">{{
                detailData.name
              }}</el-descriptions-item>
              <el-descriptions-item label="证件类型"
                ><el-tag>{{
                  detailData.documentType == 1 ? "护照" : "身份证"
                }}</el-tag></el-descriptions-item
              >
              <el-descriptions-item label="证  件  号">
                {{ detailData.idNumber }}
              </el-descriptions-item>
              <el-descriptions-item label="预警时间">{{
                detailData.warningTime
              }}</el-descriptions-item>
              <el-descriptions-item label="预警地点">{{
                detailData.warningAddress
              }}</el-descriptions-item>
              <el-descriptions-item label="设 备 sn">{{
                detailData.sn
              }}</el-descriptions-item>
              <el-descriptions-item label="预警来源"
                ><el-tag>{{
                  detailData.dataType == 1
                    ? "人员闸口记录"
                    : detailData.dataType == 2
                    ? "人员摄像头记录"
                    : detailData.dataType == 3
                    ? "人员进出港记录"
                    : "车辆卡口记录"
                }}</el-tag></el-descriptions-item
              >
            </el-descriptions>
          </div>
        </div>
        <div class="item-layout">
          <span class="prompt">预警信息</span>
          <div style="margin-top: 15px">
            <div
              class="detail-list-box"
              v-for="(item, index) in detailData.detailList"
              :key="index"
            >
              <div class="detail-list-left">
                <div class="detail-left-text">
                  {{ formatWarningHitType(item.warningHitType).desc }}
                </div>
              </div>
              <div class="detail-list-right">
                <div
                  class="trade-type"
                  :style="{
                    backgroundColor: formatStatus(item.warningGrade).color,
                  }"
                >
                  {{ formatStatus(item.warningGrade).name }}
                </div>
                <div class="detail-right-info">
                  <div>{{ item.info }}</div>
                  <div v-if="item.documentType">
                    证件类型：<el-tag>{{
                      item.documentType == 1 ? "护照" : "身份证"
                    }}</el-tag>
                  </div>
                  <div v-if="item.idNumber">证件号：{{ item.idNumber }}</div>
                  <div v-if="item.controlUsername">
                    布控单位：{{ item.controlUsername }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 表格 -->
    <el-dialog
      title="布控单位名单"
      :visible.sync="dialogVisibleName"
      width="900px"
      :close-on-click-modal="false"
    >
      <el-table
        :data="nameTableData"
        border
        fit
        highlight-current-row
        class="table"
      >
        <el-table-column
          align="center"
          prop="controlUsername"
          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="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="taskName" label="任务名称">
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisibleName = false">取 消</el-button> -->
        <el-button type="primary" @click="dialogVisibleName = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import {
  getwarningPersonGrade,
  getwarningPersonWarningHitType,
  getwarningPersonLogAdminList,
  getwarningPersonPersonLogPageList,
  getwarningPersonWarningSource,
} from "@/api/personnelWarning";
export default {
  components: { Pagination },
  data() {
    return {
      archivesAuth: this.$store.getters.archivesAuth, //档案查询
      dialogVisible: false,
      listLoading: false,
      option: [], //预警等级列表
      isEdit: false, //判断是否是编辑
      dialogVisibleName: false, //名单信息
      tableData: [],
      nameTableData: null, //名单数据
      total: 0,
      // 页面
      page: {
        // 搜索表单
        data: {
          warningGrade: "",
          name: "",
          documentType: "",
          idNumber: "",
          warningAddress: "",
          warningHitType: "",
          startTime: "",
          endTime: "",
          controlAdminId: "",
          dataType: "",
        },
        pageNum: 1,
        pageSize: 10,
      },
      warningHitType: [], //预警类型
      logAdminList: [],
      warningSource: [], //预警来源
      detailData: {},
      warning_list: [
        {
          name: "Ⅰ级",
          status: 1,
          color: "#B60ED1",
        },
        {
          name: "Ⅱ级",
          status: 2,
          color: "#FF5C66",
        },
        {
          name: "Ⅲ级",
          status: 3,
          color: "#FF8B49",
        },
        {
          name: "Ⅳ级",
          status: 4,
          color: "#FFC52F",
        },
        {
          name: "Ⅴ级",
          status: 5,
          color: "#78D1E5",
        },
      ],
    };
  },
  created() {
    this.fetchData();
    this.getwarningGrade();
    this.getWarningHitType();
    this.getLogAdminList();
    this.getWarningSource();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getwarningPersonPersonLogPageList(this.page).then((res) => {
        this.tableData = res.data.records;
        // console.log(res.data.records);
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    async getWarningSource() {
      const res = await getwarningPersonWarningSource();
      this.warningSource = res.data;
    },
    async getwarningGrade() {
      const res = await getwarningPersonGrade();
      this.option = res.data;
    },
    async getWarningHitType() {
      const res = await getwarningPersonWarningHitType();
      this.warningHitType = res.data;
    },
    async getLogAdminList() {
      const res = await getwarningPersonLogAdminList();
      this.logAdminList = res.data;
    },
    getDetail(row) {
      // console.log(row, 2);
      this.detailData = row;
      this.dialogVisible = true;
    },
    // 查看名单
    async getNameList(row) {
      this.dialogVisibleName = true;
      this.nameTableData = row;
    },
    formatWarningHitType(type) {
      const value = this.warningHitType.find((item) => item.code == type);
      return {
        desc: value?.desc,
      };
    },
    formatStatus(type) {
      const value = this.warning_list.find((item) => item.status == type);
      this.warning_color = value?.color;
      return {
        name: value?.name,
        color: value?.color,
      };
    },
    // 跳转人员档案
    getInfo(rowData) {
      this.$router.push({
        name: "personnelFiles",
        params: { rowData },
      });
    },
    // 返回列表序号
    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: 170px;
}
.detail-box {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-left: 20px;
  .item-layout {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
    &:before {
      position: absolute;
      top: 1px;
      left: -10px;
      width: 3px;
      height: 16px;
      content: "";
      background-color: #409eff;
      border-radius: 3px;
    }
    .prompt {
      font-size: 16px;
      font-weight: 600;
      color: #333333;
    }
    .detail-list-box {
      display: flex;
      align-items: flex-start;
      margin-bottom: 10px;
      .detail-list-left {
        width: 130px;
        .detail-left-text {
          display: inline-block;
          padding: 4px 16px;
          border-radius: 46px;
          background-color: #f5f8fc;
          font-size: 14px;
          font-weight: 500;
          line-height: 21px;
          color: #3e9dff;
        }
      }
      .detail-list-right {
        display: flex;
        align-items: flex-start;
        .trade-type {
          margin-right: 5px;
          color: #fff;
          border-radius: 4px;
          height: 28px;
          box-sizing: border-box;
          line-height: 25px;
          padding: 2px 12px;
          font-size: 14px;
          font-weight: 500;
        }
        .detail-right-info {
          line-height: 25px;
          // display: flex;
        }
      }
    }
  }
}

.tag-color {
  color: #fff !important;
}
</style>
