<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="">
						<el-date-picker v-model="query.recordDate" style="width:280px;margin-left: -8px" size="small" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					    </el-date-picker>
					</el-form-item>
					<el-form-item label="付款单位" style="margin-left: 5px">
							<el-input v-model="query.fkComponeyName" size="small" style="width:100px;margin-left: -8px"></el-input>
					</el-form-item>
					<el-form-item label=" ">
						<el-button @click="handleSearch" size="small"  type="primary">查询</el-button>
						<el-button @click="handleDelInvoiceRslt" size="small"  type="primary">删除</el-button>
						<el-button @click="handleBackRcvPay" size="small"  type="danger">退回</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   type="success" @click="handleExport" v-show="false" style="margin-left: 2px" size="small">导出记录</el-button>
							</el-upload>
					</el-form-item>
				</el-form>
			</el-row>
		</div>
		<div class="tabledata-grid2">
			<el-table v-loading="loading"  :data="tableData" @select="handleTableSelect" height="100%" stripe border style="width: 97%;font-size: 13px;margin-top: -5px;margin-left: 5px" :header-cell-style="{'text-align':'center'}">
				<el-table-column type="selection" width="40" header-align="center" align="center"></el-table-column>
				<el-table-column prop="uuid" label="id" width="200px"  header-align="center" v-if="false"></el-table-column>
				<el-table-column prop="plateNo" label="钢板号" width="150px"  header-align="center"></el-table-column>
				<el-table-column prop="outDate" label="出库日期" width="200px"  header-align="center"></el-table-column>
				<el-table-column prop="hqComponey" label="货权单位" width="350px"  header-align="center"></el-table-column>
				<el-table-column prop="outCarNo" label="出库车号" width="120px"  header-align="center"></el-table-column>
				<el-table-column prop="rcvAddress" label="收货地址" width="250px"  header-align="center"></el-table-column>
				<el-table-column prop="fkComponey" label="付款单位" width="350px"  header-align="center"></el-table-column>

				<el-table-column prop="accDate" label="对账日期" width="120px"  header-align="center"></el-table-column>
				<el-table-column prop="writeInvoiceAmt" label="开票金额" width="120px"  header-align="center"></el-table-column>
				<el-table-column prop="invoiceDate" label="开票日期" width="120px"  header-align="center"></el-table-column>
				<el-table-column prop="invoiceCompany" label="开票单位" width="120px"  header-align="center"></el-table-column>

				<el-table-column prop="rcvPayMth" label="收款方式" width="150px"  header-align="center"></el-table-column>
				<el-table-column prop="rcvPayDate" label="收款日期" width="120px"  header-align="center"></el-table-column>
				<el-table-column prop="rcvPayAmt" label="收款金额" width="120px"  header-align="center"></el-table-column>
				<el-table-column prop="rcvPayCrtTime" label="收款录入日期" width="200px"  header-align="center"></el-table-column>


				<el-table-column prop="accWgt" label="重量" width="80"  header-align="center"></el-table-column>
				<el-table-column prop="accAmt" label="总金额" width="120px"  header-align="center"></el-table-column>
				<el-table-column prop="accReminder" label="扣零" width="100px"  header-align="center"></el-table-column>
				<el-table-column prop="invoiceAmt" label="结算金额" width="120px"  header-align="center"></el-table-column>
				
				
				<el-table-column prop="crtTime" label="对账创建日期" width="200px"  header-align="center"></el-table-column>
				<el-table-column prop="crtUserId" label="对账创建人" width="120px"  header-align="center"></el-table-column>
			</el-table>
		</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,
				loading: false,
				query: {
					recordDate:[],
					fkComponeyName:'',
				},
				selectRows: [],
				invocieData:{
					invoiceCmp:'',
					invoiceDate:'',
					invoiceAmt:0
				},
			}
		},
		mounted() {
			this.setSearchTime();
		},
		methods: {
			handleDelInvoiceRslt(){
				var url = 'FinanceAccount/deleteInvoice.do';
				var param = {
					json: JSON.stringify(this.selectRows)
				}
				axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						this.$message({
							type: 'success',
							message: '删除成功',
						});
						this.getTableData();
					} else {
						this.$message({
							type: 'error',
							message: '删除失败！' + response.data.msg,
						});
					}
				});
			},
			handleBackRcvPay(){
				var url = 'FinanceAccount/backProgress.do';
				var param = {
					json: JSON.stringify(this.selectRows),
					bachType:"RcvPay"
				}
				axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						this.$message({
							type: 'success',
							message: '退回成功',
						});
						this.getTableData();
					} else {
						this.$message({
							type: 'error',
							message: '退回失败！' + response.data.msg,
						});
					}
				});
			},
			handleInvoice(){
				
				var url = 'FinanceAccount/writeInvoice.do'
				var param = {
					json: JSON.stringify(this.selectRows),
					invoiceCmp:this.invocieData.invoiceCmp,
					invoiceDate:this.invocieData.invoiceDate.Format("yyyyMMdd"),
					invoiceAmt:this.invocieData.invoiceAmt
				}
				axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						this.$message({
							type: 'success',
							message: '保存成功',
						});
					} else {
						this.$message({
							type: 'error',
							message: '保存失败！' + response.data.msg,
						});
					}
				});
			},
			handleTableSelect(val) {
				this.selectRows = val
			},
			setSearchTime(){
				if(this.query.recordDate.length == 0){
					 var now = new Date();
					this.query.recordDate = [new Date(now.getFullYear(), now.getMonth(), now.getDate()-3),new Date(now.getFullYear(), now.getMonth(), now.getDate())];
				}
			},
			getTableData() {
				var url = 'FinanceAccount/queryInvoiceRslt.do'
				var param = {
					queryDateFrom: this.query.recordDate[0].Format("yyyyMMdd"),
					queryDateTo: this.query.recordDate[1].Format("yyyyMMdd"),
					fkComponeyName:this.query.fkComponeyName
				}
				
				this.loading = true
				axios.get(url, param).then(response => {
					if (response.data.code == 0) {
						this.tableData = response.data.data;
					} 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-grid2{
		font-size: 20px;
		margin-left: 10px;
		height: calc(100% - 5px);

	}
</style>
