<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">
							<!-- 설비종류 -->
							<component :is="'SelectBox'" :propsValue="fabSelected" :itemList="fabList" :label="'FAB'"
								@update:propsValue="fabSelected = $event" :labelCols="12" :textCols="12"
								:customClass="'select-large'" />
						</v-col>
						<v-col :cols="3">
							<!-- 설비종류 -->
							<component :is="'SelectBox'" :propsValue="eqpmKindSelected" :itemList="eqpmKindList" :label="'설비종류'"
								@update:propsValue="eqpmKindSelected = $event" :labelCols="12" :textCols="12" :customClass="'select-large'" />
						</v-col>
						<v-col :cols="3">
							<!-- 설비종류 -->
							<component :is="'SelectBox'" :propsValue="eqpmGrpSelected" :itemList="eqpmGrpList" :label="'설비그룹'"
								@update:propsValue="eqpmGrpSelected = $event":labelCols="12" :textCols="12" :customClass="'select-large'" />
						</v-col>
						<v-col :cols="2">
							<!-- 평가 -->
							<component :is="'SelectBox'" :propsValue="selectValue06" :itemList="selectValueList06" :label="'평가'"
								@update:propsValue="selectValue06 = $event" :labelCols="12" :textCols="12" :customClass="'select-large'" />
						</v-col>
					</v-row>
					<v-row align="end" no-gutters>
						<v-col :cols="3">
							<component ref="EqpmSelectPop" :is="'EqpmSelectPop'" :label="'설비'" :valueNm="'eqpmNm'"
								:parentPrgmId="myPrgmId"  :isMulti="true" :fabSelected="fabSelected"
								:eqpmGrpSelected="eqpmGrpSelected" :labelCols="12" :textCols="12" :customClass="'select-large'"/>
						</v-col>
						<v-col :cols="3">
							<!-- 설비종류 -->
							<component :is="'SelectBox'" ref="SelectBox1" :propsValue="selectValue05" :itemList="selectValueList05"
								:label="'가이드명'" @update:propsValue="selectValue05 = $event" :labelCols="12" :textCols="12" :customClass="'select-large'" />
						</v-col>
						<v-col :cols="3">
							<v-row class="search-box" align="center" no-gutters>
								<v-col :cols="12">
									<label for="" class="search-box-label">
										대상일
									</label>
								</v-col>
								<v-col :cols="12">
									<a-range-picker size="large">
										<template #suffixIcon>
											<a-icon type="calendar" />
										</template>
									</a-range-picker>

								</v-col>
							</v-row>
						</v-col>
						<v-col :cols="3" class="text-right">
							<!-- 조회버튼 -->
							<a-button icon="search" type="primary" @click="search()" class="search-button" size="large">조회</a-button>
							<!-- <BtnSearch @click="search" /> -->
						</v-col>
					</v-row>
				</v-card>
			</v-col>
		</v-row>
		<v-row ref="contents" class="mt-4">
			<v-col :cols="12" style="height: 100%">
				<a-card class="p-0" :style="{ border: 'none', borderRadius: '8px' }">
					<div class="d-flex align-center justify-space-between pa-5">
						<v-card-title class="pa-0">설비별 현황 리스트</v-card-title>
					</div>
					<div class="px-5" style="height:calc(100% - 76px)">
						<a-table :columns="columns" :dataSource="filteredData" bordered>
							<template slot="gdIdxNm" slot-scope="text, record">
								<a @click="handleGdIdxNmClick(record)" style="cursor: pointer; color: #1890ff;">
									{{ text }}
								</a>
							</template>
							<template slot="ngCnt" slot-scope="text, record">
								<a @click="handleNgCntClick(record)" style="cursor: pointer; color: #1890ff;">
									{{ text }}
								</a>
							</template>
						</a-table>
					</div>
				</a-card>

			</v-col>
		</v-row>
		<component ref="EnrgEffcEqpmDetailPop" :is="'EnrgEffcEqpmDetailPop'" :parentPrgmId="myPrgmId" />
		<component ref="EnrgEffcGdIdxDetPop" :is="'EnrgEffcGdIdxDetPop'" :parentPrgmId="myPrgmId" />

	</div>

