<template>
	<div>
		<el-dialog title="出库" :visible.sync="dialogVisible" width="1000px" height="400px" @close="close">

			<el-form :model="distribution" label-width="100px" inline="">
				<el-form-item label="车号">
					<el-select v-model="truckNo" clearable filterable default-first-option @change="change" @clear="clear" style="width: 200px;">
						<el-option v-for="item in trucks" :key="item.id" :label="item.truckNo" :value="item.truckNo">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="司机姓名">
					<el-input v-model="distribution.driverName" placeholder="司机姓名" style="width: 200px;" disabled></el-input>
				</el-form-item>
				<el-form-item label="联系方式">
					<el-input v-model="distribution.driverPhone" placeholder="联系方式" style="width: 200px;" disabled></el-input>
				</el-form-item>
				<el-form-item label="总重量">
					<el-input v-model="sumWeight" placeholder="总重量" style="width: 200px;" disabled></el-input>
				</el-form-item>
				<el-form-item label="总数量">
					<el-input v-model="sumCount" placeholder="总数量" style="width: 200px;" disabled></el-input>
				</el-form-item>
				<el-form-item label="过磅重量">
					<el-input v-model="distribution.suttle" placeholder="过磅重量" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="理货人员">
					<el-select v-model="distribution.tallyPeople" size="small" style="margin-left: 10px" clearable placeholder="理货人员">
						<el-option v-for="item in tallyPeopleOption" :key="item.id" :label="item.dicName" :value="item.dicCode">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="">
					<el-button style="margin-left: 25px" size="medium" type="success" @click="handleOut">出库</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="customerTableData" border style="width: 99%;" v-if="customerTableVisible">
				<el-table-column prop="customerName" label="客户" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column label="操作" width="100">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" @click="handlePrint(scope.row)">打印</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-table :data="tableData" border style="width: 99%;" :row-class-name="tableRowClassName">
				<el-table-column prop="layer" label="层数" width="60" show-overflow-tooltip header-align="center" align="center">
				</el-table-column>
				<el-table-column prop="stack.name" label="垛位" width="60" show-overflow-tooltip header-align="center" align="center">
				</el-table-column>
				<el-table-column prop="material.name" label="物料" width="100" show-overflow-tooltip header-align="center" align="center">
				</el-table-column>
				<el-table-column prop="material.standard" label="钢种" width="100" show-overflow-tooltip header-align="center" align="center">
				</el-table-column>
				<el-table-column prop="plateNo" label="钢板号" width="200" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="model" label="规格型号" width="120" show-overflow-tooltip header-align="center" align="center">
				</el-table-column>
				<el-table-column prop="count" label="数量" width="120" show-overflow-tooltip align="right" header-align="center">
				</el-table-column>
				<el-table-column prop="weight" label="重量" width="120" show-overflow-tooltip align="right" header-align="center">
				</el-table-column>
				<el-table-column prop="customer.name" label="客户" width="300" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="receiveAddress" label="收货地址" width="300" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="wgtDcnMtcCd" label="计量方式" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="edgeTy" label="切边类型" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="productionPlace" label="产地" width="250" show-overflow-tooltip header-align="center">
				</el-table-column>
			</el-table>


		</el-dialog>
	</div>
</template>

