<style>
  .role-form .role_Line {
    width: 2px;
    height: 11px;
    margin-right: 10px;
    background-color: #3FC4FF;
    display: inline-block;
  }

  .role-form .role_MenuList {
    width: 100%;
    height: 40px;
    border-radius: 3px;
    border: 1px solid #2961FE;
    color: #2961FE;
    align-items: center;
    font-size: 12px;
    white-space: nowrap;
  }


  .role-form .role_TreeList {
    height: 250px;
    overflow: auto;
  }
  .role-form li{
    list-style-type:none
  }
  .role_TreeList ul{
    margin-left: 10px;
    padding: 0;
  }
  /*.role-form .role_TreeList::-webkit-scrollbar {*/
  /*  width: 3px;*/
  /*  height: 3px;*/
  /*  background-color: #F5F5F5;*/
  /*}*/

  /*!*定义滚动条轨道 内阴影+圆角*!*/
  /*.role-form .role_TreeList::-webkit-scrollbar-track {*/
  /*  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
  /*  border-radius: 10px;*/
  /*  background-color: #F5F5F5;*/
  /*}*/

  /*!*定义滑块 内阴影+圆角*!*/
  /*.role-form .role_TreeList::-webkit-scrollbar-thumb {*/
  /*  border-radius: 10px;*/
  /*  -webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));*/
  /*  background-color: #0ae;*/
  /*}*/


  .role-form .role_MenuList span {
    width: 80px;
    display: inline-block;
    text-align: center;
    height: 100%;
    line-height: 38px;
    cursor: pointer;
  }
  .role-form .q-checkbox--dense span{
    width: 0px;
  }

  .role-form .checkedRole {
    background-color: #2961FE;
    color: #fff;
  }

  .role-form .role_ItemList {
    width: 200px;
    height: 300px;
    background-color: #F1F1F1;
    margin-right: 10px;
    display: inline-block;
    border-radius: 4px;
    overflow: auto;
  }

  .role-form .role_ItemList::-webkit-scrollbar {
    width: 3px;
    height: 6px;
    background-color: #F5F5F5;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  .role-form .role_ItemList::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }

  /*定义滑块 内阴影+圆角*/
  .role-form .role_ItemList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
    background-color: #0ae;
  }


  .role-form .Item_Main::-webkit-scrollbar {
    width: 3px;
    height: 6px;
    background-color: #F5F5F5;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  .role-form .Item_Main::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }

  /*定义滑块 内阴影+圆角*/
  .role-form .Item_Main::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
    background-color: #0ae;
  }


  .role-form .role_SecondItem {
    width: 100%;
    height: 40px;
    background-color: #3fc4ff;
    padding: 0 10px 0 20px;
    display: flex;
    align-items: center;
    color: #fff;
    justify-content: space-between;
  }

  .role-form .Item_Main {
    margin: 20px 0;
    white-space: nowrap;
    overflow: auto;
    padding-bottom: 20px;
  }

  .role-form .role_textarea .q-field__control-container {
    height: 85px;
  }

