<template>
  <div>
    <!--<v-container fill-height fluid style="padding: 0px;">
      <v-row>
        <v-col style="padding: 0px;">
          <v-img :src="userInfo.backgroundUrl" :aspect-ratio="5.98" />
        </v-col>
      </v-row>
    </v-container>-->
    <v-container fill-height>
      <v-row align="center">
        <v-col
          cols="12"
          md="8"
        >
          <v-avatar size="80" style="float: left;">
            <v-img :src="userInfo.avatarUrl" />
          </v-avatar>
          <h2 style="margin-top: 20px;margin-left: 100px;">
            <!--{{ userInfo.username }}-->
            {{ userInfo.screenName }}
            <!--<v-chip color="yellow" @click="goToVip()">
              <v-chip v-if="Power.checkPower(userInfo) === 'vip'" color="yellow" @click="goTOVIP()">
              小会员
            </v-chip>-->
          </h2>
        </v-col>
        <v-col
          v-if="userInfo && userInfo.userId !== loginUserId"
          cols="6"
          md="4"
          class="hidden-sm-and-down ml-0 pl-4"
        >
          <!--<v-btn color="primary" @click="goToSetting">自定义频道</v-btn> <v-btn color="primary" @click="goToStudio">创作中心</v-btn>-->
          <v-btn color="primary" @click="followUser">关注TA</v-btn>
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          {{ userInfo.intro }}
        </v-col>
      </v-row>
      <v-row>
        <v-col
          v-if="userInfo || userInfo.userId !== userId"
          cols="6"
          md="4"
        >
          关注数: {{ userInfo.followingCount }}
          粉丝数: {{ userInfo.followerCount }}
        </v-col>
      </v-row>
      <v-tabs>
        <v-tab @click="selectTab(0)">视频</v-tab>
        <v-tab @click="selectTab(1)">状态</v-tab>
        <v-tab @click="selectTab(2)">回答</v-tab>
      </v-tabs>
    </v-container>
    <v-divider />
    <v-container fill-height>
      <div id="top" />
      <div v-if="type === 4">
        <v-row>
          <v-col>
            用户名: {{ userInfo.username }}
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            简介： {{ userInfo.intro }}
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            视频总数： {{ userInfo.submitCount }}
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            粉丝数： {{ userInfo.followerCount }}
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            关注数： {{ userInfo.followingCount }}
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            加入时间： {{ TimeUtil.renderTime(userInfo.createTime) }}
          </v-col>
        </v-row>
      </div>
      <v-row>
        <v-col
          v-for="item in cardList"
          :key="item"
        >
          <video-card v-if="cardType === 'video'" :video="item" />
          <status-card v-if="cardType === 'status'" :item="item" />
        </v-col>
      </v-row>
      <v-row justify="center">
        <v-pagination
          v-model="page"
          :length="length"
          :total-visible="7"
          @input="pageChange"
        />
      </v-row>
    </v-container>
  </div>
</template>

<script>
import { userVideoList } from '@/api/media/video'
import { getUserInfo } from '@/api/user/user'
import Power from '@/utils/check-power.vue'
import StatusCard from '@/components/card/status-card'
import VideoCard from '@/components/card/video-card.vue'
import TimeUtil from '@/utils/time-util.vue'

export default {
  name: 'UserHome',
  components: {
    StatusCard,
    VideoCard
  },
  data() {
    return {
      TimeUtil,
      Power,
      loginUserId: 0,
      userId: 0,
      userInfo: {},
      cardType: null,
      cardList: [],
      currentPage: 1,
      page: 1,
      length: 0,
      type: 0
    }
  },
  created() {
    const userIdStr = this.$route.params.userId
    if (userIdStr === undefined) {
      // 从"个人中心"加载
      this.loginUserId = this.$store.state.user.userInfo.userId
      this.userId = this.$store.state.user.userInfo.userId
      this.userInfo = this.$store.state.user.userInfo
      document.title = '我的主页'
    } else {
      this.userId = parseInt(userIdStr)
      this.getUserInfo1(this.userId)
    }

    const jumpPage = this.$route.query.page
    if (jumpPage !== undefined) {
      this.page = parseInt(jumpPage)
    }
    this.getVideoList(this.page)
  },
  methods: {
    selectTab(type) {
      if (type === this.type) {
        return
      }

      this.type = type
      this.page = 1
      if (type === 0) {
        this.initPagerParam()
        this.getVideoList(1)
        this.$vuetify.goTo(type)
      } else if (type === 1) {
        this.initPagerParam()
        this.getStatusList(1)
        this.$vuetify.goTo(type)
      } else if (type === 2) {
        this.initPagerParam()
        this.getAnswerList(1)
        this.$vuetify.goTo(type)
      }
    },
    initPagerParam() {
      this.currentPage = 1
      this.page = 1
      this.length = 0
    },
    getUserInfo1(userId) {
      getUserInfo(userId).then(res => {
        if (res.code === 0) {
          this.userInfo = res.data
          document.title = this.userInfo.screenName + ' 的主页'
        } else {
          alert(res.data)
        }
      }).catch(error => {
        console.error(error.message)
      })
    },
    getVideoList(page) {
      userVideoList(page, this.userId).then(res => {
        if (res.code === 0) {
          this.cardType = 'video'
          this.$vuetify.goTo(0)

          const pageList = res.data
          this.cardList.splice(0, this.cardList.length)
          for (const item of pageList.list) {
            this.cardList.push(item)
          }
          this.currentPage = pageList.currentPage
          this.length = pageList.totalPages
        } else {
          alert(res.data)
        }
      }).catch(error => {
        console.error(error.message)
      })
    },
    getStatusList(page) {
      if (this.page === 1) {
        this.cardList = []
      }

      this.cardType = 'status'
      console.log('获取状态列表')
    },
    getAnswerList(page) {
      if (this.page === 1) {
        this.cardList = []
      }
      this.cardType = 'answer'
      console.log('获取回答列表')
    },
    pageChange(page) {
      this.page = page
      if (page !== this.currentPage) {
        this.getVideoList(page)
      }
    },
    goToVip() {
      this.$router.push('/vip')
    },
    goToStudio() {
      this.$router.push('/studio')
    },
    goToSetting() {
      this.$router.push('/user/account')
    },
    followUser() {
      console.log('关注用户')
    }
  }
}
</script>

<style>
</style>
