<template>
  <div v-loading="downloadLoading" class="app-container">
    <!--操作区-->
    <el-input
      v-model="page.data.name"
      placeholder="姓名"
      class="margin-left input"
    />
    <el-input
      v-model="page.data.phone"
      placeholder="手机号"
      class="margin-left input"
    />
    <el-input
      v-model="page.data.idNumber"
      placeholder="身份证号"
      class="margin-left input"
    />

    <el-input
      v-model="page.data.company"
      placeholder="单位"
      class="margin-left input"
    />
    <!-- <el-input
      v-model="page.data.floor"
      placeholder="楼层"
      class="margin-left input"
    ></el-input> -->
    <el-input
      v-model="page.data.visiteeXm"
      placeholder="受访人姓名"
      class="margin-left input"
    />
    <el-input
      v-model="page.data.visiteePhone"
      placeholder="受访人电话"
      class="margin-left input"
    />
    <el-input
      v-model="page.data.visiteeCompany"
      placeholder="受访人单位"
      class="margin-left input"
    />
    <el-select
      v-model="page.data.reason"
      clearable
      filterable
      placeholder="拜访事由"
      class="margin-left input"
    >
      <el-option
        v-for="item in causeMatterList"
        :key="item"
        :label="item"
        :value="item"
      />
    </el-select>
    <el-select
      v-model="page.data.isSignOut"
      clearable
      filterable
      placeholder="是否签离"
      class="margin-left input"
    >
      <el-option
        v-for="item in sign_off_list"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <el-select
      v-model="page.data.visitingType"
      clearable
      filterable
      placeholder="来访记录类型"
      class="margin-left input"
    >
      <el-option
        v-for="item in records_list"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <el-select
      v-model="page.data.reviewStatus"
      clearable
      filterable
      placeholder="审核状态"
      class="margin-left input"
    >
      <el-option
        v-for="item in check_list"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <el-date-picker
      v-model="page.data.startStartTime"
      type="datetime"
      placeholder="有效期开始时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      class="margin-left input"
    />
    <el-date-picker
      v-model="page.data.startEndTime"
      type="datetime"
      placeholder="有效期结束时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      class="margin-left input"
    />
    <el-date-picker
      v-model="page.data.signOutStartTime"
      type="datetime"
      placeholder="签离开始时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      class="margin-left input"
    />
    <el-date-picker
      v-model="page.data.signOutEndTime"
      type="datetime"
      placeholder="签离结束时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      class="margin-left input"
    />
    <el-button
      type="primary"
      icon="el-icon-search"
      class="margin-left"
      @click="fetchData"
    >搜索</el-button>
    <el-tooltip
      class="item"
      effect="dark"
      content="最大支持导出五万条数据！"
      placement="top-start"
    >
      <el-button
        v-if="isOut === 1"
        type="primary"
        icon="el-icon-download"
        class="margin-left"
        @click="download"
      >导出记录</el-button>
    </el-tooltip>
    <!--主表格-->
    <el-table
      ref="table_form"
      v-loading="listLoading"
      class="table"
      :data="list"
      element-loading-text="操作中，请耐心等待！"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" align="center" width="80px">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column label="实名照片" align="center">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.photo"
            style="width: 70px; height: 70px"
            fit="cover"
            :src="scope.row.photo"
            :preview-src-list="[scope.row.photo]"
          >
            <div slot="error" style="width: 70px;height: 70px;display: flex;justify-content: center;align-items: center;color:#C0C4CC;background-color: #F5F7FA;">暂无照片</div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="证件照片" align="center">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.xp"
            style="width: 70px; height: 70px"
            fit="cover"
            :src="scope.row.xp"
            :preview-src-list="[scope.row.xp]"
          >
            <div slot="error" style="width: 70px;height: 70px;display: flex;justify-content: center;align-items: center;color:#C0C4CC;background-color: #F5F7FA;">暂无照片</div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.name | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template slot-scope="scope">
          {{ scope.row.phone | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="身份证号" align="center">
        <template slot-scope="scope">
          {{ scope.row.idNumber | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="单位" align="center">
        <template slot-scope="scope">
          {{ scope.row.company | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="楼层" align="center">
        <template slot-scope="scope">
          {{ scope.row.floor | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="受访人姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.visiteeXm | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="受访人电话" align="center">
        <template slot-scope="scope">
          {{ scope.row.visiteePhone | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="受访人单位" align="center">
        <template slot-scope="scope">
          {{ scope.row.visiteeCompany | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="拜访事由" align="center">
        <template slot-scope="scope">
          {{ scope.row.reason | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="有效期开始时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.startTime | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="有效期结束时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.endTime | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="登记设备" align="center">
        <template slot-scope="scope">
          {{ scope.row.machineId | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="登记地点" align="center">
        <template slot-scope="scope">
          {{ scope.row.registerAddress | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="签离时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.signOutTime | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="签离设备" align="center">
        <template slot-scope="scope">
          {{ scope.row.signOutSn | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="签离地点" align="center">
        <template slot-scope="scope">
          {{ scope.row.signOutAddress | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="是否签离" align="center">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.isSignOut"
            effect="plain"
            type="success"
          >是</el-tag>
          <el-tag
            v-if="!scope.row.isSignOut"
            effect="plain"
            type="primary"
          >否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="来访记录类型" align="center" width="150">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.visitingType === 0"
            effect="plain"
            type="primary"
          >访客线上申请</el-tag>
          <el-tag
            v-if="scope.row.visitingType === 2"
            effect="plain"
            type="success"
          >访客线下申请</el-tag>
          <el-tag
            v-if="scope.row.visitingType === 1"
            effect="plain"
            type="danger"
          >常客线上{{
            `${
              scope.row.invitationWay === 1
                ? "短信"
                : scope.row.invitationWay == 0
                  ? "微信"
                  : ""
            }邀请`
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="审核状态" align="center">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.reviewStatus === 0"
            effect="plain"
            type="primary"
          >待审核</el-tag>
          <el-tag
            v-if="scope.row.reviewStatus === 1"
            effect="plain"
            type="info"
          >已拒绝</el-tag>
          <el-tag
            v-if="scope.row.reviewStatus === 2"
            effect="plain"
            type="success"
          >已同意</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime | matchNull }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="" label="操作区" :width="120">
        <template slot-scope="scope">
          <!-- <el-button
            type="danger"
            size="small"
            @click="deleteUser(scope.row.id)"
            >删除</el-button
          > -->
          <el-button
            type="primary"
            size="small"
            @click="searchContent(scope.row)"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
    <!-- 详情对话框 -->
    <detailsDialog
      :visit-to-jet-list="visitToJetList"
      :row="row"
      :dialog-table-visible="dialogTableVisible"
      @dialog="dialogTableVisible = false"
    />
  </div>
</template>

<script>
import detailsDialog from '@/views/visitors_record/compoment/dialog.vue'

import { getPageListVisitor } from '@/api/ordinary_user'
import { checkRole } from '@/utils/checkRole'
import Pagination from '@/components/Pagination'
import {
  getContext,
  getVisitorListFrom,
  deleteVisitor,
  userVisitorlistExcelOut,
  getDetailPageList,
  getDetailInfo, detailExcelOut
} from '@/api/user_manage'

export default {
  components: { Pagination, detailsDialog },
  filters: {
    matchNull(str) {
      if (!str) {
        return '-'
      } else {
        return str
      }
    },
    personnelType(str) {
      return str === 0 ? '访客' : str === 1 ? '同事' : str === 2 ? '亲属' : ''
    }
  },
  data() {
    return {
      // 主表格&主表格加载状态
      list: [],
      listLoading: true,
      downloadLoading: false, // 导出加载
      isOut: this.$store.getters.isOut, // 是否可以导出
      placeType: this.$store.getters.placeType, // 0普通1预约2楼宇
      // 分页参数
      page: {
        data: {
          username: null,
          name: '',
          phone: '',
          idNumber: '',
          company: null,
          floor: null,
          visiteeXm: null,
          visiteePhone: null,
          visiteeCompany: null,
          reason: null,
          isSignOut: null,
          startEndTime: null,
          startStartTime: null,
          signOutStartTime: null,
          signOutEndTime: null,
          visitingType: null,
          reviewStatus: null
        },
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      dialogTableVisible: false,
      visitToJetList: {}, // 详情
      row: null,
      sign_off_list: [
        { id: true, name: '已签离' },
        { id: false, name: '未签离' }
      ],
      causeMatterList: ['业务拜访', '会议邀请', '施工单位', '其他事项'],
      records_list: [
        { id: 0, name: '访客线上申请' },
        { id: 2, name: '访客线下申请' },
        { id: 1, name: '常客线上邀请' }
      ],
      check_list: [
        { id: 0, name: '待审核' },
        { id: 1, name: '已拒绝' },
        { id: 2, name: '已同意' }
      ]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 查询权限
    checkRole,
    // 获取列表数据
    async fetchData() {
      this.listLoading = true
      try {
        const res = await getDetailPageList(this.page)
        this.list = res.data.list
        this.total = res.data.total
        this.listLoading = false
      } catch (error) {
        this.listLoading = false
      }
    },
    // 查询详细信息
    searchContent(row) {
      this.row = row
      getDetailInfo(row.id).then((res) => {
        this.visitToJetList = res.data
        this.dialogTableVisible = true
      })
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1
    },
    // 导出记录
    download() {
      this.$prompt('请输入导出密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false
      })
        .then(({ value }) => {
          if (value == 'Nqj##361') {
            this.$message({
              type: 'success',
              message: '密码正确,正在下载...'
            })
            this.downloadLoading = true
            detailExcelOut(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)
              this.downloadLoading = false
            })
          } else {
            this.$message({
              type: 'error',
              message: '您输入的密码不正确'
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消导出'
          })
        })
    },
    // 删除
    deleteUser(id) {
      this.$confirm('确定要删除此人员吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteVisitor(id).then((res) => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      })
    }
  }
}
</script>

<style scoped>
.table {
  margin-top: 15px;
}
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.margin-left {
  margin: 10px 0 0 10px;
}
.margin-left-s {
  margin-left: 15px;
}
.input {
  width: 200px;
}
/*批量导入按钮*/
.file {
  margin: 10px 0 0 10px;
  position: relative;
  background: #d0eeff;
  border: 1px solid #99d3f5;
  border-radius: 4px;
  padding: 10px 20px;
  box-sizing: border-box;
  overflow: hidden;
  color: #1e88c7;
  text-decoration: none;
  text-indent: 0;
}
.file input {
  position: absolute;
  font-size: 14px;
  width: 106px;
  height: 40px;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
.file:hover {
  background: #aadffd;
  border-color: #78c3f3;
  color: #004974;
  text-decoration: none;
}
</style>

