// 车辆卡口记录
<template>
  <div class="app-container">
    <el-form :inline="true" :model="page.data">
      <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: 200px"
        >
        </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: 200px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item class="margin-left">
        <el-autocomplete
          clearable
          v-model="page.data.snAddress"
          :fetch-suggestions="querySearch"
          placeholder="请输入设备通行地点"
          style="width: 230px"
        ></el-autocomplete>
      </el-form-item>
      <!-- <el-form-item class="margin-left">
        <el-select
          v-model="page.data.snAddress"
          filterable
          clearable
          placeholder="请选择设备通行地点"
          style="width: 230px"
        >
          <el-option
            v-for="(item, index) in snAddressList"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item class="margin-left">
        <el-select
          v-model="page.data.sn"
          filterable
          clearable
          placeholder="请选择设备SN"
          style="width: 230px"
        >
          <el-option
            v-for="(item, index) in snList"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item class="margin-left">
        <el-autocomplete
          clearable
          v-model="page.data.sn"
          :fetch-suggestions="querySnSearch"
          placeholder="请输入设备SN"
          style="width: 230px"
        ></el-autocomplete>
      </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">
        <el-button type="primary" @click="fetchData" icon="el-icon-search"
          >搜索</el-button
        >
      </el-form-item>
      <el-form-item class="margin-left">
        <el-tooltip
          class="item"
          effect="dark"
          content="最大支持导出五万条数据！"
          placement="top-start"
        >
          <el-button type="primary" icon="el-icon-download" @click="download"
            >导出记录</el-button
          >
        </el-tooltip>
      </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="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="idNumber" label="证件号">
      </el-table-column>
      <el-table-column align="center" prop="passTime" label="通行时间">
      </el-table-column>
      <el-table-column align="center" prop="snAddress" label="通行地点">
      </el-table-column>
      <el-table-column align="center" prop="sn" label="设备SN">
      </el-table-column>
      <el-table-column align="center" prop="carNumber" label="车牌号">
      </el-table-column>
      <el-table-column align="center" label="操作区" width="280">
        <template v-slot="{ row }"
          ><el-button
            v-if="row.carNumber && row.carNumber != '无车牌'"
            type="primary"
            size="small"
            @click="carTrajectory(row)"
            >车辆轨迹</el-button
          >
          <el-button
            v-if="row.idNumber && warningAuth"
            type="primary"
            size="small"
            @click="control(row)"
            >布控</el-button
          >
          <el-button
            v-if="row.personId && row.idNumber && archivesAuth"
            type="primary"
            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="dialogVisibleCar"
      width="1200px"
      :close-on-click-modal="false"
    >
      <el-table
        :data="carTableData"
        v-loading="carlistLoading"
        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="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="idNumber" label="证件号">
        </el-table-column>
        <el-table-column align="center" prop="passTime" label="通行时间">
        </el-table-column>
        <el-table-column align="center" prop="snAddress" label="通行地点">
        </el-table-column>
        <el-table-column align="center" prop="sn" label="设备SN">
        </el-table-column>
        <el-table-column align="center" prop="carNumber" label="车牌号">
        </el-table-column>
      </el-table>
      <pagination
        :total="cartotal"
        :page.sync="carPage.pageNum"
        :limit.sync="carPage.pageSize"
        @pagination="_carTrajectoryPage"
      />
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisibleName = false">取 消</el-button> -->
        <el-button type="primary" @click="dialogVisibleCar = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import {
  getLogCarCapturePageList,
  getLogCarCaptureExcel,
  getLogCarSnAddressList,
  getLogCarSnList,
  getLogCarTrajectoryPageList,
} from "@/api/personnleCarActive";
export default {
  components: { Pagination },
  data() {
    return {
      archivesAuth: this.$store.getters.archivesAuth, //档案查询
      warningAuth: this.$store.getters.warningAuth, //人员/车辆预警
      listLoading: false,
      carlistLoading: false,
      dialogVisibleCar: false,
      tableData: [],
      carTableData: [],
      total: 0,
      cartotal: 0,
      // 页面
      page: {
        // 搜索表单
        data: {
          startTime: "",
          endTime: "",
          snAddress: "",
          sn: "",
          carNumber: "",
        },
        pageNum: 1,
        pageSize: 10,
      },
      carPage: {
        // 搜索表单
        data: {
          carNumber: "",
        },
        pageNum: 1,
        pageSize: 10,
      },
      snAddressList: [],
      snList: [],
    };
  },
  created() {
    this.fetchData();
    this.getCarSnAddressList();
    this.getCarSnList();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getLogCarCapturePageList(this.page).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    // 设备通行地点
    async getCarSnAddressList() {
      const res = await getLogCarSnAddressList();
      this.snAddressList = res.data.map((item) => {
        return { value: item };
      });
    },
    async getCarSnList() {
      const res = await getLogCarSnList();
      this.snList = res.data.map((item) => {
        return { value: item };
      });
    },
    // 设备地点
    querySearch(queryString, cb) {
      let restaurants = this.snAddressList;
      let results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // sn
    querySnSearch(queryString, cb) {
      let restaurants = this.snList;
      let results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant.value
          .toLowerCase()
          .includes(queryString.toLowerCase());
      };
    },
    // 车辆轨迹
    carTrajectory(row) {
      this.carPage.data.carNumber = row.carNumber;
      this.dialogVisibleCar = true;
      this._carTrajectoryPage();
    },
    _carTrajectoryPage() {
      this.carlistLoading = true;
      getLogCarTrajectoryPageList(this.carPage).then((res) => {
        this.carTableData = res.data.records;
        this.cartotal = res.data.total;
        this.carlistLoading = false;
      });
    },
    // 跳转布控
    control(rowData) {
      this.$router.push({
        name: "carReview",
        params: { rowData },
      });
    },
    // 跳转人员档案
    getInfo(rowData) {
      this.$router.push({
        name: "personnelFiles",
        params: { rowData },
      });
    },
    // 导出记录
    download() {
      this.$prompt("请输入导出密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
      })
        .then(({ value }) => {
          if (value == "Nqj##361") {
            this.$message({
              type: "success",
              message: "密码正确,正在下载...",
            });
            // this.downloadLoading = true;
            getLogCarCaptureExcel(this.page.data).then((res) => {
              var eleLink = document.createElement("a");
              eleLink.style.display = "none";
              // 字符内容转变成blob地址
              var blob = new Blob([res]);
              eleLink.href = URL.createObjectURL(blob);
              eleLink.setAttribute("download", "人员闸口记录.xlsx");
              // 自动触发点击
              document.body.appendChild(eleLink);
              eleLink.click();
              // 然后移除
              document.body.removeChild(eleLink);
              // window.location.href = res.data;
              // this.downloadLoading = false;
            });
          } else {
            this.$message({
              type: "error",
              message: "您输入的密码不正确",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            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: 210px;
}
</style>
