<template>
	<view class="page">
		<view class="head">
			<view class="logo-title">
				<image @click="goBack" src="../../static/left.png"></image>
				互助申请
			</view>
			<view class="title">
			</view>
			<view class="setting-mess"></view>
		</view>
		
		<view class="main">
			<view class="top-box" @click="sglxshow = true">
				<view>事故类型</view>
				<view class="top-box-img">
					<input v-model="form.type" type="text" placeholder="请选择" placeholder-class="placeholder" />
				</view>
			</view>
			<u-picker :show="sglxshow" :columns="columns" @confirm="sglxconfirm" @cancel="sglxshow = false"></u-picker>
			
			<view class="message-list">
			<view class="info-box">
				<view class="info-box-list" @click="timeshow = true">
					<view class="serve">
						<view class="serve-title">出险时间</view>
						<view class="serve-right" >
							<input v-model="form.emergence_time" type="text" placeholder="请选择" placeholder-class="placeholder" />
						</view>
					</view>
				</view>
				<u-datetime-picker :show="timeshow" @confirm="timeconfirm" v-model="value1" mode="datetime" @cancel="timeshow = false"></u-datetime-picker>
				<view class="info-box-list">
					<view class="serve">
						<view class="serve-title">出险地点</view>
						<view class="serve-right">
							<input v-model="form.emergence_locations" type="text" placeholder="请输入" placeholder-class="placeholder" />
						</view>
					</view>
				</view>
				<view class="info-box-list">
					<view class="info-box-width width100">
						<view>出险原因</view>
						<view>
							<textarea v-model="form.reason" maxlength="10000" auto-height placeholder="请输入" class="textarea"></textarea>
						</view>
					</view>
				</view>
			</view>
			</view>
			
			<view class="message-list">
			<view class="info-box">
				<view class="info-box-list">
					<view class="info-box-width">
						<view>医疗费用原始收据</view>
						<view class="" style="margin-top: 20rpx;">
							<u-upload :fileList="fileList1" @afterRead="afterRead1" @delete="deletePic1" name="1" multiple
								:maxCount="9">
							</u-upload>
						</view>
					</view>
				</view>
			</view>
			</view>
			
			<view class="message-list">
			<view class="info-box">
				<view class="info-box-list">
					<view class="info-box-width">
						<view>诊断证明书</view>
						<view class="" style="margin-top: 20rpx;">
							<u-upload :fileList="fileList2" @afterRead="afterRead2" @delete="deletePic2" name="1" multiple
								:maxCount="9">
							</u-upload>
						</view>
					</view>
				</view>
			</view>
			</view>
			<view class="message-list">
			<view class="info-box">
				<view class="info-box-list">
					<view class="info-box-width">
						<view>意外事故证明</view>
						<view class="" style="margin-top: 20rpx;">
							<u-upload :fileList="fileList3" @afterRead="afterRead3" @delete="deletePic3" name="1" multiple
								:maxCount="9">
							</u-upload>
						</view>
					</view>
				</view>
			</view>
			</view>
		</view>
		
		<view class="page-footer">
		  <view class="footer-buy" @click="submit">
		    <view class="cart-add">
		      <text>提交</text>
		    </view>
		  </view>
		</view>
		
		<!-- 弹窗 -->
		<view class="rule-win">
			<view class="cu-modal" :class="{'show':isRule}">
			<view class="rule-img"><image src="../../static/success.png"></image></view>
			  <view class="cu-dialog">
			    <view class="rule-content">
					<view class="rule-title">申请提交成功</view>
					<view>请您耐心等待审核</view>
					<view class="rule-btn">
						<view class="rule-btnleft" @click="home">返回首页</view>
						<view class="rule-btnright" @click="InsuranceClaims">前往申请保险理赔</view>
					</view>
				</view>
			  </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isRule: false,
				isRule1: false,
				sglxshow:false,
				timeshow:false,
				columns:[
					['意外事故','施工事故','其他']
				],
				form:{
					type:"",
					emergence_time:"",
					emergence_locations:"",
					reason:"",
					receipt_images:"",
					testimonial_images:"",
					certificate_images:"",
				},
				fileList1: [],
				fileList2: [],
				fileList3: [],
			};
		},
		methods:{
			sglxconfirm(e){
				console.log("11",e);
				this.form.type = e.value[0]
				this.sglxshow = false
			},
			formatDate(timestamp) {
				var date = new Date(timestamp);
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以要加1  
				var day = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				return year + "-" + month + "-" + day + " " + hour + ':' + minute + ':' + second;
			},
			timeconfirm(e){
				this.form.emergence_time = this.formatDate(e.value)
				this.timeshow = false
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			home(){
				uni.switchTab({
					url: '/pages/home/home',
				})
			},
			InsuranceClaims() {
				uni.navigateTo({
					url: '/pages/InsuranceClaims/InsuranceClaims'
				})
			},
			async afterRead1(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList1.length
				lists.map((item) => {
					this.fileList1.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList1[fileListLen]
					console.log("result", result);
					this.fileList1.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			deletePic1(event) {
				this.fileList1.splice(event.index,1)
			},
			async afterRead2(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList2.length
				lists.map((item) => {
					this.fileList2.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList2[fileListLen]
					console.log("result", result);
					this.fileList2.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			deletePic2(event) {
				this.fileList2.splice(event.index,1)
			},
			async afterRead3(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList3.length
				lists.map((item) => {
					this.fileList3.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList3[fileListLen]
					console.log("result", result);
					this.fileList3.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			deletePic3(event) {
				this.fileList3.splice(event.index,1)
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://antis103.sherkxuan.cn/api/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test',
							token: uni.getStorageSync("token"),
						},
						success: (res) => {
							console.log("111", JSON.parse(res.data));
							// var info = {
							// 	url:'https://yipinzhisheng.com' + JSON.parse(res.data).data.url
							// }
							// this.form.avatar.push(info)
							setTimeout(() => {
								resolve(JSON.parse(res.data).data.fullurl)
							}, 1000)
						}
					});
				})
			},
			submit(){
				if(this.form.type == ''){
					uni.showToast({
						icon:"error",
						title:"请选择事故类型"
					})
					return
				}
				if(this.form.emergence_time == ''){
					uni.showToast({
						icon:"error",
						title:"请选择出险时间"
					})
					return
				}
				if(this.form.emergence_locations == ''){
					uni.showToast({
						icon:"error",
						title:"请输入出险地点"
					})
					return
				}
				if(this.form.reason == ''){
					uni.showToast({
						icon:"error",
						title:"请输入出险原因"
					})
					return
				}
				if(this.fileList1.length > 0){
					uni.showToast({
						icon:"error",
						title:"请上传费用收据"
					})
					return
				}
				if(this.fileList2.length > 0){
					uni.showToast({
						icon:"error",
						title:"请上传诊断书"
					})
					return
				}
				if(this.fileList3.length > 0){
					uni.showToast({
						icon:"error",
						title:"请上传证明"
					})
					return
				}
				if(this.fileList1.length > 0){
					var arr = []
					for(let i = 0;i < this.fileList1.length;i++){
						arr.push(this.fileList1[i].url)
					}
					this.form.receipt_images = arr.join(',')
				}
				if(this.fileList2.length > 0){
					var arr = []
					for(let i = 0;i < this.fileList2.length;i++){
						arr.push(this.fileList2[i].url)
					}
					this.form.testimonial_images = arr.join(',')
				}
				if(this.fileList3.length > 0){
					var arr = []
					for(let i = 0;i < this.fileList3.length;i++){
						arr.push(this.fileList3[i].url)
					}
					this.form.certificate_images = arr.join(',')
				}
				this.API.hzsq(this.form).then(res=>{
					if(res.code == 1){
						this.isRule = true
					}else{
						uni.showToast({
							icon:"error",
							title:"提交失败"
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'cooperation.scss';
</style>
