<template>
	<div class="content">
		<div class="userinfo plan">
			<div class="title">基本信息</div>
			<div class="inputbox">
				<input :style="{border:result.imei?'1px solid red':''}" type="number" v-model="editFault.imei" @blur='equipIdExp' placeholder="请填写设备ID">
				<div v-if="result.imei" class="hint">{{result.imei}}</div>
			</div>
			<div class="inputbox">
				<input :style="{border:result.user?'1px solid red':''}" type="text" v-model="editFault.user" @blur='userExp' placeholder="请填写联系人">
				<div v-if="result.user" class="hint">{{result.user}}</div>
			</div>
			<div class="inputbox">
				<input :style="{border:result.tel?'1px solid red':''}" type="number" v-model="editFault.tel" @blur='telExp' :maxlength="11" placeholder="请填写联系电话">
				<div v-if="result.tel" class="hint">{{result.tel}}</div>
			</div>
		</div>
		
		<div class="problems plan">
			<div class="title">报修详情</div>
			<div class="inputbox">
				<textarea :style="{border:result.detail?'1px solid red':''}" name="" v-model="editFault.detail" @blur='detailExp' placeholder="请描述设备问题"></textarea>
				<div v-if="result.detail" class="hint">{{result.detail}}</div>
			</div>
			<div class="plan" style="margin-top:10px">
				<el-upload
					ref='photolist'
					:class="[noneBtnImg?'disUoloadSty':'']"
					:action='DOMIN+uploadurl'
					name="img_file"
					:limit="limitnum"
					list-type="picture-card"
					:on-success='loadsuccess'
					:on-preview="handlePictureCardPreview"
					:on-remove="handleRemove">
					<i class="iconfont icon-tupian-xianxing"></i>
					<p style="font-size:12px">上传图片(可选)</p>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
					<img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>
				<!-- 视频 -->
				<div v-if="editFault.Video !='' && videoFlag == false" style="position:relative" @click="videodelFun">
					<div class="videodel">
						<i class="el-icon-delete"></i>
					</div>
					<video 
						:src="DOMIN+editFault.Video" 
						style="width:100%;margin-top:20px"
						controls="controls">
						您的浏览器不支持视频播放
					</video>	
				</div>
				<el-upload
					accept="video/*"
					capture="camcorder"
					v-else
					class="avatar-uploader"
					:action="DOMIN+uploadurlvideo"
					:data="data"
					name="upload"
					:show-file-list="false"
					:on-success="handleVideoSuccess" 
					:on-progress="uploadVideoProcess" 
					:before-upload="beforeUploadVideo"> <!-- 验证上传格式 -->
					<i v-if="editFault.Video =='' && videoFlag == false" class="iconfont icon-luxiang avatar-uploader-icon"></i>
					<p style="font-size:12px">上传视频(可选)</p>
					<el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" ></el-progress>
				</el-upload>
			</div>
			<div class="submitbox">
				<button class="submit" @click="addFaultSubm">提交</button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		var checkphone = (rule, value, callback) => {
			let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
			if (value == "") {
			callback(new Error("请输入手机号"));
			} else if (!phoneReg.test(value)) {//引入methods中封装的检查手机格式的方法
			callback(new Error("请输入正确的手机号!"));
			} else {
			callback();
			}
		};
		return {
			uploadurl:'/api/api_gateway?method=base.bases.base_photo',
			uploadurlvideo:'/api/api_gateway?method=after_sale.after_sale_manage.video_upload',
			editFault:{
				imei:'',
				user:'',
				tel:'',
				detail:'',
				photos:[],
				Video:'',
				addr:'',
				type:'',
			},
			editFaultrules:{
				user:{ required: true, message: '请输入联系人', trigger: 'blur' },
				tel:{ required: true, validator: checkphone, trigger: 'blur' },
				detail:{ required: true, message: '请输入故障原因', trigger: 'blur' },
			},
			dialogImageUrl: '',
			dialogVisible: false,
			limitnum:4,
			noneBtnImg:false,
			videoFlag:false,
			videoUploadPercent:0,
			result:{
				imei:'',
				user:'',
				tel:'',
				detail:''
			},
			data:{
				device_id:''
			}
		}
	},
	mounted() {
		if(navigator.geolocation){
			navigator.geolocation.getCurrentPosition(this.onSuccess , this.onError);
		}else{
			alert("您的浏览器不支持使用HTML 5来获取地理位置服务");
		}
	},
	beforeMount() {},
	methods: {
		//文本框校验
		equipIdExp(){
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=after_sale.after_sale_manage.device_check',
				data: this.qs.stringify({
					device_id: this.editFault.imei,
				})
			}).then((res) => {
				this.result.imei = res.data.message
				if(res.data.message == ''){
					this.editFault.type = res.data.data.device_type_id
				}else{
					this.editFault.type = ''
				}
			})
		},
		userExp(){
			if(!this.editFault.user){
				this.result.user = '请输入联系人'
			}else{
				this.result.user = ''
			}
		},
		telExp(){
			if(!this.editFault.tel){
				this.result.tel = '请输入联系电话'
			}else{
				let phoneRe = /^1(3|4|5|6|7|8|9)\d{9}$/; 
				if(phoneRe.test(this.editFault.tel)){
					this.result.tel = ''
				}else{
					this.result.tel = '请输入正确联系方式'
				}
			}
		},
		detailExp(){
			if(!this.editFault.detail){
				this.result.detail = '请输入故障原因'
			}else{
				this.result.detail = ''
			}
		},
		// 提交故障
		addFaultSubm(){
			let photos = [];
			this.editFault.photos.forEach((item)=>{
				photos.push(item.response.data.src)
			})
			console.log(this.editFault.photos)
			if(this.result.imei || !this.editFault.imei || !this.editFault.user || !this.editFault.tel ||!this.editFault.detail){
				if(!this.editFault.imei){
					this.result.imei = '请输入设备号'
				}
				if(!this.editFault.user){
					this.result.user = '请输入联系人'
				}
				if(!this.editFault.tel){
					this.result.tel = '请输入联系电话'
				}
				if(!this.editFault.detail){
					this.result.detail = '请输入故障原因'
				}
				return false;
			}

			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=after_sale.after_sale_manage.aftersale_apply',
				data: this.qs.stringify({
					device_id: this.editFault.imei,
					errordesc:this.editFault.detail,
					errorimg:JSON.stringify(photos),
					addr:this.editFault.addr,
					user:this.editFault.user,
					userphone:this.editFault.tel,
					d_type:this.editFault.type,
					is_pc:'0',      //0 手机  1 电脑
					errorvideo:this.editFault.Video
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.$message({
						type: 'success',
						offset:100,
						message: '提交成功'
					})
					this.$refs.photolist.clearFiles();
					this.editFault = {
						imei:'',
						user:'',
						tel:'',
						detail:'',
						photos:[],
						Video:''
					}
				}else{
					this.$message({
						type: 'error',
						offset:100,
						message: res.data.message
					})
				}
			})	
			
		},
		// 图片上传校验
		handleRemove(file, fileList) {
			this.editFault.photos = fileList
			if(this.editFault.photos.length>=this.limitnum){
				this.noneBtnImg = true
			}else{
				this.noneBtnImg = false
			}
		},
		loadsuccess(response, file, fileList){
			this.editFault.photos = fileList
			if(this.editFault.photos.length>=this.limitnum){
				this.noneBtnImg = true
			}else{
				this.noneBtnImg = false
			}
		},
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		// 视频上传校验
		uploadVideoProcess(event, file, fileList){
			this.videoFlag = true;
			this.videoUploadPercent = parseInt(file.percentage);
		},
		beforeUploadVideo(file) {
			const isLt10M = file.size / 1024 / 1024  < 100;
			if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb','video/mov'].indexOf(file.type) == -1) {
				this.$message.error('请上传正确的视频格式');
				return false;
			}
			if (!isLt10M) {
				this.$message.error('上传视频大小不能超过100MB哦!');
				return false;
			}
			if(!this.editFault.imei){
				this.$message.error('请先填写设备ID!');
				return false;
			}else{
				this.data.device_id = this.editFault.imei
			}

		},
		handleVideoSuccess(res, file) {    
			console.log(res)                           //获取上传图片地址
			this.videoFlag = false;
			this.videoUploadPercent = 0;
			if(res.message == ''){
				this.editFault.Video = res.data.data.src
			}else{
				this.$message.error('视频上传失败，请重新上传！');
			}
		},
		// 获取手机定位
		onSuccess(position){
			this.editFault.addr = position.coords.longitude+','+position.coords.latitude
		},
		onError(error) {
			switch(error.code){
				case error.PERMISSION_DENIED:
				console.log("您拒绝对获取地理位置的请求");
				break;
				case error.POSITION_UNAVAILABLE:
				console.log("位置信息是不可用的");
				break;
				case error.TIMEOUT:
				console.log("请求您的地理位置超时");
				break;
				case error.UNKNOWN_ERROR:
				console.log("未知错误");
				break;
			}
		},
		videodelFun(){
			this.videoFlag = false;
			this.editFault.Video = ''
		}
	}
}
</script>

