<template>
	<!-- 故障报修 -->
	<view class="card_repairs">
		<uv-navbar title="故障报修" :placeholder="true" :titleStyle="{color:'#ffffff'}" leftIconColor="#ffffff"
			bgColor="#1d345e" @leftClick="leftClick"></uv-navbar>
		<uv-form :model="userInfo" :rules="rules" :labelStyle="{color:'#ffffff'}" :borderBottom="false" ref="form">
			<uv-form-item label="描述" prop="problem">
				<uv-textarea v-model="userInfo.problem" border="surround" placeholder="请输入内容"
					:textStyle="{color: '#fff'}" :customStyle="{background: 'transparent',}"></uv-textarea>
			</uv-form-item>
			<uv-form-item label="地点" prop="location">
				<uv-input v-model="userInfo.location" placeholder="填写位置信息" border="surround" color="#fff"></uv-input>
			</uv-form-item>
			<uv-form-item label="附件" prop="fileList">
				<uv-upload :fileList="userInfo.fileList" name="3" :maxCount="1" multiple
					:previewFullImage="true"></uv-upload>
			</uv-form-item>
		</uv-form>
		<view class="repairs_btn_bottom" @click="submit"><uv-button type="primary" text="提交"></uv-button></view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onShow, onReady } from "@dcloudio/uni-app";
	onReady(() => {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle("light");
		// #endif
	})
	onShow(() => {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle("light");
		// #endif
	});
	const userInfo = ref({
		problem: '',
		location: '',
		fileList: [],
	})
	const rules = ref({
		'problem': {
			type: 'string',
			required: true,
			message: '请输入内容',
			trigger: ['blur', 'change']
		},
		'location': {
			type: 'string',
			required: true,
			message: '填写位置信息',
			trigger: ['blur', 'change']
		},
		'fileList': {
			type: 'string',
			required: true,
			message: '图片附件(用于辅助说明故障情况)',
			trigger: ['blur', 'change']
		},
	})
	const form : any = ref(null)
	// 提交
	function submit(params : any) {
		form.value.validate().then(res => {
			uni.showToast({
				icon: 'success',
				title: '校验通过'
			})
		}).catch(errors => {
			uni.showToast({
				icon: 'error',
				title: '校验失败'
			})
		})
	}

	function leftClick() {
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style lang="scss" scoped>
	.card_repairs {
		padding: 0rpx 30rpx 30rpx 30rpx;
		width: calc(100% - 60rpx);
	}

	.repairs_btn_bottom {
		position: fixed;
		bottom: 20rpx;
		left: 0;
		right: 0;
		padding: 20rpx;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2
		padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2
	}
</style>