<template>
  <!-- 预约列表 -->
  <div class="app-container" v-loading="downloadLoading">
    <el-input
      v-model="page.data.name"
      placeholder="请输入姓名"
      class="margin-left input"
    ></el-input>
    <el-input
      v-model="page.data.phone"
      placeholder="请输入手机号"
      class="margin-left input"
    ></el-input>
    <el-input
      v-model="page.data.idNumber"
      placeholder="请输入身份证号"
      class="margin-left input"
    ></el-input>
    <el-select
      filterable
      clearable
      v-model="page.data.status"
      placeholder="请选择是否认证"
      class="margin-left input"
    >
      <el-option
        v-for="item in status_list"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <el-date-picker
      v-model="page.data.startTime"
      type="datetime"
      placeholder="预约时段开始日期"
      value-format="yyyy-MM-dd HH:mm:ss"
      class="margin-left"
    >
    </el-date-picker>
    <el-date-picker
      v-model="page.data.endTime"
      type="datetime"
      placeholder="预约时段结束日期"
      value-format="yyyy-MM-dd HH:mm:ss"
      class="margin-left"
    >
    </el-date-picker>
    <el-select
      v-model="page.data.type"
      clearable
      filterable
      placeholder="请选择人员类型"
      class="margin-left input"
    >
      <el-option
        v-for="item in userType_list"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <el-date-picker
      v-model="page.data.applyStartTime"
      type="datetime"
      placeholder="申请时间开始日期"
      value-format="yyyy-MM-dd HH:mm:ss"
      class="margin-left"
    >
    </el-date-picker>
    <el-date-picker
      v-model="page.data.applyEndTime"
      type="datetime"
      placeholder="申请时间结束日期"
      value-format="yyyy-MM-dd HH:mm:ss"
      class="margin-left"
    >
    </el-date-picker>
    <el-button
      type="primary"
      icon="el-icon-search"
      @click="fetchData"
      class="margin-left"
      >搜索</el-button
    >
    <!--主表格-->
    <el-table
      class="table"
      ref="table_form"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      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
            style="width: 70px; height: 70px"
            :src="scope.row.avatar"
            :preview-src-list="[scope.row.avatar]"
          >
            <div slot="error" class="image-slot">
              {{ scope.row.avatar ? "加载失败" : "暂无照片" }}
            </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">
          <el-tag effect="plain" type="success" v-if="scope.row.status === 1"
            >已认证</el-tag
          >
          <el-tag effect="plain" type="info" v-else-if="scope.row.status === 2"
            >未认证</el-tag
          >
          <el-tag effect="plain" type="info" v-else>未知</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="人员类型" align="center">
        <template slot-scope="scope">
          <el-tag effect="plain" type="success" v-if="scope.row.type === 0"
            >内宾</el-tag
          >
          <el-tag effect="plain" v-else-if="scope.row.type === 1">外宾</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="320">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="small"
            @click="deleteUser(scope.row.id)"
            >删除</el-button
          >
          <el-button
            type="primary"
            plain
            size="small"
            @click="reIssue(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
      :detailsList="detailsList"
      :dialogTableVisible="dialogTableVisible"
      @dialog="dialogTableVisible = false"
    />
  </div>
</template>

<script>
import detailsDialog from "@/views/make_appointment/components/dialog.vue";
import { checkRole, checkVisitorType } from "@/utils/checkRole";
import Pagination from "@/components/Pagination";
import {
  getUserListSearch,
} from "@/api/user_manage";
import {
  appointmentPerson,
  detail,
  issue,
  deleteId,
} from "@/api/ordinary_user";
export default {
  components: { Pagination, detailsDialog },
  filters: {
    matchNull(str) {
      if (!str) {
        return "未填写";
      } else {
        return str;
      }
    },
  },
  data() {
    return {
      // 主表格&主表格加载状态
      list: null,
      listLoading: true,
      downloadLoading: false, //导出加载
      isOut: this.$store.getters.isOut, // 是否可以导出
      // 分页参数
      page: {
        data: {
          username: null,
          name: "",
          phone: "",
          idNumber: "",
          status: null,
          contents: null,
          endTime: null,
          startTime: null,
          applyEndTime: null,
          applyEndTime: null,
          type: null,
        },
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      // 账号列表_搜索
      user_list: [],
      // 是否认证_搜索
      status_list: [
        { id: 1, name: "已认证" },
        { id: 2, name: "未认证" },
      ],
      // 是否认证_搜索
      userType_list: [
        { id: 0, name: "内宾" },
        { id: 1, name: "外宾" },
      ],
      // 详情
      dialogTableVisible: false,
      detailsList: {},
    };
  },
  created() {
    this.fetchData();
    this.getUserListSearch();
  },
  methods: {
    // 查询权限
    checkRole,
    // 查询功能权限
    checkVisitorType,
    // 获取列表数据
    fetchData() {
      this.listLoading = true;
      appointmentPerson(this.page).then((res) => {
        this.list = res.data.list;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    // 详情
    searchContent(row) {
      detail(row.id).then((res) => {
        this.dialogTableVisible = true;
        this.detailsList = res.data;
      });
    },
    // 删除账号
    deleteUser(id) {
      this.$confirm("确定要删除此人员吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        deleteId(id).then((res) => {
          this.fetchData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      });
    },
    // 获取账号列表数据_搜索
    getUserListSearch() {
      getUserListSearch().then((res) => {
        this.user_list = res.data;
      });
    },
    // 重新下发
    reIssue(id) {
      this.$confirm("确定要重新下发此工作人员吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        issue(id).then((res) => {
          this.fetchData();
          this.$message({
            type: "success",
            message: "下发成功!",
          });
        });
      });
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
  },
};
</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;
}
.avatar {
  /* width: 100px; */
  height: 100px;
}
.button-last {
  z-index: 9999;
}
</style>

