<!--package_A/pages/volunteer-page/index.wxml-->
<view class="page_container">
    <image class="page_head" mode="widthFix" src="../../img/volunteer_head.png"></image>
    <view class="form_container">
        <view class="form_item {{formRules.activityNum.warning ? 'warning' : ''}}">
            <text class="form_label"><text style="color: red;">*</text>活动人数</text>
            <view class="value_box">
                <input style="width: 100%;height: 100%;" type="number" maxlength="100" placeholder="请输入活动人数" placeholder-style="font-size: 28rpx; color: #A6A6A6;" adjust-position="{{true}}" value="{{form.activityNum}}" data-name="activityNum" name="activityNum" bindblur="bindValue" />
            </view>
            <text class="tips">请输入活动人数(仅可以输入数字，不超过1000)</text>
        </view>
        <view class="form_item {{formRules.activityDate.warning ? 'warning' : ''}}">
            <text class="form_label"><text style="color: red;">*</text>活动日期</text>
            <picker class="picker_box" bindchange="selectDate" value="{{form.activityDate}}" mode="date">
                <view class="picker_value" wx:if="{{form.activityDate}}">
                    <text>{{form.activityDate}}</text>
                    <image class="select_img" src="../../img/date.png"></image>
                </view>
                <view wx:else class="picker_value" style="color: #A6A6A6; font-size: 26rpx;">
                    <text>请选择活动日期</text>
                    <image class="select_img" src="../../img/date.png"></image>
                </view>
            </picker>
            <text class="tips">请选择活动日期</text>
        </view>
        <view class="form_item {{formRules.activityPoints.warning ? 'warning' : ''}}">
            <text class="form_label"><text style="color: red;">*</text>获取积分</text>
            <view class="value_box">
                <input style="width: 100%;height: 100%;" type="number" maxlength="4" placeholder="请输入获取积分" placeholder-style="font-size: 28rpx; color: #A6A6A6;" adjust-position="{{true}}" value="{{form.activityPoints}}" data-name="activityPoints" name="activityPoints" bindblur="bindValue" />
            </view>
            <text class="tips">请输入获取积分(仅可以输入数字，不超过1000)</text>
        </view>
        <view class="form_item {{formRules.companyName.warning ? 'warning' : ''}}">
            <text class="form_label"><text style="color: red;">*</text>单位名称</text>
            <view class="value_box">
                <input style="width: 100%;height: 100%;" type="text" maxlength="100" placeholder="请输入单位名称" placeholder-style="font-size: 28rpx; color: #A6A6A6;" adjust-position="{{true}}" value="{{form.companyName}}" data-name="companyName" name="companyName" bindblur="bindValue" />
            </view>
            <text class="tips">请输入单位名称(可输入数字、字母和汉字)</text>
        </view>
        <view class="form_item {{formRules.contactName.warning ? 'warning' : ''}}">
            <text class="form_label"><text style="color: red;">*</text>联系人</text>
            <view class="value_box">
                <input style="width: 100%;height: 100%;" type="text" maxlength="100" placeholder="请输入联系人" placeholder-style="font-size: 28rpx; color: #A6A6A6;" adjust-position="{{true}}" value="{{form.contactName}}" data-name="contactName" name="contactName" bindblur="bindValue" />
            </view>
            <text class="tips">请输入联系人(可输入数字、字母和汉字)</text>
        </view>
        <view class="form_item {{formRules.contactPhone.warning ? 'warning' : ''}}">
            <text class="form_label"><text style="color: red;">*</text>电话</text>
            <view class="value_box">
                <input style="width: 100%;height: 100%;" type="text" maxlength="11" placeholder="请输入电话" placeholder-style="font-size: 28rpx; color: #A6A6A6;" adjust-position="{{true}}" value="{{form.contactPhone}}" data-name="contactPhone" name="contactPhone" bindblur="bindValue" />
            </view>
            <text class="tips">请输入电话(仅可输入11位数字)</text>
        </view>
        <view class="upload_images {{formRules.imageList.warning? 'warning': ''}}">
            <text>
                <text style="color: red;">* </text>
                <text style="font-size:30rpx; color: #262E38;">上传照片</text>
                <text style="font-size:26rpx; color: #999999;">(最多5张照片)</text>
            </text>
            <view class="image_list">
                <view class="image_preview" wx:for="{{imagePreviewList}}" wx:key="index">
                    <image class="image_item" src="{{item}}" mode="aspectFill" data-item="{{item}}">
                    </image>
                    <div class="close" data-current="{{index}}" catchtap="deleteImage"></div>
                </view>
                <view class="upload_image" bindtap="uploadImage" wx:if="{{imageList.length<5}}">
                    <image style="height: 53rpx;width: 53rpx;" mode="widthFix" src="../../../assets/img/open_upload.png"></image>
                </view>
            </view>
            <text class="tips">请上传照片</text>
        </view>

        <!-- 用户服务协议和隐私协议 -->
        <view class="safe_box">
            <label class="checkbox" bindtap="checkBoxChange">
                <checkbox value="{{checkAgree}}" /><text>同意</text>
            </label>
            <text style="color: #2a82e4;" bindtap="showAgree">《用户服务协议》</text>和<text style="color: #2a82e4;" bindtap="showConceal">《隐私政策》</text>
        </view>
        <!-- 按钮 -->
        <view class="{{checkAgree? 'btn_item submit_btn' : 'btn_item'}}" bindtap="submit">提交</view>   
    </view>
</view>
