<template>
	<div>
		<div class="header">{{pinfo.farm+pinfo.land}}{{pinfo.pickname}}产品追溯档案</div>
		<div class="wrap">
			<div class="title">品种产地</div>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-card class="box-card varietyInfo" style="height: 570px">
						<div class="varietyImg">
							<template v-if="pinfo.productphoto">
								<img :src="$host+pinfo.productphoto" />
							</template>
							<template v-else>
								<img :src="noimg" />
							</template>
						</div>
						<div class="varietyMsg">
							<h2>产品名称：{{ pinfo.pickname }}</h2>
							<template v-if="pinfo.productdesc">
								<div>{{ pinfo.productdesc }}</div>
							</template>
							<template v-else>
								<div>暂无介绍</div>
							</template>
						</div>
					</el-card>
				</el-col>
				<el-col :span="12">
					<el-card class="box-card">
						<div class="synopsis">
							<div class="synopsisItem">
								<i class="iconfont icon-zhuti_tiaosepan_o"></i>
								<p>品种</p>
								<div>{{ pinfo.pickname }}</div>
							</div>
							<div class="synopsisItem">
								<i class="iconfont icon-zhuti_tiaosepan_o"></i>
								<p>产地</p>
								<div>{{ pinfo.farm + '/' + pinfo.land }}</div>
							</div>
							<div class="synopsisItem">
								<i class="iconfont icon-zhuti_tiaosepan_o"></i>
								<p>采收时间</p>
								<div>{{ (pinfo.picktime * 1000) | formatTime }}</div>
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :span="12">
					<el-card class="box-card mapPanel" style="height: 428px">
						<baidu-map
							class="Bmap"
							:center="center"
							:zoom="mapZoom"
							:scroll-wheel-zoom="true"
							@ready="handlerBMap"
						></baidu-map>
					</el-card>
				</el-col>
			</el-row>
			<div class="title">成长相册</div>
			<div class="photoGather" id="photoGather" v-viewer>
				<el-row :gutter="10">
					<el-col :span="6" v-for="(item, index) in growPic" :key="index">
						<el-card class="box-card growPanel">
							<div class="growImg">
								<template v-if="item.img">
									<img :src="$host + item.img" />
								</template>
								<template v-else>
									<img :src="noimg" />
								</template>
							</div>
							<div class="growMsg">
								<p>{{ item.tit }}</p>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</div>
			<div class="title">成长档案</div>
			<div class="trackRecord">
				<ul class="timeLine">
					<li v-for="(activity, index) in trackRecordFun" :key="index">
						<div
							class="timeLineItem"
							v-for="(item, ind) in activity"
							:key="ind"
						>
							<div class="timeLineItemTail"></div>
							<div class="timeLineItemIcon"></div>
							<div class="timeLineItemWrapper">
								<p class="timeLabel">{{ (item.uptime * 1000) | formatTime }}</p>
								<p>
									农事作业：
									<span>{{ item.type | formatType }}</span>
								</p>
								<p v-if="item.type == 1">
									产品名称：
									<span>{{ item.plantname }}</span>
								</p>
								<p v-if="item.type == 2">
									肥料名称：
									<span>{{ item.itemname }}</span>
								</p>
								<p v-if="item.type == 2">
									施肥用量：
									<span>{{ item.manureuse }}kg</span>
								</p>
								<p v-if="item.type == 3">
									灌溉面积：
									<span>{{ item.area }}亩</span>
								</p>
								<p v-if="item.type == 4">
									药品名称：
									<span>{{ item.mediname }}</span>
								</p>
								<p v-if="item.type == 5">
									操作事项：
									<span>{{ item.jobname }}</span>
								</p>
								<p v-if="item.type != 1">
									操作人：
									<span>{{ item.user }}</span>
								</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="title">检验报告</div>
			<template v-if="reportList.length>0">
				<div class="surveyReport" id="surveyReport" v-viewer>
					<el-row :gutter="20">
						<el-col :span="6" v-for="item in reportList" :key="item.id">
							<el-card class="box-card growPanel">
								<div class="growImg">
									<img :src="$host+ item.qualityphoto" />
								</div>
								<div class="growMsg">
									<p>{{ item.qualitydesc }}</p>
								</div>
							</el-card>
						</el-col>
					</el-row>
				</div>
			</template>
			<template v-else> <div  style="padding:50px 0">暂无数据</div> </template>
		</div>
	</div>
