<template>
  <div class="max-big-box">
    <div class="big-max-box" v-if="pageType">
      <div class="top-box">
        <div class="input-box">
          <input type="text" v-model="inputData" placeholder="请输入角色名称关键字查询">
          <div @click="getListData">
            <img src="~@/assets/images/icon_27.png">
            <p class="cursor_pointer">查询</p>
          </div>
        </div>
        <p class="add-button cursor_pointer" @click="addEdit" v-if="userPermsData.indexOf('system:role:add')!=-1">新增</p>
        <p class="del-button cursor_pointer" @click="allDel" v-if="userPermsData.indexOf('system:role:remove')!=-1">批量删除</p>
        <p class="text-p">已选择{{tableNum}}条</p>
      </div>
      <div class="table-box">
        <el-table
          ref="multipleTable"
          :row-key="getRowKey"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @select-all="handleSelectionChange"
          @select="handleSelectionChange">
          <el-table-column
            :reserve-selection="true"
            type="selection"
            width="102">
          </el-table-column>
          <el-table-column
            type="index"
            :index="indexMethod"
            label="序号"
            width="91">
          </el-table-column>
          <el-table-column
            prop="roleName"
            label="角色名称"
            width="177">
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            width="670">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="254">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            width="416">
            <template slot-scope="scope">
              <div class="table-min-button">
                <div class="cursor_pointer" @click="handleEdit(scope.$index, scope.row)"
                     v-if="!scope.row.admin&&userPermsData.indexOf('system:role:edit')!=-1">
                  <img src="~@/assets/images/icon_37.png">
                  <p>菜单权限</p>
                </div>
                <div class="cursor_pointer" @click="handleEditOne(scope.$index, scope.row)"
                     v-if="!scope.row.admin&&userPermsData.indexOf('system:role:edit')!=-1">
                  <img src="~@/assets/images/icon_37.png">
                  <p>数据权限</p>
                </div>
                <div class="cursor_pointer" @click="handleDelete(scope.$index, scope.row)"
                     v-if="!scope.row.admin&&userPermsData.indexOf('system:role:remove')!=-1">
                  <img src="~@/assets/images/icon_38.png">
                  <p>删除</p>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pagesize"
        :total="total">
      </el-pagination>
    </div>
    <new-modify
      v-else
      :newModifyData="newModifyData"
      @newModifyLeftClick="newModifyLeftClick"
      @newModifyRightClick="newModifyRightClick"
    ></new-modify>
    <interactive-window
      v-if="windowType"
      :windowData="windowData"
      @windowLeftClick="windowLeftClick"
      @windowRightClick="windowRightClick"
    ></interactive-window>
  </div>
</template>

