<template>
  <div class="tab-box">
    <div class="tab-item-box clearfix">
      <div
        v-if="articleList"
        class="tab-item fl"
        :class="{'active': block === 1}"
        @click="block = 1">好文推荐</div>

      <div
        class="tab-item fl"
        :class="{'active': block === 2}"
        @click="block = 2">评论</div>

      <div
        class="tab-item fl"
        :class="{'active': block === 3}"
        @click="block = 3">Q&A</div>
    </div>

    <!-- 好文推荐 -->
    <div v-show="block == 1">
      <div v-if="articleInfo && articleInfo.length !== 0">
        <article-item
          v-for="(articleInfo, key) in articleList"
          :key="key"
          isBrief="true"
          redirect="true"
          :articleInfo="articleInfo"></article-item>
      </div>
      <div v-else class="none-box">
        暂无推荐
      </div>
    </div>

    <!-- 评论 -->
    <div v-if="block == 2">
      <comment
        :id="id"
        :commentList="commentList"
        @updataComment="updataComment"></comment>
    </div>

    <!-- q&A -->
    <div v-if="block == 3">
      <question-answer
        v-if="questionList.length !== 0"
        :questionList="questionList"></question-answer>
      <div v-else class="none-box">
        暂无内容
      </div>
    </div>
  </div>
</template>

<script>

import comment from '@/components/comment'
import questionAnswer from '@/components/questionAnswer'
import articleItem from '@/components/articleItem'

export default {
  props: ['id', 'commentList', 'questionList', 'articleList'],
  /* props: {
    id: {
      default: ''
    },
    commentList: {
      default: []
    },
    questionList: {
      default: []
    },
    articleList: {
      default: []
    }
  }, */
  components: {
    comment,
    questionAnswer,
    articleItem
  },
  watch: {
    block () {
      this.$emit('change', this.block === 2)
    }
  },
  data () {
    return {
      block: 1
    }
  },
  created () {
    if (this.articleList) {
      this.block = 1
    } else {
      this.block = 2
    }
  },
  methods: {
    updataComment () {
      this.$emit('updataComment')
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/less/common.less';
.tab-box{
  .tab-item-box{
    margin: 0 @spacing 20px;
    .tab-item{
      margin: 0 18px 0 0;
      padding-bottom: 2px;
      line-height: 30px;
      font-size: 15px;
      color: #999999;
      &.active{
        position: relative;
        font-size: 18px;
        color: @themeColor;
        &::after{
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translate(-50%, 0);
          content: '';
          width: 20px;
          height: 2px;
          background: @themeColor;
        }
      }
    }
  }
  .none-box{
    padding: @spacing;
    height: 100px;
    line-height: 100px;
    font-size: 18px;
    text-align: center;
    color: #CCCCCC;
  }
}
</style>
