<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-form :model="query" label-position="right" label-width="auto">
				<div>
					<el-row :gutter="10" style="margin-bottom: 5px;">
						<el-col :span="5">
							<el-form-item label="客户名称" style="margin-bottom: 0px;margin-left: 14px">
								<el-input v-model="query.tradePartnerName" placeholder="请输入客户名称" clearable>
									<template #append>
										<el-button :icon="Search" />
									</template>
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
			</el-form>
		</el-card>
		<ButtonBox @search="search" @handleExport="handleExport"></ButtonBox>
		<!--    <el-card :body-style="cardBodyStyle">-->
		<!--      <el-button type="primary" @click="search" plain>查询</el-button>-->
		<!--    </el-card>-->
		<el-card :body-style="cardBodyStyle">
			<el-table :data="tableData" border highlight-current-row>
				<el-table-column type="index" label="序号" align="center" width="60">
					<template #default="scope">
						<span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column v-if="true" prop="tradePartnerCode" label="客户编码" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="tradePartnerName" label="客户名称" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="ballanceAmt" label="客户余额（元）" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="ballanceDtm" label="变动日期" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="contrNo" label="合同编号" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="khContrNo" label="对方合同编号" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="capUse" label="资金用途" header-align="center" align="center"
					show-overflow-tooltip>
					<template #default="scope">
						{{ dic(scope.row.capUse) }}
					</template>
				</el-table-column>
				<el-table-column v-if="true" prop="remark" label="备注" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="操作" header-align="center" align="center" width="200px">
					<template #default="scope">
						<el-button type="danger" plain @click="handleReback(scope.row)">应收平账</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-card :body-style="cardBodyStyle">
			<el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
				background="background" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
				@current-change="handleCurrentChange">
			</el-pagination>
		</el-card>


	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance
	} from 'vue'
	import {
		Search
	} from '@element-plus/icons-vue'

	const {
		proxy
	} = getCurrentInstance()


	import style from '@/tools/style'

	const cardBodyStyle = ref(style.card)


	import SearchBar from '@/components/SearchBar.vue';

	const searchBarRef = ref(null)
	const formItem = ref([{
			prop: 'birthDate',
			type: 'input',
			label: '订单号'
		},
		{
			prop: 'age',
			type: 'input',
			label: '客户名称',
			searchButton: true,
			searchCallback: 'showPop'
		}

	])

	/**
	 *   查询
	 */

	const query = ref({
		tradePartnerName: '',
	})
	const tableData = ref([])

	const getTableData = () => {
		var url = 'sal/PaymentBallance/queryReceivable'
		var param = {
			page: currentPage.value,
			rows: pageSize.value,
			params: JSON.stringify(query.value)
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				tableData.value = response.data.data.records
				totalRows.value = response.data.data.total
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}
	/**
	 *   查询
	 */
	/**
	 * 分页
	 */
	const currentPage = ref(1)
	const totalRows = ref(0)
	const pageSizes = ref([10, 20, 30, 40])
	const pageSize = ref(10)
	const handleSizeChange = (val) => {
		pageSize.value = val
		getTableData()
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		getTableData()
	}
	/**
	 * 分页
	 */

	import PopupMenuTree from '@/components/PopupMenuTree.vue'
	import ButtonBar from "@/components/ButtonBar.vue";
	import ButtonBox from "@/components/ButtonBox.vue";

	const PopupMenuTreeRef = ref(null)
	const showPop = () => {
		console.log('showPop')
		PopupMenuTreeRef.value.show()
	}

	const handleReback = (row) => {
		ElMessageBox.confirm(
				'确定平账吗?',
				'提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
					draggable: true,
				}
			)
			.then(() => {
				var url = 'sal/PaymentBallance/ballanceReceivable'
				var param = {
					json: row.id,
				}
				proxy.$axios.get(url, param).then(response => {
					if (response.data.code == 0) {
						ElMessage({
							message: '平账成功',
							type: 'success',
						})
						getTableData()
					} else {
						ElMessage({
							type: 'error',
							message: '操作失败' + response.data.msg
						})
					}
				});
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '已取消',
				})
			})
	}
	const dic = (val) => {
		var reStr = ''
		for (var i = 0; i < dictList.value.PAY_FLAG.length; i++) {
			if (dictList.value.PAY_FLAG[i].dicCode == val) {
				reStr = dictList.value.PAY_FLAG[i].dicName
				return reStr
			}
		}
		return reStr
	}

	const search = () => {
		getTableData()
	}
	const dictList = ref({})
	const dictData = () => {
		var url = 'framework/Common/querySelectorList'
		var param = {
			type: JSON.stringify(['PAY_FLAG'])
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				dictList.value = response.data.data
				dictList.value.PAY_FLAG[0].disabled = false
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}

	const userId = ref('')
	const menuId = ref('')
	userId.value = localStorage.userId
	menuId.value = localStorage.menuId
	const handleExport = () => {
		console.log(JSON.stringify(query.value))
		console.log(menuId.value)
		location.href = import.meta.env.VITE_BASE_API +
			'/sal/PaymentBallance/exportExcel?params=' + encodeURIComponent(JSON.stringify(query.value)) + '&userId=' +
			localStorage.getItem('userId') + '&menuId=' + localStorage.getItem('menuId')
	}

	onMounted(() => {
		getTableData()
		dictData()
	})
</script>

<style scoped>
	::v-deep .diaClass .el-form-item {
		width: 100%
	}

	::v-deep .el-dialog__body {
		background-color: #F2F6FC;
	}

	.el-date-editor--date {
		width: 100%;
	}
</style>