<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom: 15px">
      <el-input v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item"
                @keyup.enter.native="handleFilter"/>

      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-plus" @click="handleCreate">
        增加角色
      </el-button>
    </div>
    <el-table
      :data="tableData"
      border
      v-loading="listLoading"
      style="width: 100%;margin-bottom: 20px;"
    >
      <el-table-column
        prop="id"
        label="角色编号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名称"
        width="200">
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="roleKey"-->
<!--        label="权限字符"-->
<!--        width="200">-->
<!--      </el-table-column>-->
      <el-table-column
        prop="sortNum"
        label="显示顺序"
        width="100">
      </el-table-column>
      <el-table-column align="center" label="状态" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag v-if="row.status==0" type="success">
            正常
          </el-tag>
          <el-tag v-else="row.status==1" type="danger">
            已停用
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
      >
        <template slot-scope="scope">
          <span>{{scope.row.createTime | getTime}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="left" label="操作" align="center" width="320px" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button @click="handleRoles(row)"  type="warning" size="mini">
            用户列表
          </el-button>
          <el-button @click="handleUpdate(row.id)" type="primary" size="mini">
            编辑
          </el-button>
          <el-button @click="removeRow(row)" type="danger" v-if="row.status==0" size="mini">
            停用
          </el-button>
          <el-button @click="startRow(row)" v-else size="mini">
            启用
          </el-button>


        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page" :limit.sync="listData.pageSize" @pagination="getHomeInfo" />
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
    <roledialog @tableRefresh="tableRefresh" ref="roleDialog"></roledialog>
    <el-dialog title="用户列表" :visible.sync="dialogTableVisible">
      <el-table
        :data="tableUserData"
        border
        v-loading="listLoading"
        style="width: 100%;margin-bottom: 20px;"
      >
        <el-table-column
          prop="loginName"
          label="登录名称">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户名">
        </el-table-column>
        <el-table-column
          prop="deptName"
          label="部门">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱">
        </el-table-column>
        <el-table-column
          prop="phoneNumber"
          label="手机">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态">
          <template slot-scope="{row}">
            <el-tag v-if="row.status==0" type="success">
              正常
            </el-tag>
            <el-tag v-else="row.status==1" type="danger">
              停用
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="155">
          <template slot-scope="{row}">
          <span v-if="row.createTime">
          {{ row.createTime | getTime }}
            </span>
          </template>
        </el-table-column>

      </el-table>

      <pagination v-show="listData2.total>0" :total="listData2.total" :page.sync="listData2.page" :limit.sync="listData2.pageSize" @pagination="getMenuRolesList" />
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import {getRoleList, getRoleUsers} from '@/api/system/system.js'
  import Roledialog from './Roledialog.vue'
  import Cancledialog from '@/components/Dialog/Cancledialog.vue'


  export default {
    name: 'role',
    components: {
      Cancledialog,
      Roledialog
    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ])
    },
    data() {
      return {
        idRole:"",
        listData2:{
          total:0,
          page: 1,
          pageSize:10
        },
        dialogTableVisible:false,
        tableUserData:[],
        total: 0,
        listQuery: {
          page: 1,
          limit: 10,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        listLoading: false,
        tableData: [],
        search: {
          keyWord:''
        },
        listData:{
          total:0,
          page: 1,
          pageSize:10
        },
      }
    },
    mounted() {
      this.getHomeInfo()
    },
    methods: {
      handleRoles(row){
        const _that = this;
        _that.dialogTableVisible = true;
        _that.idRole = row.id;
        _that.getMenuRolesList();
      },
      getMenuRolesList(){
        const _that = this;
        _that.dialogTableVisible = true;
        var page = {
          pageIndex:_that.listData2.page,
          pageSize: _that.listData2.pageSize,
        }
        var data = {
          'idRole': _that.idRole,
          'page': JSON.stringify(page)
        }
        getRoleUsers(data).then(response => {
          _that.tableUserData = response.data
          _that.listData2.total = response.total;

        })
      },
      handleCreate(){
        //增加
        const _that = this;
        _that.$refs.roleDialog.handleCreateAdd();
      },
      handleUpdate(id){
        //修改
        const _that = this;
        _that.$refs.roleDialog.handleUpdata(id);
      },
      getHomeInfo() {
        const _that = this
        var params =_that.search;
        var page = {
          pageIndex:_that.listData.page,
          pageSize: _that.listData.pageSize,
        }
        var data = {
            'params': JSON.stringify(params),
            'page': JSON.stringify(page)
        }
        getRoleList(data).then(response => {
          var data  = response;
          // console.log('getRoleList',data)
          _that.tableData = response.data
          _that.total = response.total;
          _that.listData.total = response.total;

        })
      },
      tableRefresh(){
        //刷新表格
        this.getHomeInfo()
      },
      handleFilter() {
        this.listData.page = 1;
        this.getHomeInfo()
      },
      startRow(row){
        const _that = this
        var data = {
          id: row.id,
          status: 0
        };
        var params = {
          "role": JSON.stringify(data)
        }
        var url = '/system/removeRole';
        _that.$refs.confirmDialog.updataClick(params,url);
      },
      removeRow(row){
        const _that = this
        var data = {
          id: row.id,
          status: 1
        };
        var params = {
          "role": JSON.stringify(data)
        }
        var url = '/system/removeRole';
        _that.$refs.confirmDialog.updataClick(params,url);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>
