<template>
	<view class="containers">
		<topWindow></topWindow>
		<goback></goback>
		<view class="content">
			<u-form labelPosition="top" labelAlign="left" :model="modal" :rules="rules" ref="uForm"
				:labelStyle="{fonSize:'26px',color:'#8B91A4',paddingLeft:'10px'}">
				<view class="basicInformation">
					<view class="title">{{$t('hdk.Basicinformation')}}<text
							style="color:#8B91A4;">{{$t('hdk.Required')}}</text></view>
					<view class="uform">
						<u-form-item required :label="$t('hdk.SnCode')" labelWidth="50%" prop="formInfo.sn" borderBottom
							ref="item1">
							<u-input v-model="modal.formInfo.sn" maxlength="10" border="none"></u-input>
						</u-form-item>
						<u-form-item required :label="$t('hdk.ProductName')" labelWidth="50%"
							prop="formInfo.productName" borderBottom ref="item2">
							<u-input v-model="modal.formInfo.productName" maxlength="20" border="none"></u-input>
						</u-form-item>
						<u-form-item :label="$t('hdk.Model')" labelWidth="50%" prop="formInfo.type" borderBottom
							ref="item3">
							<u-input v-model="modal.formInfo.type" maxlength="20" border="none"></u-input>
						</u-form-item>
					</view>
				</view>
				<view class="basicInformation">
					<view class="title">{{$t('hdk.ProblemDescription')}}<text
							style="color:#8B91A4;">{{$t('hdk.Required')}}</text></view>
					<view class="textAreaCss">
						<u-textarea :placeholderStyle="!$isMobile?'font-size:18px':''" v-model="modal.formInfo.repairDescribe" count maxlength="200"
							:placeholder="$t('hdk.DescriptionPlaceholder')"></u-textarea>
					</view>
					<view class="uploadCss">
						<u-upload upload-icon="plus" :fileList="fileList" @afterRead="afterRead"
							@delete="deletePic" :previewFullImage="true" name="faultPicture" multiple :maxCount="5"
							accept="image"></u-upload>
					</view>
				</view>
				<view class="basicInformation">
					<view class="title">{{$t('hdk.ContactInformation')}}<text
							style="color:#8B91A4;">{{$t('hdk.Required')}}</text></view>
					<view class="uform">
						<u-form-item required :label="$t('hdk.AirportName')" labelWidth="50%"
							prop="formInfo.airportName" borderBottom ref="item3">
							<u-input v-model="modal.formInfo.airportName" maxlength="20" border="none"></u-input>
						</u-form-item>
						<u-form-item required :label="$t('hdk.Name')" labelWidth="50%" prop="formInfo.contactPersonName"
							borderBottom ref="item4">
							<u-input v-model="modal.formInfo.contactPersonName" maxlength="10" border="none"></u-input>
						</u-form-item>
						<u-form-item :label="$t('hdk.ContactInformation')" labelWidth="50%" prop="formInfo.phone"
							borderBottom ref="item5">
							<u-input v-model="modal.formInfo.contactPersonPhone" maxlength="20" border="none"></u-input>
						</u-form-item>
						<u-form-item required :label="$t('hdk.Email')" labelWidth="50%" prop="formInfo.email"
							borderBottom ref="item6">
							<u-input v-model="modal.formInfo.email" maxlength="20" border="none"></u-input>
						</u-form-item>
						<u-form-item :label="$t('hdk.DetailedAddress')" labelWidth="100%" prop="formInfo.address"
							borderBottom ref="item7">
							<u-input v-model="modal.formInfo.address" maxlength="30" border="none"></u-input>
						</u-form-item>
					</view>
				</view>
			</u-form>
			<view class="submitBtn" @click="openModal()">
				{{$t('hdk.ConfirmAndReport')}}
			</view>
			<u-modal :show="confirmModal" :title="title" :confirmText="$t('hdk.Confirm')" :cancelText="$t('hdk.Cancel')" showCancelButton @confirm="submit()"
				@cancel="confirmModal = false">
				<view class="slot-content">
					<rich-text class="contentTextCss" :nodes="content"></rich-text>
				</view>
			</u-modal>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	import topWindow from "@/pages/component/topWindow.vue"
	import goback from "@/pages/component/goback.vue"
	import {
		createAFaultReport
	} from "@/api/scan.js"
	import config from '@/common/config'
	export default {
		components: {
			topWindow,
			goback
		},
		props: {

		},
		data() {
			return {
				modal: {
					formInfo: {
						sn: "",
						productName: "",
						type: "",
						repairDescribe: "",
						picPath: "",
						airportName: "",
						contactPersonName: "",
						contactPersonPhone: "",
						email: "",
						address: "",
					},
				},
				fileList: [],
				confirmModal: false,
				title: "",
				content: "",
				rules: {
					'formInfo.sn': {
						type: 'string',
						required: true,
						message: this.$t('hdk.FillSNCode'),
						trigger: ['blur', 'change']
					},
					'formInfo.productName': {
						type: 'string',
						required: true,
						message: this.$t('hdk.FillProductName'),
						trigger: ['blur', 'change']
					},
					'formInfo.contactPersonName': {
						type: 'string',
						required: true,
						message: this.$t('hdk.FillName'),
						trigger: ['blur', 'change']
					},
					'formInfo.email': {
						type: 'email',
						required: true,
						message: this.$t('hdk.FillEmail'),
						trigger: ['blur', 'change']
					},
					'formInfo.repairDescribe': {
						type: 'string',
						required: true,
						message: this.$t('hdk.FillDescription'),
						trigger: ['blur', 'change']
					},
					'formInfo.airportName': {
						type: 'string',
						required: true,
						message: this.$t('hdk.FillAirportName'),
						trigger: ['blur', 'change']
					},
				},
			}
		},
		computed: {

		},
		onReady() {},
		onLoad(data) {
			if (data.repairpObject) {
				const repairpObject = JSON.parse(decodeURIComponent(data.repairpObject))
				console.log(repairpObject);
				this.modal.formInfo = {
					...this.modal.formInfo,
					...repairpObject
				};
				console.log(this.modal.formInfo);
			}
		},
		methods: {
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			async afterRead(event) {
				console.log(event);
				let that = this;
				let lists = [].concat(event.file)
				let fileListLen = that.fileList.length
				lists.map((item) => {
					that.fileList.push({
						...item,
						status: 'uploading',
						message: that.$t('hdk.Uploading')
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await that.uploadFilePromise(lists[i].url)
					let item = that.fileList[fileListLen]
					that.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						realUrl: result,
						url: config.prefixUrl + result
					}))
					console.log(that.fileList);
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				console.log(url);
				const filename = url.substring(url.indexOf('tmp/') + 4);
				// return;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.baseUrl + '/upload-file', 
						header: {
							'tenant-id': '1',
							// 'Content-Type': 'multipart/form-data;'
						},
						filePath: url,
						name: "file",
						
						success: (res) => {
							console.log(res);
							let data = JSON.parse(res.data);
							console.log(data);
							if (data.code === 0) {
								setTimeout(() => {
									resolve(data.data)
								}, 500)
							} else {
								reject("")
							}
						}
					});
				})
			},
			openModal() {
				this.$refs.uForm.validate().then(res => {
					this.title = this.$t('hdk.Reminder');
					this.content = this.$t('hdk.PromptContent');
					this.confirmModal = true
				})
			},
			submit() {
				console.log(this.modal.formInfo);
				this.$refs.uForm.validate().then(res => {
					let ohterValidate = this.checkOtherItems()
					if (ohterValidate) {
						createAFaultReport(this.modal.formInfo).then(res => {
							console.log(res);
							if (res.code === 0) {
								this.$refs.uToast.show({
									type: 'success',
									message: this.$t('hdk.SuccessfullyReported'),
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
									complete() {
										uni.navigateBack(1)
									}
								})
							} else if (res.code === 1400001001) {
								this.$refs.uToast.show({
									type: 'error',
									icon: false,
									message: this.$t('hdk.CheckSN'),
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
								})
							}
						})
					} else {
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: this.$t('hdk.FillDescription'),
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
						})
					}
				}).catch(errors => {
					this.$refs.uToast.show({
						type: 'error',
						icon: false,
						message: this.$t('hdk.CheckForUnfilledItems'),
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					})
					console.log(errors);
				})
				this.confirmModal = false;
			},
			checkOtherItems() {
				let data = this.modal.formInfo;
				if (data.repairDescribe === "" && this.fileList.length <= 0) {
					// uni.$u.toast('描述或图片未上传');
					return false;
				}
				data.picPath = JSON.stringify(this.fileList.map(it => `${it.realUrl}`));
				// delete data.fileList;
				console.log(data.picPath);
				return true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.containers {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #F2F4F3;
	}
	
	/deep/.uni-input-input{
		padding-left: 10px
	}

	.uform {
		margin: 20px;
		position:relative;
	}

	.textAreaCss {
		margin: 30px;
		background-color: #f8f9fd;
	}

	.uploadCss {
		margin: 30px;
	}

	/deep/.u-modal__title {
		display: flex;
		justify-content: center;
	}
	
	

	//移动端样式
	@media screen and (max-width: 767px) {
		.title {
			min-width: 114px;
			margin: 20px 0 0 15px;
			font-size: 15px;
			background-color: rgba(255, 255, 255, 0);
			box-sizing: border-box;
			font-family: '苹方 中等', '苹方', sans-serif;
			color: #333333;
			text-align: left;
		}
		.content{
			width: 100%;
		}

		.basicInformation {
			width: 95%;
			height: auto;
			padding: 2px;
			border-radius: 10px;
			background-color: #ffffff;
			box-sizing: border-box;
			margin: 10px 12px;
			padding-bottom: 80px;
		}

		.submitBtn {
			width: 350px;
			height: 40px;
			padding: 2px;
			margin: 24px;
			position: fixed;
			bottom: 0px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 8px;
			background-color: #00aeaa;
			box-sizing: border-box;
			font-family: '苹方 中等', '苹方', sans-serif;
			color: #ffffff;
			text-align: center;
			line-height: normal;
			z-index: 999;
		}
		
		.contentTextCss {
			font-size: 14px;
			color: #999999;
		}
	}

	//PC端样式
	@media screen and (min-width: 768px) {
		.title {
			min-width: 228px;
			margin: 40px 0 0 30px;
			font-size: 30px;
			background-color: rgba(255, 255, 255, 0);
			box-sizing: border-box;
			font-family: '苹方 中等', '苹方', sans-serif;
			color: #333333;
			text-align: left;
		}
		
		.contentTextCss {
			font-size: 20px;
			color: #999999;
		}
		
		.content{
			width: 80%;
			position: relative;
		}
		
		/deep/.u-modal{
			width: 500px !important;
		}
		
		/deep/.u-modal__title{
			height: 80px;
			font-size: 24px
		}
		
		/deep/.u-modal__content{
			height: 80px;
		}
		
		/deep/.uni-textarea-textarea{
			font-size: 18px;
		}
			
		/deep/.uni-input-input{
			font-size: 20px !important;
		}
		
		/deep/.u-form-item__body__right__message{
			font-size: 18px;
		}

		/deep/.u-form-item__body__left__content__label {
			font-size: 22px;
		}

		.basicInformation {
			width: 100%;
			height: auto;
			padding: 2px;
			border-radius: 20px;
			background-color: #ffffff;
			box-sizing: border-box;
			margin: 20px 24px;
			padding-bottom: 40px;
		}

		.submitBtn {
			width: 500px;
			height: 39px;
			padding: 2px;
			position: fixed;
			left: 0;right: 0;
			bottom: 30px;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 4px;
			background-color: #00aeaa;
			box-sizing: border-box;
			font-family: '苹方 中等', '苹方', sans-serif;
			color: #ffffff;
			text-align: center;
			line-height: normal;
			z-index: 999;
		}
	}

	
</style>