<template>
	<div class="l-layout">
		<v-row ref="searchFilter">
			<v-col :cols="12">
				<v-card class="searchFilter">
					<v-row align="end" no-gutters>
						<v-col :cols="3">
							<InputText :labelCols="12" :textCols="12" :parentPrgmId="myPrgmId" label="지표명"
								valueNm="searchEffcIdxNm" :searchOption="true" :customClass="'input-large fixed-width'"
								:iconShow="true" />
						</v-col>
						<v-col :cols="9" class="text-right">
							<BtnSearch @click="search" size="large" />
						</v-col>
					</v-row>
				</v-card>
			</v-col>
		</v-row>
		<v-row ref="contents">
			<v-col :cols="5" style="height:100%">
				<v-card class="pb-5">
					<div class="d-flex align-center justify-space-between pa-4">
						<v-card-title class="pa-0 custom-title-4">효율지표 리스트</v-card-title>
						<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
					</div>
					<div class="px-4" style="height:calc(100% - 76px)">
						<div ref="gridParent" id="gridParent" class="w100 h100">
							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
								:parentPrgmId="myPrgmId" @getRowsData="getRowData" :preventFocusChangeEventFlag="false"
								:dataPath="dataPathExample" />
						</div>
					</div>
				</v-card>
			</v-col>
			<v-col :cols="7" style="height:100%">
				<v-card class="pb-5">
					<v-card-title class="custom-title-4 pa-4 pb-2">효율지표 상세
					</v-card-title>
					<div class="px-4" style="height:calc(100% - 76px)">
						<v-tabs v-model="tab">
							<v-tab v-for="item in items" :key="item.id" :disabled="(item.id == 'EffcIdxAddInfoTab'
								? isInfoTabDisabled
								: false) || item.disabledFlag
								">
								{{ item.name }}
							</v-tab>
						</v-tabs>
						<v-tabs-items v-model="tab" class="py-6">
							<v-tab-item v-for="(item, idx) in items" :key="item.id">
								<v-row v-if="item.id == 'EffcIdxInfoTab'" class="form-row no-gutters">
									<v-col :cols="6" class="py-3 pr-4">
										<InputText ref="effcIdxId" :parentPrgmId="myPrgmId" label="효율지표 ID"
											valueNm="effcIdxId" :required="true" :readonly="true" placeholder="시스템 자동입력"
											:iconShow="true" />
									</v-col>
									<v-col :cols="6" class="py-3 pl-4">
										<InputText ref="effcIdxNm" :parentPrgmId="myPrgmId" label="효율지표 명"
											valueNm="effcIdxNm" :required="true" :iconShow="true" />
									</v-col>
									<v-col :cols="6" class="py-3 pr-4">
										<component :is="'SelectBox'" :propsValue="selectValue01"
											:itemList="selectValueList01" :label="'적용최소범위'" :required="true"
											:textCols="12" :labelCols="12"
											@update:propsValue="selectValue01 = $event" />
									</v-col>
									<v-col :cols="6" class="py-3 pl-4">
										<component :is="'SelectBox'" :propsValue="selectValue02"
											:itemList="selectValueList02" :label="'상위집계방법'" :required="true"
											:textCols="12" :labelCols="12"
											@update:propsValue="selectValue02 = $event" />
									</v-col>
									<v-col :cols="6" class="py-3 pr-4">
										<component :is="'SelectBox'" :propsValue="selectValue03"
											:itemList="selectValueList03" :label="'효율지표종류'" :required="true"
											:textCols="12" :labelCols="12"
											@update:propsValue="selectValue03 = $event" />
									</v-col>
									<v-col :cols="6" class="py-3 pl-4">
										<component :is="'SelectBox'" :propsValue="selectValue04"
											:itemList="selectValueList04" :label="'단위'" :textCols="12" :labelCols="12"
											:required="true" @update:propsValue="selectValue04 = $event" />
									</v-col>
									<v-col :cols="6" class="py-3 pr-4">
										<CheckBox :parentPrgmId="myPrgmId" label="사용여부" valueNm="useFg"
											:required="true" />
									</v-col>
									<v-col :cols="6" class="py-3 pl-4">
										<InputText ref="sortSeq" :parentPrgmId="myPrgmId" label="정렬순번" valueNm="sortSeq"
											:required="true" />
									</v-col>
									<v-col v-if="!checkCalc" :cols="6" class="py-3 pr-4">
										<component ref="EqpmCalcPop" :is="'EqpmCalcPop'" :parentPrgmId="myPrgmId"
											:item="calcItem" :labelContent="'계산코드'" :openMode="'E'" :modalTitle="'계산코드'"
											:textCols="12" :labelCols="12" />
									</v-col>
									<v-col :cols="6" class="py-3">

									</v-col>
									<v-col v-if="!checkCalc" :cols="6" class="py-3 pr-4">
										<component :is="'TextArea'" ref="calcDesc" :parentPrgmId="myPrgmId"
											:item="calcDescItem" :textCols="12" :labelCols="12" />
									</v-col>
									<v-col :cols="6" class="py-3">

									</v-col>
									<v-col v-if="!checkCalc" :cols="12" class="py-3">
										<label for="" class="search-box-label">
											<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
											계산 Agument
										</label>
									</v-col>
									<v-col v-if="!checkCalc" :cols="6" class="py-3 pr-4">
										<div>
											<component :is="'SelectBox'" :propsValue="selectValue05"
												:itemList="selectValueList05" :label="'효율지표ID1'" :iconShow="false"
												:disabled="checkCalc" @update:propsValue="selectValue05 = $event"
												:textCols="12" :labelCols="12" />
										</div>
									</v-col>
									<v-col v-if="!checkCalc" :cols="6" class="py-3 pl-4">
										<div>
											<component :is="'SelectBox'" ref="effcIdxId2" :propsValue="selectValue06"
												:itemList="selectValueList06" :label="'효율지표ID2'" :iconShow="false"
												:disabled="effcIdxId2Disabled"
												@update:propsValue="selectValue06 = $event" :textCols="12"
												:labelCols="12" />
										</div>
									</v-col>
									<v-col v-if="!checkCalc" :cols="6" class="py-3 pr-4">
										<div>
											<component :is="'SelectBox'" ref="effcIdxId3" :propsValue="selectValue07"
												:itemList="selectValueList07" :label="'효율지표ID3'" :iconShow="false"
												:disabled="effcIdxId3Disabled"
												@update:propsValue="selectValue07 = $event" :textCols="12"
												:labelCols="12" />
										</div>
									</v-col>

								</v-row>
								<EffcIdxAddInfoTab v-if="item.id == 'EffcIdxAddInfoTab'" :parentPrgmId="myPrgmId"
									:innerTabGridInfo="{ tab, idx }" />
							</v-tab-item>
						</v-tabs-items>
					</div>
				</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 Buttons from '~/components/common/button/Buttons';
