<template>
  <div class="app-container">
    <!--操作区-->
    <el-button
      type="primary"
      icon="el-icon-plus"
      @click="create('add')"
      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.userWhitelistLessVO.avatar"
            :preview-src-list="[scope.row.userWhitelistLessVO.avatar]"
          >
            <div slot="error" class="image-slot">
              {{ scope.row.userWhitelistLessVO.avatar ? "加载失败" : "暂无照片" }}
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="所属企业" align="center">
        <template slot-scope="scope">
          {{ scope.row.userWhitelistLessVO.username | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.userWhitelistLessVO.name | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template slot-scope="scope">
          {{ scope.row.userWhitelistLessVO.phone | desensitization( 3, 7) }}
        </template>
      </el-table-column>
      <el-table-column label="身份证号" align="center">
        <template slot-scope="scope">
          {{ scope.row.userWhitelistLessVO.idNumber | desensitization( 6,14) }}
        </template>
      </el-table-column>
      <el-table-column label="卡号" align="center">
        <template slot-scope="scope">
          {{ scope.row.userWhitelistLessVO.cardIdEx | matchNull }}
        </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="100">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="small"
            @click="deleteUser(scope.row.userWhitelistCheckId)"
            >删除</el-button
          >
          <!-- <el-button
            type="primary"
            size="small"
            @click="create('update', scope.row)"
            >编辑</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="添加审核人"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        label-position="left"
      >
        <el-form-item label="选择企业" prop="adminId">
          <el-select
            style="width: 100%"
            filterable
            clearable
            v-model="form.adminId"
            placeholder="请选择企业"
            @change="getUserWhitelist"
          >
            <el-option
              v-for="item in admin_list"
              :key="item.adminId"
              :label="item.username"
              :value="item.adminId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核人员" prop="adminId">
          <el-select
            style="width: 100%"
            filterable
            clearable
            v-model="form.userWhitelistId"
            placeholder="请选择审核人"
          >
            <el-option
              v-for="item in user_list"
              :key="item.userWhitelistId"
              :label="item.name"
              :value="item.userWhitelistId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="add()"> 确定 </el-button>
      </div>
    </el-dialog>
    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
  </div>
</template>
<script>
import {
  userWhitelistCheckGetPageList,
  getUserWhitelist,getAdminList,
  userWhitelistCheckInsert,
  userWhitelistCheckDelete,
} from "@/api/ordinary_user";
import Pagination from "@/components/Pagination";
export default {
  components: { Pagination },
  filters: {
    matchNull(str) {
      if (!str) {
        return "未填写";
      } else {
        return str;
      }
    },
    // 脱敏
    desensitization(string = "", start, end) {
      if (string) {
        var star = "";
        function makeStar(number) {
          if (number > 0) {
            star += "*";
            return makeStar(--number);
          } else {
            return star;
          }
        }
        return (
          string.substring(0, start) +
          makeStar(end - start) +
          string.substring(end)
        );
      }
    },
  },
  data() {
    return {
      // 主表格&主表格加载状态
      list: null,
      listLoading: true,
      // 分页参数
      page: {
        data: {},
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      // 对话框标题
      dialogTitle: {
        add: "添加审核人",
        update: "编辑审核人",
      },
      dialogType: "add",
      form: {
        adminId:null,
        userWhitelistId:null,
      },
      form_copy: {},
      rules: {
        adminId: [{ required: true, message: "请选择", trigger: "blur" }],
        userWhitelistId: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      dialogVisible: false,
      adminId: this.$store.getters.adminId,
      user_list: [],
      admin_list: [],
    };
  },
  created() {
    this.fetchData();
    this.getAdminList();
    this.form_copy = JSON.parse(JSON.stringify(this.form));
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      userWhitelistCheckGetPageList(this.page).then((res) => {
        this.list = res.data.list;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    getAdminList() {
      getAdminList(this.adminId).then((res) => {
        this.admin_list = res.data;
      });
    },
    getUserWhitelist(e){
      this.form.userWhitelistId=null
      getUserWhitelist(e).then(res=>{
        this.user_list=res.data
      })
    },
    // 打开添加对话框
    create(type) {
      this.form = JSON.parse(JSON.stringify(this.form_copy));
      this.dialogType = type;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    // 确定添加
    add() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          userWhitelistCheckInsert(this.form).then((res) => {
            this.dialogVisible = false;
            this.fetchData();
            this.$message({
              type: "success",
              message: "添加成功!",
            });
          });
        }
      });
    },
    // 删除
    deleteUser(id) {
      this.$confirm("确定要删除此人员吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        userWhitelistCheckDelete(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 lang="scss">
.table {
  margin-top: 15px;
}
</style>