</style>
<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 800px;max-width:900px;" class="role-form">
      <q-card-section>
        <div class="text-h6">{{objOption.RoleId==0?'新增角色信息':'修改角色信息'}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="text-caption q-mb-lg text-dark-6">
        <span class="role_Line"></span>角色信息</div>
        <div class="row wrap">
          <q-input filled stack-label maxlength="50" :dense="false" v-model="objOption.RoleName" ref="RoleName"
            class="col-6 q-pr-lg q-pb-lg" label="角色名称" :rules="[val => !!val || '请填写角色名称']" />
        </div>
        </div>
        <div class="row wrap role_textarea">
          <q-input filled v-model="objOption.RoleIntro" class="col-12 row-2" maxlength="100" label="角色介绍"
            type="textarea" />
          <div class="col-12 q-pr-lg q-pb-lg q-pt-lg">
            <q-toggle size="md" label="状态" color="primary" :false-value="1" :true-value="0" v-model="objOption.Status"
              title="注意：关闭后，角色将无法正常使用." />
          </div>
        </div>
        <div class="text-caption q-mb-lg q-px-md text-grey-6">权限设置</div>
        <div class="role_MenuList">
          <span @click="getItem(item,index)" :class="{'checkedRole':index==checkedIndex}"
            v-for="(item,index) in AuthMenuList" :key="index">{{item.MenuName}}
             <q-checkbox v-model="item.IsChecked" dense   color="red" size="30px" style="margin-bottom: 2px" @input="onecheck(index)"></q-checkbox>
          </span>
        </div>
        <div class="Item_Main">
          <div class="role_ItemList" v-for="(subItem,subIndex) in SubMenuList">
            <div class="role_SecondItem">
              <span>{{subItem.MenuName}}</span>
              <q-checkbox v-model="subItem.IsChecked" @input="twocheck(subIndex)"/>
            </div>
            <div class="role_TreeList">
              <ul>
                <li v-for="(x,j) in subItem.SubList">
                  <span style="width: 15px;display: inline-block" @click="x.showChildren=!x.showChildren,$forceUpdate()">
                    <i class="iconfont icon-sanjiaoxing-you" v-if="x.showChildren==false && x.SubList.length>0" style="font-size: 5px;color: #DDDEE0"></i>
                    <i class="iconfont icon-sanjiaoxingx" v-if="x.showChildren==true && x.SubList.length>0" style="font-size: 5px;color: #DDDEE0" ></i>
                  </span>
                  <q-checkbox v-model="x.IsChecked"    size="30px" style="margin-bottom: 2px" @input="threecheck(subIndex,j)"></q-checkbox>
                  <span >{{x.MenuName}}</span>
                  <ul v-if="x.SubList.length>0&& x.showChildren==true" style="margin-left: 35px">
                    <li v-for="(a,b) in x.SubList">
                      <q-checkbox v-model="a.IsChecked"  size="30px" style="margin-bottom: 2px" @input="fourcheck(subIndex,j,b)"></q-checkbox>
                      <span>{{a.MenuName}}</span>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeSaveForm" />
        <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
          @click="saveRole" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    queryRoleInfo,
    saveRoleInfo,
    GetRolePermission
  } from '../../api/system/index'
  import selectTree from '../common/select-tree'
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    components: {
      selectTree
    },
    data() {
      return {
        persistent: true,
        objOption: {
          RoleId: 0, //角色编号
          RoleName: "", //角色名称
          RoleIntro: "", //角色介绍
          Status: 0, //状态(0-正常,1-禁用),
          RolePermissionList: [], //菜单权限
          RoleFunctionList: [], //功能权限
        },
        returnString: [],
        optionTitle: "",
        saveLoading: false,
        AuthMenuList: [], //权限列表
        SubMenuList: [], //下级菜单权限
        group: [],
        checkedIndex: 0, //默认选中
        chooseCategroyArray: [],
      }
    },
    computed: {

    },
    mounted() {
      this.initObj();
      this.queryRolePermission();
    },
    methods: {
      //菜单切换
      menuChange(item) {
        this.SubMenuList = [];
        if (item.IsChecked) {
          this.SubMenuList = item.SubList;
        }
      },
      //点击选中
      getItem(item, index) {
        if (this.checkedIndex != index) {
          this.checkedIndex = index;
          this.SubMenuList = [];
          this.SubMenuList = item.SubList;
        }
      },
      //获取权限
      queryRolePermission() {
        var qMsg = {
          RoleId: this.saveObj&& this.saveObj.RoleId?this.saveObj.RoleId:0
        };
        GetRolePermission(qMsg).then(res => {
          if (res.Code == 1) {
            this.AuthMenuList = res.Data;
            if (this.AuthMenuList.length > 0) {
              this.SubMenuList = this.AuthMenuList[0].SubList;
            }
            this.AuthMenuList.forEach(x=>{
              if(x.SubList.length>0){
                x.SubList.forEach(j=>{
                  if(j.SubList.length>0){
                    j.SubList.forEach(k=>{
                      if(k.SubList.length>0){
                          k.showChildren=false
                      }
                    })
                  }
                })
              }
            })
          }
        }).catch(() => {})
      },
      //初始化表单
      initObj() {
        this.returnString = [];
        if (this.saveObj && this.saveObj.RoleId > 0) {
          queryRoleInfo({
            RoleId: this.saveObj.RoleId
          }).then(res => {
            this.objOption.RoleId = res.Data.RoleId;
            this.objOption.RoleName = res.Data.RoleName;
            this.objOption.RoleIntro = res.Data.RoleIntro;
            this.objOption.Status = res.Data.Status;
            this.returnString = res.Data.CheckMenuList;
          })
          this.optionTitle = "修改角色信息"
        } else {
          this.optionTitle = "新增角色"
          this.objOption.RoleId = 0;
          this.objOption.RoleName = "";
          this.objOption.RoleIntro = "";
          this.objOption.Status = 0;
        }
      },
      onecommon(AuthMenuList,checkedIndex,type){
        if(AuthMenuList[checkedIndex].SubList.length>0){
          AuthMenuList[checkedIndex].SubList.forEach((x,xa)=>{
            x.IsChecked=type;
            if(AuthMenuList[checkedIndex].SubList[xa].SubList.length>0){
              AuthMenuList[checkedIndex].SubList[xa].SubList.forEach((j,ja)=>{
                j.IsChecked=type
                let threesub = AuthMenuList[checkedIndex].SubList[xa].SubList[ja].SubList
                if(threesub.length>0){
                  threesub.forEach((k,ka)=>{
                    k.IsChecked=type
                  })
                }
              })
            }
          })
        }
      },
      onecheck(index){//第1级的操作
        let AuthMenuList = this.AuthMenuList;//全部数据
        let checkedIndex = index;//当前选择
        if(AuthMenuList[checkedIndex].IsChecked==true){
          this.onecommon(AuthMenuList,checkedIndex,true)
        }else {
          this.onecommon(AuthMenuList,checkedIndex,false)
        }
        this.AuthMenuList = AuthMenuList;
      },
      twocommon(AuthMenuList,twoiIsChecked,type){
        if(twoiIsChecked.SubList.length>0){
          twoiIsChecked.SubList.forEach((x,xa)=>{
            x.IsChecked=type;
            let trsub =  twoiIsChecked.SubList[xa].SubList
            if(trsub.length>0){
              trsub.forEach((j,ja)=>{
                j.IsChecked=type
              })
            }
          })
        }
      },
      twocheck(twoindex){//第2级的操作
        let AuthMenuList = this.AuthMenuList;//全部数据
        let checkedIndex = this.checkedIndex;//当前选择
        let twoiIsChecked = AuthMenuList[checkedIndex].SubList[twoindex]
        if(twoiIsChecked.IsChecked==true){
          this.twocommon(AuthMenuList,twoiIsChecked,true)
          AuthMenuList[checkedIndex].IsChecked=true
        }else {
          this.twocommon(AuthMenuList,twoiIsChecked,false)
          let type = false
          AuthMenuList[checkedIndex].SubList.forEach(x=>{
            if(x.IsChecked==true){
              type=true
            }
          })
          if(type==false){
            AuthMenuList[checkedIndex].IsChecked=false
          }
        }
      },
      threecheck(twoindex,threeindex){//第3级的操作
        let AuthMenuList = this.AuthMenuList;//全部数据
        let checkedIndex = this.checkedIndex;//当前选择
        let threeIsChecked = AuthMenuList[checkedIndex].SubList[twoindex].SubList[threeindex];
        if(threeIsChecked.IsChecked == true){
          if(threeIsChecked.SubList.length>0){
            threeIsChecked.SubList.forEach(x=>{ //下级处理
              x.IsChecked = true
            })
          }
          //上级处理
          AuthMenuList[checkedIndex].IsChecked=true;
          AuthMenuList[checkedIndex].SubList[twoindex].IsChecked=true;
        }else {
          if(threeIsChecked.SubList.length>0){
            threeIsChecked.SubList.forEach(x=>{
              x.IsChecked = false
            })
          }
          let type2 = false; //找第三级有选择的内容
          AuthMenuList[checkedIndex].SubList[twoindex].SubList.forEach(x=>{
            if(x.IsChecked==true){
              type2=true
            }
          })
          if(type2==false){
            AuthMenuList[checkedIndex].SubList[twoindex].IsChecked=false
          }
          let type = false//找第二级有选择的内容
          AuthMenuList[checkedIndex].SubList.forEach(x=>{
            if(x.IsChecked==true){
              type=true
            }
          })
          if(type==false){
            AuthMenuList[checkedIndex].IsChecked=false
          }
        }
      },
      fourcheck(twoindex,threeindex,fourindex){//第4级的操作
        let AuthMenuList = this.AuthMenuList;//全部数据
        let checkedIndex = this.checkedIndex;//当前选择
        let threeIsChecked = AuthMenuList[checkedIndex].SubList[twoindex].SubList[threeindex].SubList[fourindex];
        if(threeIsChecked.IsChecked==true){
          //上级处理
          AuthMenuList[checkedIndex].IsChecked=true;
          AuthMenuList[checkedIndex].SubList[twoindex].IsChecked=true;
          AuthMenuList[checkedIndex].SubList[twoindex].SubList[threeindex].IsChecked=true;
        }else {
          let type3 = false; //找第四级有选择的内容
          AuthMenuList[checkedIndex].SubList[twoindex].SubList[threeindex].SubList.forEach(x=>{
            if(x.IsChecked==true){
              type3=true
            }
          })
          if(type3==false){
            AuthMenuList[checkedIndex].SubList[twoindex].SubList[threeindex].IsChecked=false
          }
          let type2 = false; //找第三级有选择的内容
          AuthMenuList[checkedIndex].SubList[twoindex].SubList.forEach(x=>{
            if(x.IsChecked==true){
              type2=true
            }
          })
          if(type2==false){
            AuthMenuList[checkedIndex].SubList[twoindex].IsChecked=false
          }
          let type = false//找第二级有选择的内容
          AuthMenuList[checkedIndex].SubList.forEach(x=>{
            if(x.IsChecked==true){
              type=true
            }
          })
          if(type==false){
            AuthMenuList[checkedIndex].IsChecked=false
          }
        }
      },
      //关闭弹窗
      closeSaveForm() {
        this.$emit('close')
        this.persistent = false
      },
      //保存菜单
      saveRole() {
        this.saveLoading = true;
        //角色菜单权限
        var rolePermissionList = [];
        //角色功能权限
        var roleFunctionList = [];
        if (this.AuthMenuList && this.AuthMenuList.length > 0) {
          this.AuthMenuList.forEach(item => {
            //一级菜单权限
            if (item.IsChecked) {
              rolePermissionList.push({
                ID: 0,
                Role_Id: this.objOption.RoleId,
                Menu_Id: item.MenuId
              });
            }
            //二级菜单权限
            if (item.SubList && item.SubList.length > 0) {
              item.SubList.forEach(secondItem => {
                if (secondItem.IsChecked) {
                  rolePermissionList.push({
                    ID: 0,
                    Role_Id: this.objOption.RoleId,
                    Menu_Id: secondItem.MenuId
                  });
                }
                //三级菜单权限
                if (secondItem.SubList && secondItem.SubList.length > 0) {
                  secondItem.SubList.forEach(thirdItem => {
                    if (thirdItem.IsChecked) {
                      rolePermissionList.push({
                        ID: 0,
                        Role_Id: this.objOption.RoleId,
                        Menu_Id: thirdItem.MenuId
                      });
                    }
                    //四级--功能权限
                    if (thirdItem.SubList && thirdItem.SubList.length > 0) {
                      thirdItem.SubList.forEach(fourthItem => {
                        if (fourthItem.IsChecked) {
                          roleFunctionList.push({
                            ID: 0,
                            Role_Id: this.objOption.RoleId,
                            Action_Id: fourthItem.MenuId
                          });
                        }
                      })
                    }
                  });
                }
              })
            }
          })
        }
        this.objOption.RolePermissionList = rolePermissionList;
        this.objOption.RoleFunctionList = roleFunctionList;
        saveRoleInfo(this.objOption).then(res => {
          this.saveLoading = false
          this.$q.notify({
            icon: 'iconfont icon-chenggong',
            color: 'accent',
            timeout: 2000,
            message: '数据保存成功！',
            position: 'top'
          })
          this.$emit("success")
          this.closeSaveForm()
        }).catch(() => {
          this.saveLoading = false
        })
      }
    },
  }

</script>
