<template>
	<div>
		<div class="innerBox">
			<div class="header">
				<div class="headerBj">
					<div class="title">食品安全追溯{{ backcode }}</div>
				</div>
				<div class="varietyInfo">
					<el-card class="box-card">
						<div>
							<template v-if="pinfo.productphoto">
								<img
									width="1.2rem"
									class="varietyInfoImg"
									:src="pinfo.productphoto"
								/>
							</template>
							<template v-else>
								<img width="1.2rem" class="varietyInfoImg" :src="noimg" />
							</template>
							<div class="varietyInfoTxt">
								<div>名称：{{ pinfo.pickname }}</div>
								<div>产地：{{ pinfo.farm + '/' + pinfo.land }}</div>
								<div>种植日期：{{ (pinfo.picktime * 1000) | formatTime }}</div>
								<div>采摘日期：{{ (pinfo.picktime * 1000) | formatTime }}</div>
							</div>
						</div>
						<div style="clear: both"></div>
						<div class="detectionReport">
							<div>检验报告：</div>
							<div class="swiper-container">
								<div class="swiper-wrapper">
									<div
										v-for="(el, index) in reportList"
										class="swiper-slide"
										:key="index"
									>
										<img class="img" :src="$host + el.qualityphoto" />
									</div>
								</div>
							</div>
						</div>
					</el-card>
				</div>
			</div>
			<div class="foldPanel">
				<el-card class="box-card" :body-style="{ padding: '0' }">
					<el-collapse @change="handleChange">
						<el-collapse-item name="1">
							<template slot="title">
								<div>
									<span>
										<i class="iconfont icon-zhuti_tiaosepan_o leftIcon"></i>
									</span>
									基地信息
								</div>
							</template>
							<!-- <div class="baseTitle">
								<i class="iconfont icon-zhuti_tiaosepan_o"></i
								><strong>基地</strong>
							</div> -->
							<div class="baseInfo">
								<div>　负责人：{{ pinfo.user }}</div>
								<div>基地面积：{{ pinfo.farmarea }}亩</div>
								<div>基地名称：{{ pinfo.farm }}</div>
								<div>基地地址：{{ pinfo.address }}</div>
								<div>基地描述：{{ pinfo.farmdesc }}</div>
							</div>
						</el-collapse-item>
					</el-collapse>
				</el-card>
				<el-card class="box-card" :body-style="{ padding: '0' }">
					<el-collapse @change="handleChange">
						<el-collapse-item name="2">
							<template slot="title">
								<div>
									<span>
										<i class="iconfont icon-zhuti_tiaosepan_o leftIcon"></i>
									</span>
									成长相册
								</div>
							</template>
							<div>
								<el-row :gutter="20">
									<el-col
										:span="12"
										v-for="(item, index) in growPic"
										:key="index"
									>
										<el-card
											class="box-card growImg"
											:body-style="{ padding: '0 0 5px 0' }"
										>
											<div>
												<template v-if="item.img">
													<img :src="$host + item.img" />
												</template>
												<template v-else>
													<img :src="noimg" />
												</template>
											</div>
											<div class="centerStyle">{{ item.tit }}</div>
										</el-card>
									</el-col>
								</el-row>
							</div>
						</el-collapse-item>
					</el-collapse>
				</el-card>
				<el-card class="box-card" :body-style="{ padding: '0' }">
					<el-collapse @change="handleChange">
						<el-collapse-item name="3">
							<template slot="title">
								<div>
									<span>
										<i class="iconfont icon-zhuti_tiaosepan_o leftIcon"></i>
									</span>
									成长档案
								</div>
							</template>
							<div class="block">
								<ul class="el-timeline">
									<li
										class="el-timeline-item"
										v-for="(item, index) in activities"
										:key="index"
									>
										<div class="el-timeline-item_tail"></div>
										<div class="el-timeline-item_dot"></div>
										<div class="el-timeline-item_time">2020-10-23</div>
										<div class="el-timeline-item_wrapper">
											<p class="timeLabel">
												{{ (item.uptime * 1000) | formatTime }}
											</p>
											<p>
												<label>农事作业：</label>
												{{ item.type | formatType }}
											</p>
											<p v-if="item.type == 1">
												<label>产品名称： </label>
												{{ item.plantname }}
											</p>
											<p v-if="item.type == 2">
												<label>肥料名称： </label>
												{{ item.itemname }}
											</p>
											<p v-if="item.type == 2">
												<label>施肥用量： </label>
												{{ item.manureuse }}kg
											</p>
											<p v-if="item.type == 3">
												<label>灌溉面积： </label>
												{{ item.area }}亩
											</p>
											<p v-if="item.type == 4">
												<label>药品名称： </label>
												{{ item.mediname }}
											</p>
											<p v-if="item.type == 5">
												<label>操作事项：</label>
												{{ item.jobname }}
											</p>
											<p v-if="item.type != 1">
												<label>操作人：</label>
												{{ item.user }}
											</p>

											<!-- <div><label>农事作业：</label>采收</div>
											<div><label>采收批次：</label>20201010</div>
											<div><label>　操作人：</label>20201010</div> -->
										</div>
									</li>
								</ul>
							</div>
						</el-collapse-item>
					</el-collapse>
				</el-card>
			</div>
		</div>
	</div>
