<template>
  <pop ref="popRef" :on-close="onClose" :allowClose="false">
    <div class="lofty-message-pop get-touch">
      <div class="title">GET IN TOUCH<i class="lofty_iconfont lofty-icon-close" @click="close"></i></div>
      <div v-if="isLeaved" class="is-leaved">
        <div class="lofty_iconfont lofty-icon-success"></div>
        <div>Thanks!I'll get back to you shortly.</div>
      </div>
      <div v-else>
        <textarea ref="textarea" v-model="question" class="message-textarea" placeholder="type something"></textarea>
        <div class="get-touch-submit-btn" @click="submit">Submit</div>
      </div>
    </div>
  </pop>
</template>

<script setup>
import pop from '@/components/pop/index.vue';
const emits = defineEmits(['submit'])
const popRef = useTemplateRef('popRef');
const textarea = useTemplateRef('textarea');

const { message, onClose } = defineProps({ message: String, onClose: Function })
const question = ref(message);
const isLeaved = ref(false);
function submit() {
  isLeaved.value = true
  emits('submit', question.value)
}
onMounted(()=>{
  popRef.value?.open();
  nextTick(()=>{
    textarea.value?.focus();
  })
})

function close() {
  popRef.value?.close();
}
</script>
<style lang="scss">
.lofty-message-pop {
  width: 100vw;
  background: #fff;
  padding: 30px 15px;
  position: relative;
  .title {
    text-align: center;
    font-size: 20px;
    color: rgba(25, 25, 25, 1);
    font-family: var(--lofty-font-bold);
    .lofty-icon-close {
      position: absolute;
      right: 20px;
      top: 15px;
      cursor: pointer;
    }
  }
  .message-textarea {
    height: 200px;
  }
}
</style>