<!-- 库区数量 -->
<template>
	<a-drawer width="100%" :closable="false" :style="drawerStyle" placement="right" :get-container="false"
		:title="props.drawerInfo.title" v-model:visible="props.drawerInfo.showDrawer">
		<template #extra>
			<a-button shape="circle" @click="fullScreen">
				<fullscreen-outlined v-if="drawerStyle" />
				<fullscreen-exit-outlined v-else />
			</a-button>
			<a-button class="btn" shape="circle" danger @click="onClose">
				<template #icon><close-outlined /></template>
			</a-button>
		</template>
		<!-- :scroll="{ x: 'calc(700px + 50%)', y: true }" -->
		<div class="silt-box">
			<div class="silt-title">
				<span style="width: 62px; display: block; line-height: 32px; margin-right: 16px">{{ '库点名称' }}</span>
				<a-input style="width: 240px" v-model:value="informationData.orgName" placeholder="请输入库点名称" />
			</div>
			<div class="btnBox">
				<a-button style="margin-right: 16px" @click="searchData" type="primary">查询</a-button>
			</div>
		</div>
		<div class="statisticsTableAll">
			<a-table size="small" bordered :scroll="{ y: 500 }" :dataSource="tableData" :row-key="(record) => record.key"
				:pagination="false" @change="onChangePage" :columns="tableColumns">
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'location'">
						<div @click="locationData(record)" class="location-box">
							<environment-outlined />
						</div>
					</template>
				</template>
			</a-table>
		</div>
	</a-drawer>
</template>
<script setup>
import { ref } from 'vue'
import reserveDataApi from '@/api/reserveData.info/reserveDataApi'

const emit = defineEmits(['closeDrawer'])
const drawerStyle = ref({ position: 'absolute' })

const props = defineProps({
	drawerInfo: {
		type: Object,
		required: true
	}
})
const tableColumns = [
	{
		title: '序号',
		dataIndex: 'Index',
		align: 'center',
		customRender: ({ text, record, index }) => {
			return `${index + 1}`
		}
	},
	{ title: '库区代码', width: 280, align: 'center', key: 'kqbm', dataIndex: 'kqbm' },
	{ title: '企业名称', align: 'center', key: 'orgName', dataIndex: 'orgName' },
	{ title: '统一社会信用代码', width: 300, align: 'center', key: 'creditCode', dataIndex: 'creditCode' },
	{ title: '详细地址', width: 380, align: 'center', key: 'address', dataIndex: 'address' },
	{ title: '定位', align: 'center', key: 'location', dataIndex: 'location' }
]
const tableData = ref([])
const informationData = ref({
	orgName: '',
	current: 1,
	size: 10000
})
function onClose(data) {
	emit('closeDrawer', data)
}
// 查询
const searchData = () => {
	getData()
}
// 列表数据
const getData = () => {
	const fd = { ...informationData.value }
	reserveDataApi.orgInfoCountPage(fd).then((res) => {
		tableData.value = []
		tableData.value = res.records
	})
}

onMounted(() => {
	getData()
})
// 定位点数据
const locationData = (row) => {
	onClose(row)
}
// 全屏显示
function fullScreen() {
	if (drawerStyle.value) {
		drawerStyle.value = ''
	} else {
		drawerStyle.value = { position: 'absolute' }
	}
}
</script>
<style scoped lang="less">
.statisticsTableAll {
	::v-deep(.ant-table) {
		height: calc(100vh - 260px);
	}
}

/deep/.ant-drawer-body {
	overflow: hidden;
}

.silt-box {
	display: flex;
	padding-left: 32px;
	margin-bottom: 32px;

	.silt-title {
		display: flex;
		margin-right: 32px;
	}
}

.location-box {
	cursor: pointer;
	color: #40a9ff;
	font-size: 20px;
}

/deep/.ant-table-pagination.ant-pagination {
	display: none !important;
}
</style>
