<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>农事管理</el-breadcrumb-item>
			<el-breadcrumb-item>采收</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="search-box">
			<div class="filter-box">
				<el-select
					size="small"
					v-model="base"
					clearable
					@change="selChange"
					placeholder="请选择基地名称"
				>
					<el-option
						v-for="item in baseList"
						:label="item.farmname"
						:value="item.farmname"
						:key="item.id"
					></el-option>
				</el-select>
			</div>
			<el-button type="primary" size="mini" @click="harvAdd">新增</el-button>
		</div>
		<template v-if="pickList.length">
			<el-row :gutter="10">
				<el-col
					:xs="24"
					:sm="24"
					:md="12"
					:lg="6"
					:xl="6"
					v-for="item in pickList"
					:key="item.id"
				>
					<el-card class="box-card">
						<div class="img-box">
							<img src="@/assets/images/sy/farmThing/harvest.png" />
						</div>
						<div class="detail">
							<p class="borderLine">采收基地 : {{ item.farm }}</p>
							<p class="borderLine">采收地块 : {{ item.land }}</p>
							<p class="borderLine">产品名称 : {{ item.pickname }}</p>
							<p class="borderLine">采收总量(kg) : {{ item.picktotal }}</p>
							<p class="borderLine">
								采收时间 : {{ (item.uptime * 1000) | formatTime }}
							</p>
							<p class="borderLine">批次 : {{ item.batch }}</p>
							<p class="borderLine">操作人 : {{ item.user }}</p>
						</div>
						<!-- <div class="btns">
							<a
								:class="{ bg: itemId == item.id && btnindex == 1 ? true : false }"
								@click="harvEdit(item)"
								>编辑</a
							>
							<a
								:class="{ bg: itemId == item.id && btnindex == 2 ? true : false }"
								@click="showQRcode(item.id)"
								>二维码</a
							>
						</div> -->
						<div class="btns2">
							<a
								:class="{ bg: itemId == item.id ? true : false }"
								@click="showQRcode(item.id,item.backcode)"
								>二维码</a
							>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</template>
		<template v-else>
			<!-- 暂无数据 -->
			<div class="expertDiagnosis_referral_units_not" >
				<img
					:src="zanwu"
					alt
					class="expertDiagnosis_referral_units_notImg"
				/>
			</div>
		</template>
		<el-pagination
			v-if="pickList.length"
			background
			layout="prev, pager, next"
			:total="totalNum"
			:page-size="8"
			:current-page="page"
			@current-change="changePage"
		></el-pagination>
		<!-- 新增弹框 -->
		<el-dialog
			title="新增"
			:visible.sync="farmThingAddDialogVisible"
			width="30%"
			@close="AddDialogClosed"
		>
			<template v-if="planted.length > 0">
				<el-form
					ref="addFormRef"
					:model="addForm"
					label-width="116px"
					:rules="addFormRules"
				>
					<el-form-item label="所属地块 : " prop="pro_cascader">
						<el-cascader
							style="width: 100%"
							@change="harvCascaderChange"
							v-model="addForm.pro_cascader"
							:options="planted"
							:props="{
								expandTrigger: 'hover',
								label: 'farmname',
								value: 'farmname'
							}"
						></el-cascader>
					</el-form-item>
					<el-form-item label="采收总量(kg) : " prop="har_total">
						<el-input v-model="addForm.har_total"></el-input>
					</el-form-item>
					<el-form-item label="操作人 : " prop="operator">
						<el-input v-model="addForm.operator"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="farmThingAddDialogVisible = false"
						>取 消</el-button
					>
					<el-button type="primary" @click="addSubm">确认</el-button>
				</span>
			</template>
			<template v-else>
				<div class="noPlanted">暂无正在种植的地块！</div>
			</template>
		</el-dialog>
		<!-- 编辑地块弹框 -->
		<el-dialog
			title="编辑"
			:visible.sync="farmThingEditDialogVisible"
			width="350px"
			@close="EditDialogClosed"
		>
			<el-form
				ref="editFormRef"
				:model="editForm"
				label-width="116px"
				:rules="addFormRules"
			>
				<el-form-item label="所属地块 : " prop="pro_cascader">
					<el-cascader
						style="width: 100%"
						@change="harvCascaderChange"
						v-model="editForm.pro_cascader"
						:options="planted"
						:props="{
							expandTrigger: 'hover',
							label: 'farmname',
							value: 'farmname'
						}"
					></el-cascader>
				</el-form-item>
				<el-form-item label="采收总量(kg) : " prop="har_total">
					<el-input v-model="editForm.har_total"></el-input>
				</el-form-item>
				<el-form-item label="批次名称 : " prop="batch_name">
					<el-input v-model="editForm.batch_name"></el-input>
				</el-form-item>
				<el-form-item label="操作人 : " prop="operator">
					<el-input v-model="editForm.operator"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="farmThingEditDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editSubm">确认</el-button>
			</span>
		</el-dialog>
		<!-- 生成二维码 -->
		<el-dialog
			title="追溯二维码"
			:visible.sync="showQRcodeDialogVisible"
			width="350px"
			@close="QRcodeDialogClosed"
		>
			<div id="qrCode" ref="QRcodeShowImg"></div>
			<p>{{ QRcodenum }}</p>
		</el-dialog>
	</div>
