// 人员闸口记录
<template>
  <div class="app-container">
    <el-form
      :inline="true"
      :model="page.data"
      :class="page.data.iamge ? 'img-margin-left' : ''"
    >
      <!-- <el-form-item class="margin-left input">
        <div class="uploadImg">
          <span>人员照片查询</span>
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-remove="handleRemove"
          >
            <div class="img">
              <img
                src="../../assets/Frame.png"
                alt=""
                style="margin-top: 13px"
              />
            </div>
          </el-upload>
        </div>
      </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-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"
          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-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">
        <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-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>
    <div class="search-top-box" v-if="page.data.iamge">
      <div class="search-top-box-img">
        <img
          src="https://img0.baidu.com/it/u=256816879,771155532&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1717693200&t=ed7939d6d4260cc27dc8444ad91276c3"
          alt=""
        />
      </div>
    </div>
    <!-- 主体表格 -->
    <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" 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
            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"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import {
  getLogGatePageList,
  getLogGateExcel,
  getLogGateSnAddressList,
  getLogGateSnList,
} from "@/api/personnleCarActive";
export default {
  components: { Pagination },
  data() {
    return {
      archivesAuth: this.$store.getters.archivesAuth, //档案查询
      warningAuth: this.$store.getters.warningAuth, //人员/车辆预警
      listLoading: false,
      tableData: [],
      total: 0,
      // 页面
      page: {
        // 搜索表单
        data: {
          name: "",
          idNumber: "",
          snAddress: "",
          sn: "",
          startTime: "",
          endTime: "",
        },
        pageNum: 1,
        pageSize: 10,
      },
      SnAddressList: [],
      SnList: [],
    };
  },
  created() {
    this.fetchData();
    this.getGateSnAddressList();
    this.getGateSnList();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getLogGatePageList(this.page).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    async getGateSnAddressList() {
      const res = await getLogGateSnAddressList();
      this.SnAddressList = res.data.map((item) => {
        return { value: item };
      });
    },
    async getGateSnList() {
      const res = await getLogGateSnList();
      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());
      };
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 跳转布控
    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;
            getLogGateExcel(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: 200px;
}

.uploadImg {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #c0c4cc;
  // display: inline-block;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  width: 180px;
  .img {
    width: 30px;
    height: 30px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
.search-top-box {
  position: relative;
  height: 40px;
  border-radius: 12px 12px 0 0;
  margin-top: 20px;
  margin-bottom: 10px;
  background: linear-gradient(
    180deg,
    #007eff99 0%,
    rgba(72, 156, 242, 0.215367) 17.17%,
    rgba(255, 255, 255, 0) 100%
  );
  .search-top-box-img {
    position: absolute;
    top: -55px;
    left: 15px;
    width: 100px;
    height: 100px;
    border: 2px solid #409eff;
    border-radius: 10px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
.img-margin-left {
  margin-left: 120px;
}
</style>
