<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>售后管理</el-breadcrumb-item>
			<el-breadcrumb-item>售后列表</el-breadcrumb-item>
		</el-breadcrumb>
		<template v-if="dataList.length>0">
			<div class="check-btns">
				<div class="search-box">
					<el-input
						placeholder="请输入内容"
						size="mini"
						clearable
						v-model="searchVal"
						suffix-icon="el-icon-search"
						class="input-with-select"
						@change="searchEquipList()"
					>
						<el-select v-model="selectItem" class="select02" slot="prepend" @change="selClear()">
							<el-option label="工单号" value="1"></el-option>
							<el-option label="设备ID" value="2"></el-option>
						</el-select>
					</el-input>
					<el-select
						v-model="status"
						class="select01"
						clearable
						size="mini"
						placeholder="请选择售后状态"
						@change="statusSelect()"
					>
						<el-option label="进行中" value="1"></el-option>
						<el-option label="已完成" value="0"></el-option>
					</el-select>
				</div>
				<el-button type="primary" size="mini" @click="saleAddVisible=true">新增</el-button>
			</div>
			<el-row :gutter="10">
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-for="item in 8" :key="item">
					<el-card class="box-card boxCard">
						<div class="saleCard">
							<div class="baseImg">
								<img src="@/assets/images/fourMoodBase/1.jpg" alt />
							</div>
							<div class="baseInfo">
								<h2>工单号 : 000000000478</h2>
								<div class="baseInfoDetails">
									<i class="iconfont icon-biaoqian"></i>
									<div class="caption">设备ID：48646156456456</div>
								</div>
								<div class="baseInfoDetails">
									<i class="iconfont icon-diannao"></i>
									<div class="caption">联系人：小王</div>
								</div>
								<div class="baseInfoDetails">
									<i class="iconfont icon-shijian"></i>
									<div class="caption">联系电话 ：15847514269</div>
								</div>
								<div class="baseInfoDetails">
									<i class="iconfont icon-shijian"></i>
									<div class="caption">状态 ：待分配</div>
								</div>
								<div class="baseInfoDetails">
									<i class="iconfont icon-dizhi"></i>
									<div class="caption">地址 ：河南省这方年广州稍后会闪电发货搜狐海山</div>
								</div>
								<div class="baseInfoDetails">
									<i class="iconfont icon-shijian"></i>
									<div class="caption">申请日期 ：2020-05-10</div>
								</div>
							</div>
						</div>
						<div class="tagBox">
							<template v-if="item==1">
								<img src="@/assets/images/saleAfter/bzy.png" alt />
							</template>
							<template v-else-if="item==2">
								<img src="@/assets/images/saleAfter/qxz.png" alt />
							</template>
							<template v-else-if="item==3">
								<img src="@/assets/images/saleAfter/cbd.png" alt />
							</template>
							<template v-else-if="item==4">
								<img src="@/assets/images/saleAfter/jk.png" alt />
							</template>
							<template v-else-if="item==5">
								<img src="@/assets/images/saleAfter/xy.png" alt />
							</template>
							<template v-else-if="item==6">
								<img src="@/assets/images/saleAfter/scd.png" alt />
							</template>
							<template v-else>
								<img src="@/assets/images/saleAfter/scd.png" alt />
							</template>
						</div>
						<div class="arrowBox" @click="saleAfterDetail">
							<template v-if="item==1">
								<img src="@/assets/images/saleAfter/bzy1.png" alt />
							</template>
							<template v-else-if="item==2">
								<img src="@/assets/images/saleAfter/qxz1.png" alt />
							</template>
							<template v-else-if="item==3">
								<img src="@/assets/images/saleAfter/cbd1.png" alt />
							</template>
							<template v-else-if="item==4">
								<img src="@/assets/images/saleAfter/jk1.png" alt />
							</template>
							<template v-else-if="item==5">
								<img src="@/assets/images/saleAfter/xy1.png" alt />
							</template>
							<template v-else-if="item==6">
								<img src="@/assets/images/saleAfter/scd1.png" alt />
							</template>
							<template v-else>
								<img src="@/assets/images/saleAfter/scd1.png" alt />
							</template>
						</div>
					</el-card>
				</el-col>
			</el-row>
			<el-pagination
				background
				layout="prev, pager, next"
				:total="totalNum"
				:current-page="page"
				@current-change="changePage"
			></el-pagination>
		</template>
		<template v-else>
			<div class="kong">
				<img src="@/assets/images/saleAfter/kong.png" />
				<div>
					<el-button @click="saleAddVisible=true" type="primary" round>去申请</el-button>
				</div>
			</div>
		</template>
		<!-- vueCropper 剪裁图片实现-->
		<el-dialog title="图片剪裁" :visible.sync="cropperVisible" width="400px">
			<div class="cropper-content">
				<div style="width:100%;height:300px">
					<vue-cropper
						ref="cropper"
						:img="option.img"
						:output-size="option.size"
						:output-type="option.outputType"
						:info="true"
						:full="option.full"
						:fixed="option.fixed"
						:fixed-number="option.fixedNumber"
						:can-move="option.canMove"
						:can-move-box="option.canMoveBox"
						:fixed-box="option.fixedBox"
						:original="option.original"
						:auto-crop="option.autoCrop"
						:auto-crop-width="option.autoCropWidth"
						:auto-crop-height="option.autoCropHeight"
						:center-box="option.centerBox"
						@real-time="realTime"
						:high="option.high"
						@img-load="imgLoad"
						mode="cover"
						:max-img-size="option.max"
						@crop-moving="cropMoving"
					></vue-cropper>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cropperVisible = false">取 消</el-button>
				<el-button type="primary" @click="cropperFinish" :loading="loading">确认</el-button>
			</div>
		</el-dialog>
		<!-- 售后新增 -->
		<el-dialog title="申请售后" :visible.sync="saleAddVisible" width="30%" @close="saleAfterDialogClosed">
			<el-form
				ref="addsaleAfterFormRef"
				:model="saleAfterForm"
				label-width="120px"
				:rules="saleAfterFormRules"
			>
				<el-form-item label="设备类型 : " prop="equipType">
					<el-select v-model="saleAfterForm.equipType" placeholder="请选择设备类型" style="width: 100%;">
						<el-option
							v-for="item in equipType"
							:label="item.label"
							:value="item.value"
							:key="item.value"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="设备ID : " prop="equipID">
					<el-select v-model="saleAfterForm.equipID" placeholder="请选择设备ID" style="width: 100%;">
						<el-option v-for="item in equipID" :label="item" :value="item" :key="item"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="故障描述 : " prop="desc">
					<el-input type="textarea" v-model="saleAfterForm.desc"></el-input>
				</el-form-item>
				<el-form-item label="故障图片 : " prop="img">
					<el-upload
						class="avatar-uploader"
						action
						:auto-upload="false"
						:show-file-list="false"
						:on-change="changeUpload"
					>
						<img v-if="saleAfterForm.imageUrl" :src="saleAfterForm.imageUrl" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="维修地址 : " prop="addr">
					<el-input v-model="saleAfterForm.addr"></el-input>
				</el-form-item>
				<el-form-item label="联系人 : " prop="contacts">
					<el-input v-model="saleAfterForm.contacts"></el-input>
				</el-form-item>
				<el-form-item label="联系电话 : " prop="phone">
					<el-input v-model="saleAfterForm.phone"></el-input>
				</el-form-item>
				<el-form-item label="期望维修日期 : " prop="date">
					<el-form-item prop="date">
						<el-date-picker
							type="date"
							placeholder="选择日期"
							v-model="saleAfterForm.date"
							style="width: 100%;"
						></el-date-picker>
					</el-form-item>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="saleAddVisible= false">取 消</el-button>
				<el-button type="primary" @click="addSaleAfterSubm">确认</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			dataList: [
				{ order: 454646 },
				{ order: 454646 },
				{ order: 454646 },
				{ order: 454646 },
				{ order: 454646 },
				{ order: 454646 },
				{ order: 454646 },
				{ order: 454646 }
			],
			searchVal: '',
			selectItem: '1',
			status: '',
			saleAddVisible: false,
			saleAfterList: [],
			totalNum: 0,
			page: 1,
			saleAfterForm: {
				equipType: '',
				equipID: '',
				desc: '',
				imageUrl: '',
				addr: '',
				contacts: '',
				phone: '',
				date: ''
			},
			equipType: [
				{ label: '测报灯', value: 1 },
				{ label: '杀虫灯', value: 2 },
				{ label: '孢子仪', value: 3 },
				{ label: '气象站', value: 4 },
				{ label: '监控', value: 5 }
			],
			equipID: [1465456456, 45454646646, 4564646464646],
			saleAfterFormRules: {
				equipType: [
					{ required: true, message: '请选择设备类型', trigger: 'change' }
				],
				equipID: [
					{ required: true, message: '请选择设备ID', trigger: 'change' }
				],
				desc: [{ required: true, message: '请填写故障描述', trigger: 'blur' }],
				addr: [{ required: true, message: '请填写维修地址', trigger: 'blur' }],
				contacts: [
					{ required: true, message: '请填写联系人', trigger: 'blur' }
				],
				phone: [{ required: true, message: '请填写联系电话', trigger: 'blur' }],
				date: [{ required: true, message: '请选择日期', trigger: 'blur' }]
			},
			cropperVisible: false,
			fileinfo: {},
			loading: false,
			// 裁剪组件的基础配置option
			option: {
				img: null,
				size: 1,
				full: false,
				outputType: 'png',
				canMove: true,
				fixed: true,
				fixedNumber: [16, 9],
				fixedBox: false,
				original: false,
				canMoveBox: true,
				autoCrop: true,
				// 只有自动截图开启 宽度高度才生效
				autoCropWidth: 160,
				autoCropHeight: 150,
				centerBox: false,
				high: true,
				max: 99999
			}
		}
	},
	methods: {
		// 搜索组合数据
		searchEquipList() {
			if (this.selectItem == 1) {
				this.f_id = this.searchVal
			} else if (this.selectItem == 2) {
				this.ename = this.searchVal
			}
			this.$emit('fun2', { f_id: this.f_id, ename: this.ename })
		},
		selClear() {},
		statusSelect() {},
		//改变page
		changePage(val) {
			this.page = val
		},
		saleAfterDialogClosed() {},
		changeUpload(file, fileList) {
			const isLt5M = file.size / 1024 / 1024 < 5
			if (!isLt5M) {
				this.$message.error('上传文件大小不能超过 5MB!')
				return false
			}
			// let reader = new FileReader()
			// reader.onload = (e) => {
			// 	let data
			// 	if (typeof e.target.result === 'object') {
			// 		// 把Array Buffer转化为blob 如果是base64不需要
			// 		data = window.URL.createObjectURL(new Blob([e.target.result]))
			// 		console.log(data)
			// 	} else {
			// 		data = e.target.result
			// 	}
			// 	this.option.img = data
			// }
			// // 转化为base64
			// // 转化为blob
			// // console.log(reader)
			// // reader.readAsDataURL(file)
			// this.cropperVisible = true
			// reader.readAsArrayBuffer(file.raw)
			// 上传成功后将图片地址赋值给裁剪框显示图片
			this.$nextTick(() => {
				this.option.img = URL.createObjectURL(file.raw)
				this.cropperVisible = true
			})
		},
		cropperFinish() {
			// 获取截图的base64 数据
			this.$refs.cropper.getCropData((data) => {
				this.saleAfterForm.imageUrl = data
				this.cropperVisible = false
			})
		},
		imgLoad(msg) {
			console.log('imgLoad')
			console.log(msg)
		},
		// 实时预览函数
		realTime(data) {
			console.log(data)
		},
		cropMoving(data) {
			console.log(99899)
			console.log(data, '截图框当前坐标')
		},
		addSaleAfterSubm() {},
		saleAfterDetail() {
			this.$router.push('/index/saleAfterDetail')
		}
	}
}
</script>

