<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="page-filter" 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('activity')" :class="[activated === 1 ? 'bg-gradient' : 'inactivate']" style="font-size: 1rem;">活动报名</view>
        </view>
        <view style="display: inline-block; line-height: 60rpx;">
          <view @tap="toggleColum('join')" :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 v-for="(item, index) in reg_list" :key="index" class="list-item">
          <van-row>
            <van-col span="6">
              <view v-if="item.avatar" @tap="goToUserInfo(item.member_id)" class="avatar" :style="{ backgroundImage: `url(${item.avatar})` }"></view>
              <view v-else @tap="goToUserInfo(item.member_id)" class="avatar" :style="{ backgroundImage: `url('https://img.yzcdn.cn/vant/cat.jpeg')` }"></view>
            </van-col>
            <van-col span="13">
              <view class="content">
                <view class="title">{{ item.name }}</view>
                <view class="phone" @tap="onPhoneClick(item.phone)">
                  <van-icon :name="icon_tel" color="" size="1.25rem" style="vertical-align: sub;" />
                  {{ item.phone }}
                </view>
              </view>
            </van-col>
            <van-col span="5">
              <van-tag @tap="changeStatus('apply', item.id)" v-if="item.status === 'apply'" :round="true" color="#D7F3FF" text-color="#0091FD" size="large">已报名</van-tag>
              <van-tag @tap="changeStatus('enable', item.id)" v-if="item.status === 'enable'" :round="true" color="#D7FFD7" text-color="#019200" size="large">已签到</van-tag>
              <van-tag @tap="changeStatus('absent', item.id)" v-if="item.status === 'absent'" :round="true" color="#FFF5E4" text-color="#FF7300" size="large">未出席</van-tag>
            </van-col>
          </van-row>
        </view>
      </scroll-view>
    </view>
    <view style="height: 2rem;"></view>
  </view>

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

  <van-toast id="van-toast" />
  <van-dialog id="van-dialog" />
</template>

<script setup>
import { ref, getCurrentInstance } 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 { getCurrentPageParam } from "@/utils/weapp";
import Toast from '@/components/vant-weapp/toast/toast';

const onPhoneClick = (number) => {
  Taro.makePhoneCall({
    phoneNumber: number
  })
}

const goToUserInfo = (member_id) => {
  Taro.navigateTo({
    url: '../userInfo/index?member_id=' + member_id
  })
}

// 处理过滤条件
const status_type_columns = ref([])
const internalInstance = getCurrentInstance();
setTimeout(() => {
  if (internalInstance.data.absent) {
    status_type_columns.value = ['全部', '已签到', '未出席']
  } else {
    status_type_columns.value = ['全部', '已签到', '已报名']
  }
}, 500);
</script>

<script>
import "./index.less";
import { listRegAPI, statusRegAPI } from '@/api/Reg/index';
import moment from '@/utils/moment.min.js'
import { activityInfoAPI } from '@/api/Host/index';
import { $ } from '@tarojs/extend'
import Dialog from '@/components/vant-weapp/dialog/dialog';

export default {
  name: "joinListPage",
  mounted () {
    // 设置滚动列表可视高度
    const windowHeight = wx.getSystemInfoSync().windowHeight;
    setTimeout(async () => {
      const headerHeight = await $('#page-header').height();
      const navHeight = await $('#page-filter').height();
      this.scrollStyle = {
        height: windowHeight - headerHeight - navHeight - 70 + 'px'
      }
    }, 500);
  },
  data () {
    return {
      reg_count: 0,
      volunteer_count: 0,
      sign_count: 0,
      reg_list: [],
      absent: false, // 超时标识
      flag: true,
      status: '',
      page: 0,
      limit: 10,
      member_type: 'player',
      scrollStyle: { height: '1000rpx' },
      activated: 1,
      show_status_popup: false,
      status_type: '',
    }
  },
  async onShow () {
    const info = await activityInfoAPI({ i: getCurrentPageParam().id });
    if (info.code) {
      // 判断是否超过活动时间
      if (+new Date(info.data.activity.activity_time) > +new Date(info.data.server_time)) {
        this.absent = true;
      }
    }
    const { code, data } = await listRegAPI({ activity_id: getCurrentPageParam().id, type: this.member_type, page: this.page, limit: this.limit });
    if (code) {
      this.reg_count = data.reg_count;
      this.volunteer_count = data.volunteer_count;
      this.sign_count = data.sign_count;
      this.reg_list = data.reg_list;
      if (this.absent) {
        // 活动超时翻状态
        this.reg_list.forEach(item => {
          item.status = item.status === 'apply' ? 'absent' : item.status;
        })
      }
    }
  },
  methods: {
    onScrollToLower () {
      if(!this.flag){
        return
      }
      this.flag = false;
      this.getList();
    },
    async getList () {
      Taro.showLoading({
        title: '加载中'
      })
      // 获取推荐活动列表
      const { code, data } = await listRegAPI({ activity_id: getCurrentPageParam().id, type: this.member_type, status: this.status, page: this.page, limit: this.limit });
      if (code) {
        if (data.reg_list.length) {
          this.reg_list = this.reg_list.concat(data.reg_list);
          this.page = this.page + 1;
          this.flag = true;
        } else {
          Toast('没有数据')
        }
        Taro.hideLoading()
      }
    },
    toggleColum (type) {
      if (type === 'activity') { // 活动报名
        this.member_type = 'player';
        this.activated = 1;
      } else { // 岗位报名
        this.member_type = 'volunteer';
        this.activated = 2;
      }
      // 重置条件
      this.page = 0;
      this.reg_list = [];
      this.flag = false;
      this.getList();
    },
    onStatusTypeConfirm (event) {
      const { picker, value, index } = event.detail;
      this.show_status_popup = false;
      this.status_type = value;
      if (this.status_type === '全部') {
        this.status = '';
      }
      if (this.status_type === '已签到') {
        this.status = 'enable';
      }
      if (this.status_type === '未出席' || this.status_type === '已报名') {
        this.status = 'apply';
      }
      // 重置条件
      this.page = 0;
      this.reg_list = [];
      this.flag = false;
      this.getList();
    },
    onStatusTypeCancel (event) {
      this.show_status_popup = false;
    },
    changeStatus (status, id) {
      // 已签到不能修改状态
      if (status === 'enable') {
        Toast('无需修改状态')
      }
      // 未签到, 已报名 修改状态已签到
      if (status === 'absent' || status === 'apply') {
        Dialog.confirm({
          title: '温馨提示',
          message: '是否确认修改状态为已签到？',
          confirmButtonColor: '#199a74'
        })
          .then(async () => {
            // on confirm
            const { code, data } = await statusRegAPI({ i: id, status: 'enable' });
            if (code) {
              Taro.showToast({
                title: '修改成功',
                icon: 'success',
                duration: 2000
              });
              // 手动翻状态-显示
              this.reg_list.forEach(item => {
                if (item.id === id) {
                  item.status = 'enable';
                }
              });
              // 更新用户统计
              const { code, data } = await listRegAPI({ activity_id: getCurrentPageParam().id, type: this.member_type, page: this.page, limit: this.limit });
              if (code) {
                this.reg_count = data.reg_count;
                this.volunteer_count = data.volunteer_count;
                this.sign_count = data.sign_count;
              }
            }
          })
          .catch(() => {
            // on cancel
          });
      }
    }
  }
};
</script>