<template>
	<v-row class="search-box" align="center" no-gutters>
		<v-col v-if="label" :cols="labelCols">
			<label for="" class="search-box-label">
				<v-icon v-if="iconShow" small
					:class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
				{{ label }}
			</label>
		</v-col>
		<v-col :cols="textCols">
			<v-text-field readonly append-icon="" :class="['v-input__custom', customClass]"
				@click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true" :required="required || false"
				:disabled="disabled || false"><template v-slot:append>
					<!-- Custom SVG icon -->
					<v-icon>$icoSearch</v-icon>

				</template></v-text-field>
		</v-col>
		<v-dialog ref="popModal" v-model="dialog" width="800" overlay-color="#000" overlay-opacity="0.8" scrollable>
			<v-card style="height: 100%">
				<v-card-title class="px-5 py-4 d-flex align-center justify-space-between">
					<span class="custom-title-4">설비 선택</span>
					<a-button icon="close" type="text" @click="dialogOpenCloseEvent(dialog)"></a-button>
				</v-card-title>
				<div class="pa-2 pt-0">
					<v-card class="searchFilter">
						<v-row align="end">
							<v-col :cols="3.5">
								<!-- 설비그룹 -->
								<component :is="'SelectBox'" :propsValue="selectValue01" :itemList="selectValueList01"
									:label="'설비그룹'" :disabled="eqpmGrpDisabled"
									@update:propsValue="selectValue01 = $event" :labelCols="12" :textCols="12"
									:iconShow="true" />
							</v-col>
							<v-col :cols="3.5">
								<!-- FAB -->
								<component :is="'SelectBoxMulti'" :propsValue="selectValue02"
									:itemList="selectValueList02" :label="'FAB'" :labelCols="12" :multiple="true"
									:disabled="fabDisabled" @update:propsValue="selectValue02 = $event" :textCols="12"
									:iconShow="true" />
							</v-col>
							<v-col :cols="3.5">
								<v-row>
									<v-col :cols="12" class="py-0">
										<label for="" class="search-box-label">
											<v-icon small :class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
											설비명
										</label>
									</v-col>
									<v-col :cols="12" class="pt-0">
										<v-text-field append-icon="" class="v-input__custom" outlined
											:hide-details="true" v-model="searchWord" @keyup.enter="search"><template
												v-slot:append>
												<!-- Custom SVG icon -->
												<v-icon>$icoSearch</v-icon>

											</template></v-text-field>
									</v-col>

								</v-row>
							</v-col>
							<a-button icon="search" type="primary" @click="search()" class="search-button">조회</a-button>


						</v-row>
					</v-card>

					<!-- <v-row align="center" no-gutters style="margin-top: 14px;">
						<v-col :cols="1">
							<label for="" class="search-box-label">
								<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
								설비명
							</label>
						</v-col>
						<v-col :cols="3">
							<v-text-field append-icon="mdi-magnify" class="v-input__custom" outlined
								:hide-details="true" v-model="searchWord" @keyup.enter="search"></v-text-field>
						</v-col>
					</v-row> -->
				</div>
				<div class="px-5" style="height:429px;">
					<div ref="modalGridParent" class="w100 h100">
						<component :ref="gridName" :is="loadGrid ? 'Grid' : null"
							:dataPath="searchParam.eqpmSelectPopData.eqpmSelectPop" :gridName="gridName"
							:parentPrgmId="parentPrgmId" @getRowsData="getRowData" />
					</div>
				</div>
				<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
					<a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)" class="mr-2">닫기</a-button>
					<a-button :ripple="false" type="primary" @click="setUpdate($event)">확인</a-button>
				</v-card-actions>
			</v-card>
		</v-dialog>

	</v-row>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import selectCodeList from '@/components/common/select/selectCodeList';
import InputText from '~/components/common/input/InputText';
import dateUtility from '~/plugins/dateUtility';
import SelectBox from '@/components/common/select/SelectBox';
import SelectBoxMulti from '@/components/common/select/SelectBoxMulti';

