<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 class="backtop" @click="scrollTop" v-show="showBacktop"></div>
  </div>
</template>

<script>
import MessageCard from './messageCard.vue'
import * as api from '@/api/course.js'
export default {
  props: {
    courseId: {
      type: String,
      default() {
        return this.$route.params.id
      }
    },
    isTest: { type: Boolean, default: false }
  },
  components: { MessageCard },
  data() {
    return {
      detail: { chapters: [] },
      messageList: [], // {id:'', type: 1, payload: {}}
      searchValue: '',
      showBacktop: false
    }
  },
  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)
      })
    },
    // 滚到到顶部
    scrollTop() {
      window.scrollTo(0, 0)
    },
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.showBacktop = scrollTop >= 10
    }
  },
  beforeMount() {
    this.getCourseTagList()
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</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;
  }
}
.backtop {
  position: fixed;
  right: 15px;
  bottom: 64px;
  width: 46px;
  height: 46px;
  background: url('../../../assets/images/icon_backtop.png') no-repeat;
  background-size: contain;
  cursor: pointer;
  margin-bottom: env(safe-area-inset-bottom);
}
</style>
