<template>
    <u-popup :show="show" @close="show = false" mode="bottom" :round="10" :closeable="true">
        <view class="text-center p-[30rpx] font-500">添加成员</view>
        <scroll-view scroll-y="true" class="h-[50vh]">
            <view class="p-[30rpx] pt-0 text-sm">
                <u-form labelPosition="left" :model="formData" labelWidth="200rpx" errorType='toast' :rules="rules"
                    ref="formRef">
					<view class="mt-[10rpx]">
						<u-form-item label="成员身份" prop="identity" :border-bottom="true">
						    <u-radio-group
						        v-model="formData.identity"
						        placement="row"
						      >
						        <u-radio
						          :customStyle="{marginBottom: '16rpx',marginRight: '30rpx'}"
						          v-for="(item, index) in identityList"
						          :key="index"
						          :label="item.name"
						          :name="item.value"
						        >
						        </u-radio>
						    </u-radio-group>
						</u-form-item>
					</view>
                    <view class="mt-[10rpx]">
                        <u-form-item label="成员性别" prop="gender" :border-bottom="true">
                            <u-radio-group
                                v-model="formData.gender"
                                placement="row"
                              >
                                <u-radio
                                  :customStyle="{marginBottom: '16rpx',marginRight: '30rpx'}"
                                  v-for="(item, index) in genderList"
                                  :key="index"
                                  :label="item.name"
                                  :name="item.value"
                                >
                                </u-radio>
                            </u-radio-group>
                        </u-form-item>
                    </view>
                    <view class="mt-[10rpx]">
                        <u-form-item label="成员姓名" prop="realname" :border-bottom="true">
                            <u-input v-model="formData.realname" border="none" clearable
                                placeholder="请输入成员姓名"></u-input>
                        </u-form-item>
                    </view>
					
					<view class="mt-[10rpx]">
					    <u-form-item label="手机号码" prop="mobile" :border-bottom="true">
					        <u-input v-model="formData.mobile" border="none" clearable
					            placeholder="请输入成员手机号码"></u-input>
					    </u-form-item>
					</view>
					
					<view class="mt-[10rpx]">
					    <u-form-item label="身份证号" prop="idcard" :border-bottom="true">
					        <u-input v-model="formData.idcard" border="none" clearable
					            placeholder="请输入成员身份证号(可留空)"></u-input>
					    </u-form-item>
					</view>
					
					<view class="mt-[10rpx]">
					    <u-form-item label="收费日期" prop="bill_date" :border-bottom="true" @click="showBillDatePicker = true;">
					        <view class="flex w-[100%]">
					        	<view>
									<text v-if="formData.bill_date == ''" class="text-[#c0c4cc]">请选择收费日期</text>
									<text v-else>{{ formData.bill_date }}</text>
								</view>
					        	<view class="nc-iconfont nc-icon-a-riliV6xx-36 ml-auto"></view>
					        </view>
							
					    </u-form-item>
					</view>
					<view class="mt-[16rpx] text-[26rpx] line-feed text-[var(--text-color-light9)] leading-[1.4]">提示：只给该成员显示收费日期之后的账单</view>
                </u-form>
            </view>
        </scroll-view>
        <view class="p-[30rpx]">
            <u-button type="primary" shape="circle" @click="confirm">确认</u-button>
        </view>
		
		<!-- 日期选择 -->
		<u-datetime-picker :show = "showBillDatePicker" v-model="formData.bill_date" mode="date" title="选择日期" @confirm = "confirmDateFn" @cancel = "showBillDatePicker.value = false"></u-datetime-picker>
		
    </u-popup>
</template>

<script setup lang="ts">
    import { ref, computed } from 'vue'

    const show = ref(false)
	const showBillDatePicker = ref(false)
	// 成员身份
	const identityList = computed(() => {
	    return [
	        { name: '家属', value: 'family' },
			{ name: '租户', value: 'tenant' }
	    ]
	})
	
	// 性别
	const genderList = computed(() => {
	    return [
	        { name: '男', value: 'male' },
			{ name: '女', value: 'female' }
	    ]
	})
   
    const formData = ref({
        identity: 'family',
        realname: '',
        mobile: '',
		gender: 'male',
		idcard: '',
		bill_date:uni.$u.date(new Date().valueOf(), 'yyyy-mm-dd')
		
    })
    
    const formRef = ref(null)

    const rules = computed(() => {
        return {
            'realname': {
                type: 'string',
                required: true,
                message: '请输入成员姓名',
                trigger: ['blur', 'change'],
            },
            'mobile': [
                {
                    type: 'string',
                    required: true,
                    message: '请输入成员手机号码',
                    trigger: ['blur', 'change'],
                },
                {
                    validator(rule: any, value: any, callback: any) {
                        let mobile = /^1[3-9]\d{9}$/;
                        if (!mobile.test(value)){
                            callback(new Error('请输入正确的手机号'))
                        } else {
                            callback()
                        }
                    }
                }
            ],
			'idcard': [
			    {
			        validator(rule: any, value: any, callback: any) {
			            if (value && !/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)) {
			                callback(new Error('请输入正确的身份证号'))
			            } else {
			                callback()
			            }
			        }
			    }
			],
			'bill_date': {
			    type: 'string',
			    required: true,
			    message: '请选择收费日期',
			    trigger: ['blur', 'change'],
			},
        }
    })

    const open = () => {
        show.value = true
    }
	
	const close = () => {
		show.value = false
	}

    const emits = defineEmits(['confirm'])

    const confirm = () => {
        formRef.value.validate().then(() => {
            emits('confirm', formData.value)
        })
    }
	
	// 确定日期筛选
	const confirmDateFn = (e: any) =>{
		formData.value.bill_date = uni.$u.date(e.value, 'yyyy-mm-dd');
		showBillDatePicker.value = false;
	}

    defineExpose({
        open,
		close
    })
</script>

<style>
	@import '@/addon/xypm/styles/common.scss';
</style>
