import MSticky from '@/components/m-sticky';
import { useRect } from '@vant/use';
import { Button, Tab, Tabs } from 'vant';
import { defineComponent, onMounted, reactive, watch } from 'vue';
import styles from './index.module.less';
import MHeader from '@/components/m-header';
import GroupChat from './components/group-chat';
import Contacts from './components/contacts';

export default defineComponent({
  name: 'select-send',
  props: {
    selectObject: {
      type: Object,
      default: () => ({})
    },
    selectStatus: {
      type: Boolean,
      default: false
    }
  },
  emits: ['close', 'update:selectObject', 'confirm'],
  setup(props, { emit }) {
    const state = reactive({
      headerHeight: 0,
      height: 0,
      bottomHeight: 0,
      tabValue: 'groupChat',
      selectGroupChat: [] as any,
      selectContacts: [] as any
    });

    const onSubmit = async () => {
      const params = {
        groupChat: state.selectGroupChat,
        contacts: state.selectContacts
      };
      emit('close');
      console.log(params, 'selectSend');
      emit('update:selectObject', params);
      emit('confirm', params);
    };

    watch(
      () => props.selectObject,
      () => {
        resetSelectItems();
      },
      { deep: true }
    );

    const resetSelectItems = () => {
      const list = props.selectObject || {};
      state.selectGroupChat = list.groupChat || [];
      state.selectContacts = list.contacts || [];
    };

    onMounted(() => {
      const { height } = useRect(
        document.querySelector('.van-tab') as HTMLElement
      );
      state.height = height;

      resetSelectItems();
      console.log(state, 'select');
    });

    return () => (
      <div class={styles['select-send']}>
        <MSticky
          onBarHeight={(height: number) => {
            state.headerHeight = height;
          }}>
          <MHeader title="发送对象" />
        </MSticky>
        <Tabs
          sticky
          lineWidth={20}
          lineHeight={4}
          v-model:active={state.tabValue}
          offsetTop={state.headerHeight}>
          <Tab title="群聊" name="groupChat">
            <GroupChat
              height={state.height}
              headerHeight={state.headerHeight}
              bottomHeight={state.bottomHeight}
              v-model:selectItem={state.selectGroupChat}
            />
          </Tab>
          <Tab title="联系人" name="contacts">
            <Contacts
              height={state.height}
              headerHeight={state.headerHeight}
              bottomHeight={state.bottomHeight}
              v-model:selectItem={state.selectContacts}
            />
          </Tab>
        </Tabs>

        <MSticky
          position="bottom"
          onBarHeight={(height: any) => {
            state.bottomHeight = height;
          }}>
          <div class={'btnGroupFixed'}>
            <Button round block type="primary" onClick={onSubmit}>
              确认
            </Button>
          </div>
        </MSticky>
      </div>
    );
  }
});