<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">
							<InputText
								:parentPrgmId="myPrgmId"
								label="설비그룹명칭"
								valueNm="eqpmGrpNm"
							/>
						</v-col>
						<v-col :cols="4">
							<component :is="'SelectUseFg'" :parentPrgmId="myPrgmId" :labelCols="12" :textCols="12" />
						</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">
			<v-col :cols="5" class="h100">
				<v-card class="py-5 h100">
					<v-card-title>
						<span class="tit ft-size_20 ft-weight_600">설비그룹</span>
					</v-card-title>
					<v-card-actions>
						<div ref="gridParent" class="h100 w100">
							<component
								ref="myGrid"
								:is="loadGrid ? 'Grid' : null"
								:gridName="gridName"
								:parentPrgmId="myPrgmId"
								@getRowsData="getRowData"
							/>
						</div>
					</v-card-actions>
				</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="gridName"
							/>
						</div>
					</v-card-title>
					<v-card-actions>
						<v-row>
							<v-col :cols="12" class="py-2">
								<InputText
									:parentPrgmId="myPrgmId"
									label="설비그룹"
									valueNm="modifyEqpmGrp"
									:disabled="true"
								/>
							</v-col>
							<v-col :cols="12" class="py-2">
								<InputText
									:parentPrgmId="myPrgmId"
									label="설비그룹명"
									valueNm="modifyEqpmGrpNm"
								/>
							</v-col>
							<v-col :cols="12" class="py-2">
								<component :is="'SelectEqpmGrpKind'" :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="regDttm"
									: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 SelectUseFg from '@/components/common/select/SelectUseFg';
