<!--
 * @Date: 2022-09-27 17:13:05
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-10-20 15:44:06
 * @FilePath: /swx/src/pages/joinActivity/index.vue
 * @Description: 活动报名
-->
<template>
  <view class="join-activity-page">
    <view class="activity-title">
      <view class="box">
        <text class="bg-gradient" style="font-size: 1.25rem;">请填写报名信息</text>
      </view>
    </view>
    <AtInput required :border="true" title="姓名" type='text' placeholder='请输入姓名' v-model:value="username" />
    <AtInput required :border="true" title="手机号" type='phone' placeholder='请输入手机号' v-model:value="phone" />
    <view class="at-input">
      <view class="at-input__container">
        <label class="h5-label at-input__title at-input__title--required">年龄段</label>
        <input @tap="show_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="age_range" placeholder="请选择年龄范围" :disabled="true"/>
        <view style="margin-right: 1rem; margin-top: 0.5rem;"><van-icon :name="icon_sel" color="" /></view>
      </view>
    </view>
    <view class="at-input">
      <view class="at-input__container">
        <label class="h5-label at-input__title at-input__title--required">性别</label>
        <van-radio-group
          :value="user_sex"
          @change="onSexChange"
          direction="horizontal"
        >
          <van-radio name="man" checked-color="#199A74">男士</van-radio>
          <van-radio name="woman" checked-color="#199A74">女士</van-radio>
        </van-radio-group>
      </view>
    </view>
    <view v-for="(item, index) in fields" :key="index">
      <AtInput
      :required="item.is_require"
      :border="true"
      :title="item.field"
      type='text'
      :placeholder="'请输入' + item.field"
      v-model:value="item.value" />
    </view>
  </view>

  <bottom-button @on-submit="onSubmit">确认报名</bottom-button>

  <!-- 年龄段弹出框 -->
  <van-popup :show="show_popup" position="bottom" custom-style="height: 30%;" :lock-scroll="true">
    <view class="limit-wrapper">
      <view class="form-item border">
        <view class="form-item-title fix">年龄最小值</view>
        <view style="float: right;">
          <van-field :value="min_number" @change="changeMinNumber" label="" placeholder="请输入年龄最小值"
            placeholder-style="color: #999; font-size: 1rem;" input-align="right" customStyle="" rightIcon=""
            maxlength="3" :border="false" />
        </view>
      </view>
      <view class="form-item border">
        <view class="form-item-title fix">年龄最大值</view>
        <view style="float: right;">
          <van-field :value="max_number" @change="changeMaxNumber" label="" placeholder="请输入年龄最大值"
            placeholder-style="color: #999; font-size: 1rem;" input-align="right" customStyle="" rightIcon=""
            maxlength="3" :border="false" />
        </view>
      </view>
    </view>
    <van-row>
      <van-col span="12">
        <view class="limit-button-wrapper">
          <view class="button cancel" @tap="closeEditLimit">取消</view>
        </view>
      </van-col>
      <van-col span="12">
        <view class="limit-button-wrapper">
          <view class="button confirm" @tap="confirmEditLimit">确定</view>
        </view>
      </van-col>
    </van-row>
  </van-popup>
  <van-toast id="van-toast" />
</template>

<script setup>
import { ref, onMounted } from "vue";
import { AtInput } from 'taro-ui-vue3'
import "taro-ui-vue3/dist/style/components/input.scss";
import icon_sel from '@/images/icon/sel@2x.png'
import bottomButton from "@/components/bottom-button";
import Taro from '@tarojs/taro'
import { getCurrentPageParam } from "@/utils/weapp";
import { activityInfoAPI } from '@/api/Host/index';
import { addRegAPI } from '@/api/Reg/index';
import mixin from '@/utils/mixin';
import Toast from '@/components/vant-weapp/toast/toast';

const username = ref('');
const phone = ref('');
const age_range = ref('');
const user_sex = ref('');
const fields = ref([]);
const min_number = ref('');
const max_number = ref('');

onMounted(async () => {
  const { code, data } = await activityInfoAPI({ i: getCurrentPageParam().id });
  if (code) {
    // 额外的报名信息
    fields.value = data.activity.fields;
    fields.value.forEach(item => {
      item.value = '';
    });
  }
})

const temp_min_number = ref('');
const changeMinNumber = ({detail}) => {
  const pattern = /^([1-9][0-9]*){1,3}$/; // 非零正整数
  if (!pattern.test(detail)) {// 如果包含特殊字符返回false
    Toast('请输入非零正整数');
    return false;
  }
  temp_min_number.value = detail;
}
const temp_max_number = ref('');
const changeMaxNumber = ({detail}) => {
  const pattern = /^([1-9][0-9]*){1,3}$/; // 非零正整数
  if (!pattern.test(detail)) {// 如果包含特殊字符返回false
    Toast('请输入非零正整数');
    return false;
  }
  temp_max_number.value = detail;
}

const onSexChange = ({ detail }) => {
  user_sex.value = detail;
}

const show_popup = ref(false);
const closeEditLimit = () => {
  show_popup.value = false;
}
const confirmEditLimit = () => {
  if (!temp_min_number.value) {
    Toast('年龄最小值不能为空');
    return false;
  }
  if (!temp_max_number.value) {
    Toast('年龄最大值不能为空');
    return false;
  }
  if (+temp_min_number.value > +temp_max_number.value) {
    Toast('年龄段非法录入');
    return false;
  }
  min_number.value = +temp_min_number.value;
  max_number.value = +temp_max_number.value;
  age_range.value = min_number.value + '岁' + ' ~ ' + max_number.value + '岁';
  show_popup.value = false;
}

const validForm = () => {
  if (!username.value) {
    Toast('姓名不能为空');
    return false;
  }
  if (!phone.value) {
    Toast('手机号不能为空');
    return false;
  }
  const pattern = /^\d{11}$/;
  if (!pattern.test(phone.value)) {
    Toast('请输入正确手机号');
  }
  if (!age_range.value) {
    Toast('年龄段不能为空');
    return false;
  }
  if (!user_sex.value) {
    Toast('性别不能为空');
    return false;
  }
  fields.value.length && fields.value.forEach(item => {
    if (item.is_require && !item.value) {
      Toast(item.field + '不能为空');
      return false;
    }
  });
  return true;
}

const onSubmit = async (val) => {
  if (validForm()) {
    // 额外信息枚举字段
    const extend = {};
    fields.value.length && fields.value.forEach(item => {
      extend[item.field] = item.value;
    });
    const params = {
      activity_id: getCurrentPageParam().id,
      type: 'player',
      name: username.value,
      phone: phone.value,
      gender: user_sex.value,
      age_group: JSON.stringify([min_number.value, max_number.value]),
      post: '',
      extend
    }
    const { code } = await addRegAPI(params);
    if (code) {
      Taro.redirectTo({
        url: '../joinSuccess/index'
      })
    }
  }
}
</script>

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

export default {
  name: "demoPage",
  mixins: [mixin.init],
};
</script>