<template>
  <div class="app-container">
    <div class="seetingsDiv" style="">
      <div class="flex">
        <el-input placeholder="输入关键字搜索" v-model="query.keyword"></el-input>
        <el-button type="success" @click="search">搜索</el-button>
        <el-button v-if="selectedList.length" type="primary" @click="handleInviteInterview"
          >邀请面试</el-button
        >
      </div>
      <el-upload
        class="upload-demo"
        action="/api/Account/ImportUser"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">导入用户</el-button>
      </el-upload>
    </div>
    <el-table
      :data="userList"
      id="QuestionTable"
      border
      style="
        width: 100%;
        border-radius: 5px;
        box-shadow: 0 0 10px #efefef;
        margin-top: 10px;
      "
      @selection-change="handleSelectionChange"
      :stripe="true"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        type="index"
        prop="date"
        width="50"
        align="center"
      ></el-table-column>
      <el-table-column prop="date" label="用户昵称">
        <template slot-scope="scope">
          <span>{{ scope.row.fullName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="电话号码">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="scope.row.phone"
            placement="top-start"
          >
            <span>{{ scope.row.phone1 }}</span>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column prop="date" label="注册时间">
        <template slot-scope="scope">
          <span>{{ scope.row.addTime.replace("T", " ") }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @current-change="currentchange"
      style="position: static; bottom: 3px; text-align: center; margin-top: 5px"
      :page-size="this.query.PageSize"
      layout="total,prev, pager, next"
      :total="Count"
    >
    </el-pagination>
  </div>
</template>

<script>
import { ImportUserByExcel, GetUserList } from "@/api/user";
export default {
  data() {
    return {
      userList: [],
      Count: 0,
      type: "1",
      query: {
        UserTypeEnum: 1, //0：管理员，1普通用户
        PageIndex: 1,
        PageSize: 10,
        keyword:''
      },
      fileList:[],
      selectedList: [],
    };
  },
  created() {
    this.GetUser();
  },
  methods: {
    search(){
      this.GetUser();
    },
    handleInviteInterview() {},
    handleSelectionChange(val) {
      console.log(val);
      this.selectedList = val;
    },
    handleExceed(){},
    ImportUser() {},
    GetUser() {
      GetUserList(this.query).then((res) => {
        this.userList = res.data.data.rows.map((t) => {
          if (t.phone) {
            t.phone1 = t.phone.replace(t.phone.substring(3, 7), "****");
          }
          return t;
        });
        this.Count = res.data.data.total;
      });
    },
    currentchange(page) {
      this.query.PageIndex = page;
      this.GetUser();
    },
  },
};
</script>

<style lang="scss" scoped>
.seetingsDiv {
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  background: #efefef;
  line-height: 60px;
  border-radius: 5px;
  box-shadow: 0 0 5px #cdcdcd;
  justify-content: space-between;
}

.seetingsDiv button {
  height: 40px;
  background-color: #304156;
  border: 0px;
  margin-left: 10px;
  box-shadow: 0 0 5px #cdcdcd;
  float: none;
  margin-right: 10px;
}
</style>
