<template>
	<div style="height:100%;">
		<div class="searchForm-header">
			<el-row>
				<el-form :model="query" label-width="100px" inline="">
					<el-form-item label="客户名称">
						<el-input size="small"  v-model="query.customerName" style="width: 300px;">
							<el-button  slot="append" icon="el-icon-search" @click="showCustomer"></el-button>
						</el-input>
						<el-radio-group size="small"  v-model="query.accountFlag" @change="change">
							<el-radio size="small"  label="1">已结算</el-radio>
							<el-radio size="small"  label="0">未结算</el-radio>
						</el-radio-group>
						
					</el-form-item>
					<el-form-item label=" ">
						<el-button @click="handleSearch" size="small"  type="primary">查询</el-button>	
						<el-button type="success" size="small"  @click="showReduce">优惠</el-button>
						<el-button type="danger" size="small"  @click="handleAccount">结算</el-button>
						<el-button type="primary" size="small"  @click="handleExport">导出</el-button>
					</el-form-item>
				</el-form>
			</el-row>
		</div>
		<div class="tabledata-grid">
			<el-table :data="tableData"  
					  lazy
					  :load="load" 
					  :tree-props="{children: 'children', hasChildren: 'hasChildren'}" 
					  v-loading="loading" 
					  height="100%" 
					  border 
					  row-key="id"
					  style="width: 97%;" 
					  @selection-change="handleSelectionChange">

				<el-table-column type="selection" width="50" header-align="center" align="center" v-if="query.accountFlag=='0'"></el-table-column>
				<el-table-column prop="id" label="ID" v-if="false" show-overflow-tooltip width="300px">
				</el-table-column>
				<el-table-column prop="customerName" label="客户名称" show-overflow-tooltip width="300px">
				</el-table-column>
				<el-table-column prop="recordType"  label="结算类型" width="100px" show-overflow-tooltip align="center">
				</el-table-column>
				<el-table-column prop="changeTime" label="货权转移次数" width="100px" show-overflow-tooltip align="center">
				</el-table-column>
				<el-table-column prop="storageUnitPrice" label="仓储单价" width="100px" show-overflow-tooltip align="center">
				</el-table-column>
				<el-table-column prop="storagePrice" label="仓储价格" width="100px" show-overflow-tooltip align="center">
				</el-table-column>
				<el-table-column prop="weightUnitPrice" label="过磅单价" width="100px" show-overflow-tooltip align="center">
				</el-table-column>
				<el-table-column prop="weightPrice" label="过磅价格" width="100px" show-overflow-tooltip align="center">
				</el-table-column>
				<el-table-column prop="reduceUnitPrice" label="优惠单价" width="100px" show-overflow-tooltip align="center">
				</el-table-column>
				<el-table-column prop="reducePrice" label="优惠价格" width="100px" show-overflow-tooltip align="center">
				</el-table-column>
				<el-table-column prop="totalPrice" label="总价" width="100px" show-overflow-tooltip align="center">
				</el-table-column>
				<el-table-column prop="accountFlag" label="结算标记" width="100px" show-overflow-tooltip align="center" :formatter="typeFormatter">
				</el-table-column>
				<el-table-column prop="wareName" label="仓库名称" width="100px" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="stackName" label="垛位" width="60px" show-overflow-tooltip header-align="center" align="center">
				</el-table-column>
				<el-table-column prop="layer" label="层号" show-overflow-tooltip width="60px" 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="suttle" 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="receiveAddress" label="收货地址" width="300" show-overflow-tooltip align="left">
				</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>

		<el-dialog title="结算明细" :visible.sync="reduceDialogVisible" width="500px">
			<el-form :model="split" label-width="100px">
				<el-form-item label="优惠单价">
					<el-input v-model="reduceUnitPrice"></el-input>
				</el-form-item>
				<el-button type="success" @click="handleReduceComfirm">保存</el-button>
				<el-button @click="handleReduceCancel">取消</el-button>
				</el-form-item>
			</el-form>

		</el-dialog>

		<el-dialog title="结算明细" :visible.sync="accountDialogVisible" width="500px">
			<el-form :model="split" label-width="100px">
				<el-form-item label="结算单位">
					<el-input v-model="invoiceCompany"></el-input>
				</el-form-item>
				<el-button type="success" @click="handleAccount">保存</el-button>
				<el-button @click="handleAccountCancel">取消</el-button>
				</el-form-item>
			</el-form>

		</el-dialog>


		<popup-customer ref="PopupCustomer" @receviceFromChild="receviceFromCustomer"></popup-customer>


	</div>
</template>