</template>

<script>
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import { mapActions } from 'vuex';
import BtnSearch from '~/components/common/button/BtnSearch';
import SelectBox from '@/components/common/select/SelectBox';
import Utility from '~/plugins/utility';
import EqpmSelectPop from '~/components/common/modal/EqpmSelectPop';
import EnrgEffcEqpmDetailPop from '~/components/common/modal/EnrgEffcEqpmDetailPop';
import EnrgEffcGdIdxDetPop from '~/components/common/modal/EnrgEffcGdIdxDetPop';
import { DatePicker } from 'ant-design-vue';



let myTitle;
let myPrgmId;
let paramsKey;
// let params;
// let routeCheck = false;

export default {
	mixins: [mixinGlobal, resize],
	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;
		myTitle = '효율운전 가이드';
	},
	meta: {
		title: () => {
			return myTitle;
		},
		prgmId: 'PRG0084',
		closable: true,
	},
	components: {
		Utility,
		// Grid,
		SelectBox,
		// Buttons,
		BtnSearch,
		'a-range-picker': DatePicker.RangePicker,
		EnrgEffcEqpmDetailPop,
		EqpmSelectPop,
		EnrgEffcGdIdxDetPop,
	},
	data() {
		return {
			myPrgmId: 'PRG0084',
			selectValue01: null,
			selectValue02: null,
			selectValue03: null,
			selectValue04: { eqpmId: [] },
			selectValue05: null,
			selectValue06: null,
			selectValueList01: [],
			selectValueList02: [],
			selectValueList03: [],
			selectValueList04: [],
			selectValueList05: [],
			selectValueList06: [],
			fabSelected: null,
			eqpmGrpSelected: null,
			eqpmKindSelected: null,
			fabList: [],
			eqpmGrpList: [],
			eqpmKindList: [],
			initedFlag: false,
			loadGrid: false,
			gridName: 'rowGrid',
			popDialog: false,
			eqpmFlag: false,
			eqpmKindFlag: false,
			eqpmGrpFlag: false,
			eqpmGdIdxFlag: false,
			fabFlag: false,
			routeData: {},
			columns: [
				{ title: 'No.', dataIndex: 'No', key: 'No', align: 'center' },
				{ title: 'FAB', dataIndex: 'fab', key: 'fab', align: 'center' },
				{ title: '설비그룹', dataIndex: '설비그룹', key: '설비그룹' },
				{ title: '설비명', dataIndex: '설비명', key: '설비명' },
				{ title: '가이드명', dataIndex: '가이드명', key: 'gdIdxNm', scopedSlots: { customRender: 'gdIdxNm' } },
				{ title: '주의', dataIndex: '주의', key: '주의' },
				{ title: '경고', dataIndex: '경고', key: '경고' },
				{ title: '가이드값', dataIndex: '가이드값', key: '가이드값' },
				{ title: '평가', dataIndex: '평가', key: '평가' },
				{ title: '절감가이드 방법', dataIndex: '절감가이드방법', key: '절감가이드방법' },
				{ title: 'NG발생건수', dataIndex: 'NG발생건수', key: 'ngCnt', scopedSlots: { customRender: 'ngCnt' } },
			],
			filteredData: [

			],
			data: [
				{
					No: 1,
					fab: 'FAB001',
					설비그룹: '냉동기고온',
					설비명: 'UT_HT_CH101',
					가이드명: 'C.O.P',
					주의: 3,
					경고: 2,
					가이드값: 7.55,
					평가: 'NG',
					절감가이드방법: '냉동기 C.O.P 효율운전 점검 필요',
					NG발생건수: 1,
				},
				{
					No: 2,
					fab: 'FAB002',
					설비그룹: '냉동기고온',
					설비명: 'UT_HT_CH102',
					가이드명: '전류부하율 평균 편차',
					주의: 3,
					경고: 5,
					가이드값: -1.421,
					평가: 'NG',
					절감가이드방법: '냉동기 전류부하율 추가 상승 검토 필요',
					NG발생건수: 5,
				},
				{
					No: 3,
					fab: 'FAB001',
					설비그룹: '공조기',
					설비명: 'AHU_01',
					가이드명: '온도 편차',
					주의: 1,
					경고: 0,
					가이드값: 0.5,
					평가: 'OK',
					절감가이드방법: '정상 운전 중',
					NG발생건수: 0,
				},
				{
					No: 4,
					fab: 'FAB003',
					설비그룹: '보일러',
					설비명: 'BLR_01',
					가이드명: '연료 효율',
					주의: 2,
					경고: 1,
					가이드값: 85.2,
					평가: '주의',
					절감가이드방법: '연료 효율 점검 필요',
					NG발생건수: 2,
				},
				{
					No: 5,
					fab: 'FAB002',
					설비그룹: '냉동기저온',
					설비명: 'LT_CH201',
					가이드명: 'C.O.P',
					주의: 4,
					경고: 3,
					가이드값: 6.8,
					평가: 'NG',
					절감가이드방법: '저온 냉동기 효율 개선 필요',
					NG발생건수: 3,
				},
				{
					No: 6,
					fab: 'FAB001',
					설비그룹: '공조기',
					설비명: 'AHU_02',
					가이드명: '전력 사용량',
					주의: 0,
					경고: 0,
					가이드값: 120,
					평가: 'OK',
					절감가이드방법: '정상 운전 중',
					NG발생건수: 0,
				},
				{
					No: 7,
					fab: 'FAB003',
					설비그룹: '냉동기고온',
					설비명: 'UT_HT_CH103',
					가이드명: 'C.O.P',
					주의: 2,
					경고: 2,
					가이드값: 7.1,
					평가: '주의',
					절감가이드방법: '냉동기 효율 점검 필요',
					NG발생건수: 1,
				},
				{
					No: 8,
					fab: 'FAB002',
					설비그룹: '보일러',
					설비명: 'BLR_02',
					가이드명: '온도 편차',
					주의: 1,
					경고: 1,
					가이드값: 1.2,
					평가: '주의',
					절감가이드방법: '온도 센서 점검 필요',
					NG발생건수: 1,
				},
				{
					No: 9,
					fab: 'FAB001',
					설비그룹: '냉동기저온',
					설비명: 'LT_CH202',
					가이드명: '전류부하율 평균 편차',
					주의: 3,
					경고: 4,
					가이드값: -2.1,
					평가: 'NG',
					절감가이드방법: '전류부하율 이상 감지',
					NG발생건수: 4,
				},
				{
					No: 10,
					fab: 'FAB003',
					설비그룹: '공조기',
					설비명: 'AHU_03',
					가이드명: '전력 사용량',
					주의: 0,
					경고: 0,
					가이드값: 110,
					평가: 'OK',
					절감가이드방법: '정상 운전 중',
					NG발생건수: 0,
				},
				{
					No: 11,
					fab: 'FAB002',
					설비그룹: '냉동기고온',
					설비명: 'UT_HT_CH104',
					가이드명: 'C.O.P',
					주의: 2,
					경고: 3,
					가이드값: 6.9,
					평가: '주의',
					절감가이드방법: '냉동기 효율 점검 필요',
					NG발생건수: 2,
				},
				{
					No: 12,
					fab: 'FAB001',
					설비그룹: '보일러',
					설비명: 'BLR_03',
					가이드명: '연료 효율',
					주의: 1,
					경고: 1,
					가이드값: 88.5,
					평가: 'OK',
					절감가이드방법: '정상 운전 중',
					NG발생건수: 0,
				}
			]
			// filtered data to show in the table

		};
	},
	computed: {
		chkIsFind() {
			// 조회 플래그
			return this.pageData.isFind;
		},
		fabId() {
			return this.pageData.fabId;
		},
		fabNm() {
			return this.pageData.fabNm;
		},
		eqpmKindId() {
			return this.pageData.eqpmKindId;
		},
		eqpmGrpId() {
			return this.pageData.eqpmGrpId;
		},
		eqpmGrpNm() {
			return this.pageData.eqpmGrpNm;
		},
		fromDt() {
			return this.pageData.fromDt;
		},
		checkedRows() {
			return this.pageData.checkedRows;
		},
		eqpmInfo() {
			return this.pageData.eqpmInfo;
		},
	},
	watch: {
		$route(to, from) {
			// routeCheck=true;
			if (to.query.prgmId == myPrgmId) {
				if (paramsKey != to.params.key) {
					if (to.params.key == undefined) {
					} else {
						// params=to.params;
						paramsKey = to.params.Key;
						document.getElementById('refresh').click();
					}
				}
			}
		},
		chkIsFind(val) {
			if (val) this.search();
		},
		fabId(val) { },
		fabNm(val) { },
		eqpmKindId(val) { },
		eqpmGrpId(val) { },
		eqpmGrpNm(val) { },
		fromDt(val) { },
		async selectValue02(val) {
			if (this.initedFlag) {
				this.setPageData({
					fabId: val,
					eqpmId: [],
					eqpmNm: null,
					eqpmIdList: [],
					// isFind:true
				});
				this.selectValue04 = { eqpmId: [] };
				// await this.getEqpm();
				// if(this.eqpmFlag){
				//   this.setPageData({ isFind: true });
				//   this.eqpmFlag=false;
				// }
			}
		},
		async selectValue01(val) {
			if (this.initedFlag) {
				this.setPageData({
					eqpmKindId: val,
					eqpmGrpId: null,
					eqpmId: [],
					eqpmNm: null,
					eqpmIdList: [],
				});
				this.selectValue04 = { eqpmId: [] };
				await this.getEqpmGrp();
				// await this.getEqpm(this.selectValueList03);
			}
		},
		async selectValue03(val) {
			if (this.initedFlag) {
				this.setPageData({
					eqpmGrpId: val,
					eqpmId: [],
					eqpmNm: null,
					eqpmIdList: [],
				});
				this.selectValue04 = { eqpmId: [] };
				// await this.getEqpm();
				// if(this.eqpmFlag){
				//   this.setPageData({ isFind: true });
				this.eqpmGrpFlag = true;
				// }
				// await this.getEqpm();
				await this.getGdIdx();
			}
		},
		async selectValue06(val) {
			if (this.initedFlag) {
				this.setPageData({
					eqpmGrpId: null,
					eqpmId: [],
					eqpmNm: null,
					eqpmIdList: [],
					isFind: true,
				});
			}
		},
		checkedRows(val) {
			if (this.initedFlag) {
				var temp = this.pageData.checkedRows.map(item => {
					return item.eqpmId;
				});
				this.selectValue04 = { eqpmId: temp };
			}
		},
		eqpmInfo(val) {
			if (this.initedFlag) {
				this.setPageData({ eqpmId: val.eqpmId, eqpmNm: val.eqpmNm });
			}
		},

		// async selectValue04(val) {
		// 	if (this.initedFlag) {
		//     console.log("val : ",val)
		// 		this.setPageData({ isFind: true });
		// 	}
		// },
		selectValue04: {
			deep: true,
			handler(newVal, oldVal) {
				this.setPageData({ isFind: true });
			},
		},
		async selectValue05(val) {
			if (this.initedFlag) {
				this.setPageData({ isFind: true });
			}
		},
	},
	async beforeCreate() {
		myPrgmId = this.$route.query.prgmId;
		await this.$store.dispatch('chkOpenTabList', {
			key: 'create',
			prgmId: myPrgmId,
			defaultData: defaultData,
		});
	},
	created() {
		var data = this.$route.params;
		// this.setPageData({
		//   eqpmGrpId : data.eqpmGrpId,
		//   eqpmGrpNm : data.eqpmGrpNm,
		//   fabId : data.fabId,
		//   fabNm : data.fabNm,
		//   eqpmKindId : data.eqpmKindId,
		//   fromDt : data.fromDt

		// });
		this.routeData = {
			eqpmGrpId: data.eqpmGrpId,
			eqpmGrpNm: data.eqpmGrpNm,
			fabId: data.fabId,
			fabNm: data.fabNm,
			eqpmKindId: data.eqpmKindId,
			fromDt: data.fromDt,
			okFg: data.okFg
		};
	},
	async mounted() {
		await this.init();
		this.initedFlag = true;
		this.routeData = {};

		this.filteredData = this.data;

	},
	beforeDestroy() {
		// routeCheck=false;
		this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
	},
	methods: {
		...mapActions({
			getCodeList: 'modules/search/getCodeList',
			getBlocMstrList: 'modules/search/getBlocMstrList',
		}),
		handleNgCntClick(record) {

			this.$refs['EnrgEffcEqpmDetailPop'].showDetailModal = true;

		},
		handleGdIdxNmClick(record) {
			this.$refs['EnrgEffcGdIdxDetPop'].showDetailModal = true;
		},
		async init() {
			await this.getFab();
			await this.getEqpmKind();
			await this.getEqpmGrp();
			// await this.getEqpm();
			await this.getGdIdx();
			await this.getOkFg();
			this.filteredData = this.data;

			if (this.routeData.fromDt != null) {
				this.setPageData({
					fromDt: this.routeData.fromDt,
				});
			} else {
				this.setFromDt();
			}
			await this.gridInit();

		},
		search() {
			this.filteredData = this.data.filter(item => {
				return (

					(!this.fabSelected || item.fab === this.fabSelected) &&
					(!this.eqpmGrpSelected || item['설비그룹'] === this.eqpmGrpSelected) &&
					(!this.selectValue06 || item['평가'] === this.selectValue06) &&
					(!this.selectValue05 || item['가이드명'] === this.selectValue05)

				);


			});


		},
		setFromDt() {
			this.pageData.fromDt = Utility.setBeforetDate(
				this.pageData,
				this.pageData.toDt,
				'YYYYMMDD',
			);
			// this.pageData.toDt = Utility.setAftertDate(this.pageData, this.pageData.fromDt, "YYYYMMDD");
		},
		async getEqpmKind() {
			this.eqpmKindList = [
				{ label: 'Etcher', value: 'EQK001' },
				{ label: 'Deposition', value: 'EQK002' },
				{ label: 'Inspection', value: 'EQK003' },
			];

			this.eqpmKindSelected = 'EQK001';
			this.setPageData({
				eqpmKindList: this.eqpmKindList,
				eqpmKindId: this.eqpmKindSelected,
			});
		},
		async getFab() {
			this.fabList = [
				{ label: 'FAB001', value: 'FAB001' },
				{ label: 'FAB002', value: 'FAB002' },
				{ label: 'FAB003', value: 'FAB003' },
			];

			this.setPageData({
				fabIdList: this.fabList,
				fabId: this.fabSelected,
			});
		},
		async getEqpmGrp() {
			//설비그룹

			this.eqpmGrpList = [
				{ label: '냉동기고온', value: '냉동기고온' },
				{ label: '냉동기저온', value: '냉동기저온' },
				{ label: '공조기', value: '공조기' },
				{ label: '보일러', value: '보일러' }
			];

			this.setPageData({
				eqpmGrpId: this.eqpmGrpSelected,
				eqpmGrpIdList: this.eqpmGrpList
			})
		},
		async getEqpm(data) { },
		async getGdIdx() {


			this.selectValueList05 = [
				{ label: 'C.O.P', value: 'C.O.P' },
				{ label: '전류부하율 평균 편차', value: '전류부하율 평균 편차' },
				{ label: '온도 편차', value: '온도 편차' },
				{ label: '연료 효율', value: '연료 효율' },
				{ label: '전력 사용량', value: '전력 사용량' }
			];


			this.setPageData({
				gdIdxIdList: this.selectValueList05,
				gdIdxId: this.selectValue05,
			});
		},
		async getOkFg() {
			this.selectValueList06 = [
				{
					label: '전체',
					value: null,
				},
				{
					label: 'OK',
					value: 'OK',
				},
				{
					label: 'NG',
					value: 'NG',
				},
			];

			if (this.routeData.okFg == null || this.routeData.okFg == '') {
				this.selectValue06 = this.selectValueList06[0].value;
			} else if (this.routeData.okFg != null || this.routeData.okFg != '') {
				this.selectValue06 = this.routeData.okFg;
			}
			this.setPageData({
				okFg: this.selectValue06,
				okFgList: this.selectValueList06,
			});
		},
		async gridInit() {
			const gridHeight = this.$refs.gridParent.offsetHeight - 30;
			// const gridWidth = this.$refs.gridParent.offsetWidth / 2;

			const myOptions = {
				columnOptions: {
					resizable: true,
				},
				rowHeaders: ['rowNum'],
				// heightResizable: true,
				// rowHeight:'auto'
			};
			this.setGridOption({
				gridKey: this.gridName,
				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
			});

			const _this = this;
			const myColumns = [
				{
					header: 'FAB',
					name: 'fabNm',
					align: 'left',
					width: 80,
				},
				{
					header: '설비그룹',
					name: 'eqpmGrpNm',
					width: 130,
				},
				{
					header: '설비id',
					name: 'eqpmId',
					hidden: true,
				},
				{
					header: '설비명',
					name: 'eqpmNm',
					width: 130,
				},
				{
					header: '가이드명',
					name: 'gdIdxId',
					hidden: true,
					// formatter({ value }) {
					// 	let retVal = '';
					// 	const newValue = _this.pageData.gdIdxIdList.filter(
					// 		item => item.value == value,
					// 	);
					// 	if (newValue.length > 0) {
					// 		retVal = newValue[0].text;
					// 	}
					// 	//빈값일때 전체방지
					// 	if (value == '' || value == null) {
					// 		retVal = '';
					// 	}
					// 	return retVal;
					// },
				},
				{
					header: '가이드명',
					name: 'gdIdxNm',
					width: 200,
				},
				{
					header: '주의',
					name: 'careStndVal',
					align: 'right',
					width: 80,
				},
				{
					header: '경고',
					name: 'warnStndVal',
					align: 'right',
					width: 80,
				},
				{
					header: '가이드값',
					name: 'totVal',
					align: 'right',
					width: 120,
				},
				{
					header: '평가',
					name: 'okFg',
					align: 'center',
					width: 80,
				},
				{
					header: '절감가이드 방법',
					name: 'gdMeth',
				},
				{
					header: 'NG발생건수',
					name: 'ngCnt',
					align: 'right',
					width: 80,
				},
			];

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

			// this.loadGrid = true;

			this.getRowGridData();
		},
		async getRowGridData() {
			this.loadGrid = false;

			var res = await this.postApiReturn({
				apiKey: 'selectEnrgEffcEqpmDetlMntr',
				resKey: 'eqpmDetlData',
				sendParam: {
					eqpmId: this.selectValue04.eqpmId,
					eqpmGrpId: this.selectValue03,
					fromDt: this.pageData.fromDt,
					toDt: this.pageData.toDt,
					gdIdxId: this.selectValue05,
					fabId: this.selectValue02,
					eqpmKindId: this.selectValue01,
					okFg: this.selectValue06,
				},
			});
			const mockData = [
				{
					fabNm: 'FAB-A',
					eqpmGrpNm: 'Group-3',
					eqpmId: 'EQPM-001',
					eqpmNm: 'Equipment-1',
					gdIdxId: 'GD-001',
					gdIdxNm: 'Guide-1',
					careStndVal: 43.88,
					warnStndVal: 98.56,
					totVal: 31.62,
					okFg: 'OK',
					gdMeth: 'Method-C',
					ngCnt: 1
				},
				{
					fabNm: 'FAB-C',
					eqpmGrpNm: 'Group-3',
					eqpmId: 'EQPM-002',
					eqpmNm: 'Equipment-2',
					gdIdxId: 'GD-002',
					gdIdxNm: 'Guide-2',
					careStndVal: 42.59,
					warnStndVal: 82.21,
					totVal: 32.61,
					okFg: 'OK',
					gdMeth: 'Method-A',
					ngCnt: 3
				},
				{
					fabNm: 'FAB-A',
					eqpmGrpNm: 'Group-2',
					eqpmId: 'EQPM-003',
					eqpmNm: 'Equipment-3',
					gdIdxId: 'GD-003',
					gdIdxNm: 'Guide-3',
					careStndVal: 36.6,
					warnStndVal: 68.64,
					totVal: 50.99,
					okFg: 'NG',
					gdMeth: 'Method-B',
					ngCnt: 8
				},
				// ... (7 more rows like these)
			]

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

			this.loadGrid = true;
		},
		columnClick(e) {
			var data = this.$refs[this.gridName].gridInstance.invoke(
				'getRow',
				e.rowKey,
			);

			if (e.columnName == 'ngCnt' && e.targetType == 'cell') {
				// if(e.columnName == 'ngCnt' && data.ngCnt > 0){
				this.$refs['EnrgEffcEqpmDetailPop'].popCheck = true;
				this.setPageData({
					rowGridSelectKey: e.rowKey,
					rowGridSelectData: {
						...data,
						fromDt: this.pageData.fromDt,
						toDt: this.pageData.toDt,
					},
				});
			}

			if (e.columnName == 'gdIdxNm' && e.targetType == 'cell') {
				// if(e.columnName == 'ngCnt' && data.ngCnt > 0){
				this.$refs['EnrgEffcGdIdxDetPop'].popCheck = true;
				this.setPageData({
					rowGridSelectKey: e.rowKey,
					rowGridSelectData: {
						...data,
						fromDt: this.pageData.fromDt,
						toDt: this.pageData.toDt,
					},
				});
			}
		},
	},
};

