<template>
  <div class="chatper-work-answer-item">
    <div class="chapter-work-answer-item-hd">
      <p>{{ nickname }}:</p>
      <p class="time">{{ data.created_time }}</p>
    </div>
    <div class="chapter-work-answer-item-bd">
      <div class="item" v-for="item in workList" :key="item.question_id">
        <show-more>
          <div v-html="decode(item.descreption)"></div>
          <a :href="item.file_url" target="_blank" class="file" v-if="item.file_url">
            <i class="el-icon-document"></i>
            {{ $t('viewerWork.downloadName') }}
          </a>
        </show-more>
      </div>
    </div>
    <slot />
  </div>
</template>

<script>
import Base64 from 'Base64'
import showMore from '@/components/showMore'
export default {
  props: {
    index: { type: Number, default: 0 },
    data: { type: Object, default: () => ({}) }
  },
  components: { showMore },
  data() {
    return {}
  },
  computed: {
    // 作业列表
    workList() {
      return this.data.work_contents ? JSON.parse(this.data.work_contents) : []
    },
    nickname() {
      const name = this.data.personal_name
      return name ? name + this.$t('viewerWork.student') : this.$t('viewerWork.student') + (this.index + 1)
    }
  },
  methods: {
    decode(value) {
      return value ? Base64.decode(value) : ''
    }
  }
}
</script>

<style lang="scss">
.chatper-work-answer-item {
  // padding-bottom: 10px;
  // border-bottom: 1px solid #c9c9c97a;
  margin-bottom: 20px;
  .item {
    padding: 10px;
    border-radius: 8px;
    background-color: #fff;
  }
  .item + .item {
    margin-top: 10px;
  }
  .file {
    display: inline-block;
    margin-bottom: 10px;
    text-decoration: none;
    color: #333;
    &:hover {
      color: #b49441;
    }
  }
}
.chapter-work-answer-item-hd {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .time {
    font-size: 12px;
    color: #999;
  }
}
.chapter-work-answer-item-bd {
  font-size: 12pt;
  line-height: initial;
  img {
    max-width: 100%;
  }
}
</style>
