<!--
 * @Date: 2022-09-21 14:51:44
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-10-24 18:07:28
 * @FilePath: /swx/src/pages/my/index.vue
 * @Description: 我的页面
-->
<template>
  <view class="my-page">
    <view style="width: 100%; background-image: url(http://gyzs.onwall.cn/userinfo_bg-top%402x.png); background-size: contain; background-repeat: no-repeat;">
      <view style="height: 4rem; padding: 1rem;">
        <van-row>
          <van-col span="18">
            <view style="position: relative;">
              <van-image :round="true" width="4rem" height="4rem" :src="avatar" />
              <view style="display: inline-block; position: absolute; top: 30%; left: 30%;">
                <text style="font-size: 1.15rem;">{{ nickname }}</text>
                <!-- <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" /> -->
              </view>
            </view>
          </van-col>
          <van-col span="6">
            <view @tap="myProject()" style="background-color: #DABE73; color: white; padding: 0.5rem 0; border-radius: 1rem; text-align: center; font-size: 0.9rem;margin-top: 1rem;">我的主办方</view>
          </van-col>
        </van-row>
      </view>
      <view style="background-color: white; margin: 1rem; padding: 1rem; border-radius: 1rem;">
        <view style="display: flex; text-align: center;">
          <view @tap="joinActivity" style="flex: 1; line-height: 60rpx;">
            <view>
              <van-icon :name="icon_join" size="3rem" color="" style="vertical-align: sub;" />
            </view>
            <view>
              <text style="font-size: 1rem; color: #222;">参加的活动</text>
            </view>
          </view>
          <view @tap="createActivity" style="flex: 1; line-height: 60rpx;">
            <view>
              <van-icon :name="icon_create" size="3rem" color="" style="vertical-align: sub;" />
            </view>
            <view>
              <text style="font-size: 1rem; color: #222;">创建的活动</text>
            </view>
          </view>
          <view @tap="followUser" style="flex: 1; line-height: 60rpx;">
            <view>
              <van-icon :name="icon_user" size="3rem" color="" style="vertical-align: sub;" />
            </view>
            <view>
              <text style="font-size: 1rem; color: #222;">陪伴的用户</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="padding: 1rem; padding-top: 0;">
      <view v-for="(item, index) in activity_list" :key="index">
        <view style="padding: 1rem 0.5rem; display: flex;">
          <van-icon :name="icon_company" size="2.5rem" color="" style="vertical-align: sub; margin-right: 0.5rem;" /><text style="color: #222222; font-size: 1.15rem; margin-top: 0.5rem;">星光读书会</text>
        </view>
        <activity-card :data="item" type="me"></activity-card>
      </view>
    </view>
  </view>
  <view style="height: 6rem;"></view>
  <navbar activated="my" />
</template>

<script setup>
import { ref } from "vue";
// import icon_vip from '@/images/icon/vip@2x.png'
import Taro from '@tarojs/taro'
// import { AtAvatar } from 'taro-ui-vue3'
import "taro-ui-vue3/dist/style/components/avatar.scss"
import icon_join from '@/images/icon/canjia@2x.png'
import icon_create from '@/images/icon/chuangjian@2x.png'
import icon_user from '@/images/icon/peiban@2x.png'
import icon_company from '@/images/icon/zhubanfang@2x.png'
import navbar from '@/components/navbar.vue'
import activityCard from '@/components/activity-card.vue'

// 参加的活动
const joinActivity = () => {
  Taro.navigateTo({
    url: '../myActivityList/index'
  })
}
// 创建的活动
const createActivity = () => {
  Taro.navigateTo({
    url: '../myCreateActivity/index'
  })
}
// 陪伴的用户
const followUser = () => {
  Taro.navigateTo({
    url: '../myFollowUser/index'
  })
}
// 我的主办方
const myProject = () => {
  Taro.navigateTo({
    url: '../projectManage/index'
  })
}
</script>

<script>
import "./index.less";
import { $ } from '@tarojs/extend'
import mixin from '@/utils/mixin';
import { infoUserAPI } from '@/api/User/index';

export default {
  name: "myPage",
  mixins: [mixin.init],
  data () {
    return {
      nickname: '',
      avatar: '',
      activity_list: [],
    }
  },
  async onShow () {
    // 获取用户信息和列表
    const { code, data } = await infoUserAPI({ is_activity: 1 });
    if (code) {
      this.activity_list = data.activity_list;
      this.nickname = data.user.nickname;
      this.avatar = data.user.avatar ? data.user.avatar : 'https://jdc.jd.com/img/200';
    }
  },
};
</script>