<template>
	<view class="container">
		<!-- <Navbar title="维修/报修" canBack></Navbar> -->
		<u-navbar title="维修/报修" autoBack :safeAreaInsetTop="true" placeholder>
			<view slot="right" @click="goToRepairPage">
				我的报修
			</view>
		</u-navbar>
		<view class="repairTypeCardCss">
			<view class="text-lg margin-top">
				报修类型 <text class="text-gray">(必填)</text>
			</view>
			<view class="flex">
				<u-tag :text="item.name" v-for="(item,index) of repairList" :key="index" @click="tagCurrent = item.name"
					class="margin-top-sm margin-right-sm" size="large" shape="circle"
					:bgColor="tagCurrent==item.name?'#fdeee6':'#F4F4F4'"
					:color="tagCurrent==item.name?'#ea5504':'#8B9197'" borderColor="#fff"></u-tag>
			</view>
			<view class="selectCss margin-top">
				<uni-data-select placeholder="请选择问题小类" clear v-model="value" :localdata="range"
					@change="change"></uni-data-select>
			</view>
			<view class="text-gray text-xs margin-top margin-bottom">
				安全问题反馈后24小时受理，其他问题上午6:00~晚上22:00受理
			</view>
		</view>

		<view class="problemDescriptionCardCss usuallyCard">
			<view class="text-lg margin-top">
				问题描述 <text class="text-gray">(必填)</text>
			</view>
			<view class="descCss margin-top">
				<u--textarea v-model="model.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>
		<addAddress ref="addAds" :mode="'add'" :showMrDz="false" :formData="formData" @setInput="getAds"></addAddress>
		<view class="submitBtnCss" @click="handleSubmit">
			<u-button color="#EA5504">确认并提交</u-button>
		</view>
	</view>
</template>

<script>
	import addAddress from '@/components/addAddress/addAddress.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			addAddress
		},
		computed: {
			...mapState(["user"]),
		},
		props: {

		},
		data() {
			return {
				tagCurrent: '',
				repairList: [{
						name: '燃气泄漏'
					},
					{
						name: '管道破裂'
					},
					{
						name: '其他'
					}
				],
				value: null,
				fileList: [],
				formData: {},
				range: [{
						value: "灶具、热水器故障",
						text: "灶具、热水器故障"
					},
					{
						value: "表接头漏气",
						text: "表接头漏气"
					},
					{
						value: "表后阀漏气",
						text: "表后阀漏气"
					},
					{
						value: "表后管接头漏气",
						text: "表后管接头漏气"
					},
					{
						value: "户外立管活接漏气",
						text: "户外立管活接漏气"
					},
					{
						value: "外挂表后阀漏气",
						text: "外挂表后阀漏气"
					},
				],
				model: {
					desc: "",
					name: '',
					phone: '',
					area: "",
					stree: ""
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad() {
			this.formData = {
				fLxr: this.user.fullname,
        fLxrdh: this.user.account,
			}
			console.log('打印this.user', this.user, this.$store);
		},
		methods: {
			change(e) {
				console.log(e);
			},
			// 右上角快捷跳转报修工单
			goToRepairPage(){
				uni.navigateTo({
					url:'/pages/mine/appList/repairWorkOrder/repairWorkOrder'
				})
			},
			handleSubmit() {
				if (!this.tagCurrent) {
					uni.$u.toast('请选择报修类型');
					return
				}
				if (!this.model.desc) {
					if (this.fileList.length <= 0) {
						uni.$u.toast('请输入问题描述');
						return
					}
				}
				let that = this;
				// this.$modal.showLoading('获取当前定位中');
				this.$refs.addAds.$refs.uForm.validate().then(async res => {
					let photoList = this.fileList.map(item => JSON.parse(item.fileObj));
					let wttp = JSON.stringify(photoList);
					console.log('打印this.formData====', this.formData, this.user, photoList);
					let hyID = this.user.hyId;
					let params = {
						bxlx: this.tagCurrent,
						wtms: this.model.desc,
						wttp: wttp,
						xdxm: this.formData.fLxr,
						hyyhid: hyID,
						lxfs: this.formData.fLxrdh,
						lxdzsf: this.formData.fLxrsf,
						lxdzs: this.formData.fLxrs,
						lxdzq: this.formData.fLxrq,
						lxdzjd: this.formData.fLxrjd,
						lxdzxxdz: this.formData.fLxrxxdz,
						bxlxmx: this.value,
						jd: this.formData.fJd,
						wd: this.formData.fWd,
					}
					const result = await that.$api.repairOrderApi.createRepairOrder(params);
					console.log("添加返回", result);
					let {
						code,
						value,
						message
					} = result;
					if (code === 200) {
						console.log("添加成功", result);
						uni.$u.toast(message);
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/home/repairReportSuccess'
							})
							// if (that.qpid) {
							//   console.log("首次添加地址");
							//   uni.redirectTo({
							//     url: '/pages/home/repairReportSuccess'
							//   })
							// } else {
							//   that.$goBack();
							// }

						}, 500)
					}
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})

			},
			// 组件传参
			getAds(ads) {
				const {
					area,
					...formData
				} = ads;
				this.formData = formData;
				// console.log('获取地址', JSON.parse(JSON.stringify(this.formData)));
			},
			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[i].url,
						fileObj: JSON.stringify(result)
					}))
					fileListLen++
				}
			},
		}
	}
</script>

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

	.repairTypeCardCss {
		background: #fff;
		border-radius: 15px;
		margin: 10px;
		padding: 10px 20px;
	}

	.problemDescriptionCardCss {
		margin: 10px;
		padding: 10px 20px;
	}

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

	/deep/.selectCss .uni-select {
		background: #F8F9FD;
		height: 45px;
		border-radius: 10px;
	}

	/deep/.uploadCss .u-upload__button {
		background: #fff;
		border: 2px dashed #f4f5f7;
		margin: 0;
	}

	.submitBtnCss {
		position: fixed;
		background: #fff;
		left: 0;
		right: 0;
		padding: 10px;
		width: 100%;
		bottom: 0px;
	}

	/deep/ .submitBtnCss .u-button {
		border-radius: 10px;
	}
</style>