</template>

<script>
import QRCode from 'qrcodejs2' //二维码生成
export default {
	data() {
		return {
			zanwu: require('@/assets/images/expertDiagnosis/zanwu.png'),
			itemId: '',
			btnindex: '',
			backcode: '', //新增和编辑弹框
			planted: [],
			baseList: [],
			base: '',
			farmThingAddDialogVisible: false,
			farmThingEditDialogVisible: false,
			showQRcodeDialogVisible: false,
			pickList: [],
			totalNum: 1,
			page: 1,
			pro_cascader: [],
			addForm: {
				pro_cascader: [],
				har_total: '', //采收总量
				operator: '' //操作人
			},
			editForm: {
				pro_cascader: [],
				har_total: '', //采收总量
				operator: '', //操作人
				batch_name: '' //批次
			},
			addFormRules: {
				pro_cascader: [
					{ required: true, message: '请选择所属地块', trigger: 'change' }
				],
				batch_name: [
					{ required: true, message: '请填写批次名称', trigger: 'blur' }
				],
				har_total: [
					{ required: true, message: '请填写采收总量', trigger: 'blur' }
				],
				operator: [
					{ required: true, message: '请选择操作人', trigger: 'change' }
				]
			},
			QRcodenum: ''
		}
	},
	created() {
		this.getPickList()
		this.getPlanted()
		this.getBaseList()
	},
	methods: {
		getBaseList() {
			//获取所有基地
			this.$axios({
				method: 'POST',
				url: '/all_base'
			}).then((res) => {
				this.baseList = res.data.data
			})
		},
		getPlanted() {
			this.$axios({
				method: 'POST',
				url: '/already_plant'
			}).then((res) => {
				let arr = res.data.data
				this.planted = arr.filter((item) => {
					return item.children.some(m=>{
						return m.is_pick==0
					})
				}).map((item) => {
					item.children = item.children.filter((m) => {
						return m.is_pick == 0
					})
					return item
				})
			})
		},
		getPickList() {
			this.$axios({
				method: 'POST',
				url: '/pick_info',
				data: this.qs.stringify({ page: this.page, farmname: this.base })
			}).then((res) => {
				this.pickList = res.data.data
				this.totalNum = res.data.counts
			})
		},
		harvAdd() {
			this.farmThingAddDialogVisible = true
		},
		harvEdit(item) {
			if (item.is_pick == 0) {
				//未采收
				this.editForm.pro_cascader = [item.farm, item.land]
				this.editForm.har_total = item.picktotal
				this.editForm.operator = item.user
				this.editForm.batch_name = item.batch
				this.itemId = item.id
				this.btnindex = 1
				this.farmThingEditDialogVisible = true
			} else {
				this.$message.warning('此地块已采收，禁止编辑！')
			}
		},
		AddDialogClosed() {
			console.log(this.$refs.addFormRef)
			this.$refs.addFormRef.resetFields()
		},
		EditDialogClosed() {
			this.$refs.editFormRef.resetFields()
		},
		harvCascaderChange(value) {
			let opt = this.planted
			for (let item of opt) {
				if (value[0] == item.farmname) {
					for (let item2 of item.children) {
						if (value[1] == item2.farmname) {
							this.backcode = item2.backcode
						}
					}
				}
			}
		},
		addSubm() {
			this.$refs.addFormRef.validate((valid) => {
				if (!valid) return
				this.$axios({
					method: 'POST',
					url: '/add_pick',
					data: this.qs.stringify({
						farm: this.addForm.pro_cascader[0],
						land: this.addForm.pro_cascader[1],
						picktotal: this.addForm.har_total,
						user: this.addForm.operator,
						backcode: this.backcode
					})
				}).then((res) => {
					if (res.data == 1) {
						this.getPickList()
						this.getPlanted()
						this.farmThingAddDialogVisible = false
					} else {
						this.$message.warning(res.data)
					}
				})
			})
		},
		editSubm() {
			// this.$refs.editFormRef.validate((valid) => {
			// 	if (valid) {
			// 		this.farmThingEditDialogVisible = false
			// 	} else {
			// 		return false
			// 	}
			// })
		},
		showQRcode(id,backcode) {
			this.itemId = id
			this.showQRcodeDialogVisible = true
			this.QRcode = id
			this.QRcodenum = backcode
			this.$nextTick(() => {
				new QRCode(this.$refs.QRcodeShowImg, {
					text: 'http://39.106.113.84:8000/tracehome#/tracebackDetailApp/' + backcode,
					width: 200,
					height: 200,
					colorDark: '#333333', //二维码颜色
					colorLight: '#ffffff', //二维码背景色
					correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
				})
			})
		},
		QRcodeDialogClosed() {
			this.$refs.QRcodeShowImg.innerHTML = ''
		},
		changePage(val) {
			this.page = val
			this.getPickList()
		},
		selChange() {
			this.page = 1
			this.getPickList()
		}
	}
}
</script>

