<template>
	<div class="l-layout">
		<v-row ref="searchFilter">
			<v-col :cols="12">
				<v-card class="searchFilter">
					<v-row align="center" no-gutters>
						<v-col :cols="4">
							<component :is="'SelectSysDiv'" :parentPrgmId="myPrgmId" />
						</v-col>
						<v-col :cols="4">
							<component :is="'SelectUseFg'" :parentPrgmId="myPrgmId" />
						</v-col>
						<v-col :cols="4" class="text-right">
							<BtnSearch @click="search" />
						</v-col>
					</v-row>
				</v-card>
			</v-col>
		</v-row>
		<v-row ref="contents" :eager="true">
			<v-col :cols="5" class="h100">
				<v-card class="pb-5 h100">
					<v-card-title>메뉴 리스트</v-card-title>
					<div class="px-5 h100">
						<div ref="treeGridParent" class="w100 h100">
							<component
								ref="myGrid"
								:is="loadTree ? 'Grid' : null"
								:gridName="gridNameTree"
								:parentPrgmId="myPrgmId"
								@getRowsData="getRowData"
							/>
						</div>
					</div>
				</v-card>
			</v-col>
			<v-col :cols="7" class="h100">
				<v-card class="py-5 h100">
					<v-card-title class="d-flex justify-between">
						<span class="tit ft-size_20 ft-weight_600">메뉴 상세</span>
						<div>
							<v-btn
								class="v-btn-radius__20 v-btn-bg__white-blue mr-1"
								@click="addRow"
							>
								<v-icon>mdi-plus</v-icon>
								<span>추가</span>
							</v-btn>
							<v-btn
								class="v-btn-radius__20 v-btn-bg__white-blue mr-1"
								@click="removeRow"
							>
								<v-icon>mdi-delete-outline</v-icon>
								<span>삭제</span>
							</v-btn>
							<v-btn class="v-btn-radius__20 v-btn-bg__blue mr-1" @click="save">
								<v-icon>mdi-content-save</v-icon>
								<span>저장</span>
							</v-btn>
							<BtnExcelDownload
								style="vertical-align: middle;"
								class="d-inline-flex"
								:parentPrgmId="myPrgmId"
								:gridName="gridNameTree"
							/>
						</div>
					</v-card-title>
					<v-card-actions>
						<v-row>
							<v-col :cols="12" class="py-2">
								<InputText
									:parentPrgmId="myPrgmId"
									label="상위메뉴코드"
									valueNm="modifyupMenuId"
								/>
							</v-col>
							<v-col :cols="12" class="py-2">
								<InputText
									:parentPrgmId="myPrgmId"
									label="메뉴코드"
									valueNm="menuId"
									:disabled="true"
								/>
							</v-col>
							<v-col :cols="12" class="py-2">
								<InputText
									:parentPrgmId="myPrgmId"
									label="메뉴명"
									valueNm="modifyMenuNm"
								/>
							</v-col>
							<v-col :cols="12" class="py-2">
								<InputText
									:parentPrgmId="myPrgmId"
									label="프로그램ID"
									valueNm="modifyprgmId"
								/>
							</v-col>
							<v-col :cols="12" class="py-2">
								<component
									:is="'SelectSysDiv'"
									diffModel="modifySysDivCd"
									:parentPrgmId="myPrgmId"
								/>
							</v-col>
							<v-col :cols="12" class="py-2">
								<component
									:is="'SelectUseFg'"
									diffModel="modifyUseFg"
									:parentPrgmId="myPrgmId"
								/>
							</v-col>
							<v-col :cols="12" class="py-2">
								<InputText
									:parentPrgmId="myPrgmId"
									label="정렬순서"
									valueNm="modifysortSeq"
								/>
							</v-col>
							<v-col :cols="12" class="py-2">
								<InputText
									:parentPrgmId="myPrgmId"
									label="등록지NO"
									valueNm="regUserNo"
									:disabled="true"
								/>
							</v-col>
							<v-col :cols="12" class="py-2">
								<InputText
									:parentPrgmId="myPrgmId"
									label="등록일시"
									valueNm="regDttm"
									:disabled="true"
								/>
							</v-col>
							<v-col :cols="12" class="py-2">
								<InputText
									:parentPrgmId="myPrgmId"
									label="수정지NO"
									valueNm="procUserNo"
									:disabled="true"
								/>
							</v-col>
							<v-col :cols="12" class="py-2">
								<InputText
									:parentPrgmId="myPrgmId"
									label="수정일시"
									valueNm="procDttm"
									:disabled="true"
								/>
							</v-col>
						</v-row>
					</v-card-actions>
				</v-card>
			</v-col>
		</v-row>
	</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import BtnSearch from '~/components/common/button/BtnSearch';
import SelectSysDiv from '@/components/common/select/SelectSysDiv';
import SelectUseFg from '@/components/common/select/SelectUseFg';
import InputText from '@/components/common/input/InputText';
import Grid from '~/components/common/Grid';
import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
import Utility from '~/plugins/utility';

