<template>
<!-- 损溢损失分析报警 -->
<div class="foodstuffAnalyzeAlarms pageContent">
<a-space class="search">
	库区名称:<a-input v-model:value="SearchForm._库区名称" />
	仓房名称:<a-input v-model:value="SearchForm._仓房名称" />
	<div class="btnBox">
		<a-button type="primary" @click="onSearch"> 查询 </a-button>
		<a-button @click="onReset"> 重置 </a-button>
	</div>
</a-space>
<div class="list">
	<a-table :dataSource="tableData" :pagination="tablePage" :columns="tableColumns" @change="onChangePage">
		<template #bodyCell="{ column, record,index }">
			<template v-if="column.key === 'INDEX'">{{index+1}}</template>
			<template v-else-if="column.key === 'CZ'">
				<a-button class="view" @click="onViewRow(record)">查看</a-button>
			</template>
		</template>
	</a-table>
</div>
<a-modal width="900px" v-model:visible="ViewDialog.open" :title="ViewDialog.title">
	
	<DIYDescriptions :columns="3" :title="item.title" :options="item.children" v-for="(item,index) in ViewDialog.formOptions" :key="index">
		<template #title1={row}>
			<h3>{{row.title}}</h3>
		</template>
	</DIYDescriptions>
	<template #footer></template>
</a-modal>
</div>
</template>
<script setup>
const SearchForm = reactive({
	_库区名称:'',
	_仓房名称:'',
});
const tableColumns = [
	{title:'序号',width:100,align:'center',key:'INDEX'},
	{title:'库区名称',dataIndex:'_库区名称'},
	{title:'仓房名称',dataIndex:'_仓房名称'},
	{title:'实际损耗数量',dataIndex:'_实际损耗数量'},
	{title:'自然保管损耗',dataIndex:'_自然保管损耗'},
	{title:'超耗数量',dataIndex:'_超耗数量'},
	{title:'操作',width:200,key:'CZ'},
];
const tableData = ref([{'':'12456789'}]);
const tablePage = reactive({
	total:0,
	current:1,
	size:20,
});
const ViewDialog = reactive({
	open:false,
	title:'',
	formOptions:[
		{title:'损溢损失信息预警',children:[
			{label:'库区名称',prop:"_库区名称"},
			{label:'仓房名称',prop:"_仓房名称"},
			{label:'品种',prop:"_品种"},
			{label:'性质',prop:"_性质"},
			{label:'等级',prop:"_等级"},
			{label:'年份',prop:"_年份"},
			{label:'入库时间',prop:"_入库时间"},
			{label:'入库数量',prop:"_入库数量"},
			{label:'出库时间',prop:"_出库时间"},
			{label:'出库数量',prop:"_出库数量"},
			{label:'存储年限',prop:"_存储年限"},
			{label:'实际损耗数量',prop:"_实际损耗数量"},
		]},
		{title:'损耗计算',children:[
			{label:'存储数量',prop:"_存储数量"},
			{label:'入库水分',prop:"_入库水分"},
			{label:'质检水分（实测水分）',prop:"_质检水分（实测水分）"},
			{label:'水分减量',prop:"_水分减量"},
			{label:'自然损耗',prop:"_自然损耗"},
			{label:'存储损耗',prop:"_存储损耗"},
			{label:'超耗数量',prop:"_超耗数量"},
			{label:'检查计算数',prop:"_检查计算数"},
		]},


	],
	form:{}
});

function onSearch(){

}
function onReset(){
	SearchForm._库区名称 = '';
	SearchForm._品种 = '';
	SearchForm._性质 = '';
	tablePage.current = 1;
	onSearch();
}

function onChangePage(ev){
	console.log(ev);
	Object.assign(tablePage,ev);
	onSearch();
}

function onViewRow(row){
	ViewDialog.title = `${row._库区名称}-${row._仓房名称}-查看`;
	ViewDialog.open = true;
}
</script>
<style lang="less" scoped>
.view { background-color: rgba(112, 125, 233); color: #fff; }
.edit { background-color: rgba(210, 176, 61); color: #fff; }
.remove { background-color: rgba(255, 70, 70); color: #fff; }
.add { background-color: rgba(83, 184, 36); color: #fff; }
.pageContent{
	background:#fff; padding:10px 20px;
	.search{
		padding:10px 0;
		.btnBox{
			display:flex;
			>*{ margin-right:10px; }
		}
	}
}
</style>