<template class="menu">
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-plus"
        @click="handleCreateAdd">
        增加菜单
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="danger"
        icon="el-icon-setting"
        @click="reindexCache">
        重建菜单缓存
      </el-button>
    </div>
    <el-table
      :data="tableData"
      v-loading="listLoading"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :tree-props="{child: 'child', haschild: 'child'}">
      <el-table-column
        prop="menuName"
        label="菜单名称"
        width="180">
      </el-table-column>
      <el-table-column label="菜单类型">
        <template slot-scope="{row}">
          <el-tag type="" v-if="row.menuType=='M'">目录</el-tag>
          <el-tag type="success" v-if="row.menuType=='C'">菜单</el-tag>
          <el-tag type="info" v-if="row.menuType=='F'">按钮</el-tag>

        </template>
      </el-table-column>
      <el-table-column
        label="排序"
        prop="sortNum"
      >
      </el-table-column>
      <el-table-column
        prop="url"
        label="路由地址">
      </el-table-column>
      <el-table-column
        prop="perms"
        label="权限标识">
      </el-table-column>
      <el-table-column
        prop="id"
        label="编码">
      </el-table-column>
      <el-table-column align="center" label="可见" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag v-if="row.visible==1" type="success">
            显示
          </el-tag>
          <el-tag v-else="row.visible==0" type="danger">
            隐藏
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="320" 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)" type="primary" size="mini">
            编辑
          </el-button>
          <el-button v-if="row.menuType!='F'" @click="handleCreate(row)" size="mini" type="success">
            新增
          </el-button>
          <el-button @click="removeRow(row)" type="danger" v-if="row.visible==1" size="mini">
            隐藏
          </el-button>
          <el-button @click="startRow(row)" v-else="row.visible==0" size="mini">
            显示
          </el-button>


        </template>
      </el-table-column>
    </el-table>
    <servicedialog @tableRefresh="tableRefresh" ref="menuDialog" :dialogStatus="dialogStatus" :menuId="menuId" :titleDialog="titleDialog" :dialogVisible="dialogVisible"/>
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
    <el-dialog title="角色列表" width="700px" :visible.sync="dialogTableVisible">
      <el-dialog title="用户列表" append-to-body :visible.sync="innerVisible">
        <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>
      <el-table
        :data="tableRoleData"
        border
        v-loading="listLoading"
        style="width: 100%;margin-bottom: 20px;"
      >
        <el-table-column fixed="left" label="操作" align="center" width="120px" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button @click="handleRolesShow(row)"  type="warning" size="mini">
              用户列表
            </el-button>
          </template>
        </el-table-column>
        <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>

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

<script>
import {getMenuList, getMenuRoles, getRoleUsers} from '@/api/system/system.js'
  import { getMenu } from '@/utils/getTable.js'
  import Servicedialog from './Servicedialog.vue'
  import Cancledialog from '@/components/Dialog/Cancledialog.vue'

  export default {
    name:'menuManagement',
    components: {
      Cancledialog,
      Servicedialog
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          0: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        idRole:"",
        innerVisible:false,
        tableUserData:[],
        idMenu:"",
        listData:{
          total:0,
          page: 1,
          pageSize:10
        },
        listData2:{
          total:0,
          page: 1,
          pageSize:10
        },
        dialogTableVisible:false,
        dialogStatus: '',
        titleDialog: '',
        dialogVisible: false,
        confirmdialog:false,
        listLoading: false,
        tableData: [],
        tableRoleData: [],
        menuId:''
      }
    },
    mounted() {
      this.getHomeInfo()
    },
    methods: {
      handleRolesShow(row){
        const _that = this;
        _that.innerVisible = true;
        _that.idRole = row.id;
        _that.getMenuUsersList();
      },
      getMenuUsersList(){
        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;

        })
      },
      handleRoles(row){
        const _that = this;
        _that.dialogTableVisible = true;
        _that.idMenu = row.id;
        _that.getMenuRolesList();
      },
      getMenuRolesList(){
        const _that = this;
        _that.dialogTableVisible = true;
        var page = {
          pageIndex:_that.listData.page,
          pageSize: _that.listData.pageSize,
        }
        var data = {
          'idMenu': _that.idMenu,
          'page': JSON.stringify(page)
        }
        getMenuRoles(data).then(response => {
          _that.tableRoleData = response.data
          _that.listData.total = response.total;

        })
      },
      //重建菜单缓存
      reindexCache(){
        const _that = this;
        var data = {};
        var url = '/system/reindexRoleMenuCache';
        _that.$refs.confirmDialog.updataClick(data,url);
      },
      startRow(row){
        const _that = this
        var data = {
          id: row.id,
          visible: 1
        };
        var params = {
          "menu": JSON.stringify(data)
        }
        var url = '/system/removeMenu';
        _that.$refs.confirmDialog.updataClick(params,url);
      },
      removeRow(row){
        const _that = this
        var data = {
          id: row.id,
          visible: 0
        };
        var params = {
          "menu": JSON.stringify(data)
        }
        var url = '/system/removeMenu';
        _that.$refs.confirmDialog.updataClick(params,url);
      },
      handleCreateAdd(){
        //增加系统目录
        const _that = this
        _that.titleDialog = '增加系统目录'
        _that.dialogStatus = 'createClient.vue';
        _that.$refs.menuDialog.createInfoAdd();

      },
      //刷新变革
      tableRefresh(){
        //刷新变革
        this.getHomeInfo()
      },
      handleUpdate(row) {
        const _that = this
        _that.dialogStatus = 'update'

        _that.menuId = row.id
        // console.log(_that.menuId)
        _that.titleDialog = '修改菜单'
        _that.$refs.menuDialog.getInfo(row.id);



      },
      handleCreate(row) {
        const _that = this
        _that.dialogStatus = 'createClient.vue';
        _that.titleDialog = '增加菜单'
        _that.$refs.menuDialog.createInfo(row);
      },
      getHomeInfo() {
        const _that = this;
        _that.listLoading = true;
        getMenuList().then(response => {
          // console.log(response)
          const data = response.data;
          // console.log('getMenuList', data)
          const menuData = getMenu(data);
          // console.log(menuData)
          // //  组合表单数据
          _that.tableData = menuData;
          // console.log(_that.tableData)
          _that.listLoading = false;
        }).catch(err => {
          _that.$message.error(err)
          _that.listLoading = false
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .filter-container {
    margin-bottom: 15px;
  }
</style>
