<template>
	<div style="height:100%;">
		<div class="searchForm-header">
			<el-row>
				<el-form label-width="70px" inline="" style="margin-left: 10px;">
					<el-form-item label="钢板号" style="margin-left: -18px;">
						 <el-date-picker
					      v-model="queryDate"
					      type="date"
					      placeholder="选择日期"
					      style="width: 140px;">
					    </el-date-picker>
					</el-form-item>
					
					<el-form-item label=" ">
						<el-button @click="handleSearch" size="small"  type="primary">查询</el-button>
					</el-form-item>
					<el-form-item label="" style="">
							<el-upload class="upload-demo" action="" 
								 ref="upload" :limit="1" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
								 :auto-upload="false"  >
								 <el-button plain slot="trigger"  type="success" v-show="false" style= "margin-left: 5px" size="small">询单导入</el-button>
								<el-button   type="success" @click="handleExport" style="margin-left: 2px" size="small">导出记录</el-button>
							</el-upload>
					</el-form-item>
				</el-form>
			</el-row>
		</div>
		<div class="tabledata-grid">
			<el-table v-loading="loading" :data="tableData" height="100%" stripe border style="width: 96%;" :header-cell-style="{'text-align':'center'}">

				<el-table-column prop="id" label="id" width="100px" v-if="false" show-overflow-tooltip header-align="center"></el-table-column>
				<el-table-column prop="custId" label="客户名称" width="200px" show-overflow-tooltip header-align="center"></el-table-column>
				<el-table-column prop="invoiceCompony" label="结算单位" width="100px" show-overflow-tooltip header-align="center"></el-table-column>
				<el-table-column prop="materialId" label="材料类型" width="100px" show-overflow-tooltip header-align="center"></el-table-column>
				<el-table-column prop="ordNo" label="订单号" width="180px" show-overflow-tooltip header-align="center"></el-table-column>
				<el-table-column label="昨日库存">
					<el-table-column prop="inCount" label="数量(件)" width="100px" show-overflow-tooltip header-align="center"></el-table-column>
					<el-table-column prop="inWeight" label="重量(吨)" width="100px" show-overflow-tooltip header-align="center"></el-table-column>
				</el-table-column>
				<el-table-column label="入库">
					<el-table-column prop="housCount" label="数量(件)" width="100px" show-overflow-tooltip header-align="center"></el-table-column>
					<el-table-column prop="housWeight" label="重量(吨)" width="100px" show-overflow-tooltip header-align="center"></el-table-column>
				</el-table-column>
				<el-table-column label=" 出库">
					<el-table-column prop="outCount" label="数量(件)" width="100px" show-overflow-tooltip header-align="center"></el-table-column>
					<el-table-column prop="outWeight" label="重量(吨)" width="100px" show-overflow-tooltip header-align="center"></el-table-column>
				</el-table-column>
				<el-table-column label="剩余库存">
					<el-table-column prop="rmCount" label="数量(件)" width="100px" show-overflow-tooltip header-align="center"></el-table-column>
					<el-table-column prop="rmWeight" label="重量(吨)" width="100px" show-overflow-tooltip header-align="center"></el-table-column>
				</el-table-column>
				<!-- <el-table-column prop="recordDate" label="日期" width="100px" show-overflow-tooltip header-align="center"></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>


	</div>
</template>

<script>
	import axios from '@/axios'
	import Export2Excel from '../../excel/Export2Excel.js'
	export default {
		data() {
			return {
				plateNo: '',
				tableData: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [50, 100, 200],
				pageSize: 50,
				queryDate:'',
				loading: false,
			}
		},
		methods: {
			getTableData() {
				var url = 'StoreDaily/query.do'
				var param = {
					queryDate: this.queryDate.Format("yyyyMMdd"),
				}
				this.loading = true
				axios.get(url, param).then(response => {
					if (response.data.code == 0) {
						this.tableData = response.data.data;
						var totalData = {};
						totalData.custId = "合计";
						
 						var vnCount = 0;
						var vnWeight = 0;
						var vousCount = 0;
						var vousWeight = 0;
						var vutCount = 0;
						var vutWeight = 0;
						var vmCount = 0;
						var vmWeight = 0;
						for(var i =0 ;i < response.data.data.length;i++){
							vnCount += response.data.data[i].inCount;
							vnWeight += response.data.data[i].inWeight;
							vousCount += response.data.data[i].housCount;
							vousWeight += response.data.data[i].housWeight;
							vutCount += response.data.data[i].outCount;
							vutWeight += response.data.data[i].outWeight;
							vmCount += response.data.data[i].rmCount;
							vmWeight += response.data.data[i].rmWeight;
						}
						totalData.inCount = vnCount.toFixed(2);
						totalData.inWeight = vnWeight.toFixed(2);
						totalData.housCount = vousCount.toFixed(2);
						totalData.housWeight   = vousWeight.toFixed(2);
 						totalData.outCount   = vutCount.toFixed(2);
 						totalData.outWeight   = vutWeight.toFixed(2);
 						totalData.rmCount   = vmCount.toFixed(2);
 						totalData.rmWeight   = vmWeight.toFixed(2);
 						this.tableData.push(totalData);
 
					} else {
						this.$message({
							type: 'error',
							message: '操作失败；' + response.data.msg,
						});
					}
					this.loading = false;
				});
			},
				handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getTableData()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val
				this.getTableData()
			},
			handleSearch() {
				this.getTableData()
			},
			handleExport() {
				this.exportExcel(this.tableData)
			},
			exportExcel(imptData) {
				// alert(JSON.stringify(imptData))
				const header = [
					"客户名称"
					,"结算单位"
					,"材料类型"
					,"订单号"
					,"昨日库存数量(件)"
					,"昨日库存重量(吨)"
					,"入库数量(件)"
					,"入库重量(吨)"
					,"出库数量(件)"
					,"出库重量(吨)"
					,"剩余库存数量(件)"
					,"剩余库存重量(吨)"
				] // 导出的表头名
				const filterVal = [
						"custId"
						,"invoiceCompony"
						,"materialId"
						,"ordNo"
						,"inCount"
						,"inWeight"
						,"housCount"
						,"housWeight"
						,"outCount"
						,"outWeight"
						,"rmCount"
						,"rmWeight"
				]

				
				const list = imptData
				const data = this.formatJson(filterVal, list)

				const filename = '出入库记录' + (new Date()).toLocaleDateString();
				Export2Excel.export_json_to_excel({
					header,
					data,
					filename
				})
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => {
					return v[j]
				}))
			},
		},
	}
</script>

<style>
.searchForm-header{
		height: auto;
		margin-left: 10px;
	}
	.tabledata-grid{
		font-size: 20px;
		margin-left: 10px;
		height: calc(100% - 80px);

	}
</style>
