<template>
    <view  class="w-screen h-screen bg-[var(--page-bg-color)] overflow-hidden">
        <scroll-view scroll-y="true" >
            <view>
                <u-form labelPosition="left" :model="formData"  labelWidth="120rpx" errorType='toast' :rules="rules" ref="formRef">
                	<view class="py-[10rpx] px-[30rpx] bg-white">
                		<u-form-item label="身份" prop="identity">
                		    <u-radio-group
                		        v-model="formData.identity"
                		        placement="row"
                		      >
                		        <u-radio
                		          :customStyle="{marginBottom: '8px',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="py-[10rpx] px-[30rpx] bg-white mt-[2rpx]">
                        <u-form-item label="姓名" prop="realname">
							<input class="bg-[var(--page-bg-color)] h-[66rpx] rounded-[10rpx] px-[20rpx] w-[100%]" v-model.trim="formData.realname" placeholder="请输入姓名" />
                        </u-form-item>
                    </view>
                    <view class="py-[10rpx] px-[30rpx] bg-white mt-[2rpx]">
                        <u-form-item label="手机号" prop="mobile">
                            <input class="bg-[var(--page-bg-color)] h-[66rpx] rounded-[10rpx] px-[20rpx] w-[100%]" v-model.trim="formData.mobile" placeholder="请输入手机号" />
                        </u-form-item>
                    </view>
                </u-form>
            </view>
			<view class="common-tab-bar-placeholder"></view>
			<view class="common-tab-bar fixed left-[var(--sidebar-m)] right-[var(--sidebar-m)] bottom-[0]">
				<button :loading="loading" class="primary-btn-bg text-[#fff] h-[80rpx] leading-[80rpx] rounded-[100rpx] text-[26rpx] font-500" @click="handleSave">确认绑定</button>
			</view>
        </scroll-view>
       
    </view>
</template>

<script setup lang="ts">
    import { ref, computed, reactive } from 'vue'
    import { bindBuild } from '@/addon/xypm/api/member'
    import { redirect } from '@/utils/common'
	
	// 成员身份
	const identityList = computed(() => {
	    return [
	        { name: '户主', value: 'owner' },
	        { name: '家属', value: 'family' },
			{ name: '租户', value: 'tenant' }
	    ]
	})

    const loading = ref(false)
    const formRef: any = ref(null)
    const formData = reactive<AnyObject>({
        identity: 'owner',
        realname: '',
        mobile: ''
    })

    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()
                        }
                    }
                }
            ],
        }
    })

    const handleSave = () => {
        formRef.value.validate().then(() => {
            if (loading.value) return
            loading.value = true
            bindBuild(formData).then(() => {
               redirect({ url: '/addon/xypm/pages/member/build/list'})
            }).catch(() => {
                loading.value = false
            })
        })
    }
    
</script>

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