<template>
  <view class="join-list-page">
    <view 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;">5</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;">2</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;">3</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 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>
      <view>
        <view v-for="(item, index) in activityList" :key="index" class="list-item">
          <van-row>
            <van-col span="6">
              <view @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url(${item.avatar})` }"></view>
            </van-col>
            <van-col span="14">
              <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="4">
              <van-tag v-if="item.status === '1'" :round="true" color="#D7F3FF" text-color="#0091FD" size="large">已报名</van-tag>
              <van-tag v-if="item.status === '2'" :round="true" color="#D7FFD7" text-color="#019200" size="large">已签到</van-tag>
              <van-tag v-if="item.status === '3'" :round="true" color="#FFF5E4" text-color="#FF7300" size="large">未出席</van-tag>
            </van-col>
          </van-row>
        </view>
      </view>
    </view>
    <view style="height: 2rem;"></view>
  </view>

  <!-- 切换状态弹出框 -->
  <van-popup :show="show_status_popup" position="bottom" custom-style="height: 40%;" :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>
</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'

const activityList = ref([{
  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  name: '净妙',
  phone: '18789800786',
  status: '1',
}, {
  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  name: '人在路途',
  phone: '18789800786',
  status: '2',
}, {
  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  name: '寒潭秋月心如洗',
  phone: '18789800786',
  status: '3',
}, {
  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  name: '净妙',
  phone: '18789800786',
  status: '1',
}, {
  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  name: '人在路途',
  phone: '18789800786',
  status: '2',
}, {
  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  name: '寒潭秋月心如洗',
  phone: '18789800786',
  status: '3',
}])

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

const show_status_popup = ref(false);
const status_type = ref('');
const status_type_columns = ref(['已报名', '未出席', '已签到']);
const onStatusTypeChange = (event) => {
  const { picker, value, index } = event.detail;
}
const onStatusTypeConfirm = (event) => {
  const { picker, value, index } = event.detail;
  show_status_popup.value = false;
  status_type.value = value;
  console.warn('查询新数据');
}
const onStatusTypeCancel = (event) => {
  show_status_popup.value = false;
}

const activated = ref(1);
const toggleColum = (type) => {
  if (type === 'activity') {
    activityList.value = [{
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: '净妙',
      phone: '18789800786',
      status: '1',
    }, {
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: '人在路途',
      phone: '18789800786',
      status: '2',
    }, {
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: '寒潭秋月心如洗',
      phone: '18789800786',
      status: '3',
    }, {
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: '净妙',
      phone: '18789800786',
      status: '1',
    }, {
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: '人在路途',
      phone: '18789800786',
      status: '2',
    }, {
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: '寒潭秋月心如洗',
      phone: '18789800786',
      status: '3',
    }];
    activated.value = 1
  } else {
    activityList.value = [];
    activated.value = 2
  }
}

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

<script>
import "./index.less";

export default {
  name: "joinListPage",
};
</script>