<template>
  <!-- 通讯录 -->
  <div class="team-contacts relative">
    <!-- 右侧导航 -->
    <div class="nav-wrapper fixed top-1/2 transform -translate-y-1/2 right-0 w-6 z-20">
      <div
        v-for="(nav, index) in navs"
        :key="index"
        class="oy-0.5 text-center font-medium text-xs"
        :class="currentNav === nav ? 'text-color-primary' : 'text-text-secondary'"
        @click="clickNav(nav)"
      >
        {{ nav }}
      </div>
    </div>
    <template v-if="Object.keys(list).length > 0 || (leader.list && leader.list.length > 0)">
      <!-- 主管负责人 -->
      <div class="leaders" v-if="leader.list.length > 0">
        <div class="text-text-secondary py-1">{{sectionTitleLeader}}</div>
        <div
          v-for="(l, index) in leader.list"
          :key="index"
          class="flex items-center color-color-primary font-normal"
        >
          <!-- 设置radio -->
          <template v-if="radio && canSelectLeader(l)">
            <div class="w-8 h-8 flex items-center justify-start" @click="handleCheck(l)">
              <template v-if="checked.indexOf(l.id) > -1">
                <app-icon
                  type="png"
                  icon-name="radio-checked"
                  class-name="h-4 w-4"
                />  
              </template>
              <template v-else>
                <app-icon
                  type="png"
                  icon-name="radio"
                  class-name="h-4 w-4"
                />  
              </template>
            </div>
          </template>
          <contact-member :member="l" @click="clickMember" />
        </div>
      </div>
      <!-- 成员 -->
      <div class="members">
        <div class="text-text-secondary py-1">成员</div>
        <div
          v-for="(value, key) in list"
          :key="key"
          :ref="key"
        >
          <div class="text-text-secondary py-1 sticky top-12 bg-white z-10">{{ key }}</div>
          <div
            v-for="(member, index) in list[key]"
            :key="index"
            class="flex items-center"
          >
            <!-- 设置radio -->
            <template v-if="radio">
              <div class="w-8 h-8 flex items-center justify-start flex-shrink-0" @click="handleCheck(member)">
                <template v-if="checked.indexOf(member.id) > -1">
                  <app-icon
                    type="png"
                    icon-name="radio-checked"
                    class-name="h-4 w-4"
                  />  
                </template>
                <template v-else>
                  <app-icon
                    type="png"
                    icon-name="radio"
                    class-name="h-4 w-4"
                  />  
                </template>
              </div>
            </template>
            <contact-member
              :member="member"
              @click="clickMember"
            />
          </div>
        </div>
      </div>
    </template>
    <div
      class="text-text-secondary text-center text-sm h-20 flex items-center justify-center"
      v-else
    >暂无团队成员</div>
  </div>
</template>

<script lang="ts">
import Vue, {PropType} from 'vue'
import { Staff, Contacts } from '@/Interface'
import { Role } from '@/service/moudles/service.dto'
import { getContacts, getLeaders, uniqueArr } from '@/util/Contact'

export default Vue.extend({
  props: {
    leader: {
      type: Object,
      default(){
        return {}
      }
    },
    contactList: {
      type: Array as PropType<Staff[]>,
      default() {
        return []
      }
    },
    radio: {
      type: Boolean,
      default: false
    },
    checked: {
      type: Array,
      default() {
        return []
      }
    },
    multiple: {
      type: Boolean,
      default: false
    },
    containerId: String,
    sectionTitleLeader: {
      type: String,
      default: '权限管理'
    }
  },
  components:{ 
    'app-icon':()=>import('@/components/common/Icon.vue'),
    'contact-member': () => import('./contact-member.vue')
    // 'contact-member-group': () => import('./contact-member-group.vue')
  },
  name: 'TeamContacts',
  data() {
    return {
      currentNav: 'A',
      scrollTop: 0
    }
  },
  mounted() {
    if (typeof this.containerId !== 'undefined') {
      this.container.addEventListener('scroll', this.scrollHandler)
    } else {
      window.addEventListener('scroll', this.scrollHandler)
    }
  },
  beforeDestroy() {
    if (typeof this.containerId !== 'undefined') {
      this.container.removeEventListener('scroll', this.scrollHandler)
    } else {
      window.removeEventListener('scroll', this.scrollHandler)
    }
  },
  computed: {
    container(): HTMLElement {
      if (typeof this.containerId !== 'undefined' && this.containerId !== '') {
        return document.getElementById(this.containerId) as HTMLDivElement
      } else {
        return document.documentElement
      }
    },
    filteredContacts():{[key:string]: Staff[]}{
      return getContacts(this.contactList.filter((c:Staff) => this.leader.list.findIndex((l:Staff) => l.id === c.id) < 0))
    },
    navs(): string[] {
      let arr: string[] = []
      for (let key in this.filteredContacts) {
        if (key !== '#'){
          arr.push(key)
          arr.sort()
        } else {
          arr.sort().push('#')
        }
      }
      if (arr[0] && arr[0] === '#') {
        const head = arr.splice(0, 1)[0]
        arr.push(head)
      }
      return arr
    },
    list() {
      const obj: Contacts = {}
      this.navs.forEach(nav => {
        obj[nav] = this.filteredContacts[nav]
      })
      return obj
    }
  },
  methods: {
    canSelectLeader(leader: Staff) {
      return this.contactList.findIndex((l: Staff) => l.id === leader.id) > -1
    },
    debounce(fn: ()=>void, delay: number) {
      let timer: number | null
      return function() {
        if (timer !== null) {
          clearTimeout(timer)
        }
      }
    },
    scrollHandler() {
      const top = this.container.scrollTop
      this.scrollTop = top
      this.navs.forEach(nav => {
        if ((this.$refs[nav] as Array<HTMLDivElement>).length > 0) {
          const navTop = (this.$refs[nav] as Array<HTMLDivElement>)[0].getBoundingClientRect().top
          if (navTop < 90) {
            this.currentNav = nav
          }
        }
      })
    },
    clickNav(nav: string) {
      this.currentNav = nav
      const div = (this.$refs[nav] as Array<HTMLDivElement>)[0]
      const top = div.getBoundingClientRect().top
      this.container.scrollTop = this.scrollTop + top - 48
    },
    clickMember(member: Staff) {
      if(this.radio) {
        this.handleCheck(member)
        return
      }
      this.$emit('click-member', member)
    },
    handleCheck(member: Staff) {
      if (this.multiple) {
        // 多选
        let arr = Array.from(this.checked)
        const index = arr.findIndex(id => id === member.id)
        if (index > -1) {
          arr.splice(index, 1)
        } else {
          arr.push(member.id)
        }
        this.$emit('update:checked', arr)
      } else {
        // 单选
        const arr = [member.id]
        this.$emit('update:checked', arr)
      }
    }
  }
})
</script>

<style lang="less">

</style>
