<template>
  <view class="join-list-page">
    <view id="page-header" class="join-list-header">
      <view class="activity-title">
        <view class="box">
          <text class="bg-gradient" style="font-size: 1.15rem;">活动统计</text>
        </view>
      </view>
      <view class="header-info">
        <view class="activity">
          <view><text style="font-size: 1.25rem;">{{ reg_count }}</text>场</view>
          <view>
            <van-icon :name="icon_join" size="1.5rem" color="" style="vertical-align: sub;" />
            <text style="font-size: 0.9rem; color: #999999;">活动报名</text>
          </view>
        </view>
        <view class="job">
          <text style="font-size: 1.25rem;">{{ volunteer_count }}</text>场
          <view>
            <van-icon :name="icon_job" size="1.25rem" color="" style="vertical-align: sub;" />
            <text style="font-size: 0.9rem; color: #999999;">岗位报名</text>
          </view>
        </view>
        <view class="sign">
          <view><text style="font-size: 1.25rem;">{{ sign_count }}</text>场</view>
          <view>
            <van-icon :name="icon_sign" size="1.25rem" color="" style="vertical-align: sub;" />
            <text style="font-size: 0.9rem; color: #999999;">实际参加</text>
          </view>
        </view>
      </view>
    </view>
    <view class="list-wrapper" style="margin: 1rem;">
      <view id="navbar-page" style="background-color: white; border-radius: 0.65rem; padding: 1rem;overflow: auto; margin-bottom: 1px;">
        <view style="display: inline-block; margin-right: 1rem; line-height: 60rpx;">
          <view @tap="toggleColum('player')" :class="[activated === 1 ? 'bg-gradient' : 'inactivate']" style="font-size: 1rem;">活动报名</view>
        </view>
        <view style="display: inline-block; line-height: 60rpx;">
          <view @tap="toggleColum('volunteer')" :class="[activated === 2 ? 'bg-gradient' : 'inactivate']">岗位报名</view>
        </view>
        <view @tap="show_status_popup=true" style="float: right; color: #666666; font-size: 0.9rem; border: 1px solid #DBDBDB; border-radius: 1rem; padding: 0.3rem 1rem 0.3rem 1rem;">
          &nbsp;{{ status_type === '' ? '全部' : status_type }}&nbsp;&nbsp;
          <van-icon :name="icon_sel2" size="0.8rem" color="" style="vertical-align: middle;" />
        </view>
      </view>
      <scroll-view :scroll-y="true" :style="scrollStyle" @scrolltolower="onScrollToLower">
        <view>
          <activity-card v-for="(item, index) in activity_list" :key="index" :data="item" style="margin-bottom: 1rem;"></activity-card>
        </view>
      </scroll-view>
    </view>
    <view style="height: 2rem;"></view>
  </view>

  <!-- 切换状态弹出框 -->
  <van-popup :show="show_status_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
    <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="status_type_columns"
      toolbar-class="picker-toolbar" @confirm="onStatusTypeConfirm" @cancel="onStatusTypeCancel" @change="onStatusTypeChange" />
  </van-popup>
  <van-toast id="van-toast" />
</template>

<script setup>
import { ref } from "vue";
import icon_join from '@/images/icon/baoming@2x.png'
import icon_job from '@/images/icon/yigong@2x.png'
import icon_sign from '@/images/icon/qiandao@2x.png'
import icon_sel2 from '@/images/icon/sel02@2x.png'
import icon_tel from '@/images/icon/tel@2x.png'
import Taro from '@tarojs/taro'
import activityCard from '@/components/activity-card.vue'
import Toast from '@/components/vant-weapp/toast/toast';

const goToUserInfo = () => {
  Taro.navigateTo({
    url: '../userInfo/index'
  })
}
</script>

<script>
import "./index.less";
import { joinListAPI } from '@/api/Activity/index';
import { $ } from '@tarojs/extend'
import mixin from '@/utils/mixin';
import { getCurrentPageParam } from "@/utils/weapp";

export default {
  name: "joinListPage",
  mixins: [mixin.init],
  async onShow () {
    // 获取活动和轮播信息
    const { code, data } = await joinListAPI({ type: this.role, status: '', is_stat: 1, page: this.page, limit: this.limit });
    if (code) {
      this.activity_list = data.activity_list;
      this.reg_count = data.reg_count;
      this.sign_count = data.sign_count;
      this.volunteer_count = data.volunteer_count;
      this.page = this.page + 1;
    }
  },
  onHide () { // 离开当前页面
    this.page = 0;
    this.flag = true;
  },
  mounted () {
    // 设置滚动列表可视高度
    const windowHeight = wx.getSystemInfoSync().windowHeight;
    setTimeout(async () => {
      const headerHeight = await $('#page-header').height();
      const navHeight = await $('#navbar-page').height();
      this.scrollStyle = {
        height: windowHeight - headerHeight - navHeight - 50 + 'px'
      }
    }, 500);
  },
  data() {
    return {
      activity_list: [],
      role: 'player',
      flag: true,
      page: 0,
      limit: 10,
      scrollStyle: { height: '1000rpx' },
      activated: 1,
      status: '',
      reg_count: '',
      sign_count: '',
      volunteer_count: '',
      show_status_popup: false,
      status_type: '',
      status_type_columns: [{
        text: '全部',
        key: ''
      }, {
        text: '报名中',
        key: 'reg'
      }, {
        text: '报名结束',
        key: 'reg_end'
      }, {
        text: '活动进行中',
        key: 'start'
      }, {
        text: '活动结束',
        key: 'stop'
      }],
    };
  },
  methods: {
    onScrollToLower () {
      if(!this.flag){
        return
      }
      this.flag = false;
      this.getList();
    },
    async getList () {
      // 获取推荐活动列表
      const { code, data } = await joinListAPI({ type: this.role, status: this.status, is_stat: 1, page: this.page, limit: this.limit });
      if (code) {
        if (data.activity_list.length) {
          this.activity_list = this.activity_list.concat(data.activity_list);
          this.reg_count = data.reg_count;
          this.sign_count = data.sign_count;
          this.volunteer_count = data.volunteer_count;
          this.page = this.page + 1;
          this.flag = true;
        } else {
          Toast('没有数据')
        }
      }
    },
    toggleColum (type) {
      if (type === 'player') {
        this.activated = 1;
        this.role = 'player';
      } else {
        this.activated = 2;
        this.role = 'volunteer';
      }
      this.activity_list = [];
      this.flag = true;
      this.page = 0;
      this.getList();
    },
    onStatusTypeConfirm (event) {
      const { picker, value, index } = event.detail;
      this.show_status_popup = false;
      this.status_type = value.text;
      this.status = value.key;
      // 查询数据
      this.activity_list = [];
      this.flag = true;
      this.page = 0;
      this.getList();
    },
    onStatusTypeCancel (event) {
      this.show_status_popup = false;
    }
  },
};
</script>