<script>
	import axios from '@/axios'
	import PopupCustomer from '@/components/PopupCustomer.vue'
	import Export2Excel from '../../excel/Export2Excel.js'
	export default {
		components: {
			PopupCustomer
		},
		data() {
			return {
				reduceUnitPrice: 0,
				reduceDialogVisible: false,
				loading: false,
				query: {
					customerName: '',
					accountFlag: '0',
				},
				tableData: [],
				multipleSelection: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [50, 100, 200,500],
				pageSize: 50,
				accountDialogVisible:false,
				invoiceCompany:''
			};
		},
		mounted() {

		},
		methods: {
			typeFormatter: function(row, column) {
				switch (row.accountFlag) {
					case "0":
						return "未结算";
						break;
					default:
						return "已结算";
						break;
				}
			},
			showCustomer() {
				this.$refs.PopupCustomer.show()
			},
			receviceFromCustomer(customer) {
				this.query.customerName = customer.name
			},
			handleSizeChange(val) {
				this.pageSizeAll = val
				this.getTableData()
			},
			// 修改当前页事件
			handleCurrentChange(val) {
				this.currentPageAll = val
				this.getTableData()
			},
			handleSearch() {
				this.currentPage = 1
				this.getTableData()
			},
			change() {
				this.handleSearch()
			},
			getTableData() {
				this.loading = true
				var url = 'FinanceAccountDetail/query.do'
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					customerName: this.query.customerName,
					accountFlag: this.query.accountFlag
				}
				axios.get(url, param).then(response => {
					if (response.data.code == 0) {
						this.tableData = response.data.data.list
						for(var i = 0 ;i < this.tableData.length;i++){
							this.tableData[i]["hasChildren"] = true;
 						}
						this.totalRows = response.data.data.total
					} else {
						this.$message({
							type: 'error',
							message: '操作失败；' + response.data.msg,
						});
					}
					this.loading = false
				});

			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			showReduce() {
				if (this.multipleSelection.length < 1) {
					this.$message({
						type: 'error',
						message: '至少选择一条记录！',
					});
					return
				}
				this.reduceDialogVisible = true
			},
			handleReduceComfirm() {
				// alert(JSON.stringify(this.multipleSelection))
				var url = 'FinanceAccountDetail/modifyReduce.do'
				var param = {
					json: JSON.stringify(this.multipleSelection),
					reduceUnitPrice: this.reduceUnitPrice
				}

				axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						this.getTableData()
						this.reduceDialogVisible = false
					} else {
						this.$message({
							type: 'error',
							message: '操作失败；' + response.data.msg,
						});
					}
				});
			},
			handleReduceCancel() {
				this.reduceDialogVisible = false
			},
			handleAccountCancel(){
				this.accountDialogVisible = false;
			},
			handleAccount() {
				if (this.multipleSelection.length < 1) {
					this.$message({
						type: 'error',
						message: '至少选择一条记录！',
					});
					return
				}

				var url = 'FinanceAccount/account.do'
				var param = {
					json: JSON.stringify(this.multipleSelection),
				}
				axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						this.getTableData()
					} else {
						this.$message({
							type: 'error',
							message: '操作失败；' + response.data.msg,
						});
					}
				});


			},
			load(tree, treeNode, resolve){
				// alert(JSON.stringify(tree))
				var customerName = tree.customerName;
				var url = 'FinanceAccountDetail/queryBycustomer.do'
				var param = {
					customerName: customerName,
					accountFlag: this.query.accountFlag
				}
				axios.get(url, param).then(response => {
					// alert(JSON.stringify(response))
					if (response.data.code == 0) {
						  resolve(
				            response.data.data
				          )
					} else {
						this.$message({
							type: 'error',
							message: '操作失败；' + response.data.msg,
						});
					}
					this.loading = false
				});
			},
			handleExport(){
				var imptData = [];
				var url = 'FinanceAccountDetail/queryBycustomer.do'
				var param = {
					customerName: this.query.customerName,
					accountFlag: this.query.accountFlag
				}


				axios.get(url, param).then(response => {
					if (response.data.code == 0) {
						var imptData = response.data.data;
						if (imptData.length == 0) {
							this.$alert('无法导出，选择条件无记录', '提示', {
								confirmButtonText: '确定',
								callback: action => {}
							});
						} else {

							this.exportExcel(imptData)
						}
					} else {
						this.$message({
							type: 'error',
							message: '操作失败；' + response.data.msg,
						});
					}

				});
			},
			exportExcel(imptData) {
				// alert(JSON.stringify(imptData))
				const header = ["客户名称"
								,"结算类型"
								,"货权转移次数"
								,"仓储单价"
								,"仓储价格"
								,"过磅单价"
								,"过磅价格"
								,"优惠单价"
								,"优惠价格"
								,"总价"
								,"结算标记"
								,"仓库名称"
								,"垛位"
								,"层号"
								,"品名"
								,"规格型号"
								,"钢种"
								,"数量"
								,"重量"
								,"过磅重量"
								,"钢板号"
								,"收货地址"
								,"备注"
								,"操作人"
								,"操作时间"
				] // 导出的表头名
				const filterVal = [
						"customerName"
						,"recordType"
						,"changeTime"
						,"storageUnitPrice"
						,"storagePrice"
						,"weightUnitPrice"
						,"weightPrice"
						,"reduceUnitPrice"
						,"reducePrice"
						,"totalPrice"
						,"accountFlag"
						,"wareName"
						,"stackName"
						,"layer"
						,"materialName"
						,"model"
						,"standard"
						,"count"
						,"weight"
						,"suttle"
						,"plateNo"
						,"receiveAddress"
						,"remark"
						,"addUser"
						,"addTime"
				]

				for(var i=0;i<imptData.length;i++){
					imptData[i]["addUserUserDesc"] = imptData[i].addUser.userDesc;
				}
				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]
				}))
			},
			showAccount(){
				if (this.multipleSelection.length < 1) {
					this.$message({
						type: 'error',
						message: '至少选择一条记录！',
					});
					return
				}
				this.accountDialogVisible = true
			}
		},
	}
</script>

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

	}
</style>
