<template>
<div class="grainPriceCollectCitySumDetail">
	<div class="tools">
		<!-- <a-button class="pub" @click="onPub">上报</a-button> -->
		<a-button class="view" @click="onPrint">打印</a-button>
		<a-button class="view" @click="onXlsx">导出</a-button>
	</div>
	<div ref="tableElem" class="list">
		<h4 class="table_title">西宁市粮油市场价格信息监测周报</h4>
		<table class="table" border="1">
			<thead class="table_head">
				<tr>
					<th class="table_cell" :rowspan="2" :colspan="3">品种</th>
					<th class="table_cell" v-for="(citem,cindex) in tableHeader" :key="cindex" :rowspan="citem.rows" :colspan="citem.cols">{{citem.label}}</th>
				</tr>
				<tr>
					<template v-for="(citem,cindex) in tableHeader" :key="cindex">
						<th class="table_cell" width="50" v-for="item in priceHeader" :key="item.label">{{item.label}}</th>
					</template>
				</tr>
			</thead>
			<tbody class="table_body">
				<template v-for="group in tableData">
					<tr v-for="(item,index) in group.children" :key="index">
						<th class="table_cell" v-if="index === 0" :rowspan="group.children.length">{{levelMap.firstLevel[item.firstLevel] || ''}}</th>
						<th class="table_cell" :colspan="item.threeLevel ? 1 : 2">{{levelMap.secondLevel[item.secondLevel]}}</th>
						<th class="table_cell" v-if="item.threeLevel">{{levelMap.threeLevel[item.threeLevel]}}</th>

						<template v-for="(citem,cindex) in tableHeader" :key="cindex">
							<th class="table_cell" v-for="pitem in priceHeader" :key="pitem.label">
								<span v-if="item.priceType == citem.type">
									{{pitem.cb ? pitem.cb(item[pitem.prop]) : item[pitem.prop]}}
								</span>
								<span v-else></span>
							</th>
						</template>
					</tr>
				</template>
			</tbody>
		</table>
	</div>
</div>
</template>
<script setup name="grainPriceCollectCitySumDetail">
import bizGrainPriceCollectProvinceSumApi from '@/api/basic.info/bizGrainPriceCollectProvinceSumApi.js'
import * as XLSX from "xlsx";
import { useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
import { CodepenOutlined } from '@ant-design/icons-vue';
function getRate(val){
	return ((val||0).toFixed(2)*100)+'%'
}
const priceHeader = [
	{label:"平均价格",rows:1,cols:1,prop:'price'},
	{label:"与上周同期比（%）",rows:1,cols:1,prop:'weekRate',cb:getRate},
	{label:"与上月同期比（%）",rows:1,cols:1,prop:'monthRate',cb:getRate},
	{label:"与去年同期比（%）",rows:1,cols:1,prop:'yearRate',cb:getRate},
]
const tableHeader = [
	{label:'收购价',rows:1,cols:4,type:1},
	{label:'入库价',rows:1,cols:4,type:2},
	{label:'出库价',rows:1,cols:4,type:3},
	{label:'出厂价',rows:1,cols:4,type:4},
	{label:'批发价',rows:1,cols:4,type:5},
	{label:'零售价',rows:1,cols:4,type:6},
];
const route = useRoute();
let query = {};
const tableData = ref({});
const tableElem = ref(null);
onMounted(()=>{
	query = route.query;
	getTable(query?.id);
});


const levelMap = {
	type:{ 1:'粮食价格采集',2:'市级粮食价格采集汇总',3:'省级粮食价格采集汇总'},
	firstLevel:{1:'原粮',2:'杂粮',3:'成品粮',4:'省级储备'},
	secondLevel:{11:'小麦',12:'青稞',13:'油菜籽',21:'黄豆',22:'玉米面',23:'小米',31:'菜籽油',32:'面粉',33:'粳米',41:'省级储备小麦',42:'省级储备青稞',43:'省级储备菜籽油'},
	threeLevel:{311:'一级菜籽油',312:'三级菜籽油',313:'小榨菜籽油',321:'特一粉',322:'牛肉面粉',331:'一级长粒粳米',332:'一级圆粒粳米'},
}

function getTable(id){
	if(!id){ message.error('请传递查询ID'); return; }
	bizGrainPriceCollectProvinceSumApi.bizGrainPriceCollectProvinceSumDetail({id}).then(reg=>{
		const result = arr_group(reg.collectCategoryList,'firstLevel');
		tableData.value = result;
	});
}

// function onPub(){
// 	let id = query?.id;
// 	if(!id){ message.error('请传递查询ID'); return; }
// 	bizGrainPriceCollectProvinceSumApi.grainPriceCollectCitySumCollectCityUpload({id}).then(reg=>{
// 		message.success('上报成功！');
// 	}).catch(err=>{
// 		message.error('上报失败！');
// 	})
// }
function onPrint(){
	const el = tableElem.value;
	const iframe = document.createElement('iframe');
	const body = window.document.body;
	const head = window.document.head;
	iframe.width = 0;
	iframe.height = 0;
	iframe.style.border = 'none';
	body.append(iframe);
	const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
	iframeDoc.write(el.innerHTML);
	iframeDoc.close();

	iframeDoc.head.innerHTML = head.innerHTML;
	iframeDoc.head.innerHTML += '<style> body>*{ width:100%; } </style>'
	iframe.contentWindow.onafterprint = function(){
		iframe && body.removeChild(iframe);
	}
	iframe.onload = function(){
		iframe.contentWindow.print();
	}
}
function onXlsx(){
	const el = tableElem.value;
	const workbook = XLSX.utils.table_to_book(el);
	const ws = workbook.Sheets['Sheet1'];
	// XLSX.utils.sheet_add_aoa(ws, [["Created "+new Date().toISOString()]], {origin:-1});
	XLSX.writeFile(workbook, "Report.xlsx");
}
function arr_group(opt,key){
	let result = [];
	opt.forEach(v=>{
		let group = v[key];
		let row = result.filter(v=>v.group === group)[0];
		if(row){
			row.children.push(v);
		} else {
			result.push({group,children:[v]})
		}
	});
	return result;
}
</script>
<style lang="less" scoped>
.tools{
	background:#fff;
	padding:15px;
	display:flex; justify-content:flex-end; align-items:center;
	.ant-btn{
		margin:0 10px;
	}
	.view { background-color: rgba(112, 125, 233); color: #fff; }
	.reject { background-color: rgba(255, 70, 70); color: #fff; }
	.pub { background-color: rgba(83, 184, 36); color: #fff; }
}
.list{
	background:#fff;
	padding:15px;
	.table_title{
		font-size:24px; font-weight:bold; color:#333;
		text-align:center; margin:14px;
	}
	.table{
		width:100%; border-collapse:collapse; color:#333;
		font-size:16px;
		.table_cell{
			font-weight:normal;
		}
	}
}

</style>