<template>
  <div class="app-container" style="padding: 20px">
    <el-row :gutter="40">
      <el-col :span="24" :xs="24">
        <el-form
          ref="queryForm"
          :inline="true"
          :model="queryParams"
          label-width="68px"
          size="small"
        >
          <el-form-item>
            <el-button
              icon="el-icon-check"
              type="primary"
              @click="handleAuditSubmit"
              >审核用户</el-button
            >
          </el-form-item>
        </el-form>

        <el-table
          stripe
          v-loading="loading"
          element-loading-text="数据载入中"
          element-loading-spinner="el-icon-loading"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
          border
          :data="tables"
        >
          <el-table-column
            align="center"
            type="selection"
            width="40"
            prop="userIndex"
          ></el-table-column>
          <el-table-column align="center" label="名称" prop="name" />
          <el-table-column align="center" label="登录名" prop="loginName" />
          <el-table-column align="center" label="角色" prop="roleNames" />
          <el-table-column align="center" label="部门" prop="deptName" />
          <el-table-column align="center" label="电话" prop="phone" />
          <el-table-column align="center" label="注册时间" prop="registerTime">
            <template slot-scope="scope">{{
              scope.row.registerTime | formatDate
            }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            label="类型"
            prop="casualUser"
            width="100"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.casualUser === 0"
                type="primary"
                size="small"
                >长期用户</span
              >
              <span
                v-if="scope.row.casualUser === 1"
                type="success"
                size="small"
                >临时用户</span
              >
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" prop="state" width="150">
            <template>
              <span type="warning" size="small">待审核</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="260">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-check"
                size="mini"
                @click.stop="handleAudit(scope.row)"
                >审核通过</el-button
              >
              <el-button
                type="primary"
                size="mini"
                @click.stop="handleDelete(scope.row)"
                >审核不通过</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="float: right; margin-top: 10px"
          v-show="page.total > 0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-sizes="[5, 10, 15]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { listsh, checkUser } from "@/api/admin/user";
import { gongkey } from "@/api/user";
import { sm3Digest } from "@/assets/commjs/sm3";
import { sm2, encrypt } from "@/assets/commjs/sm2.js";
export default {
  computed: {
    // 实时监听表格
    tables: function () {
      const search = this.search;
      if (search) {
        return this.pageList.filter((dataNews) => {
          return Object.keys(dataNews).some((key) => {
            return String(dataNews[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }
      return this.pageList;
    },
  },

  filters: {
    formatDate: function (value) {
      //这里的 value 就是需要过滤的数据
      var date = new Date(value);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      queryParams: {
        type: -1,
        state: -1,
      },
      page: {
        current: 1,
        size: 15,
        total: 0,
      },
      pageList: [],
      multipleSelection: [],
    };
  },
  created() {
    this.loadData();
  },
  mounted() {},
  methods: {
    loadData() {
      this.handleQuery();
    },
    handleQuery() {
      this.queryParams.page = this.page.current;
      this.queryParams.limit = this.page.size;
      listsh(this.queryParams).then((response) => {
        if (response.code === "A0000") {
          const { data, total } = response;
          this.pageList = data;
          this.page.total = total;
          this.loading = false;
        }
        if (response.code === "A0110") {
          this.$message.success("暂无用户");
          const { data, total } = response;
          this.pageList = [];
          this.loading = false;
        }
      });
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.handleQuery();
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.handleQuery();
    },
    handleUnlock(row) {},
    handleReset() {},
    submint() {},
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // alert(val)
      // console.log(val);
    },
    handleAudit(row) {
      // alert('审核')
      let arr = [];
      let userIndex = row.userIndex;
      arr.push(userIndex);
      checkUser(arr).then((response) => {
        if (response.code === "A0000") {
          this.$message({ message: response.message, type: "success" });
        }
        this.handleQuery();
      });
    },
    handleDelete() {
      alert("删除");
    },
    handleAuditSubmit() {
      // alert('批量提交')
      var arr = [];
      for (var i = 0; i < this.multipleSelection.length; i++) {
        arr.push(this.multipleSelection[i].userIndex);
      }
      checkUser(arr).then((response) => {
        if (response.code === "A0000") {
          this.$message({ message: response.message, type: "success" });
        }
        this.handleQuery();
      });
    },
  },
};
</script>
<style >
</style>