<template>
    <view>
		<view class="form-area">
			<uni-forms ref="deviceForm" :rules="rules" :modelValue="deviceFormData" label-position="top">
				<uni-forms-item required name="range" label="单位名称" label-width="150">
					<uni-easyinput placeholder="请输入" v-model="deviceFormData.range"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required name="location" label="设备所在地" label-width="150">
					<button @click="open">{{ locationPlace }}</button>
					<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel" :visible="visible" />
				</uni-forms-item>
				<uni-forms-item required name="brand" label="设备品牌" label-width="150">
					<uni-easyinput placeholder="请输入" v-model="deviceFormData.brand"></uni-easyinput>
				</uni-forms-item>
				<button @click="subForm">提交</button>
			</uni-forms>
		</view>
        
    </view>
</template>

<script>
    import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
    export default {
        data() {
            return {
				deviceFormData: {
					range: '',
					location: '',
					brand: ''
				},
				rules: {
					range: {
						rules: [
							{
								required: true,
								errorMessage: '请填写租赁范围！'
							}
						]
					},
					location: {
						rules: [
							{
								required: true,
								errorMessage: '请填写设备所在地！'
							}
						]
					},
					brand: {
						rules: [
							{
								required: true,
								errorMessage: '请填写设备品牌！'
							}
						]
					},
				},
                visible: false,
				locationPlace: '打开省市区选择器',
                maskCloseAble: true,
                defaultValue: '420111',
                column: 3
            }
        },
        components: {
            cityPicker
        },
        methods: {
            open () {
                this.visible = true
            },
            confirm (val) {
                console.log(val)
				this.locationPlace = val.name
				this.deviceFormData.location = val.name
                this.visible = false
            },
            cancel () {
                this.visible = false
            },
			subForm () {
				let that = this
				this.$refs.deviceForm.validate().then(formData => {
					console.log(formData);
				})
			}
        }
    }
</script>

<style lang="scss">
	body{
		background-color: #F3F3F3;
	}
	.form-area{
		width: 95%;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 15rpx;
		button{
			background-color: #043e71;
			color: #fff;
		}
	}
</style>