<template>
	<div style="height:100%;" >
		<div class="searchForm-header">
			<el-row>
				<el-form :model="query" label-width="100px" inline="">
					<el-row>
						<el-form-item label="源库房" style="margin-left: -25px">
							<el-select v-model="query.wareNameOld" clearable style="width:120px;margin-left: -8px" size="small" @change="changeWare">
								<el-option v-for="item in optionsWare" :key="item.id" :label="item.name" :value="item.name">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="目标库房" style="margin-left: -35px">
							<el-select v-model="query.wareNameNew" clearable style="width:120px;margin-left: -8px" size="small" @change="changeWare">
								<el-option v-for="item in optionsWare" :key="item.id" :label="item.name" :value="item.name">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="源垛位" style="margin-left: -35px">
							<el-input v-model="query.stackNameOld" style="width:120px;margin-left: -8px" size="small"></el-input>
						</el-form-item>
						<el-form-item label="目标垛位" style="margin-left: -35px">
							<el-input v-model="query.stackNameNew" style="width:120px;margin-left: -8px" size="small"></el-input>
						</el-form-item>
						<el-form-item label="物料名称" style="margin-left: -35px">
							<el-input v-model="query.materialName" style="width:120px;margin-left: -8px" size="small">
								<el-button slot="append" icon="el-icon-search" @click="showMaterial"></el-button>
							</el-input>
						</el-form-item>
						<el-form-item label="钢种" style="margin-left: -55px">
							<el-input v-model="query.standard" style="width:135px;margin-left: -8px" size="small">
								<el-button slot="append" icon="el-icon-search" @click="showMaterial"></el-button>
							</el-input>
						</el-form-item>
					</el-row>
					<el-row>
						<el-form-item label="客户名称" style="margin-left: -15px;margin-top: -10px">
							<el-input v-model="query.customerName" style="width:170px;margin-left: -8px" size="small">
								<el-button slot="append" icon="el-icon-search" @click="showCustomer"></el-button>
							</el-input>
						</el-form-item>
						<el-form-item label="规格型号" style="margin-left: -35px;margin-top: -15px">
							<el-input v-model="query.model" style="width:120px;margin-left: -8px" size="small">
							</el-input>
						</el-form-item>
						<el-form-item label="钢板号" style="margin-left: -35px;margin-top: -15px">
							<el-input v-model="query.plateNo" style="width:100px;margin-left: -8px" size="small">
							</el-input>
						</el-form-item>
						<el-form-item label="转移时间" style="margin-left: -35px;margin-top: -15px">
								<el-date-picker v-model="query.RecordDate" size="small" style="width:330px;margin-left: -8px" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
							    </el-date-picker>
						</el-form-item>
						<el-form-item label=" " style="margin-left: -45px;margin-top: -15px">
							<el-button @click="handleSearch" type="primary" size="small">查询</el-button>
						</el-form-item>
					</el-row>
				</el-form>
			</el-row>
			<total-block style="margin-top: -25px;margin-left: -35px"  ref="totalBlock" v-bind:childParam="childParam" v-bind:childUrl = 'childUrl'></total-block>
		</div>
		<div class="tabledata-grid">
			<el-table :data="tableData" v-loading="loading" stripe border height="100%" style="width: 97%;" :header-cell-style="{'text-align':'center'}">
				<el-table-column prop="id" label="编号" min-width="10%" v-if="false">
				</el-table-column>
				<el-table-column prop="wareNameOld" label="源仓库" width="100px" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="wareNameNew" label="目标仓库" width="100px" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="stackNameOld" label="源垛位" width="	" show-overflow-tooltip header-align="center" align="center">
				</el-table-column>
				<el-table-column prop="stackNameNew" label="目标垛位" width="100px" show-overflow-tooltip header-align="center" align="center">
				</el-table-column>
				<el-table-column prop="layerOld" label="源层号" show-overflow-tooltip width="100px" header-align="center" align="center">
				</el-table-column>
				<el-table-column prop="layerNew" label="目标层号" show-overflow-tooltip width="100px" header-align="center" align="center">
				</el-table-column>
				<el-table-column prop="materialName" label="品名" show-overflow-tooltip width="60px" header-align="center" align="center">
				</el-table-column>
				<el-table-column prop="model" label="规格型号" show-overflow-tooltip width="180px" align="center">
				</el-table-column>
				<el-table-column prop="standard" label="钢种" show-overflow-tooltip width="80px" align="center">
				</el-table-column>
				<el-table-column prop="count" label="数量" width="80px" show-overflow-tooltip align="right">
				</el-table-column>
				<el-table-column prop="weight" label="重量" width="80px" show-overflow-tooltip align="right">
				</el-table-column>
				<el-table-column prop="plateNo" label="钢板号" width="200px" show-overflow-tooltip align="center">
				</el-table-column>
				<el-table-column prop="recordType" label="类型" width="100px" show-overflow-tooltip align="center" :formatter="typeFormatter">
				</el-table-column>
				<el-table-column prop="customerName" label="客户名称" show-overflow-tooltip width="300px">
				</el-table-column>
				<el-table-column prop="receiveAddress" label="收货地址" width="300" show-overflow-tooltip align="left">
				</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-column prop="remark" label="备注" width="100px" show-overflow-tooltip align="left">
				</el-table-column>
				<el-table-column prop="addUser.userDesc" label="操作人" width="100px" show-overflow-tooltip align="left">
				</el-table-column>
				<el-table-column prop="addTime" label="操作时间" width="200px" show-overflow-tooltip align="left">
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			 :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRows">
			</el-pagination>
		</div>
		<popup-material ref="PopupMaterial" @receviceFromChild="receviceFromMaterial"></popup-material>
		<popup-customer ref="PopupCustomer" @receviceFromChild="receviceFromCustomer"></popup-customer>

	</div>
