<template>
  <div class="person-index-page">
    <div class="header-wrapper">
      <div class="info">
        <van-row>
          <van-col>
            <van-image v-if="userInfo.avatar" round width="50" height="50" :src="userInfo.avatar" style="padding-right: 1rem;" />
            <van-image v-else round width="50" height="50" :src="icon_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>
  <van-empty v-if="emptyStatus"
    class="custom-image"
    :image="no_image"
    description="暂无作品信息"
  />
</template>

<script setup>
import { mainStore } from '@/store'
import { storeToRefs } from 'pinia'

import VideoCard from '@/components/VideoCard/index.vue'
import icon_avatar from '@images/que-touxiang@2x.png'
import no_image from '@images/que-shuju@2x.png'

import { ref, onActivated, onMounted } from 'vue'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import axios from '@/utils/axios';
import _ from 'lodash';
import { Toast } from 'vant';

const $route = useRoute();
const $router = useRouter();

const userInfo = ref({});
// 因为不能让空图标提前出来的写法
const emptyStatus = ref(false);
// 获取表演者信息
axios.get('/srv/?a=perf_info', {
  params: {
    perf_id: $route.query.perf_id
  }
})
  .then(res => {
    if (res.data.code === 1) {
      _.each(res.data.data.prod, (item) => {
        item.type = 'read-only' // 特殊标识，判断入口 为keepAlive使用
      })
      userInfo.value = res.data.data;
      if (!res.data.data.prod.length) {
        emptyStatus.value = true;
      }
    } else {
      console.warn(res);
      if (!res.data.show) return false;
      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);
      if (!res.data.show) return false;
      Toast({
        icon: 'close',
        message: res.data.msg
      });
    }
  })
  .catch(err => {
    console.error(err); 
  })
};

/****************** keepAlive 模块 *******************/

onActivated(() => { // keepAlive 重置后执行回调
  // TAG: pinia应用，动态刷新数据
  const store = mainStore()
  // 处理数据未刷新数据显示问题
  // Pinia 解构方法：storeToRefs
  const { video_detail } = storeToRefs(store);
  // 如果作品信息有变化及时修正
  const arr = ref([]);
  _.each(userInfo.value.prod, (item) => {
    if (item.id === video_detail.value.id) {
      item = video_detail.value
    }
    arr.value.push(item);
  })
  // 触发更新
  userInfo.value.prod = arr.value;
  // BUG: 暂时找不到问题，只能先强制刷新，数据串了。
  if (userInfo.value.id && userInfo.value.id !== +$route.query.perf_id) {
    location.reload();
  }
});

const changeRouterKeepAlive = (path, keepAlive) => {
  $router.options.routes.map((item) => {
    if (item.path === path) {
      item.meta.keepAlive = keepAlive;
    }
  });
};

onBeforeRouteLeave((to, from) => {
  // 如果是从页面返回，需要重置keepAlive状态
  // 列表页 =》 详情页
  // TAG: keepAlive
  if (to.path === '/client/videoDetail' && to.query.type === 'read-only') {
    changeRouterKeepAlive(from.path, true);
  } else {
    changeRouterKeepAlive(from.path, false);
  }
})

/*********************************************************/

</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>