<script>
	import axios from '@/axios';
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			sumWeight: function() {
				let result = 0
				for (let i = 0; i < this.tableData.length; i++) {
					//console.log(this.distribution.listDetail[i].weight)
					result = Number(result) + Number(this.tableData[i].weight)
				}
				return result.toFixed(3)
			},
			sumCount: function() {
				let result = 0
				for (let i = 0; i < this.tableData.length; i++) {
					//console.log(this.distribution.listDetail[i].count)
					result = Number(result) + Number(this.tableData[i].count)
				}
				return result.toFixed(0)
			},
			...mapState({
				serverName: state => state.app.serverName
			})
		},
		props: {
			// selectRows: {
			// 	type: Array
			// },
		},
		mounted() {
			this.getSearchItem();
		},
		data() {
			return {
				trucks: [],
				truckNo: '',
				customerTableData: [],
				tableData: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [10, 20, 30, 40],
				pageSize: 10,
				query: '',
				isShow: false,
				dialogVisible: false,
				customerTableVisible: false,
				distribution: {
					truckNo: '',
					driverName: '',
					driverPhone: '',
					sumWeight: '',
					sumCount: '',
					suttle: 0,
					tallyPeople:'',
					listDetail: []
				},
				time: '',
				tallyPeopleOption:[]
			};
		},
		methods: {
			getTrucks() {
				var url = 'WareDistribution/queryWaitTrucks.do'
				var param = {}
				axios.get(url, param).then(response => {
					if (response.data.code == 0) {
						for (let i = 0; i < response.data.data.length; i++) {
							if (response.data.data.listDetail) {
								response.data.data.listDetail = []
							}
						}
						this.trucks = response.data.data
					} else {
						this.$message({
							type: 'error',
							message: '失败！' + response.data.msg,
						});
					}
				});
			},
			getSearchItem(){
				var url = 'Common/querySelector.do'
				var param = {
					type: 'TALLY_PEOPLE',
				}
				axios.get(url, param).then(response => {
					// alert(JSON.stringify(response))
					this.tallyPeopleOption = response.data.data;
				});

			},
			// 修改每页行数
			handleSizeChange(val) {
				this.pageSize = val
				this.getTableData()
			},
			// 修改当前页事件
			handleCurrentChange(val) {
				this.currentPage = val
				this.getTableData()
			},
			sendToParent: function(row) {
				this.$emit('receviceFromChild', row);
				this.dialogVisible = false
			},
			show() {		//生命周期函数，展示的时候执行。
				this.tableData = []
				this.distribution = {}
				this.dialogVisible = true
				this.getTrucks()

			},
			search() {
				this.currentPage = 1
				this.getTableData()

			},
			clear() {
				this.distribution = {
					truckNo: '',
					driverName: '',
					driverPhone: '',
					sumWeight: this.sumWeight,
					sumCount: this.sumCount,
					suttle: '',
					listDetail: []
				}
				this.tableData = []
			},
			change(val) {

				if (val == '') {

				} else {
					for (let i = 0; i < this.trucks.length; i++) {
						if (this.trucks[i].truckNo == val) {
							this.distribution = this.trucks[i]
						}
					}
					this.tableData = []
					for (let i = 0; i < this.distribution.listDetail.length; i++) {
						this.tableData.push(this.distribution.listDetail[i].store)
					}
					this.distribution.sumWeight = this.sumWeight
					this.distribution.sumCount = this.sumCount
					this.truckNo = this.distribution.truckNo
					//this.distribution = val
				}
			},
			handleOut() {
				this.distribution.truckNo = this.truckNo
				var url = 'WareOut/outByDistribution.do'
				var param = {
					json: JSON.stringify(this.distribution),
				}
				axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						this.showCustomerTable()
					} else {
						this.$message({
							type: 'error',
							message: '失败！' + response.data.msg,
						});
					}
				});
			},
			close() {
				this.distribution = {
					truckNo: '',
					driverName: '',
					driverPhone: '',
					sumWeight: 0,
					sumCount: 0,
					suttle: '',
					listDetail: []
				}
				this.tableData = []
				this.truckNo = ''
				this.customerTableVisible = false
				this.$emit('receviceFromChild')

			},
			showCustomerTable() {
				var customerName = ''
				this.customerTableData = []
				for (let i = 0; i < this.tableData.length; i++) {
					if (this.tableData[i].customer.name != customerName) {
						var customer = {
							customerName: this.tableData[i].customer.name
						}
						this.customerTableData.push(customer)
						customerName = this.tableData[i].customer.name
					}
				}
				this.customerTableVisible = true
			},
			handlePrint(row) {
				if (this.distribution.truckNo == null || this.distribution.truckNo == '') {
					this.$message({
						type: 'error',
						message: '请选择车辆！'
					});
					return
				}
				this.getTime()
				window.open(this.serverName + 'ureport/preview?_u=file:out.ureport.xml&id=' + this.distribution.id +
					'&customerName=' + row.customerName + '&time=' + this.time)
			},
			getTime() {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth();
				var day = date.getDate();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
				month = Number(month) < 10 ? '0' + month : month
				day = Number(day) < 10 ? '0' + day : day
				hour = Number(hour) < 10 ? '0' + hour : hour
				minute = Number(minute) < 10 ? '0' + minute : minute
				second = Number(second) < 10 ? '0' + second : second
				this.time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second

			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (row.lockFlag == '1') {
					return 'success-row';
				}
				return '';
			}

		},

	}
</script>
<style>
	.el-table .success-row {
		background: #f0f9eb;
	}
</style>
