<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="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
              style="padding-right: 1rem;" />
          </van-col>
          <van-col class="text-wrapper" span="18">
            <div>
              <div class="username">瑟日古娜</div>
              <div class="toggle-user" @click="toggleUser"><van-icon name="plus" />&nbsp;关注</div>
            </div>
            <div class="address">呼和浩特市新城区蒙古族幼儿园</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>25478</p>
          </van-col>
          <van-col span="1" class="divide">|</van-col>
          <van-col span="11" class="un-tap-color">
            <p>粉丝</p>
            <p>45</p>
          </van-col>
        </van-row>
      </div>
    </div>
    <div style="padding: 0 1rem; background-color: #F7F7F7;">
      <van-row>
        <van-col span="6">
          <div style="color: #222222; font-size: 1.1rem; border-bottom: 2px solid #F9D95C; padding: 0.5rem; text-align: center;">发布作品</div>
        </van-col>
        <van-col span="12" offset="6" style="text-align: right; color: #626262;">
          <div style="padding-top: 0.5rem;">6个作品</div>
        </van-col>
      </van-row>
    </div>
    <div>
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <template v-for="item in dataList" :key="item" style="height: 3rem;">
          <video-card :item="item"></video-card>
        </template>
      </van-list>
    </div>
  </div>
</template>

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

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

// 处理书籍下作品列表
const list = ref([]);
const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 20; i++) {
      list.value.push(list.value.length + 1);
    }

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 100) {
      finished.value = true;
    }
  }, 1000);
};

onMounted(() => {

})
</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;
      }
    }
  }
}
</style>