<template>
	<div id="btnExeclUpload">
		<v-btn class="v-btn__round v-btn__excel" @click="uploadExcelFile">
			<v-icon>mdi-file-excel</v-icon>
			엑셀 로드
		</v-btn>
	</div>
</template>

<script>
import XLSX from 'xlsx';
import { mapState } from 'vuex';

export default {
	name: 'btnExeclUpload',
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		gridName: {
			type: String,
			require: false,
		},
		dataPath: {
			type: Object,
			require: false,
			default: null,
		},

		tableId: {
			// 성성된 테이블 그대로 쓸 경우 그리드 컴포넌트에 id 지정 후 바인딩
			type: String,
			require: false,
			default: null,
		},
	},
	data() {
		return {
			xlsData: [],
		};
	},
	computed: {
		...mapState({
			menuNm: state => state.activeMenuInfo.menuNm,
			pageData(state) {
				return state.pageData[this.parentPrgmId];
			},
		}),
	},
	methods: {
		setExcelData() {
			const xlsRowData = this.pageData[this.gridName].data;
			const xlsHeader = this.pageData[this.gridName].column;
			let tmpData = [];
			let tmpMap = {};
			xlsRowData.map(item => {
				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 fileName = this.pageData.xlsFileInfo[this.gridName].fileName;
			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.pageData.xlsFileInfo[this.gridName].sheetName;
			XLSX.utils.book_append_sheet(workBook, excelData, sheetName); // 시트 명명, 데이터 지정
			XLSX.writeFile(
				workBook,
				`${fileName ? fileName : this.menuNm.replace(/(\s*)/g, '')}.xlsx`,
			); // 엑셀파일 만듬
		},
	},
};
</script>