<style lang='less' scoped>
.check-btns {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	.search-box {
		text-align: left;
		.el-input {
			width: 400px;
		}
		.select01 {
			width: 200px;
		}
		/deep/.select02 {
			width: 86px;
		}
		.input-with-select {
			width: 260px;
		}
	}
}

.boxCard {
	position: relative;
	.saleCard {
		display: flex;
		.baseImg {
			flex: 1;
			overflow: hidden;
			height: 200px;
			img {
				width: 100%;
				height: auto;
			}
		}
		.baseInfo {
			flex: 1 1 auto;
			max-width: calc(100% - 50%);
			padding-left: 15px;
			h2 {
				font-size: 16px;
				margin: 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 80%;
			}
			.baseInfoDetails {
				display: flex;
				line-height: 28px;
				font-size: 14px;
				i {
					font-size: 14px;
					margin-right: 10px;
					color: #9e9e9e;
				}
				.caption {
					min-width: 68px;
					text-align: left;
					color: #525252;
				}
			}
		}
	}
	.tagBox {
		position: absolute;
		right: 20px;
		top: 0;
		cursor: pointer;
		img {
			width: 35px;
		}
	}
	.arrowBox {
		position: absolute;
		right: 20px;
		bottom: 20px;
	}
}
.kong {
	padding-top:12%;
	text-align: center;
	img{margin-bottom:20px;}
}
</style>