<template>
	<page-container>
		<!-- 页面操作栏 -->
		<template #ops>
			<a-row>
				<a-col :span="18">
					<a-input-search
						v-model:value="searchKey"
						:placeholder="`请输入`"
						allow-clear
						enter-button
						@search="loadData()"
					></a-input-search>
				</a-col>
				<a-col :span="6">
					<a-button type="primary" style="margin-left: 10px" @click="showModal">
						<template #icon>
							<icon-font type="icon-plus" />
						</template>
						{{ pageType === '1' ? '申请入库' : '申请出库' }}
					</a-button>
				</a-col>
			</a-row>
		</template>
		<!-- 页面表格内容 -->
		<div style="min-height: calc(100vh - 305px)">
			<!-- 表格行 -->
			<a-table
				:columns="columns"
				:data-source="pagedata?.records"
				bordered
				:pagination="pagination"
				:loading="loading"
				row-key="key"
			></a-table>
		</div>
	</page-container>

	<!-- 弹窗 -->
	<a-modal v-model:open="open" title="Basic Modal" width="100%" wrap-class-name="full-modal" @ok="handleOk">
		<apply></apply>
	</a-modal>
</template>

<script setup lang="ts">
	import api from '@/api'
	import { IPage } from '@/api/api'
	import apply from './apply-modal.vue'

	const props = defineProps({
		pageType: {
			type: String as PropType<'1' | '2'>, // 1 入库 2 出库
			required: false,
			default: '1',
		},
	})

	const { pageType } = toRefs(props)

	const searchKey = ref('')
	const pagedata = ref<IPage<material.ApplyDTO>>()
	const loading = ref(false)

	// 加载数据的方法
	const loadData = async (page = 1, size = 10) => {
		loading.value = true
		api.materialApi.apply.searchPage(
			//1: 采购入库 2: 归还入库 3: 出库外借
			{
				applyType: 1,
				page: page || pagedata.value?.current,
				size: size || pagedata.value?.size,
				type: searchKey.value,
				code: searchKey.value,
				name: searchKey.value,
			},
			(data) => {
				loading.value = false
				pagedata.value = data
			},
		)
	}
	//初始加载
	loadData()

	//表格列
	const columns = [
		{
			title: '类型',
			dataIndex: 'type',
		},
		{
			title: '申请人',
			dataIndex: 'applicant',
		},
		{
			title: '申请日期',
			dataIndex: 'applyDate',
		},
		{
			title: '是否确认',
			dataIndex: 'isConfirm',
		},
		{
			title: '创建人',
			dataIndex: 'createdBy',
		},
		{
			title: '创建时间',
			dataIndex: 'createdTime',
		},
	]

	//分页信息
	const pagination = computed(() => {
		return {
			current: pagedata.value?.current,
			pageSize: pagedata.value?.size,
			total: pagedata.value?.total,
			onChange: (page: number, pageSize: number) => {
				loadData(page, pageSize)
			},
		}
	})

	const open = ref<boolean>(false)

	const showModal = () => {
		open.value = true
	}

	const handleOk = (e: MouseEvent) => {
		console.log(e)
		open.value = false
	}
</script>

<style lang="less">
	.full-modal {
		.ant-modal {
			max-width: 100%;
			top: 0;
			padding-bottom: 0;
			margin: 0;
		}

		.ant-modal-content {
			display: flex;
			flex-direction: column;
			height: calc(100vh);
		}

		.ant-modal-body {
			flex: 1;
		}
	}
</style>
