<template>
	<div id="btnExeclDownload">
		<v-btn class="v-btn__round v-btn__excel" @click="downloadExcelFile">
			<v-icon>mdi-microsoft-excel</v-icon>
			엑셀
		</v-btn>
	</div>
</template>

<script>
import XLSX from 'xlsx';

export default {
	name: 'btnExeclDownload',
	props: {
		xlsHeader: {
			// JSON 데이터로 만들 시 필요
			type: Array,
			default: [],
		},
		xlsRowData: {
			// JSON 데이터로 만들 시 필요
			type: Array,
			default: [],
		},
		tableId: {
			// 성성된 테이블 그대로 쓸 경우 그리드에 id 지정 후 바인딩
			type: String,
			default: null,
		},
		fileName: {
			// 테이블이 하나일 경우, 현재 활성화 메뉴명을 가져와도 될듯,.
			type: String,
			required: true,
		},
		sheetName: {
			// 지정된 시트명이 없으면 'Sheet1'
			type: String,
			default: null,
		},
	},
	data() {
		return {
			xlsData: [],
		};
	},
	methods: {
		setExcelData() {
			let tmpData = [];
			let tmpMap = {};
			this.xlsRowData.map(item => {
				this.xlsHeader.map(v => {
					return Object.assign(tmpMap, { [v.header]: item[v.name] || '' });
				});
				tmpData = tmpData.concat(tmpMap);
				tmpMap = {};
			});
			this.xlsData = tmpData;
			tmpData = null;
			tmpMap = null;
		},
		async downloadExcelFile() {
			if (!this.tableId) await this.setExcelData(); // 들어온 JSON 데이타 가공

			const workBook = XLSX.utils.book_new(); // 새 시트 생성
			const excelData = this.tableId
				? // 테이블 그대로 가져올때
				  XLSX.utils.table_to_sheet(document.getElementById(this.tableId))
				: // JSON 형식으로 가져올때
				  XLSX.utils.json_to_sheet(this.xlsData);
			const sheetName = this.sheetName || null;
			XLSX.utils.book_append_sheet(workBook, excelData, sheetName); // 시트 명명, 데이터 지정
			XLSX.writeFile(workBook, `${this.fileName}.xlsx`); // 엑셀파일 만듬
		},
	},
};
</script>