</template>

<script>
import QRCode from 'qrcodejs2' //二维码生成
export default {
	data() {
		return {
			backcode: this.$route.params.backcode,
			activities: [],
			center: { lng: '', lat: ''},
			mapZoom: 16,
			pinfo: {
				productphoto: '',
				productdesc: '',
				farm: '',
				land: '',
				pickname: '',
				picktime: ''
			},
			noimg: require('@/assets/images/sy/resultInfo/null.png'),
			reportList: [],
			growPic: [
				{
					tit: '萌芽、新梢生长期',
					img: ''
				},
				{
					tit: '开花坐果期',
					img: ''
				},
				{
					tit: '果实膨大期',
					img: ''
				},
				{
					tit: '成熟期',
					img: ''
				}
			]
		}
	},
	computed: {
		// 计算属性的 getter
		trackRecordFun: function () {
			// `this` 指向 vm 实例
			var len = this.activities.length
			var n = 7 //每行个数
			var lineNum = len % n === 0 ? len / n : Math.ceil(len / n)
			var res = []
			for (let i = 0; i < lineNum; i++) {
				// slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
				let temp = this.activities.slice(i * n, i * n + n)
				res.push(temp)
			}
			return res
		}
	},
	created() {
		this.getGrowRecord()
		this.getInfo()
		this.growRecord()
		this.report()
	},
	filters: {
		formatType(value) {
			switch (value) {
				case '1':
					return '种植'
					break
				case '2':
					return '施肥'
					break
				case '3':
					return '灌溉'
					break
				case '4':
					return '喷药'
					break
				case '5':
					return ' 更多'
					break
			}
		}
	},
	methods: {
		//产品信息
		getInfo() {
			this.$axios({
				method: 'POST',
				url: '/product_info',
				data: this.qs.stringify({
					backcode: this.backcode
				})
			}).then((res) => {
				let obj = res.data
				this.center.lng =
					obj.farmaddr && obj.farmaddr.split(';')[0].split(',')[0]
				this.center.lat =
					obj.farmaddr && obj.farmaddr.split(';')[0].split(',')[1]
				obj.productphoto = obj.productphoto ? `/${obj.productphoto}` : '' //图片地址
				this.pinfo = obj

				//地块地图定位
				// map.clearOverlays();
				var new_point = new this.BMap.Point(this.center.lng, this.center.lat)
				var marker = new this.BMap.Marker(new_point) // 创建标注
				this.map.addOverlay(marker) // 将标注添加到地图中
				this.map.panTo(new_point)
			})
		},
		//成长相册
		growRecord() {
			this.$axios({
				method: 'POST',
				url: '/grow_info',
				data: this.qs.stringify({
					backcode: this.backcode
				})
			}).then((res) => {
				let {photo2, photo3, photo4, photo5} = res.data
				this.growPic[0].img = photo2
				this.growPic[1].img = photo3
				this.growPic[2].img = photo4
				this.growPic[3].img = photo5
			})
		},
		//成长档案
		getGrowRecord() {
			this.$axios({
				method: 'POST',
				url: '/all_ascend',
				data: this.qs.stringify({
					backcode: this.backcode
				})
			}).then((res) => {
				let data = res.data.data
				let arr = data.irrigate
					.concat(data.job)
					.concat(data.manura)
					.concat(data.medi)
					.concat(data.plant)
				arr.sort((a, b) => {
					return a.uptime - b.uptime
				})
				this.activities = arr
			})
		},
		//检验报告
		report() {
			this.$axios({
				method: 'POST',
				url: '/quality_info',
				data: this.qs.stringify({
					backcode: this.backcode
				})
			}).then((res) => {
				this.reportList = res.data._list
			})
		},
		handlerBMap({ BMap, map }) {
			this.BMap = BMap
			this.map = map
		}
	}
}
</script>