let myTitle;
let myPrgmId;
export default {
	mixins: [mixinGlobal, resize],
	asyncData(context) {
		const myState = context.store.state;
		context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
		myTitle = myState.activeMenuInfo.menuNm;
	},
	meta: {
		title: () => {
			return myTitle;
		},
		prgmId: myPrgmId,
		closable: true,
	},
	components: {
		BtnSearch,
		SelectSysDiv,
		SelectUseFg,
		InputText,
		Grid,
		BtnExcelDownload,
	},
	data() {
		return {
			myPrgmId: myPrgmId,
			gridNameTree: 'treeGrid',
			loadTree: false,
			myRowKey: 0,
		};
	},
	computed: {
		...mapState({
			pageData: state => state.pageData[myPrgmId],
		}),
		chkIsFind() {
			// 조회 플래그
			return this.pageData.isFind;
		},
		chkSysDivCd() {
			// 시스템구분 선택 감지
			return this.pageData.sysDivCd;
		},
		chkUseFg() {
			// 사용여부 선택 감지
			return this.pageData.useFg;
		},
		selectedCommCdData() {
			return this.pageData.selectedCommCdData;
		},
		modifyupMenuId() {
			return this.pageData.modifyupMenuId;
		},
		modifyMenuNm() {
			return this.pageData.modifyMenuNm;
		},
		modifyprgmId() {
			return this.pageData.modifyprgmId;
		},
		modifysortSeq() {
			return this.pageData.modifysortSeq;
		},
		modifySysDivCd() {
			return this.pageData.modifySysDivCd;
		},
		modifyUseFg() {
			return this.pageData.modifyUseFg;
		},
	},
	watch: {
		chkIsFind(val) {
			if (val) this.search();
		},
		chkSysDivCd() {
			this.setPageData({ isFind: true });
		},
		chkUseFg() {
			this.setPageData({ isFind: true });
		},
		modifyupMenuId(val) {
			const isSameData = this.compareData('upMenuId', val);
			if (!isSameData) {
				const dt = {
					name: 'upMenuId',
					value: val,
				};
				this.$refs.myGrid.externalDataEdit(dt);
			}
		},
		modifyMenuNm(val) {
			const isSameData = this.compareData('MenuNm', val);
			if (!isSameData) {
				const dt = {
					name: 'MenuNm',
					value: val,
				};
				this.$refs.myGrid.externalDataEdit(dt);
			}
		},
		modifyprgmId(val) {
			const isSameData = this.compareData('prgmId', val);
			if (!isSameData) {
				const dt = {
					name: 'prgmId',
					value: val,
				};
				this.$refs.myGrid.externalDataEdit(dt);
			}
		},
		modifysortSeq(val) {
			const isSameData = this.compareData('sortSeq', val);
			if (!isSameData) {
				const dt = {
					name: 'sortSeq',
					value: val,
				};
				this.$refs.myGrid.externalDataEdit(dt);
			}
		},
		modifySysDivCd(val) {
			const isSameData = this.compareData('sysDivCd', val);
			if (!isSameData) {
				const dt = {
					name: 'sysDivCd',
					value: val,
				};
				this.$refs.myGrid.externalDataEdit(dt);
			}
		},
		modifyUseFg(val) {
			const isSameData = this.compareData('useFg', val);
			if (!isSameData) {
				const dt = {
					name: 'useFg',
					value: val,
				};
				this.$refs.myGrid.externalDataEdit(dt);
			}
		},
	},
	async beforeCreate() {
		myPrgmId = this.$route.query.prgmId;
		await this.$store.dispatch('chkOpenTabList', {
			key: 'create',
			prgmId: myPrgmId,
			defaultData: defaultData,
		});
	},
	mounted() {
		this.init();
	},
	beforeDestroy() {
		this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
	},
	methods: {
		...mapMutations({
			setPageData: 'setPageData',
			setGridData: 'setGridData',
			setGridColumn: 'setGridColumn',
			setGridOption: 'setGridOption',
		}),
		...mapActions({
			postApi: 'modules/list/postApi',
			postUpdateApi: 'modules/list/postUpdateApi',
			postApiReturn: 'modules/list/postApiReturn',
			setTree: 'modules/list/setTree',
			chkOpenTabList: 'chkOpenTabList',
		}),
		init() {
			this.layoutInit();
			this.gridInit();
		},
		layoutInit() {
			const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
			this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px)`;
		},
		gridInit() {
			const treeGridHeight = this.$refs.treeGridParent.offsetHeight - 36;

			const myOptionsTree = {
				rowHeaders: ['checkbox'],
				treeColumnOptions: {
					name: 'menuNm',
				},
				scrollX: false,
			};

			this.setGridOption({
				gridKey: this.gridNameTree,
				// value: myOptionsTree
				value: Object.assign(
					Utility.defaultGridOption(treeGridHeight),
					myOptionsTree,
				),
			});
			this.setGridColumn({
				gridKey: this.gridNameTree,
				value: [
					{
						header: '메뉴명',
						name: 'menuNm',
						align: 'center',
					},
					{
						header: '메뉴ID',
						name: 'menuId',
						hidden: true,
					},
					{
						header: '상위메뉴ID',
						name: 'upMenuId',
						hidden: true,
					},
					{
						header: '정렬순서',
						name: 'sortSeq',
						hidden: true,
					},
					{
						header: '사용여부',
						name: 'useFg',
						hidden: true,
					},
					{
						header: '회사코드',
						name: 'comId',
						hidden: true,
					},
					{
						header: '시스템구분',
						name: 'sysDivCd',
						hidden: true,
					},
					{
						header: '등록자NO',
						name: 'regUserNo',
						hidden: true,
					},
					{
						header: '등록일시',
						name: 'regDttm',
						hidden: true,
					},
					{
						header: '수정자NO',
						name: 'procUserNo',
						hidden: true,
					},
					{
						header: '수정일시',
						name: 'procDttm',
						hidden: true,
					},
				],
			});

			this.getTreeData();
		},
		//메뉴 리스트
		async getTreeData() {
			const res = await this.postApiReturn({
				apiKey: 'selectMenu',
				resKey: 'menuData',
				sendParm: {
					comId: this.pageData.comId,
					sysDivCd: this.pageData.sysDivCd,
					useFg: this.pageData.useFg,
				},
			});
			res[0].upMenuId = 'ROOT';
			// res[0].parentId= 'ROOT';
			const setTreeData = await this.setTree({
				treeKey: 'MENU_ID',
				value: res,
			});
			this.loadTree = true;
			await this.setGridData({
				gridKey: this.gridNameTree,
				value: setTreeData.ROOT,
			});

			// this.$refs.myGrid.focus({
			//     rowKey:this.myRowKey,
			//     columnName: "menuNm",
			//     setScroll: true
			// });

			this.$nextTick(() => {
				if (setTreeData.length > 0) {
					this.$refs['myGrid'].focus({
						rowKey: this.myRowKey,
						columnName: 'menuNm',
						setScroll: true,
					});
				}
			});

			this.setPageData({ isFind: false });
		},
		async getRowData(data) {
			this.myRowKey = data.rowKey;
			this.setPageData({
				selectedCommCdData: data,
				modifyupMenuId: data.menuId,
				modifyMenuNm: data.menuNm,
				modifyprgmId: data.prgmId,
				modifysortSeq: data.sortSeq,
				modifySysDivCd: data.sysDivCd,
				modifyUseFg: data.useFg,
				procDttm: data.procDttm,
				procUserNo: data.procUserNo,
				regUserNo: data.regUserNo,
				regDttm: data.regDttm,
				menuId: data.menuId,
			});
		},
		async search() {
			await this.getTreeData();
			await this.setPageData({
				isFind: false,
			});
		},
		compareData(type, newDt) {
			if (this.selectedCommCdData[type] == newDt) {
				return true;
			} else {
				return false;
			}
		},
		addRow() {
			this.$refs.myGrid.gridInstance.invoke(
				'appendRow',
				{
					menuId: '',
					menuNm: '',
					prgmId: '',
					sortSeq: '',
					sysDivCd: '',
					useFg: '',
					procDttm: '',
					procUserNo: '',
					regUserNo: '',
					regDttm: '',
				},
				{ focus: true },
			);

			// this.$refs.myGrid.addRow();
			// var rowData = {menuId: "", menuNm : "", prgmId:"", sortSeq:"", sysDivCd:"", useFg:"",procDttm:"",procUserNo:"",regUserNo:"",regDttm:""}
			// this.$refs.myGrid.appendRow(rowData, {
			//   at:1,
			//   extendPrevRowSpan:true,
			//   focus:true
			// });
		},
		removeRow() {
			this.$refs.myGrid.removeRow();
		},
		async save() {
			const dataArr = this.$refs.myGrid.save();
			const sendParam = {
				datas: { dsMenu: dataArr },
				params: {},
			};
			await this.postUpdateApi({
				apiKey: 'saveMenu',
				sendParm: sendParam,
			});

			await this.search();
		},
	},
};

const defaultData = {
	/* 검색옵션 */
	comId: this.comId,
	sysDivCd: '',
	sysDivCdList: [],
	useFg: '',
	useFgList: [],
	menuId: '',
	modifySysDivCd: 'COMM',
	modifyUseFg: '1',
	regUserNo: '',
	regDttm: '',
	procUserNo: '',
	procDttm: '',
	modifyupMenuId: '',
	modifyMenuNm: '',
	modifyprgmId: '',
	modifysortSeq: '',

	isFind: false, // true 경우 조회, 조회버튼도 이 값으로 연동 예정
	/* data 세팅 */
	treeGrid: {
		data: [],
		column: [],
		option: {},
		defaultRow: {
			menuId: '',
			menuNm: '',
			upMenuId: '',
			prgmId: '',
			sortSeq: '',
			useFg: '',
			comId: '',
			sysDivCd: '',
			regUserNo: '',
			regDttm: '',
			procUserNo: '',
			procDttm: '',
			rowStat: null,
		},
	},
};
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>
