<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>用户管理</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Element UI -->
  <link rel="stylesheet" href="/webjars/element-ui/lib/theme-chalk/index.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="/webjars/font-awesome/css/font-awesome.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="/webjars/ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
  <!-- Navbar -->
  <div th:replace="fragments/navbar :: navbar"></div>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
  <div th:replace="fragments/sidebar :: sidebar"></div>

  <!-- Content Wrapper. Contains page content -->
  <div id="content" th:fragment="content" class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>用户管理</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/">主页</a></li>
              <li class="breadcrumb-item active">用户管理</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">

      <!-- Default box -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">用户列表</h3>

          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="最小化">
              <i class="fa fa-minus"></i></button>
            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="关闭">
              <i class="fa fa-times"></i></button>
          </div>
        </div>
        <div class="card-body">
        	<el-input @keyup.enter.native="QueryUserList" style="width: 200px;" class="filter-item" placeholder="账号名称" v-model="query.userName"></el-input>
        	<el-button class="filter-item" type="primary" icon="el-icon-search" @click="QueryUserList">查询</el-button>
        	<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">新增</el-button>
        	<el-alert :title="title" :type="type" v-if="showMessage"></el-alert>
          	<el-table :data="users" style="width: 100%">
      			<el-table-column prop="userName" label="登录账号" width="180"></el-table-column>
      			<el-table-column prop="realName" label="真实姓名" width="180"></el-table-column>
      			<el-table-column prop="email" label="电子信箱" width="180"></el-table-column>
      			<el-table-column prop="phoneNumber" label="手机"></el-table-column>
      			<el-table-column prop="createTime" label="创建时间" :formatter="dateFormat"></el-table-column>
      			<el-table-column fixed="right" label="操作" width="180">
			      <template slot-scope="scope">
			        <el-button @click="handleQuery(scope.row)" type="text" size="small">查看</el-button>
			        <el-button @click="handleUpdate(scope.row)" type="text" size="small">编辑</el-button>
			        <el-button @click="handleGrant(scope.row)" type="text" size="small">授权</el-button>
			        <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
			      </template>
			    </el-table-column>
    		</el-table>
        </div>
        <!-- /.card-body -->
        <div class="card-footer">
          <el-pagination layout="prev, pager, next" :total="total" :size="query.size" @current-change="handleCurrentChange"></el-pagination>
        </div>
        <!-- /.card-footer-->
      </div>
      <!-- /.card -->
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
  		<el-form :model="user">
  			<el-form-item label="登录名称" label-width="120px">
      			<el-input v-model="user.userName" auto-complete="off" :disabled="disabled"></el-input>
    		</el-form-item>
    		<el-form-item label="真实姓名" label-width="120px">
      			<el-input v-model="user.realName" auto-complete="off" :disabled="disabled"></el-input>
    		</el-form-item>
    		<el-form-item label="登录密码" label-width="120px">
      			<el-input type="password" v-model="user.password" auto-complete="off" :disabled="disabled"></el-input>
    		</el-form-item>
    		<el-form-item label="电子信箱" label-width="120px">
      			<el-input v-model="user.email" auto-complete="off" :disabled="disabled"></el-input>
    		</el-form-item>
    		<el-form-item label="手机" label-width="120px">
      			<el-input v-model="user.phoneNumber" auto-complete="off" :disabled="disabled"></el-input>
    		</el-form-item>
  		</el-form>
  		<div slot="footer" class="dialog-footer">
    		<el-button @click="dialogFormVisible = false">取 消</el-button>
    		<el-button type="primary" @click="handleDialog">确 定</el-button>
  		</div>
	 </el-dialog>
	 
	 <el-dialog title="用户授权" :visible.sync="grantFormVisible">
	 	<el-form :model="role">
  			<el-form-item label="角色" label-width="120px">
  				<el-select v-model="role.selected" multiple placeholder="请选择">
    				<el-option v-for="item in role.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  				</el-select>
    		</el-form-item>
  		</el-form>
  		<div slot="footer" class="dialog-footer">
    		<el-button @click="grantFormVisible = false">取 消</el-button>
    		<el-button type="primary" @click="handleGrantDialog">确 定</el-button>
  		</div>
     </el-dialog>

    </section>
    <!-- /.content -->
</div>
  <!-- /.content-wrapper -->

  <div th:replace="fragments/footer :: footer"></div>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
</body>
<!-- jQuery -->
<script type="text/javascript" src="/webjars/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script type="text/javascript" src="/webjars/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- VUE 2 -->
<script type="text/javascript" src="/webjars/vue/vue.js"></script>
<script type="text/javascript" src="/webjars/vue-resource/dist/vue-resource.js"></script>
<!-- Element UI -->
<script type="text/javascript" src="/webjars/element-ui/lib/index.js"></script>
<!-- FastClick -->
<script type="text/javascript" src="/webjars/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/js/demo.js"></script>
<script src="/js/users/index.js"></script>
</html>