<template>
  <div>
    <el-card>
      <div>
        用户名称:
        <el-input v-model="queryModuleInfo.userName" clearable placeholder="请输入用户名称" style="width: 300px;">
        </el-input>
        <el-select v-model="queryModuleInfo.roleId" placeholder="请选择角色" clearable filterable style="width:310px">
          <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId">
          </el-option>
        </el-select>
        <el-button type="primary" style="margin-left:10px" icon="el-icon-search" @click="queryData">查询</el-button>
      </div>
      <el-table :data="userList" border style="width: 100%;margin-top:20px">
        <el-table-column type='index' width="50px">
          <template slot-scope="scope">
            <span>{{(queryModuleInfo.pageNum -1 ) * queryModuleInfo.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="用户名称" width="200px"></el-table-column>
        <el-table-column label="角色" width="150px">
          <template slot-scope="scope">
            <el-tag type="success" v-text="scope.row.roleName" v-if="scope.row.roleId===1"></el-tag>
            <el-tag type="primary" v-text="scope.row.roleName" v-else></el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="chineseName" label="中文名称" width="150px"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="300px"></el-table-column>
        <el-table-column prop="title" label="职位名称" width="200px"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200px"></el-table-column>
        <el-table-column label="操作">
          <slot slot-scope="scope">
            <el-button type="warning" icon="el-icon-edit" @click="openEditDialog(scope.row)"
              v-permission="('user:list:edit')">编辑</el-button>
          </slot>
        </el-table-column>
      </el-table>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize"
        layout="total, prev, pager, next" :total="totalNum">
      </el-pagination>
    </el-card>
    <!-- 编辑用户 -->
    <el-dialog title="编辑用户" :visible.sync="DialogVisible" @close="closeDialog" width="30%">
      <el-form ref="editUserFormRef" :rules="rules" :model="editUserForm" label-width="90px">
        <el-form-item label="用户名称:" style="width:400px">
          <el-input v-model="editUserForm.userName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="角色名称:" prop="roleId" style="width:400px">
          <el-select v-model="editUserForm.roleId" placeholder="请选择角色" clearable filterable style="width:310px">
            <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="中文名称:" style="width:400px">
          <el-input v-model="editUserForm.chineseName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="邮箱:" style="width:400px">
          <el-input v-model="editUserForm.email" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="职位名称:" style="width:400px">
          <el-input v-model="editUserForm.title" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="saveUserFrom">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getUserList, getRoleList, saveUserForm } from '@/api/getUser'
export default {
  data() {
    return {
      queryModuleInfo: {
        pageNum: 1,
        pageSize: 10,
        userName: '',
        roleId: ''
      },
      totalNum: 0,
      userList: [],
      DialogVisible: false,
      editUserForm: {
        roleId: '',
        id: '',
        userId: '',
        userName: '',
        chineseName: '',
        email: '',
        title: ''
      },

      roleInfo: {
        pageNum: 1,
        pageSize: 100
      },
      roleList: [],
      rules: {
        roleId: [
          {
            required: true,
            message: '角色名称不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getUserList()
    this.getRoleList()
  },
  methods: {
    // 查询功能
    queryData() {
      this.getUserList()
    },
    // 获取用户列表
    getUserList() {
      getUserList(this.queryModuleInfo).then((resp) => {
        this.userList = resp.data.data.list
        this.totalNum = resp.data.data.total
      })
    },
    // 获取权限列表
    getRoleList() {
      getRoleList(this.roleInfo).then((resp) => {
        this.roleList = resp.data.data.list
      })
    },
    // 点击编辑按钮
    openEditDialog(row) {
      this.DialogVisible = true
      this.getRoleList()
      this.editUserForm.roleId = row.roleName
      this.editUserForm.id = row.id
      this.editUserForm.userId = row.userId
      this.editUserForm.userName = row.userName
      this.editUserForm.chineseName = row.chineseName
      this.editUserForm.email = row.email
      this.editUserForm.title = row.title
    },
    closeDialog() {
      this.$refs.editUserFormRef.resetFields()
    },
    // 保存用户信息
    saveUserFrom() {
      let formData = new FormData()
      formData.set('id', this.editUserForm.id)
      formData.set('roleId', this.editUserForm.roleId)
      formData.set('userId', this.editUserForm.userId)
      this.$refs.editUserFormRef.validate((valid) => {
        if (!valid) {
          return false
        } else {
          saveUserForm(formData)
            .then((resp) => {
              if (resp.data.data === true) {
                this.$message.success('修改成功！')
                this.DialogVisible = false
                this.getUserList()
              } else {
                this.$message.error(resp.data.msg)
              }
            })
            .catch((error) => {
              this.$message({ type: 'error', message: error })
            })
        }
      })
    },
    handleSizeChange(newSize) {
      this.queryModuleInfo.pageSize = newSize
      this.getUserList()
    },
    handleCurrentChange(newPage) {
      this.queryModuleInfo.pageNum = newPage
      this.getUserList()
    }
  }
}
</script>
<style lang="less" scoped>
.el-select {
  margin: 0 10px 0 5px;
}
</style>
