<template>
	<a-card>
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="日期" name="times">
						<a-range-picker v-model:value="searchFormState.times" value-format="YYYY-MM-DD" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="单位名称" name="companyName">
						<a-input v-model:value="searchFormState.companyName" placeholder="请输入单位名称" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="货品" name="goodsName">
						<a-input v-model:value="searchFormState.goodsName" placeholder="请输入货品" />
					</a-form-item>
				</a-col>
				<a-col :span="6" v-if="advanced">
					<a-form-item label="车牌号" name="licensePlate">
						<a-input v-model:value="searchFormState.licensePlate" placeholder="请输入车牌号" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-button type="primary" @click="query()">查询</a-button>
					<a-button style="margin: 0 8px" @click="reset">重置</a-button>
					<a-button type="dashed" class="snowy-buttom-left" @click="exportData()"><export-outlined />导出</a-button>
					<a @click="toggleAdvanced" style="margin-left: 8px">
						{{ advanced ? '收起' : '展开' }}
						<component :is="advanced ? 'up-outlined' : 'down-outlined'" />
					</a>
				</a-col>
			</a-row>
		</a-form>
	</a-card>
	<a-card style="margin-top: 5px">
		<a-table
			ref="tableRef"
			:columns="columns"
			:data-source="companyData"
			bordered
			:row-key="(record) => record.id"
			:pagination="false"
		>
			<template #bodyCell="{ column, record, index }">
				<template v-if="column.dataIndex === 'serial'">
					{{ index + 1 }}
				</template>
				<template v-if="column.dataIndex === 'totalNetWeight'">
					{{ record.totalNetWeight + ' t' }}
				</template>
				<template v-if="column.dataIndex === 'totalGrossWeight'">
					{{ record.totalGrossWeight + ' t' }}
				</template>
				<template v-if="column.dataIndex === 'totalTareWeight'">
					{{ record.totalTareWeight + ' t' }}
				</template>
			</template>
		</a-table>
	</a-card>
</template>

<script setup name="receiptcount">
	import { ref, onMounted } from 'vue'
	import { Modal } from 'ant-design-vue'
	import { cloneDeep } from 'lodash-es'
	import bizRecordApi from '@/api/biz/bizRecordApi'
	import downloadUtil from '@/utils/downloadUtil'
	const searchFormRef = ref()
	const searchFormState = ref({
		times: [],
		licensePlate: '',
		goodsName: '',
		receiptCompany: ''
	})

	onMounted(() => {
		loadData()
	})

	// 查询区域显示更多控制
	const advanced = ref(false)
	const toggleAdvanced = () => {
		advanced.value = !advanced.value
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
	}
	//表格相关
	const columns = [
		{
			title: '序号',
			width: 80,
			dataIndex: 'serial'
		},
		{
			title: '单位名称',
			dataIndex: 'companyName'
		},
		{
			title: '总车次',
			dataIndex: 'totalCarNum'
		},
		{
			title: '总净重',
			dataIndex: 'totalNetWeight'
		},
		{
			title: '总毛重',
			dataIndex: 'totalGrossWeight'
		},
		{
			title: '总皮重',
			dataIndex: 'totalTareWeight'
		}
	]
	const companyData = ref([])
	const loadData = () => {
		const searchFormParam = cloneDeep(searchFormState.value)
		// times范围查询条件重载
		if (searchFormParam.times) {
			searchFormParam.startDay = searchFormParam.times[0]
			searchFormParam.endDay = searchFormParam.times[1]
			delete searchFormParam.times
		}
		bizRecordApi.shippingCompanyList(searchFormParam).then((data) => {
			companyData.value = data
		})
	}
	const query = () => {
		loadData()
	}
	// 导出
	const exportData = () => {
		const searchFormParam = cloneDeep(searchFormState.value)
		Modal.confirm({
			title: '提示',
			content: '确定要导出发货单位统计记录吗?',
			maskClosable: true,
			onOk: () => {
				bizRecordApi.shippingCompanyExport(searchFormParam).then((res) => {
					downloadUtil.resultDownload(res)
				})
			}
		})
	}
</script>
