// 车牌号布控配置
<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"
          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"
          clearable
          filterable
          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 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="datetime"
          placeholder="选择布控开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 200px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item class="margin-left">
        <el-date-picker
          v-model="page.data.controlStartEndTime"
          type="datetime"
          placeholder="选择布控结束时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 200px"
        >
        </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="delCarBachAll"
          >批量删除</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="carNumber" label="车牌号">
      </el-table-column>
      <el-table-column align="center" prop="carTypeName" label="布控车辆类型">
        <template v-slot="{ row }">
          <el-tag effect="plain">{{ row.carTypeName || "未知" }}</el-tag>
        </template>
      </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.warningCarId)"
            >删除</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,
} from "@/api/personnelWarning";
import {
  getwarningCargrade,
  getwarningCarPageList,
  getwarningCarDelete,
  getcarBatchDelete,
} from "@/api/carWarning";
export default {
  components: { Pagination },
  data() {
    return {
      listLoading: false,
      option: [],
      cargradeList: [],
      logAdminList: [],
      tableData: [],
      total: 0,
      // 页面
      page: {
        // 搜索表单
        data: {
          warningGrade: "",
          carNumber: "",
          carType: "",
          controlAdminId: "",
          taskStatus: "",
          manageName: "",
          managePhone: "",
          controlStartStartTime: "",
          controlStartEndTime: "",
        },
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.fetchData();
    this.getwarningGrade();
    this.getwarningCargrade();
    this.getLogAdminList();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getwarningCarPageList(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 getwarningCargrade() {
      const res = await getwarningCargrade();
      this.cargradeList = res.data;
    },
    async getLogAdminList() {
      const res = await getwarningPersonLogAdminList();
      this.logAdminList = res.data;
    },

    // 删除
    delOrder(id) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        getwarningCarDelete(id).then((res) => {
          this.fetchData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      });
    },
    delCarBachAll() {
      this.$confirm("确定要删除当前查询条件的数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        getcarBatchDelete(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;
}
.flex {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0px;
  }
}
.content {
  display: flex;
  justify-content: space-between;
}
.shopInfo {
  width: 410px;
}
/* 商品信息 */
.shopInfo-top {
  display: flex;
}
.shopInfo-content {
  margin-left: 10px;
}
.shopInfo-top-left {
  width: 3px;
  height: 16px;
  border-radius: 13px;
  background: #409eff;
  margin-right: 8px;
  font-size: 16px;
}
/* 商品名称 */
.shopInfo-name {
  color: #333;
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  margin: 10px 0 4px 0;
}
/* 图片区域 */
.shopInfo-img {
  display: flex;
  flex-wrap: wrap;
}
.shopInfo-img1 {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  margin-right: 12px;
  margin-top: 20px;
}
.shopInfo-img1-1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 购买方选择商品信息 */
.shopInfo-between {
  width: 350px;
}
.shopInfo-spec {
  margin: 8px 0 24px 0;
  padding: 20px 12px 12px;
  background-color: rgba(245, 248, 253, 0.78);
}
.content-info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}
.item-left {
  color: #333;
  font-size: 14px;
  font-weight: 400;
  width: 110px;
}
.item-right {
  color: #333;
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  width: calc(100% - 70px);
}
/* 配送信息 */

::v-deep .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}
.table {
  margin-top: 15px;
}
::v-deep .el-tag {
  margin-right: 0px;
}
::v-deep .tag-card .card-center[data-v-ed675466] {
  padding: 18px 0px;
}
.tag-color {
  color: #fff !important;
}
</style>