</template>

<script>
	import axios from '@/axios'
	import PopupStack from '@/components/PopupStack.vue'
	import PopupMaterial from '@/components/PopupMaterial.vue'
	import PopupCustomer from '@/components/PopupCustomer.vue'
	import TotalBlock    from '@/components/TotalBlock.vue'
	export default {
		components: {
			PopupStack,
			PopupMaterial,
			PopupCustomer,
			TotalBlock
		},
		data() {
			return {
				query: {
					wareNameOld: '',
					wareNameNew: '',
					stackNameOld: '',
					stackNameNew: '',
					layerOld: '',
					layerNew: '',
					model: '',
					materialName: '',
					standard: '',
					customerName: '',
					plateNo: '',
					RecordDate:[],
				},

				currentPage: 1,
				totalRows: 0,
				pageSizes: [50, 100, 200,500],
				pageSize: 50,
				HideAndShow: 0,
				//
				tableData: [],
				dialogVisible: false,

				optionsWare: [],
				childParam:{
					page: '',
					rows: '',
					wareName: '',
					stackName: '',
					model: '',
					materialName: '',
					standard: '',
					customerName: '',
					plateNo: ''
				},
				childUrl:'WareMoveRecord/queryTotal.do',
				loading: false,
			};
		},
		//页面加载完成渲染
		mounted() {
			this.getTableData()
			this.getWare()
		},
		methods: {
			getWare() {
				var url = 'MaintWare/queryByUserId.do'
				var param = {}
				axios.get(url, param).then(response => {
					console.log(response)
					this.optionsWare = response.data.data
					if (response.data.data.length == 1) {
						this.wareName = response.data.data[0].name
						//	this.getStack()
					}
				});
			},
			typeFormatter: function(row, column) {
				switch (row.recordType) {

					case "0":
						return "入库取消";
						break;
					default:
						return "入库";
						break;
				}
			},
			changeWare() {

			},
		
			// 修改每页行数
			handleSizeChange(val) {
				this.pageSize = val
				this.getTableData()
			},
			// 修改当前页事件
			handleCurrentChange(val) {
				this.currentPage = val
				this.getTableData()
			},
			
			search() {
				this.currentPage = 1
				this.getTableData()
			},
			 
			handleSearch() {
				this.getTableData()
			},
			getTableData() {
				var url = 'WareMoveRecord/query.do'
				if(this.query.RecordDate == null){
					this.query.RecordDate = [false,false];
				}
				this.loading = true
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					wareNameOld: this.query.wareNameOld,
					wareNameNew: this.query.wareNameNew,
					stackNameOld: this.query.stackNameOld,
					stackNameNew: this.query.stackNameNew,
					model: this.query.model,
					materialName: this.query.materialName,
					standard: this.query.standard,
					customerName: this.query.customerName,
					plateNo: this.query.plateNo,
					pFromDate:(!this.query.RecordDate[0]) ? "1970-01-01 00:00:00" : this.query.RecordDate[0].Format("yyyy-MM-dd HH:mm:ss"),		//date类型
					pToDate  :(!this.query.RecordDate[1]) ? new Date().Format("yyyy-MM-dd HH:mm:ss") :this.query.RecordDate[1].Format("yyyy-MM-dd HH:mm:ss"),
				}
				this.childParam = param;
				axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						this.tableData = response.data.data.list;
						this.totalRows = response.data.data.total;

						this.$refs.totalBlock.getTotalData();
					} else {
						this.$message({
							type: 'error',
							message: '操作失败；' + response.data.msg,
						});
					}
					this.loading = false
				});
			},
		showMaterial(){
			this.$refs.PopupMaterial.show()
		},
		showCustomer(){
			this.$refs.PopupCustomer.show()
		}
		},
	}
</script>

<style>
.searchForm-header{
		/*background-color: red;*/
		height: auto;
		/*;*/
		margin-left: 10px;
	}
	.tabledata-grid{
		/*margin-left: 100px;*/
		font-size: 20px;
		height: calc(100% - 200px);
		/*background-color: #000;*/
	}
</style>
