<!--
 * @Date: 2022-09-21 14:51:44
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-11-15 15:31:07
 * @FilePath: /swx/src/pages/my/index.vue
 * @Description: 我的页面
-->
<template>
  <view class="my-page">
    <view style="width: 100%; background-image: url(https://cdn.ipadbiz.cn/icon/userinfo_bg-top@2x.png); background-size: contain; background-repeat: no-repeat;">
      <view style="height: 4rem; padding: 1rem;">
        <van-row>
          <van-col span="18" offset="0">
            <view @tap="editUser" style="position: relative;">
              <van-image :round="true" width="4rem" height="4rem" :src="avatar" fit="" />
              <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" offset="0">
            <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 style="position: relative;">
              <van-icon :name="icon_user" size="3rem" color="" style="vertical-align: sub;" />
              <view v-if="no_partner_note_count" style="width: 0.5rem; height: 0.5rem; background-color: red; border-radius: 50%; position: absolute; top: 0; right: 25%;"></view>
            </view>
            <view>
              <text style="font-size: 1rem; color: #222;">陪伴的用户</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="activity_list.length" 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;">{{ item.host?.name }}</text>
        </view>
        <activity-card :data="item" sign="none" type="me"></activity-card>
      </view>
    </view>
    <!-- TODO: 缺省页 -->
    <van-empty v-else description="暂无参加活动" class="custom-image" :image="icon_no_join" />
  </view>
  <view style="height: 6rem;"></view>
  <navbar activated="my" />
  <van-toast id="van-toast" />

</template>

<script setup>
import Taro from '@tarojs/taro'
import { ref, onMounted } from "vue";
// import icon_vip from '@/images/icon/vip@2x.png'
// 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 icon_no_join from '@/images/icon/no-canjia@2x.png'
import activityCard from '@/components/activity-card.vue'
import navbar from '@/components/navbar.vue'
import { hostListAPI } from '@/api/Host/index'
import Toast from '@/components/vant-weapp/toast/toast';

// 参加的活动
const joinActivity = () => {
  Taro.navigateTo({
    url: '../myActivityList/index'
  })
}

// 我的主办方
const myProject = () => {
  Taro.navigateTo({
    url: '../projectManage/index'
  })
}

// 修改头像
const editUser = () => {
  Taro.navigateTo({
    url: '../apxUserInfo/index'
  })
}
</script>

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

export default {
  name: "myPage",
  mixins: [mixin.init],
  data () {
    return {
      nickname: '',
      avatar: '',
      activity_list: [],
      host_id: '',
      join_hosts: '',
      no_partner_note_count: '',
    }
  },
  async onShow () {
    // 获取用户信息和列表
    // 只看已报名，未结束的活动
    const { code, data } = await infoUserAPI({ is_activity: 1 });
    if (code) {
      data.activity_list.forEach(item => {
        item.server_time = data.server_time;
        item.reg_begin_time = formatDate(item.reg_begin_time);
        item.reg_end_time = formatDate(item.reg_end_time);
        item.activity_time = formatDate(item.activity_time);
      })
      this.activity_list = data.activity_list;
      this.no_partner_note_count = data.no_partner_note_count;
      this.nickname = data.user.nickname;
      this.avatar = data.user.avatar ? data.user.avatar : 'https://cdn.ipadbiz.cn/icon/tou@2x.png';
    }
    // 获取主办方列表信息
    const host = await hostListAPI({ is_join: 1 });
    if (host.code) {
      if (host.data.my_hosts.length) {
        this.host_id = host.data.my_hosts[0]?.id
      }
      if (host.data.join_hosts.length) {
        this.join_hosts = host.data.join_hosts
      }
    }
  },
  methods: {
    // 创建的活动
    createActivity () {
      if (!this.host_id) {
        Toast('您还未创建过主办方');
        return false;
      }
      Taro.navigateTo({
        url: '../myCreateActivity/index?host_id=' + this.host_id
      })
    },
    // 陪伴的用户
    async followUser () {
      if (this.join_hosts.length) {
        Taro.navigateTo({
          url: '../myFollowUser/index?host_id=' + this.join_hosts[0]['id']
        })
      } else {
        Toast('您还不是义工')
      }
    }
  }
};
</script>