// 车牌号预警记录
<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.carNumber"
          placeholder="请输入车牌号"
        ></el-input>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-select
          v-model="page.data.carType"
          filterable
          clearable
          placeholder="请选择车辆类型"
        >
          <el-option
            v-for="item in cargradeList"
            :key="item.code"
            :label="item.desc"
            :value="item.code"
          ></el-option>
        </el-select>
      </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"
          style="width: 150px"
        >
        </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"
          style="width: 150px"
        >
        </el-date-picker>
      </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.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-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="carNumber" label="车牌号">
      </el-table-column>
      <el-table-column align="center" prop="carType" label="车辆类型">
        <template v-slot="{ row }">
          <el-tag effect="plain">{{ formatStatus(row.carType).desc }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="warningTime" label="预警时间">
      </el-table-column>
      <el-table-column align="center" prop="warningAddress" 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: #3bd3dc; border-color: #3bd3dc; margin: 5px"
            effect="plain"
            v-if="row.warningHitTypeList.includes(1)"
            >布控预警</el-tag
          >
          <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
          >
        </template>
      </el-table-column>
      <el-table-column align="center" prop="expressCompany" label="布控单位">
        <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>
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
    <!-- 表格 -->
    <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,
  getwarningPersonLogAdminList,
} from "@/api/personnelWarning";
import {
  getwarningCargrade,
  getwarningCarLogPageList,
  getCarwarningHitType,
} from "@/api/carWarning";
export default {
  components: { Pagination },
  data() {
    return {
      listLoading: false,
      option: [],
      warningHitType: [],
      logAdminList: [],
      cargradeList: [],
      dialogVisibleName: false, //名单信息
      tableData: [],
      nameTableData: null, //名单数据
      total: 0,
      // 页面
      page: {
        // 搜索表单
        data: {
          warningGrade: "",
          carNumber: "",
          carType: "",
          warningAddress: "",
          warningHitType: "",
          controlAdminId: "",
          startTime: "",
          endTime: "",
        },
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.fetchData();
    this.getwarningGrade();
    this.getWarningHitType();
    this.getLogAdminList();
    this.getwarningCargrade();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getwarningCarLogPageList(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 getWarningHitType() {
      const res = await getCarwarningHitType();
      this.warningHitType = res.data;
    },
    async getLogAdminList() {
      const res = await getwarningPersonLogAdminList();
      this.logAdminList = res.data;
    },
    async getwarningCargrade() {
      const res = await getwarningCargrade();
      this.cargradeList = res.data;
    },
    // 查看名单
    async getNameList(row) {
      this.dialogVisibleName = true;
      this.nameTableData = row;
    },
    formatStatus(type) {
      const value = this.cargradeList.find((item) => item.code == type);
      return {
        desc: value?.desc,
      };
    },
    // 返回列表序号
    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;
}

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