<template>
  <div class="selector-wrapper">
    <div class="hd">
      <search-bar @submit="onSubmit" @cancel="onCancel"></search-bar>
      <tab-bar @change="onTabChange"></tab-bar>
    </div>
    <div class="bd" ref="scroll">
      <div>
        <template v-if="!isEmpty">
          <div class="v-tree-title">{{treeTitle}}</div>
          <tree-list :bus="bus" :list="treeList" :is-simple-list="isSimpleList">
            <slot />
            <template v-if="!isSearch" #companyUser>
              <tree-item
                v-for="(item, index) of companyUser"
                :key="index"
                :nodes="item"
                :bus="bus"
                :is-simple-list="true"
              >
                <slot />
              </tree-item>
            </template>
          </tree-list>
        </template>
        <empty v-else></empty>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import SearchBar from './components/SearchBar'
import { removeRepeatByKey } from '@/assets/utils/util'
export default {
    name: 'SimpleSelector',
    components: {
        SearchBar,
        TreeList: () => import('./components/TreeList'),
        Empty: () => import('@/common/Empty'),
        TreeItem: () => import('./components/TreeItem'),
        TabBar: () => import('./components/TabBar')
    },
    props: {
        bus: {
            required: true
        }
    },
    data () {
        return {
            scroll: null,
            treeList: [],
            companyUser: [],
            isSimpleList: false,
            isSearch: false, // 防止搜索时显示 company用户
            allUserList: [],
            treeTitle: ''
        }
    },
    computed: {
        isEmpty () {
            return this.treeList.length === 0 && this.companyUser.length === 0
        }
    },
    methods: {
    // 获取组件架构
        getOrganizeTreeWithUser () {
            // 新平台的接口
            this.$api.platBaseApi.getOrganizeTreeWithUser().then(res => {
                this.$handleResponse(res).then(({ fullname, children, users }) => {
                    this.treeTitle = fullname
                    this.treeList = children
                    this.companyUser =
            users && users.length ? users.map(item => ({ users: [item] })) : []
                    let arr = this.loopTreeList(children).concat(users)
                    this.allUserList = removeRepeatByKey(arr, 'user_id')
                })
            })
        },
        // 获取自定义分组的树
        getCustomGroupWithPeople () {
            // 新平台的接口
            this.$api.platBaseApi.getCustomGroupWithPeople().then(res => {
                this.$handleResponse(res).then(data => {
                    this.treeTitle = '自定义分组'
                    this.treeList = data
                    this.companyUser = []
                    this.allUserList = this.loopTreeList(data)
                })
            })
        },
        onSubmit (value) {
            console.log(value)
            if (!this.allUserList.length) return
            const searchUserList = this.allUserList.filter(item =>
                item.real_name.includes(value)
            )
            this.isSimpleList = true
            this.isSearch = true
            this.companyUser = []
            this.treeList = searchUserList.length
                ? [
                    {
                        users: searchUserList
                    }
                ]
                : []
        },
        onCancel () {
            if (this.isSearch) {
                this.isSimpleList = false
                this.isSearch = false
                this.getOrganizeTreeWithUser()
            }
        },
        // 递归树 获取userlist
        loopTreeList (list) {
            if (!list.length) return
            let arr = []
            const loop = data => {
                data.forEach(item => {
                    if (item.users && item.users.length) arr = arr.concat(item.users)
                    item.children && item.children.length && loop(item.children)
                })
            }
            loop(list)
            return arr
        },
        // tabChange
        onTabChange (value) {
            !value ? this.getOrganizeTreeWithUser() : this.getCustomGroupWithPeople()
        }
    },
    mounted () {
        this.$nextTick(() => {
            this.scroll = new BScroll(this.$refs.scroll, {
                click: true
            })
        })
        this.getOrganizeTreeWithUser()
    }
}
</script>

<style lang="stylus" scoped>
.selector-wrapper
  height 100%
  display flex
  flex-direction column
  .hd
    flex-shrink 0
    background-color #fff
  .bd
    flex 1
    overflow hidden
    .v-tree-title
      position relative
      padding 10px 15px
      line-height 22px
      background-color #fff
      &:after
        content ''
        position absolute
        left 15px
        bottom 0
        height 1px
        right 0
        background-color #C7C7C7
        transform scaleY(0.5)
</style>
