<template>
  <div>
    <slot name="prefix" />
    <template v-for="(item, index) in text" :key="index">
      {{ item }}
      <br v-if="index !== text.length - 1" />
    </template>
    <slot name="suffix" />
  </div>
</template>

<script setup>
import { computed, defineProps } from 'vue';
import { getLanguage } from '../js/language';
import { storeToRefs } from 'pinia';
import { useQuestionStore } from '@/stores/Questions/useQuestionStore';
const props = defineProps({
  langTypes: { type: Array, default: () => undefined },
  translateKey: { type: String, default: '' },
  translateParams: { type: Array, default: () => [] },
  fullText: { type: String, default: '' }
});

const { questionsData: data } = storeToRefs(useQuestionStore());
const text = computed(() => {
  if (props.fullText) {
    return props.fullText.split('\n');
  }
  if (!props.translateKey) {
    return [];
  }

  // console.log(data.value);
  const style = data.value.survey?.style || {};
  const styleTypes = data.value.languageType
    ? data.value.languageType
    : [style.is_en_tips ? 'en' : '', style.is_cn_tips ? 'zh' : ''].filter((i) => !!i);
  const types = props.langTypes ? props.langTypes : styleTypes;
  const result = getLanguage(types)[props.translateKey];

  if (typeof result === 'string') {
    return result.split('\n');
  } else {
    return result(...(props.translateParams || [])).split('\n');
  }
});
</script>

<style scoped lang="scss"></style>
