<template>
	<div style="height:100%;">
		<div class="searchForm-header">
			<el-row>
				<el-form :model="query" label-width="100px" inline="" style="margin-left: -18px">
					<el-form-item label="客户名称">
						<el-input size="small"  v-model="query.customerName" style="width: 250px;">
							<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="" style="margin-top: -4px">
						<el-button size="small"  @click="handleSearch" type="primary">查询</el-button>
					</el-form-item>
				</el-form>
			</el-row>
		</div>
		<div class="tabledata-grid">
			<el-table :data="tableData" 
					  height="100%" 
					  v-loading="loading" 
					  border 
					  style="width: 97%;"
					  lazy
					  row-key="id"
					  :load="load" 
					  :tree-props="{children: 'children', hasChildren: 'hasChildren'}" >
				<el-table-column prop="id" label="ID" v-if="false" show-overflow-tooltip width="300px">
				</el-table-column>	  
				<el-table-column prop="customerName" label="客户名称" width="300px" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="weight" label="结算重量" width="100px" show-overflow-tooltip align="right">
				</el-table-column>
				<el-table-column prop="unitPrice" label="结算单价" width="100px" show-overflow-tooltip align="right">
				</el-table-column>
				<el-table-column prop="price" label="结算金额" width="100px" show-overflow-tooltip align="right">
				</el-table-column>
				<el-table-column prop="invoiceCount" label="开票次数" width="100px" show-overflow-tooltip align="right">
				</el-table-column>
				<el-table-column prop="invoicePrice" label="开票金额" width="100px" show-overflow-tooltip align="right">
				</el-table-column>
				<el-table-column prop="invoiceWeight" label="开票重量" width="100px" show-overflow-tooltip align="right">
				</el-table-column>
				<el-table-column prop="invoicePercent" label="开票%" width="100px" show-overflow-tooltip align="right">
				</el-table-column>
				<el-table-column label="操作" width="200px">
					<template slot-scope="scope">
						<el-button size="mini" @click="showInvoice(scope.row)">开票</el-button>
						<el-button size="mini" @click="showDetail(scope.row)">明细</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<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>

		<el-dialog title="开票" :visible.sync="invoiceDialogVisible" width="800px">
			<el-form label-width="50px">
				<el-row>
					<el-col :span="6">
						<el-form-item label="总价">
							<el-input v-model="totalPrice" disabled style="width: 100px;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="已开">
							<el-input v-model="invoicedPrice" disabled style="width: 100px;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="剩余">
							<el-input v-model="remainPrice" disabled style="width: 100px;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="本次">
							<el-input v-model="thisTimePrice" style="width: 100px;"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">
						<el-form-item label="总重">
							<el-input v-model="totalWeight" disabled style="width: 100px;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="已开">
							<el-input v-model="invoicedWeight" disabled style="width: 100px;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="剩余">
							<el-input v-model="remainWeight" disabled style="width: 100px;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="本次">
							<el-input v-model="thisTimeWeight" disabled style="width: 100px;"></el-input>
						</el-form-item>
					</el-col>

				</el-row>
			</el-form>

			<el-button type="success" @click="handleInvoiceComfirm">保存</el-button>
			<el-button type="danger" @click="handleInvoiceCancel">取消</el-button>

			<el-table :data="invoiceTableData" v-loading="invoiceloading" border style="width: 97%;">
				<el-table-column prop="weight" label="开票重量" width="100px" show-overflow-tooltip align="right">
				</el-table-column>
				<el-table-column prop="price" label="开票金额" width="100px" show-overflow-tooltip align="right">
				</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-column label="操作" width="200px">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleDelete(scope.row)">作废</el-button>

					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<popup-customer ref="PopupCustomer" @receviceFromChild="receviceFromCustomer"></popup-customer>


	</div>
</template>

