<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="saleAdd">新增</el-button>
		</div>
		<el-card class="box-card">
			<el-table :data="tableData" stripe style="width: 100%">
				<el-table-column prop="transname" label="产品名称"></el-table-column>
				<el-table-column prop="backcode" label="追溯码"></el-table-column>
				<el-table-column prop="farm" label="农场"></el-table-column>
				<el-table-column prop="land" label="地块"></el-table-column>
				<el-table-column prop="stime" label="发货日期"></el-table-column>
				<el-table-column prop="etime" label="预期到货日期"></el-table-column>
				<el-table-column prop="address" label="目的地"></el-table-column>
				<el-table-column prop="trans" label="运输方法"></el-table-column>
				<el-table-column prop="user" label="经办人"></el-table-column>
				<el-table-column label="操作" width="180">
					<template slot-scope="scope">
						<el-button
							size="mini"
							type="info"
							icon="el-icon-edit"
							@click="transEdit(scope.row)"
							>编辑</el-button
						>
						<el-button
							size="mini"
							type="danger"
							icon="el-icon-delete"
							@click="transDelet(scope.row.id)"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				layout="prev, pager, next"
				:total="totalNum"
				:current-page="page"
				@current-change="changePage"
			></el-pagination>
		</el-card>
		<!-- 新增运输弹框 -->
		<el-dialog
			title="新增"
			:visible.sync="farmThingAddDialogVisible"
			width="30%"
			@close="AddDialogClosed"
		>
			<el-form
				ref="addFormRef"
				:model="addForm"
				label-width="120px"
				:rules="addFormRules"
			>
				<el-form-item label="运输批次 : " prop="backcode">
					<el-select
						v-model="addForm.backcode"
						style="width: 100%"
						@change="selSourceCode()"
					>
						<el-option
							v-for="item in selltList"
							:key="item.id"
							:label="item.sellname + '-' + item.backcode"
							:value="item.backcode"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="产品名称 : " prop="name">
					<el-input disabled v-model="addForm.name"></el-input>
				</el-form-item>
				<el-form-item label="种植基地 : " prop="farm">
					<el-input disabled v-model="addForm.farm"></el-input>
				</el-form-item>
				<el-form-item label="种植地块 : " prop="land">
					<el-input disabled v-model="addForm.land"></el-input>
				</el-form-item>
				<el-form-item label="发货日期 : " prop="sendDate">
					<el-date-picker
						type="datetime"
						placeholder="选择日期"
						v-model="addForm.sendDate"
						style="width: 100%"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="预计到货日期 : " prop="arrivalDate">
					<el-date-picker
						type="datetime"
						placeholder="选择日期"
						v-model="addForm.arrivalDate"
						style="width: 100%"
					></el-date-picker>
				</el-form-item>
				<!-- <el-form-item label="发货地 : " prop="sendAddr">
					<el-select v-model="addForm.sendAddr" style="width: 100%;">
						<el-option v-for="item in baseList" :key="item.id" :label="item.farmname" :value="item.id"></el-option>
					</el-select>
				</el-form-item>-->
				<el-form-item label="目的地 : " prop="destination" class="addressItem">
					<el-input
						disabled
						v-model="addForm.destination"
						placeholder="请定位"
					></el-input>
					<el-button type="primary" size="mini" @click="goLocation"
						>地图定位</el-button
					>
				</el-form-item>
				<el-form-item label="详细地址 : " prop="addrDetail">
					<el-input required v-model="addForm.addrDetail"></el-input>
				</el-form-item>
				<el-form-item label="运输方法 : " prop="shipping">
					<el-input v-model="addForm.shipping"></el-input>
				</el-form-item>
				<el-form-item label="经办人 : " prop="user">
					<el-input v-model="addForm.user"></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>
		</el-dialog>
		<!-- 编辑运输弹框 -->
		<el-dialog
			title="编辑"
			:visible.sync="farmThingEditDialogVisible"
			width="30%"
			@close="EditDialogClosed"
		>
			<el-form
				ref="editFormRef"
				:model="editForm"
				label-width="120px"
				:rules="addFormRules"
			>
				<el-form-item label="发货日期 : " prop="sendDate">
					<el-date-picker
						type="datetime"
						placeholder="选择日期"
						v-model="editForm.sendDate"
						style="width: 100%"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="预计到货日期 : " prop="arrivalDate">
					<el-date-picker
						type="datetime"
						placeholder="选择日期"
						v-model="editForm.arrivalDate"
						style="width: 100%"
					></el-date-picker>
				</el-form-item>
				<!-- <el-form-item label="发货地 : " prop="sendAddr">
					<el-select v-model="editForm.sendAddr" style="width: 100%;">
						<el-option v-for="item in baseList" :key="item.id" :label="item.farmname" :value="item.id"></el-option>
					</el-select>
				</el-form-item>-->
				<el-form-item label="目的地 : " prop="destination" class="addressItem">
					<el-input
						disabled
						v-model="editForm.destination"
						placeholder="请定位"
					></el-input>
					<el-button type="primary" size="mini" @click="goLocation"
						>地图定位</el-button
					>
				</el-form-item>
				<el-form-item label="详细地址 : " prop="addrDetail">
					<el-input v-model="editForm.addrDetail"></el-input>
				</el-form-item>
				<el-form-item label="运输方法 : " prop="shipping">
					<el-input v-model="editForm.shipping"></el-input>
				</el-form-item>
				<el-form-item label="经办人 : " prop="user">
					<el-input v-model="editForm.user"></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
			class="map_dialog"
			title="添加定位"
			v-if="addLocationDialogVisible"
			:visible.sync="addLocationDialogVisible"
			width="800px"
			@close="addLocationDialogClosed"
		>
			<el-form
				:inline="true"
				:model="locationForm"
				class="demo-form-inline"
				size="mini"
			>
				<el-form-item label="地区">
					<el-input v-model="locationAddr"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="mini" @click="locationSearch"
						>定位</el-button
					>
				</el-form-item>
			</el-form>
			<baidu-map
				class="Bmap"
				:center="center"
				:zoom="mapZoom"
				:scroll-wheel-zoom="true"
				@ready="handlerBMap"
				@click="locationPoint"
			></baidu-map>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addLocationDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addLocationSubm">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			tableData: [],
			selltList: [],
			baseList: [],
			base: '',
			item_name: '', //筛选物料名称
			category: '', //筛选品类
			farmThingAddDialogVisible: false,
			farmThingEditDialogVisible: false,
			destination: {
				province: '',
				city: '',
				district: ''
			},
			addForm: {
				backcode: '',
				name: '',
				farm: '',
				land: '',
				sendDate: '',
				arrivalDate: '',
				sendAddr: '',
				destination: '',
				shipping: '',
				user: '',
				addrDetail:''
			},
			editForm: {
				sendDate: '',
				arrivalDate: '',
				sendAddr: '',
				destination: '',
				shipping: '',
				user: '',
				addrDetail:''
			},
			locationAddr: '', //定位时搜索的地址
			addFormRules: {
				name: [{ required: true, message: '请填写产品名称', trigger: 'blur' }],
				backcode: [
					{ required: true, message: '请选择运输批次', trigger: 'change' }
				],
				sendDate: [
					{ required: true, message: '请选择发货日期', trigger: 'change' }
				],
				arrivalDate: [
					{ required: true, message: '请选择预计到货日期', trigger: 'change' }
				],
				sendAddr: [
					{ required: true, message: '请填写发货地', trigger: 'blur' }
				],
				destination: [
					{ required: true, message: '请填写目的地', trigger: 'blur' }
				],
				shipping: [
					{ required: true, message: '请填写运输方法', trigger: 'blur' }
				],
				user: [{ required: true, message: '请填写经办人', trigger: 'blur' }],
				addrDetail: [
					{ required: true, message: '请填写详细地址', trigger: 'blur' }
				]
			},
			totalNum: 1,
			page: 1,
			//目的地定位
			addLocationDialogVisible: false,
			center: { lng: 113.271429, lat: 23.135336 },
			mapZoom: 11,
			locationForm: {
				lng: '',
				lat: ''
			}
		}
	},
	created() {
		this.getList()
		this.getBaseList()
	},
	computed: {},
	methods: {
		getBaseList() {
			//获取所有基地
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.all_base'
			}).then((res) => {
				this.baseList = res.data.data.data
			})
		},
		getList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.trans_info',
				data: this.qs.stringify({
					page: this.page,
					farmname: this.base
				})
			}).then((res) => {
				if (res.data.message == '') {
					let data = res.data.data.data
					this.tableData = data.map((item) => {
						item.stime = this.formatTime(item.stime * 1000)
						item.etime = this.formatTime(item.etime * 1000)
						item.address = item.province + item.city + item.area
						return item
					})
					this.totalNum = res.data.data.counts
				}
			})
		},
		transEdit(row) {
			this.id = row.id
			this.editForm.sendDate = row.stime
			this.editForm.arrivalDate = row.etime
			this.editForm.destination = row.address
			this.editForm.shipping = row.trans
			this.editForm.user = row.user
			this.editForm.addrDetail= row.detailaddr
			this.destination.province = row.province
			this.destination.city = row.city
			this.destination.district = row.area
			this.locationForm = {
				lng: row.eaddr.split(',')[0],
				lat: row.eaddr.split(',')[1]
			}
			this.farmThingEditDialogVisible = true
		},
		selSourceCode() {
			let arr = this.selltList.filter((item) => {
				return item.backcode == this.addForm.backcode
			})
			this.addForm.name = arr[0].sellname
			this.addForm.farm = arr[0].farm
			this.addForm.land = arr[0].land
		},
		getSellList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.sell_info',
				data: this.qs.stringify({ page: this.page })
			}).then((res) => {
				if (res.data.message == '') {
					let data = res.data.data.data
					this.selltList = data.filter((item) => {
						return item.is_trans == '0' //获取未运输的采收
					})
				}
			})
		},
		saleAdd() {
			this.getSellList()
			this.addForm.destination = ''
			this.farmThingAddDialogVisible = true
		},
		addSubm() {
			this.$refs.addFormRef.validate((valid) => {
				if (!valid) return
				let stime = parseInt(new Date(this.addForm.sendDate).getTime() / 1000)
				let etime = parseInt(
					new Date(this.addForm.arrivalDate).getTime() / 1000
				)
				let eaddr = this.locationForm.lng + ',' + this.locationForm.lat
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=ascend.ascend_manage.add_trans_info',
					data: this.qs.stringify({
						backcode: this.addForm.backcode,
						transname: this.addForm.name,
						stime,
						etime,
						eaddr,
						detailaddr:this.addForm.addrDetail,
						trans: this.addForm.shipping,
						user: this.addForm.user,
						province: this.destination.province,
						city: this.destination.city,
						area: this.destination.district
					})
				}).then((res) => {
					if (res.data.message == '') {
						this.getList()
						this.farmThingAddDialogVisible = false
					}
				})
			})
		},
		editSubm() {
			this.$refs.editFormRef.validate((valid) => {
				if (!valid) return
				let stime = parseInt(new Date(this.editForm.sendDate).getTime() / 1000)
				let etime = parseInt(
					new Date(this.editForm.arrivalDate).getTime() / 1000
				)
				let eaddr = this.locationForm.lng + ',' + this.locationForm.lat
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=ascend.ascend_manage.edit_trans_info',
					data: this.qs.stringify({
						id: this.id,
						stime,
						etime,
						eaddr,
						detailaddr:this.editForm.addrDetail,
						trans: this.editForm.shipping,
						user: this.editForm.user,
						province: this.destination.province,
						city: this.destination.city,
						area: this.destination.district
					})
				}).then((res) => {
					if (res.data.message == '') {
						this.getList()
					} else {
						this.$message.warning(res.data.message)
					}
				})
				this.farmThingEditDialogVisible = false
			})
		},
		AddDialogClosed() {
			this.$refs.addFormRef.resetFields()
		},
		EditDialogClosed() {
			this.$refs.editFormRef.resetFields()
		},
		transDelet(id) {
			this.$confirm('确定要删除么?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$axios({
						method: 'POST',
						url: '/api/api_gateway?method=ascend.ascend_manage.del_trans_info',
						data: this.qs.stringify({
							id: id
						})
					}).then((res) => {
						if (res.data.message == '') {
							this.$message({
								type: 'success',
								message: '删除成功!'
							})
							this.getList()
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
		},
		changePage(val) {
			this.page = val
			this.getList()
		},
		locationSearch() {
			let local = new this.BMap.LocalSearch(this.map, {
				renderOptions: { map: this.map }
			})
			local.search(this.locationAddr)
		},
		handlerBMap({ BMap, map }) {
			this.BMap = BMap
			this.map = map
		},
		//在地图中点击定位
		locationPoint(e) {
			let { point } = e
			this.locationForm = point
			this.map.clearOverlays()
			this.map.addOverlay(new BMap.Marker(point))
		},
		goLocation() {
			this.addLocationDialogVisible = true
		},
		addLocationDialogClosed() {},
		addLocationSubm() {
			let lng = this.locationForm.lng
			let lat = this.locationForm.lat
			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
				if (addressComponent) {
					this.destination.province = addressComponent.province
					this.destination.city = addressComponent.city
					this.destination.district = addressComponent.district
				}
				let addr =
					this.destination.province +
					this.destination.city +
					this.destination.district
				this.addForm.destination = addr
				this.editForm.destination = addr
			})
			this.addLocationDialogVisible = false
		},
		selChange() {
			this.page = 1
			this.getList()
		}
	}
}
</script>

<style lang='less' scoped>
.search-box {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	.el-input {
		width: 200px;
	}
}
.Bmap {
	width: 100%;
	height: 400px;
}
.addressItem {
	/deep/.el-form-item__content {
		display: flex;
		.el-input {
			flex: 1;
			margin-right: 15px;
		}
	}
}
</style>