<script>
  import { roleList,roleDel,treeselect,roleAdd,roleEditor,deptTreeSelect,dataScope } from '@/api/userApi'
  export default {
    name: "RoleManagement",//角色管理
    components:{
      newModify: resolve => {require(['@/components/systemManagement/RoleManagementView/newModify'], resolve)},//新建-修改组件
      interactiveWindow: resolve => {require(['@/components/interactiveWindow'], resolve)},//弹窗
    },
    data () {
      return {
        userPermsData:localStorage.getItem('userPerms'),
        //输入数据
        inputData:"",
        //页面切换状态
        pageType:true,
        //表格限制
        pagesize: 8,
        currentPage:1,
        //列表总数
        total:0,
        /*数据*/
        tableData:[],
        //勾选
        multipleSelection:[],
        tableNum:0,
        // 弹窗状态
        windowType:false,
        //弹窗组件数据
        windowData:{},
        // 新增-修改页面状态
        newModifyPageType:true,
        //新增-修改页面数据
        newModifyData:{},
        //树状数据
        treeData:[],
        //数据权限树
        deptData:[],
      }
    },

    created(){

    },
    mounted() {
      this.getListData();
      this.treeselect();
      this.deptTreeSelect();
    },
    methods: {
      //获取页面权限树
      async treeselect () {
        let self = this;
        const { data } = await treeselect();
        if(data.code==200){
          this.treeData = data.data;
        }
      },
      //获取数据权限树
      async deptTreeSelect () {
        let self = this;
        const { data } = await deptTreeSelect();
        if(data.code==200){
          this.deptData = data.depts;
        }
      },
      // 单独删除
      async clickDel(id){
        let ids = [];
        ids.push(id);
        const { data } = await roleDel(ids);
        if(data.code==200){
          this.windowData = {
            type:"2",
            title:"提示",
            text:"操作成功",
          };
          this.windowType = !this.windowType;
          this.$refs.multipleTable.clearSelection();
          this.getListData();
        }
      },
      //批量删除
      async clickAllDel () {
        let self = this;
        let ids = [];
        for(let i=0;i<self.multipleSelection.length;i++){
          ids.push(self.multipleSelection[i].roleId)
        }
        const { data } = await roleDel(ids);
        if(data.code==200){
          this.windowData = {
            type:"2",
            title:"提示",
            text:"操作成功",
          };
          this.windowType = !this.windowType;
          this.$refs.multipleTable.clearSelection();
          this.getListData();
        }
      },
      //数据列表
      async getListData () {
        let self = this;
        let obj={
          roleName:self.inputData,
          pageSize:self.pagesize,
          pageNum:self.currentPage
        };
        const { data } = await roleList(obj);
        if(data.code==200){
          this.tableData = data.rows;
          this.total = data.total;
          this.tableNum = 0;
          this.$forceUpdate();
        }
      },
      // 批量删除
      allDel(){
        if(this.multipleSelection[0]){
          this.windowData = {
            type:"1",
            title:"提示",
            text:"确定要批量删除这些信息吗?",
            leftButton:"取消",
            rightButton:"确定",
            cType:"1",
          };
          this.windowType = !this.windowType;
        }else{
          this.windowData = {
            type:"3",
            title:"提示",
            text:"您没有勾选任何数据!",
          };
          this.windowType = !this.windowType;
        }
      },
      //表格绑定ID
      getRowKey (row) {
        return row.id
      },
      indexMethod(index) {
        return (this.currentPage-1)*this.pagesize+index+1;
      },
      //翻页
      handleCurrentChange(val) {
        console.log(`当前页: `,val);
        this.currentPage = val;
        this.getListData();
      },
      // 新增
      addEdit(){
        let newData = {
          title:"新增",
          type:"1",
          list:[
            {
              name:"名称",
              value:"",
              inputType:true,
            },
            {
              name:"角色顺序",
              value:"1",
              elNumber:true,
              min:1,
            },
            {
              name:"备注",
              value:"",
              textArea:true,
              maxlength:40
            },
            {
              name:"权限",
              treeType:true,                          //树状声明
              treeData:JSON.parse(JSON.stringify(this.treeData)),                 //树状数据
              treeList:[],                           //树状勾选数据
            }
          ]
        };
        this.newModifyData = {...newData};
        this.pageType = !this.pageType;
      },
      //编辑-页面权限
      handleEdit(index, row) {
        let newData = {
          title:"编辑",
          type:"2",
          roleId:row.roleId,
          list:[
            {
              name:"角色名称",
              value:row.roleName,
              inputType:true,
            },
            {
              name:"角色顺序",
              value:"1",
              elNumber:true,
              min:1,
            },
            {
              name:"备注",
              value:row.remark,
              textArea:true,
              maxlength:40
            },
            {
              name:"权限",
              treeType:true,                          //树状声明
              treeData:JSON.parse(JSON.stringify(this.treeData)),                 //树状数据
              treeList:[],                           //树状勾选数据
            }
          ]
        };
        let list = []
        for(let i=0;i<row.menuIds.length;i++){
          let obj = {
            id:row.menuIds[i]
          }
          list.push(obj);
        }
        newData.list[3].treeList = list;
        this.newModifyData = {...newData};
        this.pageType = !this.pageType;
      },
      //编辑-数据权限
      handleEditOne(index, row) {
        let newData = {
          title:"编辑",
          type:"3",
          roleId:row.roleId,
          list:[
            {
              name:"角色名称",
              value:row.roleName,
              textType:true,
            },
            {
              name:"权限范围",
              value:row.dataScope=="1"?"全部数据权限":(row.dataScope=="2"?"自定数据权限":(row.dataScope=="3"?"本部门数据权限":(row.dataScope=="4"?"本部门及以下数据权限":(row.dataScope=="5"?"仅本人数据权限":"")))),
              list:["全部数据权限","自定数据权限","本部门数据权限","本部门及以下数据权限","仅本人数据权限"],
            },
            {
              name:"权限",
              treeType:row.dataScope=="2"?true:false,                          //树状声明
              treeData:JSON.parse(JSON.stringify(this.deptData)),                 //树状数据
              treeList:[],                           //树状勾选数据
            }
          ]
        };
        let list = []
        for(let i=0;i<row.deptIds.length;i++){
          let obj = {
            id:row.deptIds[i]
          }
          list.push(obj);
        }
        newData.list[2].treeList = list;
        this.newModifyData = {...newData};
        this.pageType = !this.pageType;
      },
      // 删除
      handleDelete(index, row) {
        this.windowData = {
          type:"1",
          title:"提示",
          text:"确定要删除这条信息吗?",
          leftButton:"取消",
          rightButton:"确定",
          cType:"2",
          newId:row.roleId
        };
        this.windowType = !this.windowType;
      },
      //勾选
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.tableNum = this.multipleSelection.length
      },
      //返回当前页面 供子页面调用
      outPage(){
        this.pageType = !this.pageType;
      },
      //弹窗组件左侧按钮方法-对应取消方法
      windowLeftClick(){
        this.windowType = !this.windowType;
      },
      //弹窗组件右侧按钮方法
      windowRightClick(data){
        this.windowType = false;
        if(data.cType==1){
          this.clickAllDel();
        }else if(data.cType==2){
          this.clickDel(data.newId);
        }
      },
      //新增-修改组件内左侧按钮事件
      newModifyLeftClick(){
        this.pageType = !this.pageType;
      },
      //新增-修改组件内左侧按钮事件
      newModifyRightClick(data){
        console.log(data);
        if(data.type=="1"||data.type=="2"){
          if(!data.list[0].value){
            this.windowData = {
              type:"3",
              title:"提示",
              text:"请输入角色名称",
            };
            this.windowType = !this.windowType;
            return
          }else if (!data.list[2].value){
            this.windowData = {
              type:"3",
              title:"提示",
              text:"请输入备注信息",
            };
            this.windowType = !this.windowType;
            return
          } else if (!data.list[3].treeList[0]){
            this.windowData = {
              type:"3",
              title:"提示",
              text:"请选择权限",
            };
            this.windowType = !this.windowType;
            return
          }
        }else if(data.type=="3"){
          if(data.list[1].value == "自定数据权限"){
            if(!data.list[2].treeList[0]){
              this.windowData = {
                type:"3",
                title:"提示",
                text:"请选择权限",
              };
              this.windowType = !this.windowType;
              return
            }
          }
        }
        if(data.type=="1"){
          //新增
          this.roleAdd(data);
        }else if(data.type=="2"){
          //编辑-页面权限
          this.roleEditor(data);
        }else if(data.type=="3"){
          //编辑-数据权限
          this.dataScope(data);
        }
      },
      //新建
      async roleAdd (item) {
        let self = this;
        let obj={
          roleName:item.list[0].value,
          roleSort:item.list[1].value,
          remark:item.list[2].value,
          menuIds:[],
        };
        for(let i=0;i<item.list[3].treeList.length;i++){
          obj.menuIds.push(item.list[3].treeList[i].id)
        }
        const { data } = await roleAdd(obj);
        if(data.code==200){
          this.pageType = !this.pageType;
          this.windowData = {
            type:"3",
            title:"提示",
            text:"新建成功",
          };
          this.windowType = !this.windowType;
          this.getListData();
        }
      },
      //编辑-页面权限
      async roleEditor (item) {
        let self = this;
        let obj={
          roleId:item.roleId,
          roleName:item.list[0].value,
          roleSort:item.list[1].value,
          remark:item.list[2].value,
          menuIds:[],
        };
        for(let i=0;i<item.list[3].treeList.length;i++){
          obj.menuIds.push(item.list[3].treeList[i].id)
        }
        const { data } = await roleEditor(obj);
        if(data.code==200){
          this.pageType = !this.pageType;
          this.windowData = {
            type:"3",
            title:"提示",
            text:"编辑成功",
          };
          this.windowType = !this.windowType;
          this.getListData();
        }
      },
      //编辑数据权限
      async dataScope (item) {
        let self = this;
        let obj={
          roleId:item.roleId,
          dataScope:item.list[1].value=="全部数据权限"?"1":(item.list[1].value=="自定数据权限"?"2":(item.list[1].value=="本部门数据权限"?"3":(item.list[1].value=="本部门及以下数据权限"?"4":(item.list[1].value=="仅本人数据权限"?"5":"")))),
          deptIds:[]
        };
        let list = [];
        if(item.list[1].value=="自定数据权限"){
          for(let i=0;i<item.list[2].treeList.length;i++){
            list.push(item.list[2].treeList[i].id)
          }
          obj.deptIds = list;
        }
        const { data } = await dataScope(obj);
        if(data.code==200){
          this.pageType = !this.pageType;
          this.windowData = {
            type:"3",
            title:"提示",
            text:"编辑成功",
          };
          this.windowType = !this.windowType;
          this.getListData();
        }
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    display flex
    flex-direction column
    flex:1;
    .big-max-box
      display flex
      flex-direction column
      flex:1;
      //搜索与操作按钮
      .top-box
        display flex
        .input-box
          width:464px;
          display flex
          margin:0 0 0 105px;
          input
            height:28px;
            width:370px;
            border:1px solid $theme;
            margin-right:5px;
            padding-left:10px;
            color $color_ff
          div
            display flex
            height:30px;
            width:80px;
            background:url("~@/assets/images/button_03.png");
            background-size:100% 100%;
            img
              display block
              height:20px;
              width:20px;
              margin:5px 6px 0 13px;
            p
              line-height:30px;
              font-size:$font_12;
              color:$color_ff;
        .add-button
          width:110px;
          height:30px;
          margin-left:914px;
          background:url("~@/assets/images/button_06_1.png");
          background-size:100% 100%;
          line-height:30px
          color:$color_ff;
          font-size:$font_12;
          padding-left:44px;
          text-align left
        .del-button
          margin-left:30px;
          width:110px;
          height:30px;
          background:url("~@/assets/images/button_05_1.png");
          background-size:100% 100%;
          line-height:30px
          color:$color_ff;
          font-size:$font_12;
          padding-left:41px;
          text-align left
        .text-p
          width:103px;
          color:$color_ff;
          line-height:30px
          font-size:$font_12;
      .table-box
        width:1710px !important;
        margin:20px 105px;
        .table-min-button
          width:280px;
          margin:0 auto;
          display flex
          div:nth-child(1)
            height:20px;
            width:100px;
            font-size:$font_14;
            color:$theme;
            display flex
            margin-right:11px;
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
          div:nth-child(2)
            height:20px;
            width:100px;
            font-size:$font_14;
            color:$theme;
            display flex
            margin-right:11px;
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
          div:nth-child(3)
            height:20px;
            width:60px;
            font-size:$font_14;
            color:$theme3;
            display flex
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
  //修改table表格样式
  .el-table
    background rgba(6,177,240,0.2)
  .el-table /deep/ tr
  .el-table /deep/ th
    background rgba(6,177,240,0)
  .el-table::before
    height:0;
  .el-table /deep/ .cell
    max-height:46px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  .el-table /deep/ td
  .el-table /deep/ th.is-leaf
    border-bottom:0!important;
  .el-table /deep/ .el-checkbox__inner
    //background rgba(6,177,240,0.2)
    border 1px solid #216f93 !important
  .el-table /deep/ thead
    color:$color_ff;
  .el-table /deep/ th
    text-align-last: center;
  .el-table /deep/ td
    text-align-last: center;
  .el-table
    color:$color_a1
  .el-table /deep/ tbody tr:hover > td
    background rgba(6,177,240,0.2)
    color:$theme;
  .el-table /deep/ .el-checkbox
    width:14px;
    margin:0 auto;
    display block
    //修改动作条样式
  .el-pagination.is-background /deep/ .btn-next
  .el-pagination.is-background /deep/ .btn-prev
  .el-pagination.is-background /deep/ .el-pager li
    background:url("~@/assets/images/button_13.png");
    color:$color_ff;
  .el-pagination.is-background /deep/ .el-pager li:not(.disabled).active
    background:url("~@/assets/images/button_14.png");
    color:$color_ff;
  .colorA
    color :$theme;
  ::-webkit-input-placeholder
    color: $border_1;
  ::-moz-placeholder
    color: $border_1;
  ::-ms-input-placeholder
    color: $border_1;
</style>