<script>
	import axios from '@/axios'
	import PopupCustomer from '@/components/PopupCustomer.vue'
	export default {
		computed: {
			invoicedPrice: function() {
				let result = 0
				for (var i = 0; i < this.invoiceTableData.length; i++) {
					result = (Number(this.invoiceTableData[i].price) + Number(result)).toFixed(2)
				}
				return result
			},
			invoicedWeight: function() {
				let result = 0
				for (var i = 0; i < this.invoiceTableData.length; i++) {
					result = (Number(this.invoiceTableData[i].weight) + Number(result)).toFixed(3)
				}
				return result
			},


			remainWeight: function() {
				let result = (Number(this.totalWeight) - Number(this.invoicedWeight)).toFixed(3)
				return result
			},
			remainPrice: function() {
				let result = (Number(this.totalPrice) - Number(this.invoicedPrice)).toFixed(2)
				return result
			},
			thisTimeWeight: function() {
				let result = (Number(this.thisTimePrice) / Number(this.totalPrice) * Number(this.totalWeight)).toFixed(3)
				return result
			},
		},
		components: {
			PopupCustomer
		},
		data() {
			return {
				loading: false,
				invoiceloading: false,
				invoiceDialogVisible: false,
				query: {
					customerName: '',
					accountFlag: '0'
				},
				tableData: [],
				invoiceTableData: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [ 50, 100, 200,500],
				pageSize: 50,


				totalPrice: 0,
				thisTimePrice: 0,
				totalWeight: 0,
				invoice: {
					id: '',
					accountId: '',
					weight: '',
					price: ''
				}
			}
		},
		mounted() {

		},
		methods: {
			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()
			},
			getTableData() {
				this.loading = true
				var url = 'FinanceAccount/queryGroup.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
				});

			},

			getInvoiceTableData() {
				this.invoiceloading = true
				var url = 'FinanceInvoice/query.do'
				var param = {
					accountId: this.invoice.accountId,
				}
				axios.get(url, param).then(response => {
					if (response.data.code == 0) {
						this.invoiceTableData = response.data.data
					} else {
						this.$message({
							type: 'error',
							message: '操作失败；' + response.data.msg,
						});
					}
					this.invoiceloading = false
				});

			},

			showInvoice(row) {
				this.invoiceDialogVisible = true
				this.totalPrice = row.price
				this.totalWeight = row.weight

				this.invoice = {
					id: '',
					accountId: row.id,
					weight: '',
					price: ''
				}
				this.getInvoiceTableData()
			},
			handleInvoiceComfirm() {

				if (parseFloat(this.thisTimePrice) > parseFloat(this.remainPrice)) {
					this.$message({
						type: 'error',
						message: '开票金额超出剩余额度',
					});
					return
				}

				this.invoice.weight = this.thisTimeWeight
				this.invoice.price = this.thisTimePrice
				var url = 'FinanceInvoice/save.do'
				var param = {
					json: JSON.stringify(this.invoice)
				}
				console.log(JSON.stringify(param))
				//return;
				axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						this.getInvoiceTableData()
						this.thisTimePrice = 0.0
					} else {
						this.$message({
							type: 'error',
							message: '操作失败；' + response.data.msg,
						});
					}
					this.loading = false
				});
			},
			handleInvoiceCancel() {
				this.invoiceDialogVisible = false
			},
			handleDelete(row) {
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var url = 'FinanceInvoice/remove.do'
					var param = {
						id: row.id
					}
					axios.post(url, param).then(response => {
						if (response.data.code == 0) {
							this.$message({
								type: 'success',
								message: '删除成功!',
							});
							this.getInvoiceTableData()
						} else {
							this.$message({
								type: 'error',
								message: '删除失败;' + response.data.msg
							});
						}
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			test() {
				// var url = 'MaintPrice/query.do'
				// var param = {
				// 	page: this.currentPage,
				// 	rows: this.pageSize,
				// 	materialName: '',
				// 	standard: '',
				// }

				var url = 'CustomerStoreQuery/queryStore.do'
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					wareName: '',
					stackName: '',
					model: '',
					materialName: '',
					standard: '',
					customerName: '',
					plateNo: '',
				}
				axios.get(url, param).then(response => {
					if (response.data.code == 0) {

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

			},
			load(tree, treeNode, resolve){
				// alert(JSON.stringify(tree))
				var customerName = tree.customerName;
				var url = 'FinanceAccount/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
				});
			},
		},
	}
</script>

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

	}
</style>
