<script setup lang="ts">
  import MeetingBar from '../../components/mini-meeting-bar.vue';
  import { useInjector, useState } from 'vue-vulcan';
  import ContactsList from './contacts-list.vue';
  import WorkGroupsList from './work-groups-list.vue';  
  import { useAppInitInfo } from 'src/hooks/common/useAppInitInfo';  
  import { ref } from '@vue/reactivity';
  import { useThrottle } from 'any-hooks/common/useThrottle';
  import { useContacts } from 'any-hooks/contacts/useContacts';
 
  const [showLogo, setShowLogo] = useState(true);  
  const [viewMode, setViewMode] = useState<'items' | 'groups'>('items'); 
  const { keyword, setKeyWord } = useInjector(useContacts);

  const { rect }  = useInjector(useAppInitInfo); 
  const capTop    = ref(`${rect.top}px`);
  const capHeight = ref(rect.height-2);
  const capWidth  = ref(`${rect.width+15}px`);

  const onScroll  = useThrottle((event: any) => {       
    setShowLogo(event.detail.deltaY >= 0);    
  }, 500) 
</script>

<template>
  <view class="index page col-page top-bg">   
    <view class="search-box" :style="{'marginTop': capTop, 'marginRight': capWidth, height: capHeight+'px'}">
      <image class="logo" v-if="showLogo" src="../../assets/logo3x.png" mode="widthFix"></image>
      <view class="input-box" :style="{height: capHeight+'px','borderRadius': capHeight/2+'px'}">
        <image class="search-icon" src="../../assets/serch2x.png" mode="widthFix"></image>
        <input class="search" type="text" placeholder="搜索" v-model="keyword">
      </view>        
    </view>
    
    <scroll-view class="home-contents" :scrollY="true" @scroll="onScroll">
      <view class="tabs pd-1">
        <text class="tab-item contacts" :class="{active: viewMode==='items'}" @tap="setViewMode('items');setKeyWord('')">联系人</text>
        <!-- <text class="tab-item group" :class="{active: viewMode==='groups'}" @tap="setViewMode('groups');setKeyWord('')">群组</text> -->
      </view>
      <view class="list">
       <contacts-list v-if="viewMode === 'items'"></contacts-list>
       <work-groups-list v-else></work-groups-list>
      </view>
    </scroll-view>
  </view>
  <meeting-bar></meeting-bar>
</template>

<style lang="less" >    
  .search-box{
    display: flex;
    align-items: center;
    padding-left: 15px;       
    .logo{
      width: 200px;
      height: 28px;
    }
    .input-box{
      flex: 1;
      box-sizing: border-box;
      margin-left: 15px;
      background: #fff;
      display: flex;
      align-items: center;
      padding: 5px 10px;        
      .search-icon{
        width: 32px;
        height: 32px;
        padding: 8px;
      }        
    }     
  }
  
  .home-contents{
    flex: 1;
    height: 100px;
    margin-top: 20px;    
    .tabs{
      .tab-item{
        color: #fff;
        margin-right: 25px;
        font-size: 34px;
        &.active{
          font-size: 42px;
          // font-weight: bold;
        }
      }
    }
    .list{
      border-top-right-radius: 25px;
      border-top-left-radius: 25px;
      min-height: 600px;
      overflow: hidden;
      background: #fff;
    }
    .contact-list{          
      .contact-item{
        margin-bottom: 65px;
        // padding: 25px 0;
        // border-bottom: 1px solid #f8f8f8;
        display: flex;
        align-items: center;
        &:last-child{
          margin-bottom: 15px;
        }
        .avatar{
          width: 80px;
          height: 80px;
          border-radius: 50%;
          overflow:hidden;
        }
        .info{
          flex: 1;
          padding: 0 20px;
        }
        .call{
          width: 65px;
          height: 65px;
        }
      }
    }
  }
  
</style>