</template>
<script>
import '../../../plugin/rem'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

export default {
	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
			}
		}
	},
	data() {
		return {
			backcode: this.$route.params.backcode,
			noimg: require('@/assets/images/sy/resultInfo/null.png'),
			pinfo: {
				productphoto: '',
				productdesc: '',
				farm: '',
				land: '',
				pickname: '',
				picktime: '',
				address: '',
				user: '',
				productdesc: '',
				farmarea: ''
			},
			reportList: [],
			activities: [],
			growPic: [
				{
					tit: '萌芽、新梢生长期',
					img: ''
				},
				{
					tit: '开花坐果期',
					img: ''
				},
				{
					tit: '果实膨大期',
					img: ''
				},
				{
					tit: '成熟期',
					img: ''
				}
			]
		}
	},
	created() {
		this.getInfo()
		this.report()
		this.growRecord()
		this.getGrowRecord()
	},
	mounted() {},
	methods: {
		//产品信息
		getInfo() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.product_info',
				data: this.qs.stringify({
					backcode: this.backcode
				})
			}).then((res) => {
				if (res.data.message == '') {
					let obj = res.data.data
					obj.productphoto = obj.productphoto ? `/api/${obj.productphoto}` : '' //图片地址
					let lng = obj.farmaddr && obj.farmaddr.split(';')[0].split(',')[0]
					let lat = obj.farmaddr && obj.farmaddr.split(';')[0].split(',')[1]
					this.formatAddress(lng, lat, obj)
				}
			})
		},
		//经纬度转换
		formatAddress(lng, lat, obj) {
			this.$jsonp(
				`http://api.map.baidu.com/reverse_geocoding/v3/?renderReverse&output=json&coordtype=wgs84ll`,
				{
					ak: 'nroAiX0Lf6ppNEGt2dBLtDkOldGCPFwF',
					location: `${lat},${lng}`
				}
			).then((res) => {
				let addressComponent = res.result&&res.result.addressComponent
				let { province, city, district } = addressComponent
				obj.address = province + city + district
				this.pinfo = obj
			})
		},
		swiperInit() {
			var mySwiper = new Swiper('.swiper-container', {
				direction: 'horizontal',
				loop: false,
				slidesPerView: 3,
				autoplay: true
			})
		},
		//检验报告
		report() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.quality_info',
				data: this.qs.stringify({
					backcode: this.backcode
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.reportList = res.data.data
					this.$nextTick(() => {
						this.swiperInit()
					})
				}
			})
		},
		//成长相册
		growRecord() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.grow_info',
				data: this.qs.stringify({
					backcode: this.backcode
				})
			}).then((res) => {
				if (res.data.message == '') {
					let { photo2, photo3, photo4, photo5 } = res.data.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: '/api/api_gateway?method=ascend.ascend_manage.all_ascend',
				data: this.qs.stringify({
					backcode: this.backcode
				})
			}).then((res) => {
				if (res.data.message == '') {
					let data = res.data.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
				}
			})
		},
		handleChange(activeNames) {
			console.log(activeNames)
		}
	}
}
</script>

