<template>
  <div class="course-tag">
    <div class="messages" ref="messages">
      <template v-for="item in messageList">
        <message-card
          :courseId="courseId"
          :isTest="isTest"
          :data="item"
          :key="item.id"
          @search="onSearchTag"
          @change="onChangeTag"
        ></message-card>
      </template>
    </div>
    <div class="send">
      <div class="inner">
        <form action="/">
          <van-search
            v-model="searchValue"
            left-icon
            show-action
            background="#f7f7f7"
            :maxlength="40"
            placeholder="全国道路运输安全生产管理培训"
            @search="onSearch"
          >
            <template #action>
              <div @click="onSearch">搜索</div>
            </template>
          </van-search>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import MessageCard from './messageCard.vue'
import * as api from '@/api/course.js'
export default {
  props: {
    courseId: { type: String, required: true },
    isTest: { type: Boolean, default: false }
  },
  components: { MessageCard },
  data() {
    return {
      detail: { chapters: [] },
      messageList: [], // {id:'', type: 1, payload: {}}
      searchValue: ''
    }
  },
  watch: {
    messageList(list) {
      if (list.length > this.detail.chapters.length) {
        this.scrollBottom()
      }
      this.$emit('message', list)
    }
  },
  methods: {
    // 获取知识点列表
    getCourseTagList() {
      api.getCourseTagList(this.courseId).then(response => {
        this.$emit('ready', response)
        this.detail = response
        this.messageList = response.chapters.map((item, index) => {
          return {
            id: this.genId(index),
            type: 1,
            from: 'system',
            payload: item
          }
        })
      })
    },
    // 输入搜索
    onSearch() {
      if (!this.searchValue.trim()) {
        return
      }
      this.messageList.push({
        id: this.genId(),
        type: 0,
        from: 'user',
        payload: { text: this.searchValue }
      })
      this.searchTag(this.searchValue)
      this.searchValue = ''
    },
    // 点击标签
    onSearchTag(data) {
      this.messageList.push({
        id: this.genId(),
        type: 0,
        from: 'user',
        payload: { text: data.name }
      })
      this.searchTag(data.name)
    },
    searchTag(keywords) {
      api
        .getSearchTagList({ keywords, course_id: this.courseId })
        .then(response => {
          if (response.length) {
            this.messageList.push({
              id: this.genId(),
              type: 2,
              from: 'system',
              payload: response
            })
          } else {
            this.messageList.push({
              id: this.genId(),
              type: 0,
              from: 'system',
              payload: { text: '找不到相关内容' }
            })
          }
        })
    },
    onChangeTag(data) {
      this.messageList.push({
        id: this.genId(),
        type: 0,
        from: 'user',
        payload: { text: data.title }
      })
      this.getCourseTag(data.id)
    },
    // 获取知识点详情
    getCourseTag(tagId) {
      api.getCourseTag(tagId).then(response => {
        this.messageList.push({
          id: this.genId(),
          type: 3,
          from: 'system',
          payload: response
        })
      })
    },
    // 生成消息ID
    genId(index) {
      index = index || this.messageList.length
      return `message_${index}`
    },
    // 滚动到底部
    scrollBottom() {
      this.$nextTick(() => {
        window.scrollTo(0, document.body.scrollHeight)
      })
    }
  },
  beforeMount() {
    this.getCourseTagList()
  }
}
</script>

<style lang="scss" scoped>
.messages {
  background: #eee;
}
.send {
  height: 50px;
  padding-bottom: env(safe-area-inset-bottom);
  .inner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(247, 247, 247, 1);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
    z-index: 999;
    padding-bottom: env(safe-area-inset-bottom);
  }
  ::v-deep .van-search__content {
    background-color: #fff;
  }
}
</style>
