<template>
    <view  class="w-screen h-screen bg-[var(--page-bg-color)] overflow-hidden pb-[100rpx]">
        <scroll-view scroll-y="true" >
            <view class="text-[30rpx]">
                <u-form labelPosition="left" :model="formData"  labelWidth="150rpx" errorType='toast' :rules="rules" ref="formRef">
					<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-[500rpx] text--[28rpx]">
								<picker @change="buildChange" :value="buildIndex" :range="buildList" range-key="build_name">
									<view class="flex w-[500rpx]">
										{{buildList[buildIndex]?buildList[buildIndex]['build_name']:''}}
										<view class="ml-auto pt-[15rpx] ">
											<u-icon 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-[500rpx]" 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-[500rpx]" v-model.trim="formData.mobile" placeholder="请输入手机号" />
					    </u-form-item>
					</view>
					<view class="py-[10rpx] px-[30rpx] bg-white mt-[2rpx]">
					    <u-form-item label="装饰公司" prop="company">
					        <input class="bg-[var(--page-bg-color)] h-[66rpx] rounded-[10rpx] px-[20rpx] w-[500rpx]" v-model.trim="formData.company" placeholder="请输入装饰公司名称" />
					    </u-form-item>
					</view>
					<view class="py-[10rpx] px-[30rpx] bg-white mt-[2rpx]">
					    <u-form-item label="装修日期" prop="startdate">
					        <view class="bg-[var(--page-bg-color)] h-[66rpx] leading-[66rpx] rounded-[10rpx] px-[20rpx] w-[500rpx] flex text-[28rpx]" @click="handleSelect">
					        	<view>
									<text v-if="formData.startdate == ''" class="text-color-[gray]">请选择装修日期</text>
									<text v-else>{{formData.startdate}} ~ {{formData.enddate}}</text>
								</view>
					        	<view class="nc-iconfont nc-icon-a-riliV6xx-36 tab-right-icon ml-auto"></view>
					        </view>
							
					    </u-form-item>
					</view>
					<view class="py-[10rpx] px-[30rpx] bg-white">
						<u-form-item label="是否砸墙" prop="iswall">
						    <u-radio-group
						        v-model="formData.iswall"
						        placement="row"
						      >
						        <u-radio
						          :customStyle="{marginBottom: '16rpx',marginRight: '30rpx'}"
						          v-for="(item, index) in iswallList"
						          :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] relative" v-if="formData.iswall == 1">
					    <u-form-item label="砸墙照片" prop="images">
					        <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>
		
        <!-- 时间选择 -->
        <select-date ref="selectDateRef" @confirm="confirmFn" />
    </view>
</template>

<script setup lang="ts">
    import { ref, computed, reactive } from 'vue'
    import { adddDecorat } 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'
	import selectDate from '@/components/select-date/select-date.vue';
	
	// 是否砸墙
	const iswallList = computed(() => {
	    return [
	        { name: '是', value: 1 },
	        { name: '否', value: 0 },
	    ]
	})
	const buildList = ref<Array<any>>([])
	const buildIndex = ref<number>(0)
    const loading = ref(false)
    const formRef: any = ref(null)
    const formData = reactive<AnyObject>({
		member_build_id:0,
		build_name:'',
        realname: '',
        mobile: '',
		company:'',
		startdate:'',
		enddate:'',
		iswall:1,
		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()
                        }
                    }
                }
            ],
			'company': {
			    type: 'string',
			    required: true,
			    message: '请输入装饰公司',
			    trigger: ['blur', 'change'],
			},
			'startdate': {
			    type: 'string',
			    required: true,
			    message: '请选择装修日期',
			    trigger: ['blur', 'change'],
			}
        }
    })

    const handleSave = () => {
        formRef.value.validate().then(() => {
            if (loading.value) return
            loading.value = true
            adddDecorat(formData).then(() => {
				loading.value = false
                redirect({ url: '/addon/xypm/pages/manage/decorat/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;
	}
    
	//日期筛选
	const selectDateRef = ref()
	const handleSelect = () =>{
		selectDateRef.value.show = true
	}
	// 确定时间筛选
	const confirmFn = (data: any) =>{
		formData.startdate = data[0].split(" ")[0];
		formData.enddate = data[1].split(" ")[0];
	}
</script>

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