<template>
    <view  class="w-screen h-screen bg-[var(--page-bg-color)] overflow-hidden pb-[100rpx]">
        <scroll-view scroll-y="true" >
            <view>
                <u-form labelPosition="left" :model="formData"  labelWidth="130rpx" errorType='toast' :rules="rules" ref="formRef">
					<view class="py-[10rpx] px-[30rpx] bg-white">
						<u-form-item label="类别" prop="type">
						    <u-radio-group
						        v-model="formData.type"
						        placement="row"
						      >
						        <u-radio
						          :customStyle="{marginBottom: '16rpx',marginRight: '30rpx'}"
						          v-for="(item, index) in typeList"
						          :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">
					        
							<view class="bg-[var(--page-bg-color)] flex h-[66rpx] leading-66rpx rounded-[10rpx] px-[20rpx] w-[520rpx] text--[28rpx]">
								<picker @change="buildChange" :value="buildIndex" :range="buildList" range-key="build_name">
									<view class="flex w-[520rpx]">
										{{buildList[buildIndex]?buildList[buildIndex]['build_name']:''}}
										<view class="ml-auto pt-[15rpx]">
											<u-icon class="ml-auto" name="arrow-down" color="#999" size="18"></u-icon>
										</view>
									</view>
								</picker>
							</view>
					    </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-[520rpx]" 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-[520rpx]" v-model.trim="formData.mobile" placeholder="请输入手机号" />
					    </u-form-item>
					</view>
					
					<view class="py-[10rpx] px-[30rpx] bg-white mt-[2rpx] relative">
					    <u-form-item label="内容" prop="content">
					        <textarea class="bg-[var(--page-bg-color)] rounded-[10rpx] p-[20rpx] w-[520rpx]" v-model="formData.content" placeholder="请在此处输入内容" maxlength="200" />
					        <view class="text-right text-[24rpx] text-[#888] absolute right-[40rpx] bottom-[40rpx]">
					             {{ formData.content.length }}/200
					        </view>
					    </u-form-item>
					</view>
					<view class="py-[10rpx] px-[30rpx] bg-white mt-[2rpx] relative">
					    <u-form-item label="图片" prop="content">
					        <upload-img v-model="formData.images" :max-count="9" :multiple="true"/>
					    </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 { adddRepair } from '@/addon/xypm/api/manage'
	import { getBuildAll } from '@/addon/xypm/api/member'
    import { redirect } from '@/utils/common'
	import uploadImg from '@/addon/xypm/pages/manage/components/upload-img.vue'
	import { onShow } from '@dcloudio/uni-app'
	
	
	// 类别列表
	const typeList = computed(() => {
	    return [
	        { name: '户内', value: 'indoor' },
	        { name: '公区', value: 'public' },
	    ]
	})
	const buildList = ref<Array<any>>([]);
	const buildIndex = ref<number>(0);
    const loading = ref(false)
    const formRef: any = ref(null)
    const formData = reactive<AnyObject>({
        type: 'indoor',
		member_build_id:0,
		build_name:'',
        realname: '',
        mobile: '',
		content:'',
		images:[]
    })
	
	onShow(() => {
		getBuildAll().then(res => {
			if (JSON.stringify(res.data) === '[]') {
				uni.showModal({
					title: '提示',
					content: '请先绑定房产',
					confirmText:'去绑定',
					success: res => {
						if (res.confirm) {
							redirect({ url: '/addon/xypm/pages/member/build/bind' })
						}else{
							uni.navigateBack({
								delta: 1
							});
						}
					}
				})
			}else{
				buildList.value = res.data;
				let defaultIndex = 0;
				res.data.forEach((item,index)=>{
					console.log(item);
					if(item.is_default == 1){
						defaultIndex = index;
					}
				})
				buildIndex.value = defaultIndex;
				formData.build_name	= buildList.value[defaultIndex].build_name;
				formData.member_build_id = buildList.value[defaultIndex].id;
				formData.realname = buildList.value[defaultIndex].realname;
				formData.mobile = buildList.value[defaultIndex].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()
                        }
                    }
                }
            ],
			'content': {
			    type: 'string',
			    required: true,
			    message: '请输入内容',
			    trigger: ['blur', 'change'],
			},
        }
    })

    const handleSave = () => {
        formRef.value.validate().then(() => {
            if (loading.value) return
            loading.value = true
            adddRepair(formData).then(() => {
				loading.value = false
                redirect({ url: '/addon/xypm/pages/manage/repair/list'})
            }).catch(() => {
                loading.value = false
            })
        })
    }
	
	const buildChange = (e: any) => {
		buildIndex.value = e.detail.value;
		formData.member_build_id = buildList.value[buildIndex.value].id;
		formData.build_name	= buildList.value[buildIndex.value].build_name;
		formData.realname = buildList.value[buildIndex.value].realname;
		formData.mobile = buildList.value[buildIndex.value].mobile;
	}
    
</script>

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