<template>
  <div class="layout-no-flex right-detail-tabs">
    <el-toolbar>
      <el-button @click="goBack" type="primary" size="medium" round class="shadow-primary">
        <i class="fa fa-chevron-left"></i> 返回上页
      </el-button>
    </el-toolbar>
    <div class="view-type-tabs">
      <el-tabs @tab-click="handleClick" v-model="tabName" class="view-tabs">
        <el-tab-pane v-for="view in views" :label="view.name" :name="view.ID" :key="view.ID" :disabled="isDisable(view.ID)" class="content_tab_class">
        </el-tab-pane>
      </el-tabs>
    </div>
    <component :is="viewComponent" :account-id="ID" :comment-type="commentType"></component>
  </div>
</template>
<script>
import sendcomment from './components/WeiboSendComments.vue'
import receivecomment from './components/WeiboComments.vue'
import atmecomment from './components/WeiboMeComments.vue'
import atmewebo from './components/WeiboMeContents.vue'
export default {
  components: {
    sendcomment,
    receivecomment,
    atmecomment,
    atmewebo
  },
  props: {
    ID: {
      type: [String, Number]
    }
  },
  data() {
    return {
      viewComponent: 'sendcomment',
      accountId: '',
      tabName: 'sendcomment',
      views: [
        {ID: 'sendcomment', name: '发出的评论'},
        {ID: 'receivecomment', name: '收到的评论'},
        {ID: 'atmecomment', name: '@我的评论'},
        {ID: 'atmewebo', name: '@我的微博'}
      ],
      commentType: 'send'
    }
  },
  created() {
    this.lastTab()
  },
  methods: {
    handleClick(tab) {
      this.viewComponent = tab.name
      this.commentType = this.viewComponent === 'receivecomment' ? 'receive' : 'send'
      localStorage['select-weibo-tab'] = tab.name
    },
    isDisable(val) {

    },
    goBack() {
      this.$router.back()
    },
    lastTab() {
      let last = localStorage['select-weibo-tab']
      this.viewComponent = last || this.viewComponent
      this.tabName = this.viewComponent
      this.commentType = this.viewComponent === 'receivecomment' ? 'receive' : 'send'
    }
  }
}
</script>
