<template>
  <div>
    <FormMobile :payload="payload" @showFormPopup="handleShowFormPopup"/>
    <BottomPopup ref="bottomPopupRef" :payload="payload" @sendMessage="handleSendForm" />
  </div>
</template>
<script lang="ts">
import FormMobile from './form-mobile.vue';
import BottomPopup from './bottom-popup.vue';
import { customerServicePayloadType } from '../../../../../../../interface';
import vue from '../../../../../../../adapter-vue';

const { ref, watch } = vue;

interface Props {
  payload: customerServicePayloadType;
}

export default {
  components: {
    FormMobile,
    BottomPopup,
  },
  props: {
    payload: {
      type: Object,
      default: () => ({}),
    },
  },
  emits: ['sendMessage'],
  setup(props: Props, { emit }) {
    const bottomPopupRef = ref();
    const handleSendForm = (data: any) => {
      emit('sendMessage', data);
    };
    const handleShowFormPopup = (data: boolean) => {
      bottomPopupRef.value?.show();
    };
    return {
      handleSendForm,
      handleShowFormPopup,
      bottomPopupRef,
    };
  },
};
</script>
<style lang="scss">

</style>
