<template>
  <section :class="['grade'+grade,'grade']">
    <section class="clr" :class="[{'bn':permissionObj.Children&&permissionObj.Children.length>0},{'show':permissionObj.show}]">
      <div class="big" @click="showChild(permissionObj)" v-once>
        <i v-if="permissionObj.Children&&permissionObj.Children.length>0"></i>
            {{getName(permissionObj.Permissionlabel)}}
      </div>
      <div v-for="(a,i) in permissionObj.permission" :key="i">
        <span :class="[{'choose':a.value==true},{'disabled':a.value== 'disabled' }]" @click="choose(permissionObj,i)"></span>     
      </div>
    </section>
    <section  v-if="permissionObj.show" >
    <permission :permissionObj="item" v-for="(item,index) in permissionObj.Children" :key="index" :parentStr="parentStr+'-'+permissionObj.Permissionlabel"
      :grade="grade+1"></permission>
    </section>

  </section>
</template>
<script>
  var that = null;
  export default {
    name: "permission",
    props: {
      permissionObj: {
        type: Object,
        require: true
      },
      grade: {
        type: Number,
        default: 0
      },
      parentStr: {
        type: String,
        default: ""
      }
    },
    created() {
      that = this;
    },
    methods: {
      getName(str) {
        return (that.parentStr + "-" + str).replace("-", "");
      },
      choose(obj, i) {
        //更改当前选中目标状态
        //   console.log(obj, i);
        if (typeof obj.permission[i].value == "boolean") {
          obj.permission[i].value = !obj.permission[i].value;
          that.chooseAll(obj, i, obj.permission[i].value);
          that.chooseAll(obj.parent, i);
          that.checkedisAll(obj, i, obj.permission[i].value);
        }
      },
      chooseAll(obj, i, bol) {
        //匹配当前菜单下子菜单选中状态
        //   
        if (obj && obj.Children) {
          if (bol != undefined) {
            //匹配子集
            obj.Children.forEach(el => {
              if (el.permission[i].value != bol) {
                if (el.permission[i].value != "disabled") el.permission[i].value = bol;
                that.checkedisAll(el, i, bol);
              }
              that.chooseAll(el, i, bol);
            });
          } else {
            //追溯父级
            var bool = true;
            obj.Children.forEach(el => {
              if (el.permission[i].value == false) bool = true;
            });
            if (obj.permission[i].value != bool) {
              if (obj.permission[i].value != "disabled") obj.permission[i].value = bool;
              that.checkedisAll(obj, i, bool);
            }
            that.chooseAll(obj.parent, i);
          }
        }
      },
      showChild(permissionObj) {
        permissionObj.show = !permissionObj.show;
      },
      checkedisAll(obj, i, bol) {
        if (i == 4) {
          for (var j = 0; j < 4; j++) {
            if (obj.permission[j].value != "disabled") obj.permission[j].value = bol;
          }
          if (obj.permission[i].value) obj.chooseNum = 4;
          else obj.chooseNum = 0;
        } else {
          if (obj.permission[i].value) {
            obj.chooseNum++;
          } else {
            obj.chooseNum--;
          }
        }
        if (obj.permission[4].value != "disabled") {
          if (obj.chooseNum == 4) obj.permission[4].value = true;
          else obj.permission[4].value = false;
        }
      }
    },
    computed: {}
  };

</script>
<style scoped>
.grade .big{
  width: 50%;
  box-sizing: border-box;
}
.grade .grade1 .big{
  padding-left: 10px;
}
.grade .grade1 .big i{
  left: 30px;
}
.grade .grade2 .big{
  padding-left: 20px;
}
</style>

