<template>
  <div id="systemUserMgr">
    <h3>用户信息列表</h3>
    <el-divider></el-divider>
    <el-table ref="dataTable" v-loading="loading" element-loading-text="正在加载，请稍后..." :data="tableData"
              :border="true" :stripe="true" :height="$store.state.windowsHeight*0.67" style="width: 100%;margin-bottom: 15px;">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="username" label="用户名" width="130"/>
      <el-table-column prop="email" label="邮箱" width="200"/>
      <el-table-column prop="phone" label="手机号" width="130"/>
      <el-table-column prop="userLevel" label="用户级别" width="100">
        <template #default="scope">
          <span v-if="scope.row.userLevel==0">管理员</span>
          <span v-else-if="scope.row.userLevel==1">管理员</span>
          <span v-else-if="scope.row.userLevel==2
                  && scope.row.serviceId && scope.row.serviceId.split(',').indexOf(''+$constant.serviceId)>-1">
            管理员
          </span>
          <span v-else>普通用户</span>
        </template>
      </el-table-column>
      <el-table-column prop="failureTime" label="过期时间" width="180">
        <template #default="scope">
          <span v-if="scope.row.failureTime">{{ $util.datetime.format(scope.row.failureTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" min-width="120">
        <template #default="scope">
          <el-button size="small" @click="handleManageRole(scope.row)">管理角色</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="用户角色" >
        <template #default="scope">
          <span v-if="!scope.row.roles || scope.row.roles.length<1">无</span>
          <el-tag v-for="role in scope.row.roles" :key="role.id" v-show="role.id>2">{{ role.noteStr }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="float:right" background layout="sizes, prev, pager, next, jumper, total"
                   v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.pageSize"
                   v-model:total="pageInfo.total"/>
  </div>

  <el-dialog v-if="userRolesShow"
             :model-value="userRolesShow"
             title="分配角色"
             width="650px"
             :close-on-click-modal="false"
             :before-close="handleManageRoleClose"
  >
    <el-table ref="roleListTbl" :data="roleList" row-key="id" max-height="300" v-loading="roleListLoading" >
      <el-table-column type="selection" width="80"/>
      <el-table-column prop="id" label="ID" width="100"/>
      <el-table-column prop="roleName" label="角色名称" min-width="150" />
      <el-table-column prop="noteStr" label="角色描述" min-width="180" />
    </el-table>
    <template #footer>
      <!--<el-button >重置</el-button>-->
      <el-button type="primary" @click="updateUserRole">保存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import api from "@/api/data/AuthInfo";
import loading from "@/utils/loading";

export default {
  data() {
    return {
      loading: false,
      tableData: [],
      roleList: [],
      userRolesShow: false,
      roleListLoading: false,
      currRow: {},
      pageInfo: {
        page: 1,
        pageSize: 10,
        total: 0,
      }
    }
  },
  watch: {
    "pageInfo.page": function (val) {
      if (val > 0) {
        this.getData();
      }
    },
    "pageInfo.pageSize": function () {
      let app = this;
      this.pageInfo.page = -1;
      setTimeout(function () {
        app.pageInfo.page = 1;
      }, 50)
    },
  },
  created() {
    this.getData()
  },
  mounted() {
    this.getRoleList();
  },
  methods: {
    getData() {
      let app = this;
      app.loading = true;
      let params = {
        pageNum: app.pageInfo.page,
        pageSize: app.pageInfo.pageSize
      }
      api.getUserList(params).then(res=>{
        if (res.code===200) {
          app.tableData = res.content.list;
          app.pageInfo.total = res.content.total
        }
        app.loading = false;
      }).catch(()=>{
        app.loading = false;
      })
    },
    getRoleList() {
      let app = this;
      let params = {
        serviceId: this.$constant.serviceId,
      }
      api.getRoleList(params).then(res=>{
        if (res.code===200) {
          app.roleList = [];
          res.content.list.forEach(item => {
            if (item.id>2) {
              app.roleList.push(item);
            }
          })
        }
      })
    },
    handleManageRole(row) {
      let app = this;
      this.userRolesShow = true;
      this.roleListLoading = true;
      this.currRow = row;
      let authRoleIds = [];
      if (app.currRow.roleId) {
        authRoleIds = app.currRow.roleId.split(',')
      }
      this.$nextTick(()=>{
        this.$refs.roleListTbl.clearSelection();
        app.roleList.forEach(i=>{
          app.$refs.roleListTbl.toggleRowSelection(i, authRoleIds.indexOf(i.id+'')>-1)
        });
        setTimeout(function () {
          app.roleListLoading = false;
        },200)
      })
    },
    handleManageRoleClose() {
      this.userRolesShow = false;
    },
    updateUserRole() {
      let app = this;
      let roleIds = this.$refs.roleListTbl.getSelectionRows().map(i=>i.id).join(',')
      let params = {
        userId: this.currRow.id,
        roleIds: roleIds,
      }
      api.updateUserRole(params).then(res=>{
        if (res.code===200) {
          app.$message({message:'修改成功', type: 'success'});
          app.handleManageRoleClose();
        }
      })
    }
  }
}
</script>

<style scoped>
#systemUserMgr {
  width: 100%;
  height: 100%;
  padding-left: 2%;
}
</style>