<style lang='less' scoped>
.header {
	color: #fff;
	background: #14a478;
	text-align: center;
	line-height: 85px;
	letter-spacing: 10px;
	font-size: 30px;
	font-weight: 700;
}
.wrap {
	max-width: 1200px;
	margin: 0 auto;
	.title {
		border-left: 5px solid #35a478;
		padding-left: 20px;
		color: #35a478;
		font-weight: 700;
		line-height: 30px;
		margin: 25px 0;
		letter-spacing: 2px;
		font-size: 22px;
	}
	.varietyInfo {
		/deep/.el-card__body {
			padding: 0;
			.varietyImg {
				width: 100%;
				height: 420px;
				overflow: hidden;
				img {
					height: 100%;
					width: auto;
					display: block;
					margin: auto;
				}
			}
			.varietyMsg {
				padding: 0 20px 20px 20px;
				h2 {
					margin: 10px;
					font-size: 20px;
				}
				div {
					color: #545454;
					font-size: 14px;
					line-height: 24px;
				}
			}
		}
	}
	.synopsis {
		display: flex;
		justify-content: space-around;
		text-align: center;
		.synopsisItem {
			i {
				font-size: 38px;
				color: #35a478;
			}
			p {
				font-size: 16px;
				color: #313131;
				line-height: 30px;
				font-weight: 700;
			}
			div {
				color: #7f7f7f;
				font-size: 14px;
			}
		}
	}
	/deep/.mapPanel {
		.el-card__body,
		#map {
			padding: 0;
			width: 100%;
			height: 100%;
		}
	}
	.photoGather,
	.surveyReport {
		/deep/.growPanel {
			border-radius: 8px;
			margin-bottom: 10px;
			.el-card__body {
				padding: 0;
				.growImg {
					cursor: pointer;
					height: 250px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.growMsg {
					text-align: center;
					padding: 10px;
				}
			}
		}
	}
	.timeLine {
		> li {
			position: relative;
			height: 360px;
			margin-bottom: 48px;
		}
		.timeLineItem {
			position: relative;
			width: 14%;
			height: 100%;
			display: inline-block;
			&:nth-child(2n) {
				.timeLineItemWrapper {
					bottom: 0;
					&::after {
						left: 27px;
						top: -14px;
						border: 8px solid #ffffff;
						left: 20px;
						border-left: 8px solid transparent;
						border-right: 8px solid transparent;
						border-top: 8px solid transparent;
						bottom: auto;
						top: -16px;
					}
				}
			}
			.timeLineItemTail {
				position: absolute;
				left: 4px;
				width: 100%;
				border-bottom: 2px solid #e4e7ed;
				top: 180px;
			}
			.timeLineItemIcon {
				position: absolute;
				background-color: #35a478;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				left: 22px;
				width: 12px;
				height: 12px;
				top: 175px;
			}
			.timeLineItemWrapper {
				width: 250px;
				height: 160px;
				background: #fff;
				position: absolute;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				box-sizing: border-box;
				padding: 12px 18px;
				border-radius: 5px;
				line-height: 27px;
				border: 1px solid #fff;
				cursor: pointer;
				&::after {
					position: absolute;
					content: '';
					border: 8px solid #ffffff;
					left: 20px;
					border-left: 8px solid transparent;
					border-right: 8px solid transparent;
					border-bottom: 8px solid transparent;
					bottom: -16px;
				}
				.timeLabel {
					color: #35a478;
					font-weight: 700;
				}
				p {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 14px;
				}
				span {
					color: #6d6d6d;
				}
			}
		}
	}
}
.timeLine > li .timeLineItem .timeLineItemWrapper:hover {
	border: 1px solid #35a478;
	box-shadow: 0 2px 12px 0 rgba(53, 164, 120, 0.2);
	box-sizing: border-box;
}
.timeLine > li .timeLineItem .timeLineItemWrapper:hover:after {
	border-color: #35a478 transparent transparent transparent;
}
.timeLine > li .timeLineItem:nth-child(2n) .timeLineItemWrapper:hover:after {
	border-color: transparent transparent #35a478 transparent;
}
.Bmap {
	width: 100%;
	height: 400px;
}
</style>