<!--
 * @Date: 2022-09-27 17:13:05
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-10-28 13:42:48
 * @FilePath: /swx/src/pages/joinVolunteer/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>
    <view class="at-input">
      <view class="at-input__container">
        <label class="h5-label at-input__title at-input__title">岗位</label>
        <input @tap="show_post_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="post_status" placeholder="请选择义工岗位" :disabled="true"/>
        <view @tap="show_post_popup=true" style="margin-right: 1rem; margin-top: 0.5rem;"><van-icon :name="icon_sel" color="" /></view>
      </view>
    </view>
    <AtInput :border="true" title="姓名" type='text' placeholder='请输入姓名' v-model:value="username" />
    <AtInput :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">性别</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>
  <bottom-button @on-submit="onSubmit">确认报名</bottom-button>

  <!-- 年龄段弹出框 -->
  <van-popup :show="show_post_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
    <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="columns" toolbar-class="picker-toolbar"
      :default-index="defaultIndex"
      @confirm="onPostConfirm" @cancel="onPostCancel" />
  </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 { myInfoAPI } from '@/api/Reg/index';

const show_post_popup = ref(false)
const post_status = ref('')
const username = ref('')
const phone = ref('')
const user_sex = ref('man')
const defaultIndex = ref(0)

onMounted(async () => {
  // const { code, data } = await activityInfoAPI({ i: getCurrentPageParam().id });
  // if (code) {
  //   // 额外的报名信息
  //   fields.value = data.activity.fields;
  //   fields.value.forEach(item => {
  //     item.value = '';
  //   });
  // }
  // 编辑模式
  if (getCurrentPageParam().type === 'edit') {
    // 动态修改标题
    wx.setNavigationBarTitle({
      title: '修改义工报名',
    });
    const { code, data } = await myInfoAPI({ i: getCurrentPageParam().reg_id });
    if (code) {
      username.value = data.name;
      phone.value = data.phone;
      post_status.value = data.post;
      user_sex.value = data.gender;
    }
    const info = await activityInfoAPI({ i: getCurrentPageParam().id });
    if (code) {
      info.data.activity.extend.forEach((item, index) => {
        if (post_status.value === item) {
          defaultIndex.value = index;
        }
      })
    }
  }
})

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

const onPostConfirm = ({ detail }) => {
  show_post_popup.value = false;
  post_status.value = detail.value;
}
const onPostCancel = (event) => {
  show_post_popup.value = false;
}
const validForm = () => {
  if (!post_status.value) {
    Toast('岗位不能为空');
    return false;
  }
  if (!username.value) {
    Toast('姓名不能为空');
    return false;
  }
  if (!phone.value) {
    Toast('手机号不能为空');
    return false;
  }
  const pattern = /^\d{11}$/;
  if (!pattern.test(phone.value)) {
    Toast('请输入正确手机号');
    return false;
  }
  if (!user_sex.value) {
    Toast('性别不能为空');
    return false;
  }
  return true;
}
const onSubmit = async () =>  {
  if (validForm()) {
    const params = {
      activity_id: getCurrentPageParam().id,
      type: 'volunteer',
      name: username.value,
      phone: phone.value,
      gender: user_sex.value,
      post: post_status.value
    }
    if (getCurrentPageParam().type === 'edit') {
      params.i = getCurrentPageParam().reg_id;
      const { code } = await editRegAPI(params);
      if (code) {
        Taro.showToast({
          title: '修改成功',
          icon: 'success',
          duration: 3000,
          success: function () {
            Taro.navigateBack()
          }
        });
      }
    } else {
      const { code } = await addRegAPI(params);
      if (code) {
        Taro.showToast({
          title: '报名成功',
          icon: 'success',
          duration: 3000,
          success: function () {
            Taro.navigateBack()
          }
        });
      }
    }
  }
}

</script>

<script>
import "./index.less";
import { activityInfoAPI } from '@/api/Host/index';
import { getCurrentPageParam } from "@/utils/weapp";
import { addRegAPI, editRegAPI } from '@/api/Reg/index';
import Toast from '@/components/vant-weapp/toast/toast';

export default {
  name: "joinVolunteerPage",
  async onShow () {
    // 获取活动详情
    const { code, data } = await activityInfoAPI({ i: getCurrentPageParam().id });
    if (code) {
      this.columns = data.activity.extend;
    }
  },
  data () {
    return {
      columns: [],
    }
  },
  methods: {
  },
};
</script>