<!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">
  <style>
	  .custom-tree-node {
	    flex: 1;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    font-size: 14px;
	    padding-right: 8px;
	  }
	</style>
</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 style="width: 200px;" class="filter-item" placeholder="机构名称" v-model="filterName"></el-input>
        	<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreateRoot" type="primary" icon="el-icon-edit">新增</el-button>
        	<el-alert :title="title" :type="type" v-if="showMessage"></el-alert>
        	<el-tree node-key="id" 
        		:data="organizations" 
        		:props="organization_property" 
        		default-expand-all 
        		:filter-node-method="filterNode" 
        		ref="organization_tree">
        		<span class="custom-tree-node" slot-scope="{ node, data }">
        		<span>{{ node.label }}</span>
        		<span>
          			<el-button type="text" size="mini" @click="() => handleCreate(data)">增加</el-button>
          			<el-button type="text" size="mini" @click="() => handleQuery(data)">查看组织机构</el-button>
          			<el-button type="text" size="mini" @click="() => handleQueryUserList(data)">查看用户列表</el-button>
          			<el-button type="text" size="mini" @click="() => handleUpdate(node, data)">编辑</el-button>
            		<el-button type="text" size="mini" @click="() => handleDelete(node, data)">删除</el-button>
        		</span>
        	</el-tree>
        </div>
        <!-- /.card-body -->
        <div class="card-footer">
        </div>
        <!-- /.card-footer-->
      </div>
      <!-- /.card -->
      
	 
	 <div class="card">
        <div class="card-header">
          <h3 class="card-title">{{organization.name}}用户列表</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="getOrganizationUserList" style="width: 200px;" class="filter-item" placeholder="账号名称" v-model="query_organization_user.userName"></el-input>
        	<el-button class="filter-item" type="primary" icon="el-icon-search" @click="getOrganizationUserList">查询</el-button>
        	<el-button class="filter-item" style="margin-left: 10px;" @click="handleAdd" type="primary" icon="el-icon-edit">添加</el-button>
          	<el-table :data="organization_users" style="width: 100%">
      			<el-table-column prop="userName" 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 fixed="right" label="操作" width="180">
			      <template slot-scope="scope">
			        <el-button @click="handleRemove(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_pages"></el-pagination>
        </div>
        <!-- /.card-footer-->
      </div>
      <!-- /.card -->
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
  		<el-form :model="organization" :disabled="disabled">
  			<el-form-item label="机构名称" label-width="120px">
      			<el-input v-model="organization.name" auto-complete="off"></el-input>
    		</el-form-item>
    		<el-form-item label="机构编码" label-width="120px">
      			<el-input v-model="organization.code" auto-complete="off"></el-input>
    		</el-form-item>
    		<el-form-item label="排序编号" label-width="120px">
    			<el-input-number v-model="organization.rank" :min="1" :max="100" label="排序编号"></el-input-number>
    		</el-form-item>
    		<el-form-item label="机构描述" label-width="120px">
    			<el-input v-model="organization.description" auto-complete="off"></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="addUserDialogTitle" :visible.sync="addUserDialogFormVisible">
  		<el-input @keyup.enter.native="getUserList" style="width: 200px;" class="filter-item" placeholder="账号名称" v-model="query_user.userName"></el-input>
       	<el-button class="filter-item" type="primary" icon="el-icon-search" @click="getUserList">查询</el-button>
       	<el-button class="filter-item" style="margin-left: 10px;" @click="handleAdd" type="primary" icon="el-icon-edit">添加</el-button>
         	<el-table :data="users" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
         		<el-table-column type="selection" width="55"> </el-table-column>
     			<el-table-column prop="userName" 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>
  		<div slot="footer" class="dialog-footer">
  			<el-pagination layout="prev, pager, next" :total="total_pages"></el-pagination>
    		<el-button @click="addUserDialogFormVisible = false">取 消</el-button>
    		<el-button type="primary" @click="handleAddUserDialog">确 定</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/organizations/index.js"></script>
</html>