<template>
  <li class="v-tree-item">
    <template v-if="!isSimpleList">
      <!-- 分组或者部门 -->
      <div
        class="v-item-node"
        :class="{'show-child': showChild}"
        v-if="nodes.id"
        @click="handleToggle"
      >
        <span class="v-item-icon iconfont">&#xe146;</span>
        <div class="v-item-lable">{{nodes.fullname}}</div>
        <!-- <div class="v-item-toggle" @click="handleToggle" v-if="btnActived">{{btnText}}</div> -->
        <span v-if="showArrow" class="v-item-arrow iconfont"></span>
      </div>
      <!-- 分组人员 -->
      <template v-if="nodes.users && nodes.users.length && showChild">
        <div
          class="v-item-node user-node"
          v-for="(item,index) of nodes.users"
          :key="index"
          @click="handleUserClick(item)"
        >
          <span class="v-item-icon iconfont">&#xe863;</span>
          <div class="v-item-lable">{{item.real_name}}</div>
          <div class="v-item-slot" @click.stop="handleSlotClick($event, item)">
            <slot />
          </div>
        </div>
      </template>

      <tree-list
        v-if="nodes.children && nodes.children.length && showChild"
        :list="nodes.children"
        :bus="bus"
      >
        <slot />
      </tree-list>
    </template>
    <template v-else>
      <!-- 直接渲染数据 -->
      <div
        class="v-item-node search-node"
        v-for="item of nodes.users"
        :key="item.user_id"
        @click="handleUserClick(item)"
      >
        <span class="v-item-icon iconfont">&#xe863;</span>
        <div class="v-item-lable">{{item.real_name}}</div>
        <div class="v-item-slot" @click.stop="handleSlotClick($event, item)">
          <slot />
        </div>
      </div>
    </template>
  </li>
</template>

<script>
export default {
    name: 'TreeItem',
    props: {
        nodes: {
            type: Object,
            required: true
        },
        bus: {
            required: true
        },
        isSimpleList: {
            type: Boolean,
            default: false
        }
    },
    components: {
        TreeList: () => import('./TreeList')
    },
    data () {
        return {
            showChild: false
        }
    },
    computed: {
        btnText () {
            return this.showChild ? '收起' : '展开'
        },
        showArrow () {
            return (
                (this.nodes.children && this.nodes.children.length > 0) ||
        (this.nodes.users && this.nodes.users.length > 0)
            )
        }
    },
    watch: {
        nodes (newVal) {
            this.showChild = false
        }
    },
    methods: {
        handleToggle () {
            if (!this.showArrow) {
                this.$vux.toast.text('没有下级或成员', 'middle')
                return
            }
            this.showChild = !this.showChild
        },
        // 插槽点击
        handleSlotClick (event, user) {
            console.log(event, user, this.nodes)
            // 返回当前点击元素，当前行数据，以及当前所在组织
            // 当插槽传html元素时
            // eg <p data-target="msg">插槽1</p>
            // 父组件可以通过 event.target.dataset.target 类型处理事件
            this.bus.$emit('slot-click', { event, user, node: this.nodes })
        },
        // 用户行点击
        handleUserClick (user) {
            this.bus.$emit('user-click', { user, node: this.nodes })
        }
    }
}
</script>

<style lang="stylus" scoped>
.v-tree-item
  position relative
  background-color #fff
  &:not(:last-child):after
    content ''
    position absolute
    left 15px
    bottom 0
    height 1px
    right 0
    background-color #C7C7C7
    transform scaleY(0.5)
  .v-item-node
    position relative
    padding 10px 15px 10px 42px
    line-height 22px
    display flex
    justify-content space-between
    align-items center
    &.show-child
      &:after
        content ''
        position absolute
        left 15px
        bottom 0
        height 1px
        right 0
        background-color #C7C7C7
        transform scaleY(0.5)
      .v-item-arrow
        &:before
          content '\e113'
    .v-item-icon
      position absolute
      top 0
      left 0
      line-height 42px
      width 42px
      text-align center
    .v-item-slot
      // padding 10px 15px
      height 100%
      margin-right -15px
      margin-top -10px
      margin-bottom -10px
    .v-item-arrow
      position absolute
      top 0
      right 0
      padding 10px 15px
      line-height 22px
      &:before
        content '\e112'
    & ~ .v-item-node.user-node
      margin-left 15px
      // &:before
      // content ''
      // position absolute
      // top 50%
      // left 4px
      // width 6px
      // height 6px
      // border-width 0 0 1px 1px
      // border-style solid
      // border-color #C7C7C7
      // transform translateY(-50%)
      &:after
        content ''
        position absolute
        left 15px
        bottom 0
        height 1px
        right 0
        background-color #C7C7C7
        transform scaleY(0.5)
    &.search-node
      &:after
        content ''
        position absolute
        left 15px
        bottom 0
        height 1px
        right 0
        background-color #C7C7C7
        transform scaleY(0.5)
  .v-tree-list
    padding-left 15px
    // .v-item-node
    // &:before
    // content ''
    // position absolute
    // top 50%
    // left 4px
    // width 6px
    // height 6px
    // border-width 0 0 1px 1px
    // border-style solid
    // border-color #C7C7C7
    // transform translateY(-50%)
</style>
