<template>

   <div class="sgy-tree" v-if="myTreeList.length > 0">
      <div class="level1" v-for="(level1, index1) in myTreeList" :key="level1.value">
            <p class="level1-lable">
              <i class="iconfont icon-start1"
                :class="[{hasChildren: level1.children && level1.children.length >0},
                       {expand: level1.expand}
                ]"
                @click="onClickExpand(index1)"
              ></i>
              <span @click="onClick(index1)">{{level1.title}}</span>
              <i class="iconfont icon-duigou" v-if="level1.checked" @click="onClick(index1)"></i>
            </p>

          <div class="level2" v-show="level1.expand" v-for="(level2, index2) in level1.children" :key="level2.value">
                <p class="level2-lable">
                  <i class="iconfont icon-start1"
                    :class="[{hasChildren: level2.children && level2.children.length >0},
                            {expand: level2.expand}
                    ]"
                    @click="onClickExpand(index1, index2)"
                  ></i>
                  <span @click="onClick(index1, index2)">{{level2.title}}</span>
                  <i class="iconfont icon-duigou" v-if="level2.checked"  @click="onClick(index1, index2)"></i>
                </p>

              <div class="level3" v-show="level2.expand" v-for="(level3, index3) in level2.children" :key="level3.value">
                    <p class="level3-lable">
                      <i class="iconfont icon-start1"
                      :class="[{hasChildren: level3.children && level3.children.length >0},
                               {expand: level3.expand}
                      ]"
                      @click="onClickExpand(index1, index2, index3)"
                      ></i>
                      <span @click="onClick(index1, index2, index3)">{{level3.title}}</span>
                      <i class="iconfont icon-duigou" v-if="level3.checked"  @click="onClick(index1, index2, index3)"></i>
                    </p>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {

  components: {

  },

  mixins: [],

  props: {
    treeList: {
      type: Array
    },
    // 默认单选
    multiple: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {
      myTreeList: []
    }
  },

  computed: {
  },
  watch: {
    // 并没有实际用处，方便调试使用
    treeList (newVal, oldVal) {
      this.setTreeList(newVal)
    }
  },
  mounted () {
    this.setTreeList(this.treeList)
  },

  methods: {
    setTreeList (newVal) {
      this.myTreeList = JSON.parse(JSON.stringify([...newVal]))
    },
    onClickExpand () {
      switch (arguments.length) {
        case 1:
          this.myTreeList[arguments[0]].expand = !this.myTreeList[arguments[0]].expand
          break
        case 2:
          this.myTreeList[arguments[0]].children[arguments[1]].expand = !this.myTreeList[arguments[0]].children[arguments[1]].expand
          break
        case 3:
          this.myTreeList[arguments[0]].children[arguments[1]].children[arguments[2]].expand = !this.myTreeList[arguments[0]].children[arguments[1]].children[arguments[2]].expand
          break
      }
    },

    onClick () {
      let tree = {}
      let parentTree = {}
      let grandParentTree = {}
      // let value = ''
      // let index = -1
      // let arr = []
      switch (arguments.length) {
        case 1:
          tree = this.myTreeList[arguments[0]]
          break
        case 2:
          parentTree = this.myTreeList[arguments[0]]
          tree = parentTree.children[arguments[1]]
          break
        case 3:
          grandParentTree = this.myTreeList[arguments[0]]
          parentTree = this.myTreeList[arguments[0]].children[arguments[1]]
          tree = parentTree.children[arguments[2]]
          break
      }

      // 单选时执行
      if (!this.multiple) {
        this.clearAllChecked()
      }

      // 若已选中，置为取消选中; 若未选中，置为选中
      tree.children = this.setChildrenChecked(tree, !tree.checked)

      // 通过parentTree检查兄弟，是否全部选中
      if (parentTree.children && this.isEveryChilderChecked(parentTree.children)) {
        parentTree.checked = true
      } else {
        parentTree.checked = false
      }

      // 同理
      if (grandParentTree.children && this.isEveryChilderChecked(grandParentTree.children)) {
        grandParentTree.checked = true
      } else {
        grandParentTree.checked = false
      }

      this.setSelectedValue()
    },

    setChildrenChecked (tree, checked) {
      // 自己
      tree.checked = checked
      let arr = tree.children
      if (arr && arr.length > 0) {
        for (let i = 0; i < arr.length; i++) {
          arr[i].checked = checked
          if (arr[i].children && arr[i].children.length > 0) {
            this.setChildrenChecked(arr[i], checked)
          }
        }
      }
      return arr
    },

    // 清空所有选中状态
    clearAllChecked () {
      this.myTreeList = this.myTreeList.map(i => {
        i.checked = false
        if (i.children && i.children.length > 0) {
          i.children = this.setChildrenChecked(i, false)
        }
        return i
      })
    },

    isEveryChilderChecked (children) {
      let arr = children
      if (arr && arr.length > 0) {
        for (let i = 0; i < arr.length; i++) {
          if (!arr[i].checked) {
            return false
          }
          if (arr[i].children && arr[i].children.length > 0) {
            this.isEveryChilderChecked(arr[i].children)
          }
        }
      }
      return true
    },

    setSelectedValue () {
      let obj = {
        buildingId: [],
        floorId: [],
        spaceId: []
      }
      for (let i of this.myTreeList) {
        if (i.checked) {
          if (i.type === 'building') {
            obj.buildingId.push(i.value)
          } else if (i.type === 'floor') {
            obj.floorId.push(i.value)
          } else {
            obj.spaceId.push(i.value)
          }
        } else if (i.children && i.children.length > 0) {
          for (let j of i.children) {
            if (j.checked) {
              if (j.type === 'floor') {
                obj.floorId.push(j.value)
              } else {
                obj.spaceId.push(j.value)
              }
            } else if (j.children && j.children.length > 0) {
              for (let k of j.children) {
                if (k.checked) {
                  obj.spaceId.push(k.value)
                }
              }
            }
          }
        }
      }
      this.$emit('on-change', obj)
    }
  }

}
</script>

<style scoped lang="less" >
.sgy-tree {
    i {
        display: inline-block;
        font-size: 12px;
        transform: scale(0.8);
        color: #728DEE ;
    }
    i.icon-start1 {
        transform: scale(0.8) rotate(270deg);
        display: none;
        position: absolute;
    }
    i.expand {
        transform: scale(0.8) rotate(0deg);
    }
    i.icon-duigou {
        position: absolute;
        right: 12px;
        top: 5px;
    }
    i.hasChildren {
         display: inline-block;
    }
    p {
        cursor: pointer;
        padding: 3px 5px;
        position: relative;
        &:hover {
            background-color: #F8F8F8;
        }
        span {
            display: inline-block;
            width: 100%;
            padding-left: 20px;
        }
    }
    .level1 {
        position: relative;
        padding-left: 10px;
        .level2 {
            padding-left: 15px;
            .level3 {
                padding-left: 15px;
                color:#A7ADB6;
            }
        }
    }
}
</style>