const defaultData = {
	isFind: false,
	fabId: '',
	fabIdList: [],
	fabNm: '',
	eccId: '',
	eqpmInfo: null,
	eccIdList: [],
	eqpmGrpNm: '',
	eqpmGrpId: null,
	eqpmGrpList: [],
	eqpmId: [],
	eqpmNm: null,
	eqpmIdList: [],
	eqpmNm: '',
	eqpmKindId: '',
	gdIdxId: '',
	gdIdxIdList: [],
	checkedRows: [],
	cmCycle: 'CYC_DAY', // 주기
	defaultRange: {
		CYC_DAY: 30,
	},
	calcProc: null,
	calcDesc: null,
	fromDt: '',
	toDt: Utility.setFormatDate(new Date(), 'YYYYMMDD'),
	modalData: {},
	// 선택된 그룹코드 상세 데이터
	rowGridSelectKey: 0,
	rowGridSelectData: null,
	rowGrid: {
		data: [],
		column: [],
		option: {},
		defaultRow: {
			fabNm: '',
			eqpmGrpNm: '',
			eqpmId: null,
			gdIdxId: '',
			careStndVal: '',
			warnStndVal: '',
			totVal: '',
			okFg: '',
			gdMeth: '',
			ngCnt: '',
			rowStat: null,
		},
		buttonAuth: {
			add: false,
			remove: false,
			save: false,
			excel: false,
		},
	},
};
</script>

<style lang="scss">

.custom-search {
	padding: 20px 0;
}

.ant-card-body {
	padding: 0 !important;
}

.ant-table-thead > tr > th, .ant-table-tbody > tr > td {
	padding: 8px;
}

.ant-modal-content .ant-modal-header {
	border-bottom: none;
	border-radius: 8px 8px 0 0;
}

.ant-modal-content {
	border-radius: 8px;
}
</style>