import SelectBlocMstr from '@/components/common/select/SelectBlocMstr';
import selectCodeList from '@/components/common/select/selectCodeList';
import SelectReadObj from '@/components/common/select/SelectReadObj';
import InputText from '@/components/common/input/InputText';
import EffcIdxAddInfoTab from '@/components/pages/ems/EffcIdxInfo/EffcIdxAddInfoTab';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import SelectBox from '@/components/common/select/SelectBox';
import CheckBox from '~/components/common/checkbox/CheckBox';
import EqpmCalcPop from '~/components/common/modal/EqpmCalcPop';
import TextArea from '@/components/common/form/TextArea';

let myTitle;
// const myPrgmId = "PRG0012";
let myPrgmId;
export default {
	mixins: [mixinGlobal, resize],
	async asyncData(context) {
		const myState = context.store.state;
		// context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
		// myTitle = myState.activeMenuInfo.menuNm;
		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: {
		BtnSearch,
		Buttons,
		SelectBlocMstr,
		selectCodeList,
		SelectReadObj,
		InputText,
		Grid,
		EffcIdxAddInfoTab,
		SelectBox,
		CheckBox,
		TextArea,
		EqpmCalcPop,
	},
	data() {
		return {
			myPrgmId: myPrgmId,
			gridName: 'effcIdxGrid',
			tab: null,
			items: [
				{ name: '상세정보', id: 'EffcIdxInfoTab', disabledFlag: false },
				{
					name: '연결정보',
					id: 'EffcIdxAddInfoTab',
					disabledFlag: false,
				},
			],
			loadGrid: true,
			dataPathExample: {
				"effcIdxGrid": {
					data: [
						{
							"effcIdxId": "E001",
							"effcIdxNm": "에너지 소비 효율",
							"effcKind": "환경"
						},
						{
							"effcIdxId": "E002",
							"effcIdxNm": "작업 시간 대비 생산량",
							"effcKind": "생산성"
						},
						{
							"effcIdxId": "E003",
							"effcIdxNm": "장비 가동률",
							"effcKind": "운영"
						},
						{
							"effcIdxId": "E004",
							"effcIdxNm": "불량률",
							"effcKind": "품질"
						},
						{
							"effcIdxId": "E005",
							"effcIdxNm": "재고 회전율",
							"effcKind": "물류"
						}
					]
					,
					column: [
						{
							header: '효율지표 ID',
							name: 'effcIdxId',
							align: 'center',
							// hidden:true
						},
						{
							header: '효율지표명',
							name: 'effcIdxNm',
							align: 'left',
							minWidth: 150,
							// hidden:true
						},

						{
							header: '효율지표종류',
							name: 'effcKind',
							align: 'left',
							// hidden: true,
						},
						// { header: '등록 사용자', name: 'regUserNo', hidden: true },
						// { header: '등록 일자', name: 'regDttm', hidden: true },
						// { header: '수정 사용자', name: 'procUserNo', hidden: true },
						// { header: '수정 일자', name: 'procDttm', hidden: true },
					],

				}
			},
			initFlag: false,
			selectValueList01: [],
			selectValueList02: [],
			selectValueList03: [],
			selectValueList04: [],
			selectValueList05: [],
			selectValueList06: [],
			selectValueList07: [],
			effcIdxIdList01: [],
			effcIdxIdList02: [],
			selectValue01: null,
			selectValue02: null,
			selectValue03: null,
			selectValue04: null,
			selectValue05: null,
			selectValue06: null,
			selectValue07: null,
			calcItem: {
				valueNm: 'calcProc',
				valueNm2: 'argCnt',
				disabled: true,
				required: true,
			},
			calcDescItem: {
				valueNm: 'calcDesc',
				disabled: true,
				required: true,
				label: '계산설명',
				cols: 12,
				textCols: 12,
			},
			effcIdxId2Disabled: true,
			effcIdxId3Disabled: true,
			checkCalc: false,
			thisArgCnt: '',
			isInfoTabDisabled: false,
			effcKindInitData: null,
		};
	},
	computed: {
		// ...mapState({
		//   pageData: state => state.pageData[myPrgmId]
		// }),
		chkIsFind() {
			// 조회 플래그
			return this.pageData.isFind;
		},
		chkSearchEffcIdxNm() {
			return this.pageData.searchEffcIdxNm;
		},
		selectedCommCdData() {
			return this.pageData.selectedCommCdData;
		},
		effcIdxId() {
			return this.pageData.effcIdxId;
		},
		effcIdxNm() {
			return this.pageData.effcIdxNm;
		},
		unit() {
			return this.pageData.unit;
		},
		useFg() {
			return this.pageData.useFg;
		},
		upTotMeth() {
			return this.pageData.upTotMeth;
		},
		aplyMinRang() {
			return this.pageData.aplyMinRang;
		},
		effcKind() {
			return this.pageData.effcKind;
		},
		argCnt() {
			return this.pageData.argCnt;
		},
		calcProc() {
			return this.pageData.calcProc;
		},
		calcDesc() {
			return this.pageData.calcDesc;
		},
		effcIdxId1() {
			return this.pageData.effcIdxId1;
		},
		effcIdxId2() {
			return this.pageData.effcIdxId2;
		},
		effcIdxId3() {
			return this.pageData.effcIdxId3;
		},
		sortSeq() {
			return this.pageData.sortSeq;
		},
		initedFlag() {
			return (
				this.pageData.aplyMinRangList.length > 0 &&
				this.pageData.upTotMethList.length > 0 &&
				this.pageData.effcKindList.length > 0 &&
				this.pageData.unitList.length > 0
			);
		},
		tabSaveCheck() {
			return this.pageData.tabSaveCheck;
		},
	},
	watch: {
		initFlag(val) {
			// if(val)
			// this.search();
		},
		checkCalc(val) {
			if (val) {
				this.effcIdxId2Disabled = true;
				this.effcIdxId3Disabled = true;
			}
		},
		selectValue01(val) {
			this.setPageData({
				aplyMinRang: val,
			});
		},
		selectValue02(val) {
			this.setPageData({
				upTotMeth: val,
			});
		},
		selectValue03(val) {
			this.setPageData({
				effcKind: val,
			});
			if (val == 'PYSCL' || val == 'GD_IDX') {
				this.isInfoTabDisabled = false;
			} else {
				this.isInfoTabDisabled = true;
			}
			if (this.pageData.rowGridSelectData.rowStat == 'I') {
				this.isInfoTabDisabled = true;
			}
		},
		selectValue04(val) {
			this.setPageData({
				unit: val,
			});
		},
		selectValue05(val) {
			// console.log("cehckCalc", this.checkCalc);
			// console.log("effcKind : ", this.pageData.effcKind)
			// if(!this.checkCalc){
			this.setPageData({
				effcIdxId1: val,
			});
			// }
			this.selectValue06 = null;
			this.setSelectValueList06(val);

			if (val == null) {
				this.effcIdxId2Disabled = true;
				this.effcIdxId3Disabled = true;
			} else {
				this.effcIdxId2Disabled = false;
			}
		},
		selectValue06(val) {
			// if(!this.checkCalc){
			this.setPageData({
				effcIdxId2: val,
			});
			// }
			if (val == null || this.thisArgCnt <= 2) {
				this.effcIdxId3Disabled = true;
			} else {
				this.effcIdxId3Disabled = false;
			}
			// // this.selectValue07 = null;
			this.setSelectValueList07(val);
			// }
		},
		selectValue07(val) {
			// if(!this.checkCalc){
			this.setPageData({
				effcIdxId3: val,
			});
			// }
		},
		async initedFlag(val) {
			if (val) {
				await this.init();
			}
		},
		chkIsFind(val) {
			if (val) this.search();
		},
		effcIdxId(val) {
			// const isSameData = this.compareData('effcIdxId',val);
			// if(!isSameData){
			const dt = {
				columnName: 'effcIdxId',
				value: val,
			};
			this.$refs[this.gridName].editingFinish(dt);
			// }
		},
		argCnt(val) {
			if (this.initFlag) {
				const dt = {
					columnName: 'argCnt',
					value: val,
				};
				this.$refs[this.gridName].editingFinish(dt);
				if (val < 1) {
					this.effcIdxId2Disabled = true;
					this.effcIdxId3Disabled = true;
					this.selectValue06 = null;
					this.selectValue07 = null;
				} else if (val == 2) {
					this.selectValue07 = null;
					this.effcIdxId3Disabled = true;
				} else if (val == 3) {
					if (this.selectValue05 != null) {
						this.effcIdxId2Disabled = false;
					}
					if (this.selectValue06 != null) {
						this.effcIdxId3Disabled = false;
					}
				}
				this.thisArgCnt = val;
			}
		},
		effcIdxNm(val) {
			const dt = {
				columnName: 'effcIdxNm',
				value: val,
			};
			this.$refs[this.gridName].editingFinish(dt);
		},
		unit(val) {
			if (this.initFlag) {
				const dt = {
					columnName: 'unit',
					value: val,
				};
				this.$refs[this.gridName].editingFinish(dt);
			}
		},
		useFg(val) {
			const dt = {
				columnName: 'useFg',
				value: val ? '1' : '0',
			};
			this.$refs[this.gridName].editingFinish(dt);
		},
		upTotMeth(val) {
			if (this.initFlag) {
				const dt = {
					columnName: 'upTotMeth',
					value: val,
				};
				this.$refs[this.gridName].editingFinish(dt);
			}
		},
		aplyMinRang(val) {
			if (this.initFlag) {
				const dt = {
					columnName: 'aplyMinRang',
					value: val,
				};
				this.$refs[this.gridName].editingFinish(dt);
			}
		},
		effcKind(val) {
			if (this.initFlag) {
				const dt = {
					columnName: 'effcKind',
					value: val,
				};
				this.$refs[this.gridName].editingFinish(dt);
			}
			if (val == 'CALC') {
				this.checkCalc = false;
				this.calcItem.disabled = false;
				this.calcDescItem.disabled = false;
			} else {
				//   console.log("effcKind Val : ", val);
				this.selectValue05 = null;
				this.selectValue06 = null;
				this.selectValue07 = null;
				this.checkCalc = true;
				this.calcItem.disabled = true;
				this.calcDescItem.disabled = true;
				this.setPageData({
					rowGridSelectData: {
						...this.pageData.rowGridSelectData,
						calcProc: null,
						argCnt: null,
						calcDesc: null,
					},
					argCnt: null,
					calcProc: null,
					calcDesc: null,
				});
			}
		},
		calcProc(val) {
			if (this.initFlag) {
				// const isSameData = this.compareData('calcProc',val);
				// if(!isSameData){
				const dt = {
					columnName: 'calcProc',
					value: val,
				};
				this.$refs[this.gridName].editingFinish(dt);

				this.setPageData({
					rowGridSelectData: {
						...this.pageData.rowGridSelectData,
						calcProc: val,
					},
				});
			}
		},
		calcDesc(val) {
			if (this.initFlag) {
				// const isSameData = this.compareData('calcDesc',val);
				// if(!isSameData){
				const dt = {
					columnName: 'calcDesc',
					value: val,
				};
				this.$refs[this.gridName].editingFinish(dt);

				// }
			}
		},
		effcIdxId1(val) {
			const dt = {
				columnName: 'effcIdxId1',
				value: val,
			};
			this.$refs[this.gridName].editingFinish(dt);
		},
		effcIdxId2(val) {
			const dt = {
				columnName: 'effcIdxId2',
				value: val,
			};
			this.$refs[this.gridName].editingFinish(dt);
		},
		effcIdxId3(val) {
			const dt = {
				columnName: 'effcIdxId3',
				value: val,
			};
			this.$refs[this.gridName].editingFinish(dt);
		},
		sortSeq(val) {
			const dt = {
				columnName: 'sortSeq',
				value: val,
			};
			this.$refs[this.gridName].editingFinish(dt);
		},
		tabSaveCheck(val) {
			if (val) {
				this.btnActions('save');
			}
		},
	},
	async beforeCreate() {
		myPrgmId = this.$route.query.prgmId;
		await this.$store.dispatch('chkOpenTabList', {
			key: 'create',
			prgmId: myPrgmId,
			defaultData: defaultData,
		});
	},
	created() {
		this.getCodeList({
			dataKey: 'aplyMinRang',
			params: {
				commGrpCd: 'EM_APLY_MIN_RANG',
				useFg: '1',
			},
			addAll: false,
		});
		this.getCodeList({
			dataKey: 'upTotMeth',
			params: {
				commGrpCd: 'EM_UP_TOT_METH',
				useFg: '1',
			},
			addAll: false,
		});
		this.getCodeList({
			dataKey: 'effcKind',
			params: {
				commGrpCd: 'EM_EFFC_IDX_KIND',
				useFg: '1',
			},
			addAll: false,
		});

		this.getCodeList({
			dataKey: 'unit',
			params: {
				commGrpCd: 'CM_UNIT',
				useFg: '1',
			},
			addAll: false,
		});

		//
	},
	mounted() { },
	beforeDestroy() {
		this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
	},
	methods: {
		...mapMutations({
			setPageData: 'setPageData',
		}),
		...mapActions({
			getCodeList: 'modules/search/getCodeList',
			getBlocMstrList: 'modules/search/getBlocMstrList',
			getAddInfoList: 'modules/search/getAddInfoList',
			getEnergyList: 'modules/search/getEnergyList',
		}),
		async init() {
			await this.setSelectValueList01();
			await this.setSelectValueList02();
			await this.setSelectValueList03();
			await this.setSelectValueList04();
			await this.gridInit();
			// if (this.$refs[this.gridName].getData().length>0) {
			//     console.log("!!!!!!!!!!")
			//     this.$nextTick(() => {
			//       this.$refs[this.gridName].focus({
			//           rowKey: 0,
			//           setScroll: true,
			//         });
			//     });
			//   }
			// this.search();
		},
		async setSelectValueList01() {
			//적용최소범위 selectBox

			this.selectValueList01 = await this.pageData.aplyMinRangList.map(item => {
				return {
					text: item.commCdNm,
					value: item.commCd,
				};
			});
			this.selectValue01 = this.pageData.aplyMinRang;
		},
		async setSelectValueList02() {
			//상위집계방법 selectBox

			this.selectValueList02 = await this.pageData.upTotMethList.map(item => {
				return {
					text: item.commCdNm,
					value: item.commCd,
				};
			});
			this.selectValue02 = this.pageData.upTotMeth;
		},
		async setSelectValueList03() {
			//효율지표종류 selectBox

			this.selectValueList03 = await this.pageData.effcKindList.map(item => {
				return {
					text: item.commCdNm,
					value: item.commCd,
				};
			});
			this.selectValue03 = this.pageData.effcKind;
		},
		async setSelectValueList04() {
			//단위 selectBox

			this.selectValueList04 = await this.pageData.unitList.map(item => {
				return {
					text: item.commCdNm,
					value: item.commCd,
				};
			});
			this.selectValue04 = this.pageData.unit;
		},
		async setSelectValueList(res) {
			//효율지표ID1 selectBox
			var tempList = this.$refs[this.gridName].getData();
			tempList = tempList.filter(item => {
				if (item.effcIdxId != res.effcIdxId && item.effcKind != 'CALC') {
					return item;
				}
			});
			tempList.unshift({
				effcIdxNm: '',
				effcIdxId: null,
			});

			this.selectValueList05 = await tempList.map(item => {
				return {
					text: item.effcIdxNm,
					value: item.effcIdxId,
				};
			});

			this.selectValue05 = res.effcIdxId1;

			this.effcIdxIdList01 = tempList;

			if (tempList.length > 1 && this.selectValue05 != null) {
				this.effcIdxId2Disabled = false;
			} else {
				this.effcIdxId2Disabled = true;
			}

			tempList = tempList.filter(item => {
				if (item.effcIdxId != res.effcIdxId1) {
					return item;
				}
			});

			this.selectValueList06 = await tempList.map(item => {
				return {
					text: item.effcIdxNm,
					value: item.effcIdxId,
				};
			});

			this.selectValue06 = res.effcIdxId2;

			tempList = tempList.filter(item => {
				if (item.effcIdxId != res.effcIdxId2) {
					return item;
				}
			});

			if (tempList.length > 1 && this.selectValue06 != null) {
				this.effcIdxId3Disabled = false;
			} else {
				this.effcIdxId3Disabled = true;
			}

			this.selectValueList07 = await tempList.map(item => {
				return {
					text: item.effcIdxNm,
					value: item.effcIdxId,
				};
			});

			this.selectValue07 = res.effcIdxId3;
			if (res.argCnt == 1) {
				this.effcIdxId2Disabled = true;
				this.effcIdxId3Disabled = true;
				this.selectValue06 = null;
				this.selectValue07 = null;
			} else if (res.argCnt == 2) {
				this.selectValue07 = null;
				this.effcIdxId3Disabled = true;
			}
		},
		async setSelectValueList06(effcIdxId) {
			//효율지표ID2 selectBox
			this.selectValue07 = null;
			this.effcIdxIdList02 = this.$refs[this.gridName]
				.getData()
				.filter(item => {
					if (item.effcIdxId != effcIdxId && item.effcKind != 'CALC') {
						return item;
					}
				});

			this.effcIdxIdList02.unshift({
				effcIdxNm: '',
				effcIdxId: null,
			});

			this.selectValueList06 = await this.effcIdxIdList02.map(item => {
				return {
					text: item.effcIdxNm,
					value: item.effcIdxId,
				};
			});

			// console.log("##########",this.selectValue06)
			// if(this.selectValue06 != null && this.selectValueList06.length >1 && this.pageData.effcKind == 'CALC'){
			//   this.effcIdxId3Disabled = false;
			// }else{
			//   this.effcIdxId3Disabled = true;
			// }
			// this.effcIdxIdList02 = res;
			// this.setSelectValueList07(res);
		},
		async setSelectValueList07(effcIdxId) {
			//효율지표ID3 selectBox

			var effcIdxIdList03 = this.$refs[this.gridName].getData().filter(item => {
				if (
					item.effcIdxId != effcIdxId &&
					item.effcIdxId != this.selectValue05 &&
					item.effcKind != 'CALC' &&
					item.effcIdxId1 != this.selectValue05 &&
					item.effcIdxId2 != effcIdxId
				) {
					return item;
				}
			});

			effcIdxIdList03.unshift({
				effcIdxNm: '',
				effcIdxId: null,
			});

			this.selectValueList07 = await effcIdxIdList03.map(item => {
				return {
					text: item.effcIdxNm,
					value: item.effcIdxId,
				};
			});
			// this.selectValue07 = res.effcIdxId3;
		},
		async gridInit() {
			const gridHeight = this.$refs.gridParent.offsetHeight - 30;
			const gridWidth = this.$refs.gridParent.offsetWidth / 3;

			const myOptions = {
				columnOptions: {
					resizable: true,
				},
			};
			this.setGridOption({
				gridKey: this.gridName,
				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
			});

			const _this = this;
			const myColumns = [
				{
					header: '효율지표 ID',
					name: 'effcIdxId',
					align: 'center',
					// hidden:true
				},
				{
					header: '효율지표명',
					name: 'effcIdxNm',
					align: 'left',
					minWidth: 150,
					// hidden:true
				},
				{
					header: '아규먼트갯수',
					name: 'argCnt',
					width: 150,
					align: 'center',
					hidden: true,
				},
				{
					header: '단위',
					name: 'unit',
					width: 150,
					align: 'center',
					hidden: true,
				},
				{
					header: '사용여부',
					name: 'useFg',
					width: 150,
					align: 'center',
					hidden: true,
				},
				{
					header: '상위집계방법',
					name: 'upTotMeth',
					width: 150,
					align: 'center',
					hidden: true,
				},
				{
					header: '적용최소범위',
					name: 'aplyMinRang',
					width: 150,
					align: 'center',
					hidden: true,
				},
				{
					header: '효율지표종류',
					name: 'effcKind',
					align: 'left',
					formatter({ value }) {
						let retVal = '';
						const newValue = _this.pageData.effcKindList.filter(
							item => item.commCd == value,
						);
						if (newValue.length > 0) {
							retVal = newValue[0].commCdNm;
						}
						return retVal;
					},
					// hidden: true,
				},
				{
					header: '계산프로시져',
					name: 'calcProc',
					width: 150,
					align: 'center',
					hidden: true,
				},
				{
					header: '계산설명',
					name: 'calcDesc',
					width: 150,
					align: 'center',
					hidden: true,
				},
				{
					header: '효율지표ID1',
					name: 'effcIdxId1',
					width: 150,
					align: 'center',
					hidden: true,
				},
				{
					header: '효율지표ID2',
					name: 'effcIdxId2',
					width: 150,
					align: 'center',
					hidden: true,
				},
				{
					header: '효율지표ID3',
					name: 'effcIdxId3',
					width: 150,
					align: 'center',
					hidden: true,
				},
				{
					header: '정렬순번',
					name: 'sortSeq',
					width: 150,
					align: 'center',
					hidden: true,
				},
				// { header: '등록 사용자', name: 'regUserNo', hidden: true },
				// { header: '등록 일자', name: 'regDttm', hidden: true },
				// { header: '수정 사용자', name: 'procUserNo', hidden: true },
				// { header: '수정 일자', name: 'procDttm', hidden: true },
			];

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

			await this.getRowGridData();
		},
		async search() {
			await this.getRowGridData();
			await this.setPageData({
				isFind: false,
			});
		},
		async getRowGridData() {
			this.loadGrid = false;

			var res = await this.postApiReturn({
				apiKey: 'selectEqpmEffcIdx',
				resKey: 'eqpmEffcIdxData',
				sendParam: {
					effcIdxNm: this.pageData.searchEffcIdxNm,
				},
			});

			var newRes = [];
			if (res.length > 0) {
				newRes = res.map(item => {
					return {
						...item,
						rowStat: null,
					};
				});
			}

			this.setGridData({
				gridKey: this.gridName,
				value: newRes,
			});

			this.loadGrid = true;
			this.$nextTick(() => {
				let rowGridData = {};
				if (this.pageData.rowGridSelectData != null) {
					// grid Row에서 pk값으로 설정 -> effcIdxId
					let lastGridRowPk = this.pageData.rowGridSelectData.effcIdxId;
					let gridData = this.$refs[this.gridName].getData();
					rowGridData = gridData.filter(item => {
						return item.effcIdxId == lastGridRowPk;
					})[0];
				}
				if (newRes.length > 0) {
					try {
						this.$refs[this.gridName].focus({
							//rowKey: 0,
							rowKey:
								this.pageData.rowGridSelectKey == '' ||
									this.pageData.rowGridSelectKey == null
									? 0
									// : this.pageData.rowGridSelectKey ==
									//   this.$refs[this.gridName].getData().length - 1
									// ? this.pageData.rowGridSelectKey
									: rowGridData != undefined
										? rowGridData.rowKey
										: 0,
							setScroll: true,
						});
					} catch (error) {
						console.log('error[nextTick grid] : ', error);
					}
				}
				this.initFlag = true;

				//계산설명 textArea 높이조절
				var tAreaElement = document.querySelector(
					'#app > div > div > main > div > div > div > div > div.router-alive > div > div:nth-child(2) > div.col.col-9 > div > div.px-5 > div.v-window.py-6.v-item-group.theme--dark.v-tabs-items > div > div > div > div.py-2.col.col-12 > div > div.col.col-7 > div > div > div.v-input__slot > div > textarea',
				);
				if (tAreaElement) {
					document.querySelector(
						'#app > div > div > main > div > div > div > div > div.router-alive > div > div:nth-child(2) > div.col.col-9 > div > div.px-5 > div.v-window.py-6.v-item-group.theme--dark.v-tabs-items > div > div > div > div.py-2.col.col-12 > div > div.col.col-7 > div > div > div.v-input__slot > div > textarea',
					).style.height = '130px';
				}
			});
		},
		async getRowData(data) {
			this.rowKey = data.rowKey;
			if (data.effcKind == 'CALC') {
				this.checkCalc = false;
				this.calcItem.disabled = false;
				this.calcDescItem.disabled = false;
			} else {
				this.checkCalc = true;
				this.calcItem.disabled = true;
				this.calcDescItem.disabled = true;
			}
			// this.selectValue05= null;

			// this.setPageData({
			// 	rowGridSelectKey: data.rowKey,
			// 	rowGridSelectData: data,
			// });
			if (data.effcKind == 'PYSCL' || data.effcKind == 'GD_IDX') {
				this.isInfoTabDisabled = false;
			} else {
				if (this.tab == 1) {
					this.tab = 0;
				}
				this.isInfoTabDisabled = true;
			}

			this.selectValue01 = data.aplyMinRang;
			this.selectValue02 = data.upTotMeth;
			this.selectValue03 = data.effcKind;
			this.selectValue04 = data.unit;
			this.setPageData({
				rowGridSelectKey: data.rowKey,
				rowGridSelectData: data,
				selectedCommCdData: data,
				effcIdxId: data.effcIdxId,
				effcIdxNm: data.effcIdxNm,
				unit: data.unit,
				useFg: data.useFg == '1' ? true : false,
				upTotMeth: data.upTotMeth,
				aplyMinRang: data.aplyMinRang,
				effcKind: data.effcKind,
				calcProc: data.calcProc,
				calcDesc: data.calcDesc,
				effcIdxId1: data.effcIdxId1,
				effcIdxId2: data.effcIdxId2,
				effcIdxId3: data.effcIdxId3,
				argCnt: data.argCnt,
				sortSeq: data.sortSeq,
				tabSaveCheck: false,
			});
			this.effcKindInitData = data.effcKind;
			this.setSelectValueList(data);

			// this.selectValue05= null;

			// console.log("data : ", data);
		},
		async btnActions(action) {
			let dataArr = [];
			switch (action) {
				case 'add':
					const defaultRow = {
						effcIdxId: null,
						effcIdxNm: '',
						unit: this.selectValueList04[0].value,
						useFg: '1',
						upTotMeth: this.selectValueList02[0].value,
						aplyMinRang: this.selectValueList01[0].value,
						effcKind: this.selectValueList03[0].value,
						calcProc: '',
						calcDesc: '',
						effcIdxId1: null,
						effcIdxId2: null,
						effcIdxId3: null,
						sortSeq: '',
						argCnt: '',
						rowStat: 'I',
					};

					this.$refs[this.gridName].addRow(defaultRow);

					break;

				case 'remove':
					var removeCheck = true;
					if (this.pageData.rowGridSelectData.rowStat != 'I') {
						this.$refs[this.gridName].getData().filter(item => {
							if (
								item.effcIdxId1 == this.pageData.rowGridSelectData.effcIdxId ||
								item.effcIdxId2 == this.pageData.rowGridSelectData.effcIdxId ||
								item.effcIdxId3 == this.pageData.rowGridSelectData.effcIdxId
							) {
								removeCheck = false;
							}
						});
					}
					if (removeCheck) {
						this.$refs[this.gridName].removeRow();
					} else {
						alert('효율지표가 사용중 입니다');
					}

					break;

				case 'save':
					dataArr = this.$refs[this.gridName].save();
					if (dataArr.length > 0) {
						var validCheck = true;
						dataArr.map(stat => {
							if (stat.rowStat != 'D')
								dataArr.forEach(item => {
									if (
										validationCheck(
											item.effcIdxNm,
											'효율지표명을 입력해주세요',
										) ||
										validationCheck(
											item.aplyMinRang,
											'적용최소범위를 선택해주세요',
										) ||
										validationCheck(
											item.upTotMeth,
											'상위집계방법을 선택해주세요',
										) ||
										validationCheck(
											item.effcKind,
											'효율지표종류를 선택해주세요',
										) ||
										validationCheck(item.unit, '단위를 선택해주세요') ||
										validationCheck(item.sortSeq, '정렬순번을 입력해주세요') ||
										validationCheck(
											item.calcProc,
											'계산코드를 선택해주세요',
											item.effcKind == 'CALC' &&
											(item.calcProc == '' || item.calcProc == null),
										) ||
										validationCheck(
											item.calcDesc,
											'계산설명을 입력해주세요',
											item.effcKind == 'CALC' &&
											(item.calcDesc == '' || item.calcDesc == null),
										) ||
										validationCheck(
											item.effcIdxId1,
											'효율지표ID1을 선택해주세요',
											item.effcKind == 'CALC' &&
											(item.effcIdxId1 == '' || item.effcIdxId1 == null),
										) ||
										validationCheck(
											item.effcIdxId2,
											'효율지표ID2를 입력해주세요',
											item.effcKind == 'CALC' &&
											item.argCnt > 1 &&
											item.effcIdxId1 != null &&
											item.effcIdxId1 != null &&
											(item.effcIdxId2 == '' || item.effcIdxId2 == null),
										) ||
										validationCheck(
											item.effcIdxId3,
											'효율지표ID3을 입력해주세요',
											item.effcKind == 'CALC' &&
											item.argCnt > 2 &&
											item.effcIdxId2 != null &&
											(item.effcIdxId3 == '' || item.effcIdxId3 == null),
										)
										// item.effcKind == 'CALC' ? (item.calcProc == '' || item.calcProc == null) ? true : false : false
										// item.effcKind == 'CALC' ? (item.calcDesc == '' || item.calcDesc == null ? true : false) : false ||
										// item.effcKind == 'CALC' ? (item.effcIdxId1 == '' || item.effcIdxId1 == null ? true : false) : false
									) {
										// console.log("######", item)
										validCheck = false;
										// alert('필수 입력값을 입력해주세요.');
									} else {
										validCheck = true;
									}
								});
						});

						if (validCheck) {
							const sendParam = {
								datas: {
									dsEffcIdxInfo: dataArr.map(item => ({
										...item,
										useFg: item.useFg,
										effcKindCheck:
											item.effcKind == this.effcKindInitData ? false : true,
										sortSeq: parseInt(item.sortSeq),
									})),
								},
								params: {},
							};
							await this.postUpdateApi({
								apiKey: 'saveEffcIdx',
								sendParam: sendParam,
							});

							this.$nextTick(() => {
								this.setPageData({ isFind: true, tabSaveCheck: false });
							});
						}
					} else {
						if (!this.pageData.tabSaveCheck) {
							alert('저장할 내용이 없습니다.');
						}
					}
					break;

				default:
					break;
			}
		},
	},
};

function validationCheck(item, message, conditional) {
	// if (message == '정렬순번을 입력해주세요') {
	// }
	if (conditional == null) {
		if (item == null || item == '') {
			alert(message);
			return true;
		} else {
			return false;
		}
	} else {
		if (conditional) {
			alert(message);
			return true;
		} else {
			return false;
		}
	}
}

const defaultData = {
	/* 검색옵션 */
	searchEffcIdxNm: '',
	selectedCommCdData: null,
	effcIdxId: '',
	effcIdxNm: '',
	unit: '',
	unitList: [],
	useFg: '0',
	useFgList: [],
	upTotMeth: '',
	upTotMethList: '',
	aplyMinRang: '',
	aplyMinRangList: [],
	effcKind: '',
	effcKindList: '',
	calcProc: '',
	calcDesc: '',
	argCnt: '',
	effcIdxId1: '',
	effcIdxId2: '',
	effcIdxId3: '',
	sortSeq: '',
	tabSaveCheck: false,
	modalData2: {},
	infoEqpmGrpId: null,
	infoEqpmKindNm: null,
	infoPysclQtyId: null,
	infoPysclQtyCd: null,
	infoPysclQtyNm: null,
	infoPysclQtyTpNm: null,
	infoGdIdxId: null,
	infoGdIdxNm: null,
	infoTotMeth: null,
	infoTotMethNm: null,
	infoEqpmKindId: null,
	// 선택된 그룹코드 상세 데이터
	rowGridSelectKey: 0,
	rowGridSelectData: null,

	isFind: false, // true 경우 조회, 조회버튼도 이 값으로 연동 예정
	/* data 세팅 */
	// 로컬 gridName 값과 동일한 이름으로 세팅
	effcIdxGrid: {
		data: [],
		column: [], // myColumns,
		option: {}, // myOptions
		defaultRow: {
			effcIdxId: '',
			effcIdxNm: '',
			unit: '',
			useFg: '',
			upTotMeth: '',
			aplyMinRang: '',
			effcKind: '',
			calcProc: '',
			calcDesc: '',
			effcIdxId1: '',
			effcIdxId2: '',
			effcIdxId3: '',
			sortSeq: '',
			argCnt: '',
			rowStat: null,
		},
		buttonAuth: {
			add: true,
			remove: true,
			save: true,
			excel: false,
		},
	},
	effcInfoGrid: {
		data: [],
		column: [],
		option: {},
		defaultRow: {
			eqpmKindId: '',
			eqpmGrpId: '',
			pysclQtyId: '',
			pysclQtyCd: '',
			pysclQtyNm: '',
			pysclQtyTpNm: '',
			upTotMeth: '',
			gdIdxId: '',
			gdidxNm: '',
			rowStat: null,
		},
		buttonAuth: {
			add: true,
			remove: true,
			save: true,
			excel: false,
		},
	},
};
</script>
<style lang="scss" scoped>
.v-input__custom.surface-name fieldset {
	width: 345px;
}
</style>