<template>
  <div class="question-introduce-container">
    <div v-if="showTitle" class="title-part">
      <rich-text
        isPreview
        :nodes="title"
        class="title"
        :class="isMobile ? 'm-title' : ''"
        :style="`color: ${themeColor.stemColor}`"
      />
      <Remark v-if="!isAnswer" :title="label + '标题评论'" :type="1" />
    </div>
    <div v-if="showDesc" class="desc-part" :class="isMobile ? 'm-desc-part' : ''">
      <rich-text
        isPreview
        :nodes="desc"
        :class="isMobile ? 'm-desc' : 'desc'"
        :style="`color: ${themeColor.stemColor}`"
      />
      <div v-if="desc" style="margin-top: 32px">
        <Remark v-if="!isAnswer" :title="label + '介绍语评论'" :type="2" />
      </div>
    </div>
    <!--    <AnswerViewerPrefetch :questions="questions" />-->
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import RichText from '@/components/RichText.vue';
import Remark from '../../components/Remark/index.vue';

// import AnswerViewerPrefetch from '../AnswerViewerPrefetch.vue';
import { useQuestionStore } from '@/stores/Questions/useQuestionStore';
import { storeToRefs } from 'pinia';

export default defineComponent({
  components: { RichText, Remark /* AnswerViewerPrefetch */ },
  props: {
    title: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: ''
    },
    // 是否移动端
    isMobile: {
      type: Boolean,
      default: false
    },
    // 是否答题模式
    isAnswer: {
      type: Boolean,
      default: false
    },
    // 显示标题
    showTitle: {
      type: [Boolean, Number],
      default: false
    },
    // 显示介绍语
    showDesc: {
      type: [Boolean, Number],
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    //
    questions: {
      type: Array,
      default: () => []
    }
  },
  setup() {
    const { themeColor } = storeToRefs(useQuestionStore());
    return { themeColor };
  }
});
</script>

<style lang="scss" scoped>
.question-introduce-container {
  display: flex;
  flex-direction: column;

  .title-part {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      flex: 1;
    }
  }

  .desc-part {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      flex: 1;
    }
  }

  .m-desc-part {
    margin-bottom: 30px;
  }
}

.title {
  font-size: 24px;
}

.desc {
  flex: 1;
  margin-top: 32px;
}

.m-title {
  margin-top: 10px;
}

.m-desc {
  flex: 1;
  margin-top: 30px;

  :deep(img) {
    max-width: 100% !important;
    height: auto !important;
  }
}
</style>
