<template>
  <div class="UserManage">
    <header_local />
    <div style="padding: 0.5em">
      <br />
      <el-form :inline="true" :model="disseminateData" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input
            v-model="disseminateData.name"
            placeholder="请输入用户名"
            clearable
          />
        </el-form-item>
        <el-form-item label="角色">
          <el-select
            clearable
            v-model="disseminateData.roleId"
            placeholder="请选择角色"
          >
            <el-option
              :label="item.name"
              :value="item.roleId"
              v-for="item in disseminateData.roleList"
              :key="item.roleId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getUserList">查询</el-button>
          <el-button type="primary" @click="addUser">新增用户</el-button>
        </el-form-item>
      </el-form>
      <br />
      <el-table
        :data="disseminateData.list"
        style="width: 100%"
        :header-cell-style="{
          backgroundColor: '#f4f5f7',
          color: '#606266',
        }"
        ref="table1"
        align="center"
        empty-text="暂无数据"
      >
        <el-table-column prop="loginName" label="用户名" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="createTime" label="角色">
          <template #default="scope">
            {{ scope.row.userRole.name }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button link type="primary" @click.prevent="resetPwa(scope)">
              设置密码
            </el-button>
            <el-button
              v-if="scope.row.roleId !== 1"
              link
              type="primary"
              @click.prevent="resetRole(scope)"
            >
              配置角色
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @current-change="e => changePageDisseminate(e)"
      background
      layout="prev, pager, next"
      :page-count="Math.ceil(disseminateData.total / disseminateData.size) || 1"
    />
    <!-- 修改密码 -->
    <el-dialog v-model="showPwd" title="修改密码">
      <el-form :model="userData" label-width="120px" status-icon>
        <el-form-item label="新密码" prop="name">
          <el-input type="password" v-model="userData.newPwd" />
        </el-form-item>
        <el-form-item label="充输新密码" prop="name">
          <el-input type="password" v-model="userData.isNewPwd" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="chagnePwa"> 修改 </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 修改角色 -->
    <el-dialog v-model="showRole" title="修改角色">
      <el-form :model="userData" label-width="120px" status-icon>
        <el-form-item label="角色" prop="roleId">
          <el-select
            v-model="userData.roleId"
            class="m-2"
            placeholder="选择角色"
          >
            <el-option
              :label="item.name"
              :value="item.roleId"
              v-for="item in disseminateData.roleList"
              :key="item.roleId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="chagneRole"> 修改 </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 新增用户 -->
    <el-dialog v-model="showUser" title="新增用户">
      <el-form :model="userData" label-width="120px" status-icon>
        <el-form-item label="用户名" prop="user">
          <el-input v-model="userData.user" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input type="password" v-model="userData.newPwd" />
        </el-form-item>
        <el-form-item label="确认新密码" prop="isNewPwd">
          <el-input type="password" v-model="userData.isNewPwd" />
        </el-form-item>
        <el-form-item label="角色" prop="roleId">
          <el-select
            v-model="userData.roleId"
            class="m-2"
            placeholder="选择角色"
          >
            <el-option
              :label="item.name"
              :value="item.roleId"
              v-for="item in disseminateData.roleList"
              :key="item.roleId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="user"> 确定 </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import header_local from './components/header.vue';
import { ElMessage } from 'element-plus';
import {
  getUserListApi,
  getRoleListApi,
  managerChangeUserApi,
  managerAddUserApi,
} from '@/api/index';

const showPwd = ref(false);
const showRole = ref(false);
const showUser = ref(false);
const userData = ref({});
const disseminateData = reactive({
  total: 0,
  page: 1,
  size: 15,
  name: '',
  roleId: '',
  roleList: [],
  list: [],
});

getRoleListApi({
  page: 1,
  pageSize: 1500,
}).then(r => (disseminateData.roleList = r && r.records ? r.records : []));

const changePageDisseminate = page => {
  disseminateData.page = page;
  getUserList();
};

const getUserList = () => {
  getUserListApi({
    roleId: disseminateData.roleId,
    name: disseminateData.name,
    page: disseminateData.page,
    pageSize: disseminateData.size,
  }).then(r => {
    const item = r || {};
    disseminateData.list = item.records || [];
    disseminateData.total = item.total || 0;
  });
};

const resetPwa = scope => {
  userData.value = scope;
  showPwd.value = true;
};
const resetRole = scope => {
  scope.roleId = scope.row.roleId;
  userData.value = scope;
  showRole.value = true;
};

const chagnePwa = () => {
  if (!userData.value.isNewPwd || !userData.value.newPwd)
    return ElMessage.error('请输入新密码');
  if (userData.value.isNewPwd !== userData.value.newPwd)
    return ElMessage.error('两次新密码不一致');
  managerChangeUserApi({
    id: userData.value.row.id,
    loginPassword: userData.value.isNewPwd,
  }).then(r => {
    userData.value = {};
    showPwd.value = false;
  });
};

const chagneRole = () => {
  if (isNaN(userData.value.roleId)) return ElMessage.error('请输入新密码');
  managerChangeUserApi({
    id: userData.value.row.id,
    roleId: userData.value.roleId,
  }).then(r => {
    userData.value = {};
    showRole.value = false;
  });
};

const user = () => {
  if (
    !userData.value.isNewPwd ||
    !userData.value.newPwd ||
    !userData.value.user
  )
    return ElMessage.error('请输入用户名或密码');
  if (userData.value.isNewPwd !== userData.value.newPwd)
    return ElMessage.error('两次密码不一致');
  if (!userData.value.roleId) return ElMessage.error('请选择角色');
  managerAddUserApi({
    loginName: userData.value.user,
    loginPassword: userData.value.isNewPwd,
    roleId: userData.value.roleId,
  }).then(r => {
    console.log(r);
    showUser.value = false;
    userData.value = {};
  });
};

const addUser = () => {
  showUser.value = true;
  userData.value = {};
};

getUserList();

document.title = '用户管理';
</script>

<style scoped></style>
