<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:last-child {
    margin-right: 0;
  }

  .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="20" :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'
  
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    components: {
 
    },
    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.$refs.RoleName.validate()
        if (!this.$refs.RoleName.hasError) {
          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) {
                    //系统菜单
                    if (secondItem.MenuType == 1) {
                      rolePermissionList.push({
                        ID: 0,
                        Role_Id: this.objOption.RoleId,
                        Menu_Id: secondItem.MenuId
                      });
                    } //功能菜单 
                    else if (secondItem.MenuType == 2) {
                      roleFunctionList.push({
                        ID: 0,
                        Role_Id: this.objOption.RoleId,
                        Action_Id: secondItem.MenuId
                      });
                    }
                  }
                  //三级菜单权限
                  if (secondItem.SubList && secondItem.SubList.length > 0) {
                    secondItem.SubList.forEach(thirdItem => {
                      if (thirdItem.IsChecked) {
                        //系统菜单
                        if (thirdItem.MenuType == 1) {
                          rolePermissionList.push({
                            ID: 0,
                            Role_Id: this.objOption.RoleId,
                            Menu_Id: thirdItem.MenuId
                          });
                        }
                        //功能菜单 
                        else if (thirdItem.MenuType == 2) {
                          roleFunctionList.push({
                            ID: 0,
                            Role_Id: this.objOption.RoleId,
                            Action_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>
