<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="notes-preview" :style="getAreaStyle()">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />

    <div class="main">
      <div class="NPC-zhedie">
        <div class="topTitle">
          <div class="NPC-top-left">
            <span class="NPC-topTitle-text" v-html="data.title_con"></span>
          </div>
          <div class="NPC-top-right" @click="handleChangeTab">
            <span class="NPC-top-right-text">{{ wordShow ? '收起' : '展开' }}</span>
            <img v-if="wordShow" src="@/assets/down.png" alt="" />
            <img v-else class="rotate" src="@/assets/down.png" alt="" />
          </div>
        </div>
        <el-collapse-transition>
          <div class="NPC-notes-list" v-show="wordShow">
            <div class="NPC-notes" v-for="(item, index) in data.option" :key="'NPC-notes' + index">
              <div class="NPC-notes-con">
                <span class="NPC-notes-con-number" v-html="item.number"></span>
                <span class="NPC-notes-con-text" v-html="item.con"></span>
              </div>
              <div class="NPC-notes-trans" v-html="item.interpret"></div>
              <div class="NPC-notes-note" v-if="item.note" v-html="item.note"></div>
              <div class="NPC-notes-note-img" v-if="item.img_list && item.img_list.length > 0">
                <div v-for="(imgItem, imgIndex) in item.img_list" :key="'imgList' + imgIndex">
                  <img :src="imgItem.id" class="NPC-notes-img" />
                </div>
              </div>
            </div>
          </div>
        </el-collapse-transition>
      </div>
    </div>
  </div>
</template>

<script>
import { getNotesData, isEnable } from '@/views/book/courseware/data/notes';

import PreviewMixin from '../common/PreviewMixin';

export default {
  name: 'NotesPreview',
  components: {},
  mixins: [PreviewMixin],
  data() {
    return {
      data: getNotesData(),
      wordShow: false,
    };
  },
  watch: {
    data: {
      handler(val) {
        if (val) {
          this.wordShow = isEnable(this.data.property.is_word_show);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {},
  created() {},
  methods: {
    handleChangeTab() {
      this.wordShow = !this.wordShow;
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.notes-preview {
  @include preview-base;

  .NPC-zhedie {
    width: 780px;
    margin-bottom: 24px;

    .topTitle {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 48px;
      padding-right: 16px;
      padding-left: 24px;
      overflow: hidden;
      background: #e35454;
      border: 1px solid rgba(0, 0, 0, 10%);
      border-radius: 8px 8px 0 0;

      :deep p {
        margin: 0;
      }

      .NPC-top-left {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .NPC-topTitle-text {
          margin: 0 8px 0 0;
          font-family: 'sourceR';
          font-size: 16px;
          font-weight: bold;
          color: #fff;
        }
      }

      .NPC-top-right {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;

        &-text {
          font-size: 14px;
          font-weight: normal;
          line-height: 16px;
          color: #fff;
        }

        img {
          width: 16px;
          height: 16px;
          margin-left: 4px;
        }
      }

      .rotate {
        animation-name: firstrotate;
        animation-timing-function: linear;
        animation-direction: 2s;
        animation-fill-mode: both;
      }
    }

    .NPC-notes-list {
      padding: 24px 24px 5px;
      border: 1px solid rgba(0, 0, 0, 10%);
      border-top: none;
      border-radius: 0 0 8px 8px;

      .NPC-notes {
        width: 100%;
        margin-bottom: 24px;

        :deep p {
          margin: 0;
        }

        .NPC-notes-con {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-bottom: 12px;

          > span {
            font-size: 14px;
            font-style: normal;
            font-weight: normal;
            line-height: 150%;
            color: #e35454;

            &.NPC-notes-con-number {
              font-family: 'robot';
            }

            &.NPC-notes-con-text {
              flex: 1;
              margin-left: 5px;
            }
          }
        }

        .NPC-notes-trans {
          padding-left: 27px;
          margin-bottom: 12px;
          font-size: 14px;
          font-style: normal;
          font-weight: bold;
          line-height: 150%;
          color: #000;
        }

        .NPC-notes-note {
          font-size: 14px;
          font-style: normal;
          font-weight: normal;
          line-height: 150%;
          color: #000;
          text-indent: 27px;
          word-break: break-word;
        }
      }
    }

    .NPC-notes-note-img {
      width: 100%;

      > div {
        width: 100%;

        > img {
          max-width: 100%;
        }
      }
    }
  }

  @keyframes firstrotate {
    0% {
      transform: rotateZ(0deg);
    }

    100% {
      transform: rotateZ(180deg);
    }
  }

  @keyframes huifuRotate {
    0% {
      transform: rotateZ(180deg);
    }

    100% {
      transform: rotateZ(0deg);
    }
  }
}
</style>
