<template>
	<page-container>
		<!-- 页面操作栏 -->
		<template #ops>
			<a-row style="width: 600px">
				<a-col :span="8">
					<a-tree-select
						v-model:value="typeVal"
						show-search
						style="width: 100%"
						:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
						placeholder="请选择物料类型"
						allow-clear
						:tree-data="types"
						tree-node-filter-prop="label"
					/>
				</a-col>
				<a-col :span="8">
					<a-input-search
						v-model:value="searchKey"
						placeholder="名称/编码"
						allow-clear
						enter-button
						width="100%"
						@search="loadData()"
					></a-input-search>
				</a-col>
				<a-col :span="8">
					<a-button type="primary" @click="downloadData()">导出</a-button>
				</a-col>
			</a-row>
		</template>
		<!-- 页面表格内容 -->
		<div style="min-height: calc(100vh - 305px)">
			<!-- 表格行 -->
			<a-table
				:columns="columns"
				:data-source="materialPage?.records"
				bordered
				:pagination="pagination"
				:loading="loading"
				row-key="key"
			>
				<!-- 操作按钮列 -->
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'assignRule'">
						{{ record.assignRule ? '是' : '否' }}
						<!-- 这里定义为0和1，0再回显的时候不展示？-->
					</template>
				</template>
			</a-table>
		</div>
	</page-container>
</template>

<script setup lang="ts">
	import api from '@/api'
	import { IPage } from '@/api/api'
	import { http } from '@/settings/http'
	import { TreeDataNode } from 'ant-design-vue/es/vc-tree-select/interface'

	const searchKey = ref('')

	const materialPage = ref<IPage<material.Material>>()
	const loading = ref(false)
	const typeVal = ref<string>() // 物料类型选择值

	// 加载数据的方法
	const loadData = async (page = 1, size = 10) => {
		loading.value = true
		api.materialApi.material.materials(
			{
				page: page || materialPage.value?.current,
				size: size || materialPage.value?.size,
				key: searchKey.value,
				type: typeVal.value,
			},
			(data) => {
				loading.value = false
				materialPage.value = data
			},
		)
	}
	//初始加载
	loadData()

	//导出数据
	const downloadData = () => {
		// 调用后端接口下载excel文件
		const url = `${http.prefix}/material/download-excel?key=${searchKey.value}&type=${typeVal.value}`
		window.open(url)
	}

	//表格列
	const columns = [
		{
			title: '序号',
			dataIndex: 'key',
			customRender: ({ index }: { index: number }) => `${index + 1}`,
		},
		{
			title: '物料名称',
			dataIndex: 'name',
		},
		{
			title: '物料编码',
			dataIndex: 'code',
		},

		{
			title: '物料类型',
			dataIndex: 'typeName',
		},
		{
			title: '物料型号',
			dataIndex: 'spec',
		},
		{
			title: '是否赋码',
			dataIndex: 'assignRule',
		},
		{
			title: '价格',
			dataIndex: 'price',
		},
		{
			title: '库存数量',
			dataIndex: 'stock',
		},

		{
			title: '备注',
			dataIndex: 'description',
		},
	]

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

	// 物料类型树
	const types = ref<Array<TreeDataNode>>([])
	api.materialApi.type.trees((data) => {
		types.value = children(data)
	})
	const children = (res: Array<material.TypeTree>): Array<TreeDataNode> => {
		return res.map((areaTree) => ({
			label: areaTree.label,
			value: areaTree.value,
			children: areaTree.children ? children(areaTree.children) : [],
			key: areaTree.value,
		}))
	}
</script>
