<script setup lang="ts">

import {FormatterUtils} from "@/utils/FormatterUtils.ts";
import {Lightning} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import type {IUserSearch} from "@/interface/page/user/IUserSearch.ts";
import type {IAppTableUserVo} from "@/model/table/IAppTableUserVo.ts";
import UserTagStyleFormatter from "@/plugin/formatter/UserTagStyleFormatter.ts"
import MessageUtils from "@/utils/MessageUtils.ts";
import UserApi from "@/api/user.ts";
import type {AppServeDataResponse} from "@/interface/api/AppServeDataResponse.ts";
import type {IAppBaseMenu} from "@/model/table/IAppBaseMenu.ts";
import {AppServeResponseCodeEnum} from "@/constant/enums/AppServeResponseCodeEnum.ts";
import UserDetailComponent from "@/components/page/user/UserDetailComponent.vue";
import AddUserComponent from "@/components/page/user/AddUserComponent.vue";

const userSearch = ref<IUserSearch>({});
const queryUserResult = ref<IAppTableUserVo[]>([]);
const userTagStyleFormatter = new UserTagStyleFormatter(); // 表数据格式化
const showUserDetail = ref<boolean>(false); // 是否展示用户细节框
const showAddUser = ref<boolean>(false); // 是否展示添加用户框
const userDetailFormData = ref<IAppTableUserVo>(); // 用户展示框数据

onMounted(() => {
  query();
});

// 查询
const query = () => {
  const loading = MessageUtils.loading();
  UserApi.queryUserList(userSearch.value).then((res) => {
    const response = JSON.parse(JSON.stringify(res.data)) as AppServeDataResponse<IAppTableUserVo[]>;
    if (response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
      queryUserResult.value = response.data;
      MessageUtils.successMessage('加载用户信息成功');
      return;
    }
    MessageUtils.warningMessageBox(response.msg, '警告');
  }).catch(() => {}).finally(()=>{
    loading.close();
  })
}
// 重置查询参数
const resetInput = () => {
  userSearch.value = {
    userName: "",
    userId: ""
  }
}
// 添加用户
const addUser = () => {
  showAddUser.value = true;
}
// 操作
const handleEdit = (index: number, row: any) => {
  userDetailFormData.value = {
    userName: row.userName,
    userId: row.userId,
    userStatus: row.userStatus,
    online: row.online,
    userLevel: row.userLevel,
    createTime: row.createTime,
    updateTime: row.updateTime,
    userGroup: row.userGroup,
    sex: row.sex,
    photo: row.photo,
    lastLoginTime: row.lastLoginTime,
  };
  showUserDetail.value = true;
}


</script>

<template>
  <div style="margin-left: 10px;margin-top: 10px; width: calc(100vw - 280px);">
    <h3>用户管理</h3>
    <el-row class="searchCard">
      <el-row style="width: 100%;">
        <el-form class="searchForm" v-model="userSearch" label-position="top" label-width="150px" inline>
          <el-form-item label="用户ID：" style="width: 250px;">
            <el-input v-model="userSearch.userId" placeholder="请输入用户ID" clearable></el-input>
          </el-form-item>
          <el-form-item label="用户名称：" style="width: 250px;">
            <el-input v-model="userSearch.userName"  placeholder="请输入用户名称" clearable></el-input>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-button-group style="width: 100%;margin-left: 10px; margin-bottom: 10px">
          <el-button type="primary" @click="query">查询/刷新</el-button>
          <el-button type="warning" @click="resetInput">重置查询参数</el-button>
          <el-button type="success" @click="addUser"><el-icon><Lightning /></el-icon>添加用户</el-button>
        </el-button-group>
      </el-row>
    </el-row>
    <el-row class="dataTable">
      <el-table :data="queryUserResult" stripe border style="width: 100%" max-height="calc(100vh - 270px)">
        <el-table-column type="index" width="80" label="序号" align="center" fixed="left" show-overflow-tooltip/>
        <el-table-column prop="userId" label="用户ID" width="100" align="center" fixed="left" show-overflow-tooltip />
        <el-table-column prop="userName" label="用户名称" align="center"  width="180" show-overflow-tooltip/>
        <el-table-column prop="userStatus" label="用户状态" width="100" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-tag size="small" :type="userTagStyleFormatter.userStatusTagStyleFormatter(scope.row.userStatus).type">
              {{userTagStyleFormatter.userStatusTagStyleFormatter(scope.row.userStatus).label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="online" label="在线状态" width="100" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-tag size="small" :type="userTagStyleFormatter.userOnlineTagStyleFormatter(scope.row.online).type">
              {{userTagStyleFormatter.userOnlineTagStyleFormatter(scope.row.online).label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="userLevel" label="用户级别" align="center" width="100" show-overflow-tooltip >
          <template #default="scope">
            <el-tag size="small" :type="userTagStyleFormatter.userLevelTagStyleFormatter(scope.row.userLevel).type">
              {{userTagStyleFormatter.userLevelTagStyleFormatter(scope.row.userLevel).label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="用户创建时间" width="180" align="center" :formatter="FormatterUtils.formatCellValueTime" show-overflow-tooltip/>
        <el-table-column prop="userGroup" label="用户组" width="120" align="center" show-overflow-tooltip/>
        <el-table-column prop="sex" label="性别" align="center" width="70" show-overflow-tooltip >
          <template #default="scope">
            <el-tag size="small" :type="userTagStyleFormatter.userSexTagStyleFormatter(scope.row.sex).type">
              {{userTagStyleFormatter.userSexTagStyleFormatter(scope.row.sex).label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="photo" label="头像" align="center" width="180" show-overflow-tooltip/>
        <el-table-column prop="updateTime" label="数据更新时间" align="center" width="180" :formatter="FormatterUtils.formatCellValueTime" show-overflow-tooltip/>
        <el-table-column prop="lastLoginTime" label="上次登录时间" align="center" width="180" :formatter="FormatterUtils.formatCellValueTime" show-overflow-tooltip/>
        <el-table-column label="操作" width="80" align="center" fixed="right">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
<!--  用户详情框-->
  <UserDetailComponent v-model="showUserDetail" :form-data="userDetailFormData" @reLoadingTableData="query"></UserDetailComponent>
<!--  添加用户-->
  <AddUserComponent v-model="showAddUser" @reLoadingTableData="query"/>
</template>

<style scoped>
.searchCard {
  width: 100%;
  border: #ccc solid 1px;
  border-radius: 4px;
  background-color: #fff;
}
.dataTable {
  margin: 10px 10px 0 auto;
  width: 100%;
  border: #ccc solid 1px;
  border-radius: 4px;
  background-color: #fff;
}
.searchForm {
  margin: 5px 10px 0 10px;
  width: 100%;
}
.searchForm :deep(.el-form-item__label){
  font-size: 13px;
}
</style>