<template>
	<!-- 故障上报 -->
	<view>
		<!-- 上报表单 -->
		<view class="form-panel">
			<view class="form-title">
				基本信息
			</view>
			<input class="form-input" disabled v-model="aftersale.device_id" maxlength="50" placeholder="设备ID"
				type="text" />
			<input class="form-input" disabled v-model="aftersale.device_name" maxlength="20" placeholder="设备名称"
				type="text" />
			<input class="form-input" v-model="aftersale.user" maxlength="10" placeholder="请输入联系人名称" type="text" />
			<input class="form-input" v-model="aftersale.phone" maxlength="11" placeholder="请输入联系人电话" type="text" />
			<input class="form-input" v-model="aftersale.addr" maxlength="200" placeholder="请输入联系人地址" type="text" />
			<view class="form-title" style="padding-top: 24rpx;">
				故障信息
			</view>
			<textarea class="form-textarea" v-model="aftersale.errordesc" maxlength="200"
				placeholder="请尽量详细描述您所反馈的意见（不少于10个文字）" />
			<view class="form-words">{{aftersale.errordesc.length}}/200</view>
			<view class="row-between form-title">
				图片上传
				<text class="font-10">最多5张图片</text>
			</view>
			<!-- 上传文件 -->
			<view class="ui-upload" id="descripImg">
				<view class="ui-upload_file" v-for="(item,index) in imgList" :key="index">
					<uni-icons class="close" type="clear" @click="removeFile('image',0)" size="30" color="#333">
					</uni-icons>
					<image :src="item" @click="previewImage(index)" class="ui-upload_img" mode="aspectFill">
					</image>
				</view>
				<view class="ui-upload_file" v-if="aftersale.errorvideo">
					<uni-icons class="close" type="clear" @click="removeFile('video',0)" size="30" color="#333">
					</uni-icons>
					<video :src="aftersale.errorvideo" :show-center-play-btn="false" :controls="false"
						preload="metadata" poster="" :muted="true"></video>
				</view>
				<view class="ui-upload_input" @click="uploadFile('image')">
					<image src="@/static/img/image.png" class="ui-upload_img" mode="aspectFill"></image>
				</view>
				<view class="ui-upload_input" @click="uploadFile('video')" v-if="!this.aftersale.errorvideo">
					<image src="@/static/img/video.png" class="ui-upload_img" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<view class="form-submit">
			<button class="btn" :disabled="saveLoading" @click="submitAftersaleInfo">提交</button>
		</view>

	</view>
</template>

<script>
	import {
		uploadFile,
		saveAftersaleInfo
	} from '@/api/aftersale.js'
	export default {
		data() {
			return {

				// 图片列表
				imgList: [],
				// 上报信息
				aftersale: {
					device_id: '',
					device_name: '',
					errordesc: "", //描述信息
					errorimg: "", //图片链接,多张图片用 , 进行隔开
					errorvideo: "", //视频链接
					addr: "", //原图片链接
					user: "", //用户
					phone: "" //联系电话
				},
				saveLoading: false,
			}
		},
		onLoad(options) {
			this.aftersale.device_id = options.deviceId;
			this.aftersale.device_name = options.name;
		},
		methods: {
			/**
			 * 上传图片
			 * @param {String} type image:图片，video 视频
			 */
			async uploadFile(type) {
				if (type == 'image' && this.imgList.length == 5) {
					return this.$api.msg('图片最多上传5张');
				}
				let file = type == 'image' ? await this.chooseImage() : await this.chooseVideo();
				this.$api.loading('上传中...');
				let res = await uploadFile(file);
				this.$api.hide();
				if (!res) {
					return;
				}
				this.$api.msg('上传成功', 'success');
				// baseUrl 图片根据 img_url
				if (type == 'image') {
					return this.imgList.push(res)
				}
				this.aftersale.errorvideo = res;
			},
			// 选择图片
			chooseImage() {
				return new Promise((resolve, reject) => {
					uni.chooseImage({
						count: 1, // 默认9
						sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
						success(res) {
							resolve(res.tempFilePaths[0]);
						},
						fail(e) {
							resolve(null);
						}
					})
				})
			},
			// 选择视频
			chooseVideo() {
				return new Promise((resolve, reject) => {
					uni.chooseVideo({
						sourceType: ['camera', 'album'],
						success(res) {
							resolve(res.tempFilePath);
						},
						fail(e) {
							resolve(null);
						}
					});
				})
			},
			// 提交保存
			async submitAftersaleInfo(e) {
				if (this.imgList.length == 0 || !this.aftersale.errorvideo) {
					return this.$api.msg('请上传故障图片与视频');
				}
				this.$api.loading("上报中...");
				this.saveLoading = true;
				this.aftersale.errorimg = this.imgList.join(',');
				let res = await saveAftersaleInfo(this.aftersale);
				this.saveLoading = false;
				this.$api.hide();
				if (res) {
					this.$api.msg('上报成功', 'success');
					await this.$util.sleep(1500);
					uni.navigateBack();
				}
			},
			// 预览图片
			previewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.imgList
				});
			},
			/**
			 * 删除文件
			 * @param {String} type image:图片，video 视频
			 * @param {Number} index 文件坐标
			 */
			async removeFile(type, index) {
				const confirm = await this.$api.showModal(`是否确定删除当前${type=='image'?'图片':'视频'}`);
				if (!confirm) {
					return;
				}
				if (type == 'image') {
					this.imgList.splice(index, 1)
				} else {
					this.aftersale.errorvideo = '';
				}

			}
		}
	}
</script>

<style lang="scss">
	.form-panel {
		padding: 24rpx;
		margin-top: 24rpx;
		background: #fff;
		border-radius: 12rpx;
	}

	.form-title {
		padding: 0 16rpx 16rpx;
		font-size: 32rpx;
		color: #272A2E;
	}

	.form-input,
	.form-textarea {
		margin-bottom: 24rpx;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.form-input {
		padding: 22rpx 28rpx;
		background: #F3F5F9;
		border-radius: 12rpx;
	}

	.form-textarea {
		width: calc(100% - 32rpx);
		padding: 15rpx 22rpx;
		margin: 0 16rpx;
		font-size: 24rpx;
		box-sizing: border-box;
		background: #F3F4F5;
		border-radius: 8rpx;
	}

	.form-words {
		margin: 10rpx 16rpx;
		font-size: 24rpx;
		color: #272A2E;
		text-align: right;
	}

	.form-submit {
		padding: 120rpx 24rpx;
		overflow: hidden;
	}
</style>