export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
			default: '비교대상 최대(20개)',
		},
		label: {
			type: String,
			require: false,
			default: '전력 계약 정보',
		},
		valueNm: {
			type: String,
			require: false,
			default: '',
		},
		title: {
			type: String,
			require: false,
			default: '전력 계약 목록',
		},
		labelCols: {
			type: Number,
			require: false,
			default: 4,
		},
		textCols: {
			type: Number,
			require: false,
			default: 7,
		},
		item: {
			type: Object,
			require: true,
		},
		bindingData: {
			type: String,
			require: false,
		},
		disabled: {
			type: Boolean,
			require: false,
			default: false
		},
		required: {
			type: Boolean,
			require: false,
			default: false
		},
		fabDisabled: {
			type: Boolean,
			require: false,
			default: false
		},
		eqpmGrpDisabled: {
			type: Boolean,
			require: false,
			default: false
		},
		iconShow: {
			type: Boolean,
			require: false,
			default: true
		},
		isMulti: {
			type: Boolean,
			require: false,
			default: false
		},
		customClass: {
			type: String,
			require: false,
			default: ''
		}
	},
	components: {
		Grid,
		selectCodeList,
		dateUtility,
		InputText,
		SelectBox,
		SelectBoxMulti
		// Tree
	},
	data() {
		return {
			labelPrepend: true,
			modalDataKey: 'eqpmSelectPopData',
			myModalKey: 'eqpmSelectPop',
			gridName: 'eqpmSelectGrid',
			loadGrid: true,
			setGrid: false,
			popCheck: false,
			dialog: false,
			activeRowData: {},
			checkedRowDataList: [],
			selectValue01: null,
			selectValue02: [],
			selectValueList01: [],
			selectValueList02: [],
			searchWord: '',
			activeRowData: {},
			textFieldData: '',
			selectRow: {}
		};
	},
	computed: {
		...mapState({
			// searchParam: state => state.pageData,
			searchParam(state) {
				return state.pageData[this.parentPrgmId];
			},
			myBindingData(state) {
				var data = state.pageData[this.parentPrgmId];
				if (data.fabId == '') {
					data.fabId = null
				} else if (typeof (data.fabId) == 'string') {
					data.fabId = [data.fabId]
				}
				return {
					fabId: data.fabId,
					eqpmGrpId: data.eqpmGrpId,
					eqpmId: data.eqpmId,
					eqpmNm: data.eqpmNm,
					eqpmIdList: data.eqpmIdList,
					eqpmKindId: data.eqpmKindId,
				}
			},
		}),
		selectValue: {
			get() {
				// return this.searchParam[this.item.valueNm];
				return this.myBindingData
					? this.myBindingData[this.valueNm]
					: this.textFieldData;
			},
			set(value) {
				// if(this.item && this.item.disableContent){
				//   return "NONE";
				// }
				return value;
			},
		},
		chkDialog() {
			if (this.isMulti) {
				this.$store.state.pageData[this.parentPrgmId][this.modalDataKey][this.myModalKey][this.gridName].option.rowHeaders = [{ type: 'checkbox' }];
			} else {
				this.$store.state.pageData[this.parentPrgmId][this.modalDataKey][this.myModalKey][this.gridName].option.rowHeaders = [];
			}
			return this.dialog
		},

	},
	watch: {
		async chkDialog(val) {
			// console.log("val : ", val);
			if (val) {
				this.selectValue01 = this.myBindingData.eqpmGrpId;
				this.selectValue02 = this.myBindingData.fabId;
				await this.search();
				// if(this.isMulti){
				// }else{
				//   // 단일 focus용
				//   if(this.$refs[this.gridName]){
				//       this.selectRow = this.$refs[this.gridName].getData().filter(item=>{
				//       return item.eqpmId == this.myBindingData.eqpmId
				//     });
				//     this.$refs[this.gridName].focus({
				//       rowKey : this.selectRow[0].rowKey,
				//       setScroll: true
				//     })
				//   }
				// }
			} else {
				this.dialog = false;
			}
			//   this.selectValue01 = this.myBindingData.eqpmGrpId;
			//   this.selectValue02 = this.myBindingData.fabId;
			//   await this.search();
			//   this.getChecked();
			// }
		},
	},

	beforeCreate() {
		this.$store.commit('setPageData', {
			eqpmSelectPopData: { eqpmSelectPop },
		});
	},
	async created() {
		await this.getFab();
		await this.getEqpmGrp();
		this.init();
	},
	methods: {
		...mapMutations({
			setPageData: 'setPageData',
			setModalGridData: 'setModalGridData',
			setModalGridColumn: 'setModalGridColumn',
			setModalGridOption: 'setModalGridOption',
		}),
		...mapActions({
			postApiReturn: 'modules/list/postApiReturn',
		}),
		init() {
			this.activeRowData = {};
			this.gridInit();
		},
		dialogOpenCloseEvent(val) {

			// this.checkPop = !val;
			this.dialog = !val;
		},
		search() {
			this.getRowGridData();
		},
		async getFab() {
			let res = await this.postApiReturn({
				apiKey: 'selectFabCodeList',
				resKey: 'fabCodeLists',
				sendParam: {},
			});
			if (res.length > 0) {
				this.selectValueList02 = await res.map(item => {
					return {
						text: item.eccNm,
						value: item.eccId,
					};
				});
				this.selectValueList02.unshift({
					text: "전체",
					value: null
				});
				// if(this.pageData.eccId != null && this.pageData.eccId != ''){
				// this.selectValue02 = this.pageData.eccId;
				// }else if(this.pageData.eccId == null || this.pageData.eccId == ''){
				this.selectValue02.push(this.selectValueList02[0].value);
				// }
			} else {
				this.selectValueList02 = [];
				this.selectValue02 = [];
			}
		},
		async getEqpmGrp() {
			let res = await this.postApiReturn({
				apiKey: 'selectEqpmGrpCodeList',
				resKey: 'eqpmGrpCodeLists',
				sendParam: {},
			});
			if (res.length > 0) {
				this.selectValueList01 = await res.map(item => {
					return {
						text: item.eqpmGrpNm,
						value: item.eqpmGrpId,
					};
				});
				this.selectValueList01.unshift({
					text: "전체",
					value: null
				});
				// if(this.pageData.eqpmGrpId != null && this.pageData.eqpmGrpId  != ''){
				// this.selectValue02 = this.pageData.eqpmGrpId;
				// }else if(this.pageData.eqpmGrpId == null || this.pageData.eqpmGrpId == ''){
				this.selectValue01 = this.selectValueList01[0].value;
				// }
			} else {
				this.selectValueList01 = [];
				this.selectValue01 = null;
			}
		},
		gridInit() {
			// console.log("modalGridParent : ",this.$refs)
			// const gridWidth = this.$refs.modalGridParent.offsetWidth/4;

			let myOptions = {
				columnOptions: {
					resizable: true,
				},
				header: {
					height: 'auto',
				},
				// rowHeaders:[{ type: 'checkbox' }],
				rowHeight: 'auto',
			};
			if (this.isMulti) {
				// myOptions['rowHeaders'] = [{ type: 'checkbox' }];
				// myOptions['rowHeight'] = 'auto';
			}



			this.setModalGridOption({
				modalKey: this.myModalKey,
				gridKey: this.gridName,
				modalDataKey: this.modalDataKey,
				value: Object.assign(
					// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
					Utility.defaultGridOption(400, myOptions),
					myOptions,
				),
			});

			const myColumns = [
				{
					header: 'FAB',
					name: 'fabId',
					align: 'center',
					hidden: true
				},
				{
					header: 'FAB',
					name: 'fabNm',
					align: 'center'
				},
				{
					header: '설비ID',
					name: 'eqpmId',
					align: 'center',
					// hidden:true
				},
				{
					header: '설비명',
					name: 'eqpmNm',
					align: 'center'
				},
				{
					header: 'eccId',
					name: 'eccId',
					align: 'center',
					hidden: true
				},
				{
					header: 'eccNm',
					name: 'eccNm',
					align: 'center',
					hidden: true
				},


			]

			this.setModalGridColumn({
				modalKey: this.myModalKey,
				gridKey: this.gridName,
				modalDataKey: this.modalDataKey,
				value: myColumns,
			});


			// this.getRowGridData();
		},
		async getRowGridData() {
			this.loadGrid = false;
			var res = await this.postApiReturn({
				apiKey: 'selectEqpmPop',
				resKey: 'eqpmPopData',
				sendParam: {
					fabId: this.selectValue02,
					eqpmGrpId: this.selectValue01,
					searchWord: this.searchWord,
					eqpmKindId: this.myBindingData.eqpmKindId,
				},
			});
			//   const dayjs = require('dayjs');
			//   var newRes = res.map(item=>
			//     item = {
			//       ...item,
			//       totDttmDay : Utility.setFormatDate(item.totDttm, 'YYYY-MM-DD'),
			//       totDttmTime : Utility.setFormatDate(item.totDttm, 'HH') + "~" + dayjs(item.totDttm).add(1,'h').format('HH')
			//     }
			//   );
			// const res =
			// 	[
			// 		{
			// 			"fabId": "FAB001",
			// 			"fabNm": "Gumi FAB",
			// 			"eqpmId": "EQ001",
			// 			"eqpmNm": "Etcher A12",
			// 			"eccId": "ECC001",
			// 			"eccNm": "Etch Control Center"
			// 		},
			// 		{
			// 			"fabId": "FAB002",
			// 			"fabNm": "Pyeongtaek FAB",
			// 			"eqpmId": "EQ002",
			// 			"eqpmNm": "Deposition B34",
			// 			"eccId": "ECC002",
			// 			"eccNm": "Deposition Control Center"
			// 		},
			// 		{
			// 			"fabId": "FAB003",
			// 			"fabNm": "Hwaseong FAB",
			// 			"eqpmId": "EQ003",
			// 			"eqpmNm": "CMP C56",
			// 			"eccId": "ECC003",
			// 			"eccNm": "CMP Control Center"
			// 		}
			// 	];
			this.setModalGridData({
				modalKey: this.myModalKey,
				gridKey: this.gridName,
				modalDataKey: this.modalDataKey,
				value: res
			});


			this.loadGrid = true;
			this.$nextTick(() => {
				if (this.isMulti) {
					this.getChecked();
				}
			});

		},
		setUpdate() {
			if (this.isMulti) {
				var data = this.$refs[this.gridName].getCheckedRowsEvt();
				this.dialog = false;
				this.setPageData({
					checkedRows: data,
					eqpmId: data.map(item => {
						return item.eqpmId;
					}),
					eqpmNm: data.map(item => {
						return item.eqpmNm;
					}),
					eqpmIdList: data,
					isFind2: true
				});
			} else {
				this.dialog = false;
				this.setPageData({ eqpmInfo: this.activeRowData, eqpmNm: this.activeRowData.eqpmNm })
			}
		},
		getRowData(data) {
			if (this.isMulti) {
				if (data._attributes.checked) {
					this.$refs[this.gridName].uncheckEvt(data, this.$refs[this.gridName]);
				} else {
					this.$refs[this.gridName].checkEvt(data, this.$refs[this.gridName]);
				}
			} else {
				this.activeRowData = data;
			}
		},
		getChecked() {
			if (this.myBindingData.eqpmIdList.length > 0) {
				this.myBindingData.eqpmIdList.map(item => {
					this.$refs[this.gridName].checkEvt(item, this.$refs[this.gridName]);
				});
			}
		}
	},
};
var eqpmSelectPop = {
	eqpmSelectGrid: {
		data: [],
		column: [],
		option: {}
	}
}

</script>
