<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="sellname" 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="selltime" label="销售日期"></el-table-column>
				<el-table-column prop="sellnum" label="数量/kg"></el-table-column>
				<el-table-column prop="clientname" label="客户名称"></el-table-column>
				<el-table-column prop="clienttel" label="客户电话"></el-table-column>
				<el-table-column prop="user" label="经办人"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button
							size="mini"
							type="info"
							icon="el-icon-edit"
							@click="saleEdit(scope.row)"
							>编辑</el-button
						>
						<!-- <el-button
							size="mini"
							type="danger"
							icon="el-icon-delete"
							@click="saleDelet(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="100px"
				:rules="addFormRules"
			>
				<el-form-item label="销售批次 : " prop="sourceCode">
					<el-select
						v-model="addForm.sourceCode"
						style="width: 100%"
						@change="selSourceCode()"
					>
						<el-option
							v-for="item in harvestList"
							:key="item.id"
							:label="item.pickname + '-' + 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="数量/kg : " prop="saleNum">
					<el-input disabled v-model="addForm.saleNum"></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="saleDate">
					<el-date-picker
						type="datetime"
						placeholder="选择日期"
						v-model="addForm.saleDate"
						style="width: 100%"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="客户名称 : " prop="customerName">
					<el-input v-model="addForm.customerName"></el-input>
				</el-form-item>
				<el-form-item label="客户电话 : " prop="customerTel">
					<el-input v-model="addForm.customerTel"></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>
		</el-dialog>
		<!-- 编辑销售弹框 -->
		<el-dialog
			title="编辑"
			:visible.sync="farmThingEditDialogVisible"
			width="30%"
			@close="EditDialogClosed"
		>
			<el-form
				ref="editFormRef"
				:model="editForm"
				label-width="100px"
				:rules="addFormRules"
			>
				<el-form-item label="销售日期 : " prop="saleDate">
					<el-date-picker
						type="datetime"
						placeholder="选择日期"
						v-model="editForm.saleDate"
						style="width: 100%"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="客户名称 : " prop="customerName">
					<el-input v-model="editForm.customerName"></el-input>
				</el-form-item>
				<el-form-item label="客户电话 : " prop="customerTel">
					<el-input v-model="editForm.customerTel"></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>
	</div>
</template>

<script>
export default {
	data() {
		var checkMobile = (rule, value, callback) => {
			const regMobile = /^1\d{10}$/
			if (regMobile.test(value)) {
				callback()
			} else {
				// 返回一个错误提示
				callback(new Error('请输入合法的手机号码'))
			}
		}
		return {
			id: '',
			tableData: [],
			harvestList: [], //已采收
			page: 1,
			base: '',
			baseList: [], //所有基地
			farmThingAddDialogVisible: false,
			farmThingEditDialogVisible: false,
			addForm: {
				name: '',
				sourceCode: '',
				saleDate: '',
				saleNum: '',
				farm: '',
				land: '',
				customerName: '',
				customerTel: '',
				operator: ''
			},
			editForm: {
				saleDate: '',
				customerName: '',
				customerTel: '',
				operator: ''
			},
			addFormRules: {
				name: [{ required: true, message: '请填写产品名称', trigger: 'blur' }],
				sourceCode: [
					{ required: true, message: '请选择溯源码', trigger: 'change' }
				],
				saleDate: [
					{ required: true, message: '请选择销售日期', trigger: 'change' }
				],
				saleBatch: [
					{ required: true, message: '请填写销售批次', trigger: 'blur' }
				],
				saleNum: [
					{ required: true, message: '请填写销售数量', trigger: 'blur' }
				],
				customerName: [
					{ required: true, message: '请填写客户名称', trigger: 'blur' }
				],
				customerTel: [
					{ required: true, trigger: 'blur', message: '手机号不能为空' },
					{ validator: checkMobile, trigger: 'blur' }
				],
				addr: [{ required: true, message: '请填写客户地址', trigger: 'blur' }],
				operator: [{ required: true, message: '请填写经办人', trigger: 'blur' }]
			},
			totalNum: 1
		}
	},
	created() {
		this.getList()
		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
			})
		},
		getList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.sell_info',
				data: this.qs.stringify({
					page: 1,
					farmname: this.base
				})
			}).then((res) => {
				if (res.data.message == '') {
					let data = res.data.data.data
					this.tableData = data.map((item) => {
						item.selltime = this.formatTime(item.selltime * 1000)
						return item
					})
					this.totalNum = res.data.data.counts
				}
			})
		},
		saleEdit(row) {
			this.id = row.id
			this.editForm.saleDate = row.selltime
			this.editForm.customerName = row.clientname
			this.editForm.customerTel = row.clienttel
			this.editForm.operator = row.user
			this.farmThingEditDialogVisible = true
		},
		selSourceCode() {
			let arr = this.harvestList.filter((item) => {
				return item.backcode == this.addForm.sourceCode
			})
			this.addForm.name = arr[0].pickname
			this.addForm.saleNum = arr[0].picktotal
			this.addForm.farm = arr[0].farm
			this.addForm.land = arr[0].land
		},
		getHarvest() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.pick_info',
				data: this.qs.stringify({ page: this.page })
			}).then((res) => {
				if (res.data.message == '') {
					let data = res.data.data.data
					this.harvestList = data.filter((item) => {
						return item.sell == '0'
					})
				}
			})
		},
		saleAdd() {
			this.getHarvest()
			this.farmThingAddDialogVisible = true
		},
		addSubm() {
			this.$refs.addFormRef.validate((valid) => {
				if (!valid) return
				let date = parseInt(new Date(this.addForm.saleDate).getTime() / 1000)
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=ascend.ascend_manage.add_sell_info',
					data: this.qs.stringify({
						sellname: this.addForm.name,
						backcode: this.addForm.sourceCode,
						selltime: date,
						batch: this.addForm.saleBatch,
						sellnum: this.addForm.saleNum,
						clientname: this.addForm.customerName,
						clienttel: this.addForm.customerTel,
						user: this.addForm.operator
					})
				}).then((res) => {
					if (res.data.message == '') {
						this.getList()
						this.farmThingAddDialogVisible = false
					}
				})
			})
		},
		editSubm() {
			this.$refs.editFormRef.validate((valid) => {
				if (!valid) return
				let selltime = parseInt(
					new Date(this.editForm.saleDate).getTime() / 1000
				)
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=ascend.ascend_manage.edit_sell_info',
					data: this.qs.stringify({
						id: this.id,
						selltime,
						clientname: this.editForm.customerName,
						clienttel: this.editForm.customerTel,
						user: this.editForm.operator
					})
				}).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()
		},
		saleDelet(id) {
			this.$confirm('确定要删除么?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$axios({
						method: 'POST',
						url: '/api/api_gateway?method=ascend.ascend_manage.del_sell_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()
		},
		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;
	}
}
</style>