<template>
  <div class="person-index-page">
    <div class="header-wrapper">
      <div class="info">
        <van-row>
          <van-col>
            <van-image round width="50" height="50" :src="userInfo.avatar" style="padding-right: 1rem;" />
          </van-col>
          <van-col class="text-wrapper" span="18">
            <div>
              <div class="username">{{ userInfo.name }}</div>
              <div v-if="!userInfo.is_follow" class="toggle-user" @click="followUser()">
                <van-icon name="plus" />&nbsp;关注
              </div>
              <div v-else class="toggle-user" @click="followUser()">&nbsp;取消关注</div>
            </div>
            <div class="address">{{ userInfo.kg_name }}</div>
          </van-col>
        </van-row>
      </div>

      <div class="sub-data">
        <van-row>
          <van-col span="11" offset="1" class="un-tap-color">
            <p>获赞</p>
            <p>{{ userInfo.like_num }}</p>
          </van-col>
          <van-col span="1" class="divide">|</van-col>
          <van-col span="11" class="un-tap-color">
            <p>粉丝</p>
            <p>{{ userInfo.fans_num }}</p>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="list-title">
      <van-row>
        <van-col span="6">
          <div class="title">发布作品</div>
        </van-col>
        <van-col span="12" offset="6" style="text-align: right; color: #626262;">
          <div style="padding-top: 0.5rem;">{{ userInfo.prod?.length }}个作品</div>
        </van-col>
      </van-row>
    </div>
    <div>
      <template v-for="item in userInfo.prod" :key="item" style="height: 3rem;">
        <video-card :item="item"></video-card>
      </template>
      <div style="height: 2rem;"></div>
    </div>
  </div>
</template>

<script setup>
import VideoCard from '@/components/VideoCard/index.vue'

import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();

// 获取表演者信息
const userInfo = ref({})
axios.get('/srv/?a=perf_info', {
  params: {
    perf_id: $route.query.perf_id
  }
})
  .then(res => {
    if (res.data.code === 1) {
      userInfo.value = res.data.data;
    } else {
      console.warn(res);
      Toast({
        icon: 'close',
        message: res.data.msg
      });
    }
  })
  .catch(err => {
    console.error(err);
  });

// 关注个人用户
const followUser = (status) => {
  axios.post('/srv/?a=add_follow', {
    perf_id: $route.query.perf_id
  })
  .then(res => {
    if (res.data.code === 1) {
      if (res.data.msg === 'add follow OK') {
        userInfo.value.is_follow = 1
        Toast.success('关注成功')
      } else {
        userInfo.value.is_follow = 0
        Toast.success('取消关注')
      }
    } else {
      console.warn(res);
      Toast({
        icon: 'close',
        message: res.data.msg
      });
    }
  })
  .catch(err => {
    console.error(err); 
  })
};

</script>

<script>
import mixin from 'common/mixin';

export default {
  mixins: [mixin.init],
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.person-index-page {
  .header-wrapper {
    background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%);

    .info {
      padding: 2rem;
      padding-right: 0;

      .text-wrapper {
        line-height: 1.5;

        .username {
          display: inline-block;
          overflow: auto;
          font-size: 1.15rem;
          color: #222222;
        }

        .toggle-user {
          float: right;
          font-size: 0.8rem;
          background-color: white;
          border-radius: 15px;
          padding: 5px 10px;
          color: #713610;
        }
      }

      .address {
        font-size: 0.85rem;
        color: #999999;
      }
    }

    .sub-data {
      text-align: center;
      overflow: auto;
      padding-bottom: 1rem;

      .un-tap-color {
        color: #666666;
      }

      .tap-color {
        color: #713610;
      }

      .divide {
        line-height: 2.5;
        color: #999999;
        font-size: 1rem;
      }
    }
  }

  .list-title {
    padding: 0 1rem;
    background-color: #F7F7F7;
    .title {
      color: #222222; 
      font-size: 1.1rem; 
      border-bottom: 2px solid #F9D95C; 
      padding: 0.5rem; 
      text-align: center;
    }
  }
}
</style>