<template>
	<view class="container">
		<Navbar title="提交工单" canBack></Navbar>
		<view class="otherCardCss mr10">
			<view class="basisCellCardCss usuallyCard">
				<view class="text-lg">
					{{ orderObj.fBxlx }}
				</view>
				<view class="flex justify-between w100 margin-top align-center">
					<view class="text-grey">
						报修单号：{{orderObj.fGdh || ''}}
					</view>
				</view>
				<view class="flex justify-between w100 margin-top align-center">
					<view class="text-grey">
						联系人：{{orderObj.fXdxm || ""}}({{orderObj.fLxfs || '136****1234'}})
					</view>
					<view class="" @click="handlePhone">
						<u-image src="/static/images/home/dianhua.png" width="18px" height="18px"></u-image>
					</view>
				</view>
				<view class="flex justify-between w100 margin-top align-center">
					<view class="text-grey w80 flex align-start">
						<u-icon name="map-fill" color="#8799AC" class="" style="margin:3px 5px 0 0;"></u-icon>
						<view class="">
							{{orderObj.fLxdzsf || ""}} {{orderObj.fLxdzs || ""}} {{orderObj.fLxdzq || ""}}
							{{orderObj.fLxdzjd || ''}} {{orderObj.fLxdzxxdz || ""}}
						</view>
					</view>
					<view class="" @click="handleMap">
						<u-image src="/static/images/home/daohang.png" width="18px" height="18px"></u-image>
					</view>
				</view>
			</view>
		</view>
		<view class="otherCardCss mr10 resultSty">
			<view class="basisCellCardCss  usuallyCard" style="height: 100%">
				<view class="text-lg">
					维修结果<text class="text-gray">(必填)</text>
				</view>
				<view class="flex w100 flex-wrap margin-top-lg">
					<view @click="resultTag=item.name"
						:style="{ backgroundColor:resultTag==item.name?'#fdeee6':'',color:resultTag==item.name?'#ea5504':''}"
						class="tagSty margin-bottom-sm margin-right-sm" v-for="(item,index) of resultList" :key="index">
						{{item.name}}
					</view>
				</view>
				<view class="descCss margin-top">
					<u--textarea v-model="orderObj.desc" count maxlength="200" height="100"
						placeholder="请按照一事一报原则上报问题，将问题情况和具体位置描述准确，更有利于解决。"></u--textarea>
				</view>
				<view class="uploadCss margin-top">
					<view class="flex justify-start align-end">
						<view class="">
							<u-upload :fileList="fileList" uploadIcon="plus" @afterRead="afterRead" @delete="deletePic"
								multiple :maxCount="5"></u-upload>
						</view>
						<view class="margin-left-sm text-gray text-lg">
							{{ fileList.length }}/5
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bomBtnCss flex justify-between">
			<view class="w40" @click="handCancel">
				<u-button>取 消</u-button>
			</view>
			<view class="w40" @click="handSubmit">
				<u-button color="#EA5504">提 交</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "submitOrder",
		data() {
			return {
				resultTag: '',
				resultList: [{
						name: '灶具、热水器故障，申请关单'
					},
					{
						name: '表前阀漏气，已换阀处结'
					},
					{
						name: '表接头漏气，已处结'
					},
					{
						name: '表后阀漏气，已换阀处结'
					},
					{
						name: '表后管接头漏气，已处结'
					},
					{
						name: '表后波纹管接头漏气，已处结'
					},
					{
						name: '表后波纹管漏气，换管，已处结'
					},
					{
						name: '户外立管活接漏气，已处结'
					},
					{
						name: '外挂表接头漏气，已处结'
					},
					{
						name: '外挂表前阀漏气，已处结'
					},
					{
						name: '外挂表后阀漏气，已处结'
					},
				],
				orderObj: {
					desc: '',
				},
				fileList: [],
				type: ""
			}
		},
		onLoad(options) {
			if (options.orderParams) {
				this.orderObj = JSON.parse(options.orderParams);
			}
			if (options.type) {
				console.log("打开类型", options.type);
				this.type = options.type
			}
		},
		methods: {
			handlePhone() {
				// console.log('电话详情',JSON.parse(JSON.stringify(this.orderObj)));
				uni.makePhoneCall({
					phoneNumber: this.orderObj.fLxfs, // 电话号码
					success: function() {
						console.log('拨打电话成功！');
					},
					fail: function(err) {
						console.log('拨打电话失败：' + JSON.stringify(err));
					}
				});
			},
			handleMap() {
				console.log('地图详情', JSON.parse(JSON.stringify(this.orderObj)));
				let jd = this.orderObj.fJd || "";
				let wd = this.orderObj.fWd || "";
				let ads = this.orderObj.adsName || ""
				if (!jd || !wd) {
					uni.$u.toast('无定位信息')
					return
				}
				this.$viewMapLocation(jd, wd, ads);
			},
			handCancel() {
				uni.navigateBack({
					delta: 1
				})
			},
			async handSubmit() {
				if (!this.resultTag) {
					uni.$u.toast('请选择维修结果');
					return
				}
				let photoList = this.fileList.map(item => JSON.parse(item.fileObj));
				let wttp = JSON.stringify(photoList);
				let paramsData = {
					wxjg: this.resultTag,
					wxbz: this.orderObj.desc,
					id: this.orderObj.id,
					wxtp: wttp
				}
				console.log(paramsData);
				let editResult;
				if (this.type === 'wx') {
					console.log("维修提交",paramsData);
					editResult = await this.$api.repairOrderApi.createRepairOrder(paramsData);
				} else if(this.type === 'aj') {
					console.log("安检提交",paramsData);
					editResult = await this.$api.repairOrderApi.submitRhaj(paramsData);
				}
				console.log('打印editResult', editResult);
				if (editResult.code == 200) {
					uni.navigateTo({
						url: '/pages/home/appList/onSiteRepair/successSubmit'
					})
					this.$modal.msgSuccess('提交工单成功!');
				} else {
					this.$modal.msgError('提交工单失败!');
				}
			},
			//删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log('打印event', event);
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				// 上传案例，根据这个来修改
				let file = event.file;
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$api.fileApi.uploadFile(file[i].url);
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: file[0].url,
						fileObj: JSON.stringify(result)
					}))
					fileListLen++
				}
				console.log('打印this.fileList', this.fileList);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		padding-bottom: 50px;
	}

	.basisCellCardCss {
		padding: 20px;
	}

	.mr10 {
		margin: 10px;
	}

	.resultSty {
		height: calc(100vh - 300px);
		background-color: #ffffff;
		overflow-y: auto;
	}

	.tagSty {
		background-color: #f4f4f4;
		padding: 10px;
		border-radius: 50px;
		color: #8B9197;

	}

	.descCss .u-textarea {
		background: #F8F9FD;
		border-radius: 15px;
	}

	.bomBtnCss {
		width: calc(100% - 20px);
		position: absolute;
		bottom: 10px;
		margin: 0 10px;
	}
</style>