<style lang='less' scoped>
/deep/.el-dialog__headerbtn{
	top: 7px;
}
/deep/.disUoloadSty .el-upload--picture-card{
  display:none;   /* 上传按钮隐藏 */
}
/deep/.avatar-uploader{
	margin-top: 20px;
}
/deep/.avatar-uploader .avatar-uploader-icon{
	height: 30px;
	line-height: 28px !important;
	display: inline-block;
	font-size: 26px;
	color: #2292c5;
	margin-top: 44px;
}
/deep/.el-upload--picture-card{
	border: 1px dashed #2292c5;
	line-height: 27px;
}
/deep/.el-upload--picture-card i{
	color: #2292c5;
	margin-top: 44px;
    display: block;
}
/deep/.avatar-uploader .el-upload{
	border: 1px dashed #2292c5;
    width: 148px;
    height: 148px;
}
.content{
	padding-top: 20px;
    padding-bottom: 20px;
	background: #2292c5;
	color: #2292c5;
	.plan{
		background: #fff;
		border-radius: 5px;
		width: 90%;
    	margin: 0 auto;
		.title{
			font-size: 14px;
			font-weight: 700;
			text-align: center;
			line-height: 35px;
		}
	}
	.inputbox{
		text-align: center;
		padding-bottom: 10px;
		position: relative;
		input,textarea{
			width: 86%;
			background: rgba(34,146,197,.2);
			border: 1px solid transparent;
			line-height: 33px;
			border-radius: 4px;
			outline: none;
			padding: 0 2%;
			color: rgba(34,146,197,.7);
		}
		.hint{
			position: absolute;
			font-size: 12px;
			color: red;
			left: 8%;
		}
		textarea{
			height: 100px;
			resize:none;
		}
	}
	.userinfo{
		margin-bottom: 10px;
		padding-bottom: 10px;
		position: relative;
		&:before{
			position: absolute;
			content: '';
			bottom: -29px;
			left: 5%;
			width: 12px;
			height: 40px;
			// background: url('../../assets/images/failticon.png') no-repeat;
			background: url('../../assets/images/newImg/failticon.png') no-repeat;
			background-size: 8px 40px;
		}
		&:after{
			position: absolute;
			content: '';
			bottom: -29px;
			right: 5%;
			width: 12px;
			height: 40px;
			// background: url('../../assets/images/failticon.png') no-repeat;
			background: url('../../assets/images/newImg/failticon.png') no-repeat;
			background-size: 8px 40px;
		}
	}
	.submitbox{
		text-align: center;
		padding-bottom: 20px;
		.submit{
			width: 80%;
			border: none;
			background: #2292c5;
			color: #fff;
			line-height: 33px;
			border-radius: 15px;
			outline: none;
			&:active{
				background: #3cbef8;
			}
		}
	}
}
.videodel{
	position: absolute;
    right: 6px;
    top: 17px;
    z-index: 9;
}
input::-webkit-input-placeholder ,textarea::-webkit-input-placeholder{ 
/* WebKit browsers */ 
color: rgba(34,146,197,.7); 
} 
input:-moz-placeholder ,textarea:-moz-placeholder{ 
/* Mozilla Firefox 4 to 18 */ 
color: rgba(34,146,197,.7); 
} 
input::-moz-placeholder ,textarea::-moz-placeholder { 
/* Mozilla Firefox 19+ */ 
color: rgba(34,146,197,.7); 
} 
input:-ms-input-placeholder,textarea:-ms-input-placeholder { 
/* Internet Explorer 10+ */ 
color: rgba(34,146,197,.7); 
}
</style>