<style lang='less' scoped>
.search-box {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	.filter-box {
		display: flex;
		.el-cascader {
			width: 200px;
			margin-left: 10px;
		}
	}
	.el-input {
		width: 200px;
	}
}
.el-card {
	text-align: center;
	color: #555;
	font-size: 13px;
	.borderLine {
		border: #eee;
		border-radius: 5px;
		-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		padding: 8px 0;
		margin: 10px 0;
	}
	.btns {
		display: flex;
		width: 180px;
		border-radius: 30px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
		margin: 20px auto 0;
		a.bg {
			background: #17bb89;
			color: #fff;
		}
		a {
			width: 50%;
			height: 30px;
			line-height: 30px;
			cursor: pointer;
			&:first-child {
				border-top-left-radius: 30px;
				border-bottom-left-radius: 30px;
			}
			&:last-child {
				border-top-right-radius: 30px;
				border-bottom-right-radius: 30px;
			}
		}
		a:hover {
			background: #14a478;
			color: #fff;
		}
	}
	.btns2 {
		width: 90px;
		border-radius: 30px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
		margin: 20px auto 0;
		a.bg {
			background: #17bb89;
			color: #fff;
		}
		a {
			display: block;
			width: 100%;
			height: 30px;
			border-radius: 30px;
			line-height: 30px;
			cursor: pointer;
		}
		a:hover {
			background: #14a478;
			color: #fff;
		}
	}
}
.el-cascader {
	width: 100%;
}
#qrCode {
	width: 200px;
	margin: 0 auto;
}
#qrCode + p {
	text-align: center;
	line-height: 30px;
	font-family: monospace;
}
.noPlanted {
	padding: 0 10px 20px 10px;
	color: red;
}
// 暂无数据
.expertDiagnosis_referral_units_not {
	width: 272px;
	margin: 0 auto;
}
</style>