<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>
		</div>
		<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/resultInfo/icon.png" />
					</div>
					<div class="detail">
						<p class="borderLine">产品名称 : {{ item.pickname }}</p>
						<p class="borderLine">基地 : {{ item.farm }}</p>
						<p class="borderLine">地块 : {{ item.land }}</p>
						<p class="borderLine">批次 : {{ item.batch }}</p>
						<p class="borderLine">总量 : {{ item.picktotal }}kg</p>
						<p class="borderLine">
							采收日期 : {{ (item.uptime * 1000) | formatTime }}
						</p>
					</div>
					<div class="btns">
						<el-button
							type="primary"
							size="mini"
							plain
							@click="lookProduct(item.backcode)"
							>详情</el-button
						>
						<el-button
							type="primary"
							size="mini"
							plain
							@click="editProduct(item.backcode)"
							>编辑</el-button
						>
						<el-button
							type="primary"
							size="mini"
							plain
							@click="showQRcodeFun(item.id)"
							>二维码</el-button
						>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-pagination
			background
			layout="prev, pager, next"
			:total="totalNum"
			:page-size="8"
			:current-page="page"
			@current-change="changePage"
		></el-pagination>
		<el-dialog
			title="追溯二维码"
			:visible.sync="showQRcodeVisible"
			width="350px"
			@close="QRcodeDialogClosed"
		>
			<div id="qrCode" ref="QRcodeShowImg"></div>
			<p>{{ QRcode }}</p>
			<!-- <span slot="footer" class="dialog-footer">
               <el-button @click="showQRcodeVisible= false">取 消</el-button>
               <el-button type="primary" @click="addUserSubm">确认</el-button>
			</span>-->
		</el-dialog>
	</div>
</template>

<script>
import QRCode from 'qrcodejs2' //二维码生成
export default {
	data() {
		var checkMobile = (rule, value, callback) => {
			const regMobile = /^1\d{10}$/
			if (regMobile.test(value)) {
				callback()
			} else {
				// 返回一个错误提示
				callback(new Error('请输入合法的手机号码'))
			}
		}
		return {
			page: 1,
			totalNum: 0,
			QRcode: '',
			keyWords: '',
			pickList: [],
			base:'',
			baseList: [],
			addUserDialogVisible: false,
			showQRcodeVisible: false,
			fields: [
				{ value: '1', label: '地块一' },
				{ value: '2', label: '地块二' },
				{ value: '3', label: '地块三' },
				{ value: '4', label: '地块四' }
			],
			addSyForm: {
				areaName: '',
				batchName: '',
				pickBatchName: '',
				img: '',
				originalPlace: '',
				validity_date: '',
				pickData: '2020-12-03',
				gross: ''
			},
			addUserFormRules: {
				areaName: [
					{ required: true, message: '请选择地块', trigger: 'change' }
				],
				batchName: [
					{ required: true, message: '请选择批次', trigger: 'change' }
				],
				pickBatchName: [
					{ required: true, message: '请选择采收批次', trigger: 'change' }
				],
				img: [{ required: true, message: '请上传产品图片', trigger: 'change' }],
				originalPlace: [
					{ required: true, message: '请输入产地', trigger: 'change' }
				],
				validity_date: [
					{ required: true, message: '请选择有效期', trigger: 'change' }
				]
			}
		}
	},
	mounted() {
		this.getPickList()
		this.getBaseList()
	},
	methods: {
		getBaseList() {
			//获取所有基地
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.all_base'
			}).then((res) => {
				this.baseList = res.data.data.data
			})
		},
		getPickList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.pick_info',
				data: this.qs.stringify({ page: this.page,farmname:this.base })
			}).then((res) => {
				if (res.data.message == '') {
					this.pickList = res.data.data.data
					this.totalNum = res.data.data.counts
				}
			})
		},
		lookProduct(backcode) {
			var routeUrl = this.$router.resolve({
				path: `/tracebackDetail/${backcode}`
			})
			window.open(routeUrl.href, '_blank')
		},
		editProduct(backcode) {
			this.$router.push({ path: '/index/resultInfoEdit/', query: { backcode } })
		},
		addUserSubm() {
			this.$refs.addUserFormRef.validate((valid) => {
				if (valid) {
					alert('submit!')
				} else {
					console.log('error submit!!')
					return false
				}
			})
		},
		QRcodeDialogClosed() {
			document.getElementById('qrCode').innerHTML = ''
		},
		handleAvatarSuccess(res, file) {
			this.userDetail.logo = URL.createObjectURL(file.raw)
		},
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg'
			const isLt2M = file.size / 1024 / 1024 < 2
			if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 或者 JPEG 格式!')
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!')
			}
			return isJPG && isLt2M
		},
		//改变page
		changePage(val) {
			this.page = val
			this.getPickList()
		},
		showQRcodeFun(id) {
			this.showQRcodeVisible = true
			this.QRcode = id
			this.$nextTick(() => {
				new QRCode(this.$refs.QRcodeShowImg, {
					text: 'http://47.104.218.216:8000/#/tracebackDetailApp/' + id,
					width: 200,
					height: 200,
					colorDark: '#333333', //二维码颜色
					colorLight: '#ffffff', //二维码背景色
					correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
				})
			})
		},
		selChange(){
			this.page=1
			this.getPickList()
		}
	}
}
</script>

<style lang='less' scoped>
.search-box {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	.el-input {
		width: 200px;
	}
}
.el-card {
	text-align: center;
	color: #555;
	font-size: 13px;
	.borderLine {
		border: #eee;
		border-radius: 5px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		padding: 8px 0;
		margin: 10px 0;
	}
	.btns {
		margin-top: 15px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		button {
			background: #fff;
			margin: 0;
			i {
				font-size: 14px;
			}
			span {
				margin-left: 5px;
			}
		}
		.el-button.el-button--success:hover {
			background: #14a478;
			color: #fff;
		}
	}
}
#qrCode {
	width: 200px;
	margin: 0 auto;
}
#qrCode + p {
	text-align: center;
	line-height: 30px;
	font-family: monospace;
}
.qRcodeBox {
	text-align: center;
}
</style>