<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-form :model="query" label-width="auto" label-position="right">
				<el-row :gutter="10">
					<el-col :span="5">
						<el-form-item label="合同号" style="margin-bottom: 5px;" prop="type">
							<el-input v-model="query.contrNo" placeholder="请输入合同号" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="对方合同号" style="margin-bottom: 5px;" prop="code">
							<el-input v-model="query.khContrNo" placeholder="请输入对方合同号" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="客户名称" style="margin-bottom: 5px;" prop="name">
							<el-input v-model="query.tradePartnerName" placeholder="请输入客户名称" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>

		<ButtonBar @handleSearch="handleSearch" @handleExport="handleExport"></ButtonBar>

		<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="contrNo" label="合同编号" width="120" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="khContrNo" label="对方合同编号" width="120" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="dordNo" label="出货指示号" width="120" 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="addName" label="分配人员" width="120" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="inExType" label="收支类型" width="120" header-align="center"
					align="center" show-overflow-tooltip :formatter="formatter">
				</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>
		</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'
	import dayjs from 'dayjs'

	const {
		proxy
	} = getCurrentInstance()


	import style from '@/tools/style'
	import tools from '@/tools'

	const cardBodyStyle = ref(style.card)

	const tableStatus = reactive({
		tableRowEditIndex: undefined,
		tableColumnEditIndex: undefined,
	})
	import SearchBar from '@/components/SearchBar.vue';
	import Popup_base_wl from "@/views/bas/Popup_base_wl.vue";
	import Attachment from "@/components/Attachment.vue";
	import ButtonBar from "@/components/ButtonBar.vue";

	const searchBarRef = ref(null)


	/**
	 *   查询
	 */

	const query = ref({
		contrNo: '',
		khContrNo: '',
		tradePartnerName: '',
	})
	// 首 列表
	const tableData = ref([])

	const handleSearch = () => {
		currentPage.value = 1
		getTableData()
	}
	const getTableData = () => {
		var url = 'sal/PaymentInExRecords/queryList'
		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, 100])
	const pageSize = ref(10)
	const handleSizeChange = (val) => {
		pageSize.value = val
		getTableData()
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		getTableData()
	}

	const addId = ref('')
	const addCode = ref('')
	const addName = ref('')
	const addDeptId = ref('')
	const addDeptCode = ref('')
	const addDeptName = ref('')
	const compCd = ref('')
	addId.value = localStorage.userId
	addCode.value = localStorage.userCode
	addName.value = localStorage.userDesc
	addDeptId.value = JSON.parse(localStorage.dept)[0].id
	addDeptCode.value = JSON.parse(localStorage.dept)[0].deptCode
	addDeptName.value = JSON.parse(localStorage.dept)[0].deptName
	compCd.value = JSON.parse(localStorage.deptTree)[0].deptCode

	//定义字典集合
	const dicList = ref([])
	//获取字典集合
	const getDicList = () => {
		tools.dic.getDicList(['REVENUE_TY']).then((response => {
			dicList.value = response.data.data
		}))
	}
	//格式化表格字典列
	const formatter = (row, column, cellValue, index) => {
		if (!cellValue || cellValue == null || cellValue == '') {
			return cellValue
		}
		switch (column.property) {
			case 'inExType':
				cellValue = dicList.value['REVENUE_TY'].find(item => item.dicCode == cellValue).dicName
				break
		}
		return cellValue
	}

	const handleExport = () => {
		console.log(JSON.stringify(query.value))
		location.href = import.meta.env.VITE_BASE_API +
			'/sal/PaymentInExRecords/exportExcel?params=' + encodeURIComponent(JSON.stringify(query.value))
	}
	onMounted(() => {
		//获取字典集合
		getDicList()
		getTableData()
	})
</script>

<style scoped>
</style>