import SelectEqpmGrpKind from '@/components/common/select/SelectEqpmGrpKind';
import InputText from '@/components/common/input/InputText';
import BtnSearch from '~/components/common/button/BtnSearch';
import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
import Grid from '~/components/common/Grid';
let myTitle;
let myPrgmId;
export default {
	async asyncData(context) {
		const myState = context.store.state;
		myPrgmId = context.route.query.prgmId;
		await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
		myTitle = await myState.activeMenuInfo.menuNm;
	},
	meta: {
		title: () => {
			return myTitle;
		},
		prgmId: myPrgmId,
		closable: true,
	},
	components: {
		Grid,
		SelectUseFg,
		SelectEqpmGrpKind,
		InputText,
		BtnSearch,
		BtnExcelDownload,
	},
	data() {
		return {
			myPrgmId: myPrgmId,
			gridName: 'rowGrid',
			loadGrid: false,
			dataPathMock: {
				'rowGrid': {
					column: [
						{ header: '회사 ID', name: 'comId', hidden: true },
						{ header: '설비 그룹 ID', name: 'eqpmGrpId'},
						{ header: '설비 그룹 명', name: 'eqpmGrpNm'},
						{ header: '설비종류', name: 'eqpmKindId'},
						{ header: '사용여부', name: 'useFg'},
						{ header: '등록자NO', name: 'regUserNo', hidden: true},
						{ header: '등록일시', name: 'regDttm', hidden: true },
						{ header: '수정자NO', name: 'procUserNo', hidden: true },
						{ header: '수정일시', name: 'procDttm', hidden: true}
					],
					data: dataPathDataExample,
					defaultRow: dataPathDataExample,
				}
			},
		};
	},
	computed: {
		...mapState({
			pageData: state => state.pageData[myPrgmId],
		}),
		chkIsFind() {
			// 조회 플래그
			return this.pageData.isFind;
		},
		selectedCommCdData() {
			return this.pageData.selectedCommCdData;
		},
		chkUseFg() {
			// 사용여부 선택 감지
			return this.pageData.useFg;
		},
		modifyEqpmGrpNm() {
			return this.pageData.modifyEqpmGrpNm;
		},
		modifyEqpmGrpKind() {
			return this.pageData.modifyEqpmGrpKind;
		},
		modifyUseFg() {
			return this.pageData.modifyUseFg;
		},
	},
	watch: {
		chkIsFind(val) {
			if (val) this.search();
		},
		chkUseFg() {
			this.setPageData({ isFind: true });
		},
		modifyEqpmGrpNm(val) {
			const isSameData = this.compareData('eqpmGrpNm', val);
			if (!isSameData) {
				const dt = {
					name: 'eqpmGrpNm',
					value: val,
				};
				this.$refs.myGrid.externalDataEdit(dt);
			}
		},
		modifyEqpmGrpKind(val) {
			const isSameData = this.compareData('eqpmGrpKind', val);
			if (!isSameData) {
				const dt = {
					name: 'eqpmGrpKind',
					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);
			}
		},
	},
	beforeCreate() {
		myPrgmId = this.$route.query.prgmId;
		this.$store.dispatch('chkOpenTabList', {
			key: 'create',
			prgmId: myPrgmId,
			defaultData: defaultData,
		});
	},
	mounted() {
		this.init();
	},
	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 gridHeight = this.$refs.gridParent.offsetHeight - 30;

			const myOptions = {
				columnOptions: {
					resizable: true,
				},
				bodyHeight: gridHeight,
				minBodyHeight: gridHeight,
				header: {
					height: 28,
				},
				rowHeight: 29,
				minRowHeight: 29,
			};
			this.setGridOption({
				gridKey: this.gridName,
				value: myOptions,
			});
			const _this = this;
			const myColumns = [
				{ header: '설비그룹코드', name: 'eqpmGrp', align: 'center' },
				{ header: '설비그룹명칭', name: 'eqpmGrpNm', align: 'center' },
				{
					header: '생산설비종류',
					name: 'eqpmGrpKind',
					align: 'center',
					formatter({ value }) {
						const newValue = _this.pageData.eqpmGrpKindList.filter(
							item => item.commCd == value,
						);
						return newValue[0].commCdNm;
					},
				},
				{
					header: '사용여부',
					name: 'useFg',
					align: 'center',
					formatter({ value }) {
						const newValue = _this.pageData.useFgList.filter(
							item => item.commCd == value,
						);
						return newValue[0].commCdNm;
					},
				},
				{ header: '등록일시', name: 'regDttm', hidden: true },
				{ header: '수정일시', name: 'procDttm', hidden: true },
			];

			this.setGridColumn({
				gridKey: this.gridName,
				value: myColumns,
			});

			this.getRowGridData();

			this.loadGrid = true;
		},
		async search() {
			await this.getRowGridData();
			await this.setPageData({
				isFind: false,
			});
		},
		async getRowGridData() {
			const res = await this.postApiReturn({
				apiKey: 'selectEqpmGrpMng',
				resKey: 'eqpmGrpData',
				sendParam: {
					comId: this.userInfo.comId,
					eqpmGrpNm: this.pageData.eqpmGrpNm,
					useFg: this.pageData.useFg,
				},
			});
			const newRes = res.map(item => {
				const newObj = {
					...item,
					rowStat: null,
				};
				return newObj;
			});
			this.setGridData({
				gridKey: this.gridName,
				value: newRes,
			});

			this.$nextTick(() => {
				if (newRes.length > 0) {
					this.$refs['myGrid'].focus({
						rowKey: 0,
						columnName: 'eqpmGrp',
						setScroll: true,
					});
				}
			});
		},
		async getRowData(data) {
			this.setPageData({
				selectedRowKey: data.rowKey,
				modifyEqpmGrp: data.eqpmGrp,
				modifyEqpmGrpNm: data.eqpmGrpNm,
				modifyEqpmGrpKind: data.eqpmGrpKind,
				modifyUseFg: data.useFg,
				regDttm: data.regDttm,
				procDttm: data.procDttm,
				selectedCommCdData: data,
			});
		},
		compareData(type, newDt) {
			if (this.selectedCommCdData[type] == newDt) {
				return true;
			} else {
				return false;
			}
		},
		addRow() {
			this.$refs.myGrid.addRow();
		},
		removeRow() {
			this.$refs.myGrid.removeRow();
		},
		async save() {
			const dataArr = this.$refs.myGrid.save();
			const sendParam = {
				datas: { dsGrpCd: dataArr },
				params: {},
			};
			await this.postUpdateApi({
				apiKey: 'saveEqpmGrpMng',
				sendParam: sendParam,
			});

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

const defaultData = {
	/* 검색옵션 */
	isFind: false,

	eqpmGrpNm: '',
	useFg: '1',
	useFgList: [],
	eqpmGrpKind: 'PROD',
	eqpmGrpKindList: [],

	modifyEqpmGrp: '',
	modifyEqpmGrpNm: '',
	modifyEqpmGrpKind: 'PROD',
	modifyUseFg: '1',
	regDttm: '',
	procDttm: '',

	/* data 세팅 */
	rowGrid: {
		data: [],
		column: [], // myColumns,
		option: {}, // myOptions
		defaultRow: {
			eqpmGrp: '',
			eqpmGrpNm: '',
			eqpmGrpKind: 'PROD',
			useFg: '1',
			regDttm: '',
			procDttm: '',
			rowStat: null,
		},
	},

	selectedCommCdData: null,
	selectedRowKey: null,

	xlsFileInfo: {
		// 출력하려는 grid 와 같은 이름으로 세팅
		rowGrid: {
			fileName: null, // 갑이 없으면 해당 페이지 메뉴명
			sheetName: null, //  갑이 없으면 'Sheet1'
		},
	},
};

import { getPathDataExample } from '@/const/const'
const dataPathDataExample = getPathDataExample({
	comId: 'EKIND0005',
	eqpmGrpId: 'EQG000010',
	eqpmGrpNm:'냉수파이프고온',
	eqpmKindId:'냉동파이프',
	useFg:'1',
	regUserNo: '사용',
	 regDttm: 'EQP_HVAC_LT_CH001',
	procUserNo: '사용',
	procDttm: 'EQP_HVAC_LT_CH001',
	});

</script>
