<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">
        <video-card :item="item" />
      </template>
      <div style="height: 5rem;" />
    </div>
    <div class="donate-bar">
      <div class="text">
        <span style="font-size: 0.85rem; color: #999999;">收到小红花&nbsp;</span>
        <van-icon :name="icon_flower" color="#c5c5c5" size="1.25rem" style="margin: 0 auto;" />
        <span>&nbsp;3000</span>
      </div>
      <div class="button">
        <my-button type="primary">为TA助力</my-button>
      </div>
    </div>
  </div>
  <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无作品信息" />
</template>

<script setup>
import { ref, onActivated, onMounted } from 'vue'
import { useRoute, onBeforeRouteLeave } from 'vue-router'
import { storeToRefs } from 'pinia'
import { MyButton, VideoCard } from '@/utils/generateModules'
import { icon_avatar, no_image, icon_flower } from '@/utils/generateIcons.js'
import { _, Toast } from '@/utils/generatePackage.js'
import { addPages, store } from '@/hooks/useKeepAlive'
import { perfInfoAPI, addFollowAPI } from '@/api/C/perf.js'
import { useScrollTop } from '@/composables';

const { resetScrollTop } = useScrollTop(); // 页面滚动恢复
resetScrollTop('scrollTopPerson');

const $route = useRoute();

const userInfo = ref({});
// 因为不能让空图标提前出来的写法
const emptyStatus = ref(false);

onMounted(async () => {
  // 获取表演者信息
  const { data } = await perfInfoAPI({ perf_id: $route.query.perf_id });
  if (!data.prod.length) {
    emptyStatus.value = true;
  } else {
    _.each(data.prod, (item) => {
      item.type = 'read-only' // 特殊标识，判断入口 为keepAlive使用
    })
    userInfo.value = data;
  }
});

// 关注个人用户
const followUser = async () => {
  const { msg } = await addFollowAPI({ perf_id: $route.query.perf_id });
  if (msg === 'add follow OK') {
    userInfo.value.is_follow = 1
    Toast.success('关注成功')
  } else {
    userInfo.value.is_follow = 0
    Toast.success('取消关注')
  }
};

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

// TAG: keepAlive 缓存页面
addPages()

onActivated(() => { // keepAlive 重置后执行回调
  // TAG: pinia应用，动态刷新数据
  // 处理数据未刷新数据显示问题
  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;
  // 滚动恢复
  resetScrollTop('scrollTopPerson');
});

onBeforeRouteLeave(() => {
  store.changeScrollTopPerson(window.scrollY)
})

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

</script>

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

    .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 @base-color;
      padding: 0.5rem;
      text-align: center;
    }
  }

  .donate-bar {
    z-index: 999;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    box-sizing: content-box;
    background-color: white;
    padding: 1rem;
    box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.07);
    .text {
      display: flex;
      // flex-direction: column;
      justify-content: center;
      // flex: 1;
      color: #713610;
      text-align: center;
    }

    .button {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      padding: 0 0.5rem;
    }
  }
}
</style>