<style lang='less' scoped>
@font-face {
	font-family: 'caption';
	src: url('/static/font/RuiZiZhenYanTi.ttf');
}
.innerBox {
	font-size: 12px;
	max-width: 7.5rem;
	margin: 0 auto;
	// background: red;
	.header {
		position: relative;
		.headerBj {
			height: 4.18rem;
			color: #fff;
			background: red url(/static/images/sy/resultInfo/hearderBj.jpg) no-repeat
				top center;
			background-size: 100% 100%;
			// width: 7.5rem;
			.title {
				font-size: 0.66rem;
				font-family: caption;
				text-align: center;
				line-height: 2.4rem;
				letter-spacing: 0.02rem;
				text-shadow: 0.02rem 0.02rem 0.1rem #575656;
			}
		}
		.varietyInfo {
			position: absolute;
			top: 2rem;
			left: 0.4rem;
			right: 0.4rem;
			.varietyInfoImg {
				width: 1.8rem;
				float: left;
				margin-right: 0.2rem;
				height: auto;
			}
			.varietyInfoTxt {
				line-height: 0.32rem;
			}
			.detectionReport {
				background: #eee;
				margin-top: 0.1rem;
				padding: 0.08rem 0.2rem 0.1rem;
				border-radius: 0.1rem;
				font-size: 0.14rem;
				line-height: 0.32rem;
				.img {
					width: 90%;
				}
			}
		}
	}
	.foldPanel {
		padding: 2rem 0.4rem 0.4rem 0.4rem;
		.el-card {
			margin: 0.1rem 0;
			border-radius: 0.2rem;
			/deep/.el-collapse-item__header {
				padding: 0 0.2rem;
				.leftIcon {
					background: #44c67e;
					border-radius: 50%;
					color: #fff;
					padding: 0.05rem;
				}
			}
			/deep/.el-collapse-item__content {
				border-top: 0.01rem solid #eee;
				padding: 0.25rem;
			}
			.baseTitle {
				font-size: 0.26rem;
				i {
					color: green;
					font-size: 0.32rem;
					vertical-align: middle;
					margin-right: 0.1rem;
				}
			}
			.baseInfo {
				background: #eeeeee;
				border-radius: 0.06rem;
				padding: 0.2rem;
				> div {
					text-indent: -1.2rem;
					margin-left: 1.2rem;
					line-height: 0.44rem;
				}
			}
		}
		//成长相册
		.centerStyle {
			text-align: center;
			line-height: 0.36rem;
		}
		.growImg {
			img {
				margin: auto;
				display: block;
				width: 80%;
				height: auto;
			}
		}
		// 成长档案
		.block {
			.el-timeline-item {
				position: relative;
				padding-bottom: 20px;
				.el-timeline-item_tail {
					position: absolute;
					left: 0.06rem;
					height: 100%;
					border-left: 2px dashed #44c67e;
				}
				.el-timeline-item_dot {
					position: absolute;
					background-color: #fff;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					left: -0.01rem;
					width: 0.16rem;
					height: 0.16rem;
					border: 0.02rem solid #44c67e;
					top: 0.12rem;
				}
				.el-timeline-item_time {
					color: #44c67e;
					font-size: 0.3rem;
					position: relative;
					padding-left: 0.28rem;
					top: -0.03rem;
					font-weight: 700;
				}
				.el-timeline-item_wrapper {
					position: relative;
					padding-left: 2.28rem;
					top: -0.5rem;
					color: #969696;
					label {
						color: #333;
					}
				}
			}
		}
	}
}
.swiper-container {
	height: 1rem;
}
</style>