// 人员进出港记录
<template>
  <div class="app-container">
    <el-form :inline="true" :model="page.data">
      <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-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.bookingStartTime"
          type="datetime"
          placeholder="订票/安检时间开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 210px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item class="margin-left">
        <el-date-picker
          v-model="page.data.bookingEndTime"
          type="datetime"
          placeholder="订票/安检时间结束时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 210px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-input
          clearable
          v-model="page.data.airlineNumber"
          placeholder="请输入航班号"
        ></el-input>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-autocomplete
          clearable
          v-model="page.data.airlineCompany"
          :fetch-suggestions="querySearch"
          placeholder="请输入航空公司"
        ></el-autocomplete>
      </el-form-item>
      <!-- <el-form-item class="margin-left input">
        <el-select
          v-model="page.data.airlineCompany"
          filterable
          clearable
          placeholder="请选择航空公司"
        >
          <el-option
            v-for="(item, index) in portAirlineCompanyList"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item class="margin-left input">
        <el-select
          v-model="page.data.departure"
          filterable
          clearable
          placeholder="请选择出发地"
        >
          <el-option
            v-for="(item, index) in portAddressList"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item class="margin-left input">
        <el-autocomplete
          clearable
          v-model="page.data.departure"
          :fetch-suggestions="queryDepartureSearch"
          placeholder="请输入出发地"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-autocomplete
          clearable
          v-model="page.data.destination"
          :fetch-suggestions="queryDepartureSearch"
          placeholder="请输入目的地"
        ></el-autocomplete>
      </el-form-item>
      <!-- <el-form-item class="margin-left input">
        <el-select
          v-model="page.data.destination"
          filterable
          clearable
          placeholder="请选择目的地"
        >
          <el-option
            v-for="(item, index) in portAddressList"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item class="margin-left">
        <el-date-picker
          v-model="page.data.takeOffStartTime"
          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.takeOffEndTime"
          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.arriveStartTime"
          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.arriveEndTime"
          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.status"
          filterable
          clearable
          placeholder="请选择状态"
        >
          <el-option
            v-for="item in portStatus"
            :key="item.code"
            :label="item.desc"
            :value="item.code"
          ></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-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="name" label="旅客姓名">
      </el-table-column>
      <el-table-column align="center" prop="idNumber" label="证件号码">
      </el-table-column>
      <el-table-column align="center" prop="bookingTime" label="订票/安检时间">
      </el-table-column>
      <el-table-column align="center" prop="airlineCompany" label="航空公司">
      </el-table-column>
      <el-table-column align="center" prop="airlineNumber" label="航班号">
      </el-table-column>
      <el-table-column align="center" prop="seatNumber" label="座位号">
      </el-table-column>
      <el-table-column align="center" prop="departure" label="出发地">
      </el-table-column>
      <el-table-column align="center" prop="destination" label="目的地">
      </el-table-column>
      <el-table-column align="center" prop="boardingGate" label="登机口">
      </el-table-column>
      <el-table-column align="center" prop="takeOffTime" label="起飞时间">
      </el-table-column>
      <el-table-column align="center" prop="arriveTime" label="到达时间">
      </el-table-column>
      <el-table-column align="center" prop="checkTime" label="安检时间">
      </el-table-column>
      <el-table-column align="center" prop="leaveTime" label="离港时间">
      </el-table-column>
      <el-table-column align="center" prop="status" label="状态">
        <template v-slot="{ row }">
          <el-tag effect="plain" v-if="row.status == 1">确认</el-tag>
          <el-tag effect="plain" type="info" v-if="row.status == 2"
            >取消</el-tag
          >
          <el-tag effect="plain" type="warning" v-if="row.status == 3"
            >候补</el-tag
          >
          <el-tag effect="plain" style="color: #19d0f9" v-if="row.status == 4"
            >申请</el-tag
          >
          <el-tag effect="plain" type="success" v-if="row.status == 5"
            >已登机</el-tag
          >
          <el-tag effect="plain" type="danger" v-if="row.status == 6"
            >未登机</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作区" width="180">
        <template v-slot="{ row }">
          <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"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import {
  getLogPortPageList,
  getLogPortStatus,
  getLogPortExcel,
  getLogPortAirlineCompanyList,
  getLogPortAddressList,
} from "@/api/personnleCarActive";
export default {
  components: { Pagination },
  data() {
    return {
      archivesAuth: this.$store.getters.archivesAuth, //档案查询
      warningAuth: this.$store.getters.warningAuth, //人员/车辆预警
      listLoading: false,
      tableData: [],
      portStatus: [], //状态
      total: 0,
      // 页面
      page: {
        // 搜索表单
        data: {
          name: "",
          idNumber: "",
          bookingStartTime: "",
          bookingEndTime: "",
          airlineNumber: "",
          airlineCompany: "",
          departure: "",
          destination: "",
          takeOffStartTime: "",
          takeOffEndTime: "",
          arriveStartTime: "",
          arriveEndTime: "",
          status: "",
        },
        pageNum: 1,
        pageSize: 10,
      },
      portAirlineCompanyList: [],
      portAddressList: [],
    };
  },
  created() {
    this.fetchData();
    this.getPortStatus();
    this.getPortAirlineCompanyList();
    this.getPortAddressList();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getLogPortPageList(this.page).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    // 状态获取
    async getPortStatus() {
      const res = await getLogPortStatus();
      this.portStatus = res.data;
    },
    // 航空公司列表
    async getPortAirlineCompanyList() {
      const res = await getLogPortAirlineCompanyList();
      this.portAirlineCompanyList = res.data.map((item) => {
        return { value: item };
      });
    },
    // 出发地目的地
    async getPortAddressList() {
      const res = await getLogPortAddressList();
      this.portAddressList = res.data.map((item) => {
        return { value: item };
      });
    },
    // 航空公司
    querySearch(queryString, cb) {
      let restaurants = this.portAirlineCompanyList;
      let results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 出发地
    queryDepartureSearch(queryString, cb) {
      let restaurants = this.portAddressList;
      let results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant.value
          .toLowerCase()
          .includes(queryString.toLowerCase());
      };
    },
    // 跳转布控
    control(rowData) {
      this.$router.push({
        name: "personnelReview",
        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;
            getLogPortExcel(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: 180px;
}
</style>
