<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="'SelectCommEng'" :parentPrgmId="myPrgmId" />
						</v-col>
						<v-spacer></v-spacer>
						<v-col :cols="2" class="text-right">
							<BtnSearch @click="search" />
						</v-col>
					</v-row>
				</v-card>
			</v-col>
		</v-row>
		<v-row ref="contents">
			<v-col cols="12" lg="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="12" lg="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>
						</div>
					</v-card-title>
					<v-card-actions>
						<v-row>
							<v-col :cols="6" class="py-2">
								<InputText
									:parentPrgmId="myPrgmId"
									label="회사코드"
									valueNm="comId"
									:disabled="true"
								/>
							</v-col>
							<v-col :cols="6" class="py-2">
								<InputText
									:parentPrgmId="myPrgmId"
									label="검침대상코드"
									valueNm="mttCd"
									:disabled="true"
								/>
							</v-col>
							<v-col :cols="6" class="py-2">
								<InputText
									:parentPrgmId="myPrgmId"
									label="검칭대상명칭"
									valueNm="mttNm"
									:disabled="true"
								/>
							</v-col>
							<v-col :cols="6" class="py-2">
								<InputText
									:parentPrgmId="myPrgmId"
									label="검칭대상유형"
									valueNm="mttNm"
									:disabled="true"
								/>
							</v-col>
							<v-col :cols="6" class="py-2">
								<InputText
									:parentPrgmId="myPrgmId"
									label="tCo2 환산계수"
									valueNm="co2CvrtCoef"
									:disabled="true"
								/>
							</v-col>
							<v-col :cols="6" class="py-2">
								<InputText
									:parentPrgmId="myPrgmId"
									label="TOE 환산계수"
									valueNm="toeCvrtCoef"
									:disabled="true"
								/>
							</v-col>
							<v-col :cols="6" class="py-2">
								<InputText
									:parentPrgmId="myPrgmId"
									label="TJ 환산계수"
									valueNm="tjCvrtCoef"
									:disabled="true"
								/>
							</v-col>
							<v-col :cols="6" class="py-2">
								<component
									:is="'SelectUseFg'"
									:parentPrgmId="myPrgmId"
									diffModel="modifyUseFg"
								/>
							</v-col>
							<v-col :cols="6" class="py-2">
								<component :is="'SelectMttGrp'" :parentPrgmId="myPrgmId" />
							</v-col>
							<v-col :cols="6" class="py-2">
								<component :is="'SelectUnit'" :parentPrgmId="myPrgmId" />
							</v-col>
							<v-col :cols="6" class="py-2">
								<component
									:is="'SelectUseFg'"
									label="EMS 사용여부"
									:parentPrgmId="myPrgmId"
									diffModel="modifyEmsUseFg"
								/>
							</v-col>
						</v-row>
					</v-card-actions>
				</v-card>
			</v-col>
		</v-row>
	</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import SelectCommEng from '@/components/common/select/SelectCommEng';
import SelectMttGrp from '@/components/common/select/SelectMttGrp';
import SelectUseFg from '@/components/common/select/SelectUseFg';
import SelectUnit from '@/components/common/select/SelectUnit';
import SelectEqpmGrpKind from '@/components/common/select/SelectEqpmGrpKind';
import InputText from '@/components/common/input/InputText';
import BtnSearch from '~/components/common/button/BtnSearch';
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,
		SelectCommEng,
		SelectMttGrp,
		SelectUseFg,
		SelectUnit,
		SelectEqpmGrpKind,
		InputText,
		BtnSearch,
	},
	data() {
		return {
			myPrgmId: myPrgmId,
			gridName: 'rowGrid',
			loadGrid: false,
		};
	},
	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 myColumns = [
				{ header: '검침대상코드', name: 'mttCd' },
				{ header: '검칭대상명칭', name: 'mttNm' },
				{ header: '회사코드', name: 'comId', hidden: true },
				// { header: "검침대상유형", name: "procDttm", hidden: true },
				{ header: 'tCo2 환산계수', name: 'co2CvrtCoef', hidden: true },
				{ header: 'TOE 환산계수', name: 'tjCvrtCoef', hidden: true },
				{ header: 'TJ 환산계수', name: 'toeCvrtCoef', hidden: true },
				{ header: '사용여부', name: 'useFg', hidden: true },
				{ header: '검침 그룹', name: 'mttGrp', hidden: true },
				{ header: '검침 단위', name: 'mttUnit', hidden: true },
				{ header: 'EMS 사용여부', name: 'emsUseFg', 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: 'selectMtt',
				resKey: 'mttData',
				sendParam: {
					mttTp: this.pageData.commEngCd,
					menuId: '2',
				},
			});
			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,

	commEngCd: 'MTT_ELEC',
	commEngList: [],

	mttGrp: 'MTT_GAS',
	mttGrpList: [],
	unitCd: '008',
	unitList: [],
	comId: null,
	mttCd: null,
	mttNm: null,
	co2CvrtCoef: null,
	toeCvrtCoef: null,
	tjCvrtCoef: null,
	modifyUseFg: '1',
	modifyEmsUseFg: '1',

	/* data 세팅 */
	rowGrid: {
		data: [],
		column: [], // myColumns,
		option: {}, // myOptions
		defaultRow: {
			mttCd: '',
			mttNm: '',
			comId: '',
			co2CvrtCoef: '',
			tjCvrtCoef: '',
			toeCvrtCoef: '',
			useFg: '1',
			mttGrp: '',
			mttUnit: '',
			emsUseFg: '1',
		},
	},

	selectedCommCdData: null,
	selectedRowKey: null,
};
</script>
