<template>
  <div class="message-form">
    <BranchPc
      :payload ="forwardPayload"
      @input-click="handleContentListItemClick"
    />
  </div>
</template>
<script lang="ts">
import BranchPc from './branch-pc.vue';
import { customerServicePayloadType } from '../../../../../../../interface';
import vue from '../../../../../../../adapter-vue';

const { computed } = vue;

interface branchItem {
  content: string;
  desc: string;
  url?: string;
}

interface Props {
  payload: customerServicePayloadType;
}

export default {
  components: {
    BranchPc
  },
  props: {
    payload: {
      type: Object,
      default: () => ({}),
    },
  },
  emits: ['sendMessage', 'heightChanged'],
  setup(props: Props, { emit }) {
    const handleContentListItemClick = (branch: branchItem, cloudCustomData?: string) => {
      emit('sendMessage', {text: branch.content}, cloudCustomData || '');
    };
    const handleFormSaveInputSubmit = (text: string) => {
      emit('sendMessage', { text });
    };
    const forwardPayload = computed(() => {
      return props.payload;
    });
    return {
      forwardPayload,
      handleContentListItemClick,
      handleFormSaveInputSubmit,
    };
  },
  mounted() {
    this.$emit('heightChanged');
  }
};
</script>
<style lang="scss">

</style>
