<template>
  <div>
    <el-table
      :data="tableData"
      v-loading="loading"
      max-height="550px"
      border
      tooltip-effect="dark"
    >
      <el-table-column
        prop="username"
        align="center"
        label="登录账号"
      ></el-table-column>
      <el-table-column
        prop="userChnName"
        align="center"
        label="用户名称"
      ></el-table-column>
      <el-table-column
        prop="phone"
        align="center"
        label="手机号"
      ></el-table-column>
      <el-table-column
        prop="email"
        align="center"
        label="邮箱"
      ></el-table-column>
      <el-table-column prop="state" align="center" label="状态">
        <template slot-scope="scope">
          <el-tag size="mini" :type="scope.row.markEnable | statusFilter">
            {{ scope.row.markEnable | statusName }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="" align="center" label="操作">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" size="mini" type="primary" title="编辑"
            v-if="scope.row.code != 'admin' && showButtons.update " @click="edit(scope.row)"></el-button>
          <el-button icon="el-icon-unlock" size="mini" type="warning" title="重置密码" @click="refresh(scope.row)"
            v-if="showButtons.szmm">
          </el-button>
          <el-button icon="el-icon-delete" size="mini" type="danger" title="删除"
            v-if="scope.row.code != 'admin' &&showButtons.del " @click="del(scope.row)"></el-button>
        </template>
      </el-table-column> -->
      <el-table-column prop="" align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            size="mini"
            type="primary"
            title="编辑"
            v-if="true"
            @click="edit(scope.row)"
          >
          </el-button>
          <el-button
            icon="el-icon-unlock"
            size="mini"
            type="warning"
            title="重置密码"
            @click="refresh(scope.row)"
            v-if="true"
          >
          </el-button>
          <el-button
            icon="el-icon-delete"
            size="mini"
            type="danger"
            title="删除"
            v-if="true"
            @click="del(scope.row)"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      layout="total, prev, pager, next, sizes"
      :page-size="pagination.pageSize"
      :page-sizes="[10, 20, 30, 50]"
      :current-page="pagination.pageNum"
      :total="pagination.total"
    >
    </el-pagination>
  </div>
</template>
<script>
import CryptoJS from "crypto-js";
import { getToken, setToken, removeToken } from "@/utils/auth";

export default {
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    pagination: {
      type: Object,
      default: () => {},
    },
    loading: {
      type: Boolean,
      default: () => true,
    },
    showButtons: {
      type: Object,
      default: () => {},
    },
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        2: "danger",
        1: "success",
      };
      return statusMap[status];
    },
    statusName(status) {
      const statusMap = {
        2: "锁定",
        1: "激活",
      };
      return statusMap[status];
    },
  },
  methods: {
    edit(item) {
      this.$emit("edit", item);
    },
    del(item) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store
            .dispatch("operator/deleteUser", {
              ids: item.id,
            })
            .then((res) => {
              this.$emit("getData");
            });
        })
        .catch(() => {});
    },
    refresh(item) {
      const defaultPassword = "EZyc@2024";
      const encryptedPassword = CryptoJS.MD5(defaultPassword).toString();
      // 创建新的用户对象，避免直接修改原对象
      const userToReset = {
        ...item,
        password: encryptedPassword,
      };
      this.$confirm("此操作将重置密码, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store
            .dispatch("operator/resetPassword", userToReset)
            .then((res) => {
              if (item.id.toString() === sessionStorage.getItem("userid")) {
                sessionStorage.removeItem("username");
                removeToken();
                this.$router.push(`/login`);
              } else {
                this.$emit("getData");
              }
            });
        })
        .catch(() => {});
    },
    handleCurrentChange(val) {
      this.pagination.pageNum = val;
      this.$emit("getData");
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.pagination.pageNum = 1;
      this.$emit("getData");
    },
  },
};
</script>
<style lang="scss" scoped></style>
