<template>
  <div class="book-intro-container">
    <div class="section-header">
      <h3 class="section-title">简介</h3>
    </div>
    <div class="intro-content" v-html="bookIntro"></div>
    <div class="author-notes">
      <p v-if="authorDescription">{{ authorDescription }}</p>
      <template v-if="userGroup">
        <p class="group-notice">您是星际《{{ bookTitle }}》读者?请不要错过下面的粉丝群!</p>
        <p class="group-info">书友群: {{ userGroup }}</p>
      </template>
    </div>
  </div>
</template>

<script>
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'BookIntro',
  props: {
    bookData: {
      type: Object,
      default: () => ({
        title: '重生之财源滚滚',
        description: `<p>当那一世——</p>
        <p>贺季宁曾经是A市土豪公司的金牌经理，工资高福利好，女友漂亮车位靓，最重要的是老板信任他。但是贺季宁的对手不服，老板娘不喜欢他，不怀好意的对手们联合一起，终于把他拉下台了，他失去工作，更可悲的是，他连公司配他的贷款的房子都搭进去了，欠了几百万的债，女友也离他而去。</p>
        <p>临终前，他喃喃自语：如果老天给我重来一次的机会，我一定要好好做人，赚很多钱，让那帮人看着我过得好就比他们难受！</p>`,
        authorDescription: '',
        userGroup: '638781087(网友交流群)'
      })
    }
  },
  setup(props) {
    const bookTitle = computed(() => props.bookData.title);
    const bookIntro = computed(() => props.bookData.description);
    const authorDescription = computed(() => props.bookData.authorDescription);
    const userGroup = computed(() => props.bookData.userGroup);

    return {
      bookTitle,
      bookIntro,
      authorDescription,
      userGroup
    };
  }
});
</script>

<style lang="scss" scoped>
.book-intro-container {
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  padding: 15px;
  margin-bottom: 3px;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;

    .section-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin: 0;
      position: relative;
      padding-left: 12px;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 4px;
        height: 18px;
        width: 4px;
        background-color: #0A2463;
        border-radius: 2px;
      }
    }
  }

  .intro-content {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;

    ::v-deep(p) {
      margin-bottom: 10px;
    }
  }

  .author-notes {
    font-size: 14px;
    color: #777;
    padding-top: 16px;
    border-top: 1px dashed #eee;

    p {
      margin-bottom: 8px;
    }

    .group-notice {
      color: #666;
      font-weight: 500;
    }

    .group-info {
      color: #0A2463;
      font-weight: 500;
    }
  }
}
</style> 