<template>
	<v-row class="search-box" align="center" no-gutters>
		<v-col :cols="labelCols">
			<label for="" class="search-box-label">
				{{ label }}
			</label>
		</v-col>
		<v-col :cols="textCols">
			<!-- <a-input :size="size" @click="showDetailModal = true" class="custom-input" suffix-icon placeholder="Search..." v-model="selectValue">
				<template #suffix>
					<a-icon type="search" />
				</template>
			</a-input> -->

			<!-- append-icon="search" -->
			<v-text-field
				readonly
				v-model="selectValue"
				class="v-input__custom"
				@click="showDetailModal = true"
				outlined
				:hide-details="true"
				:required="required || false"
			>                                                  
				<!-- :disabled="disabled || false" -->
			<template #append >
				<a-icon type="search" />
			</template>
		</v-text-field>
			
		</v-col>
		<a-modal v-model="showDetailModal" title="가이드 알람이력" class="text-left" width="800px" :footer="null"
			:style="{ borderRadius: '8px', overflow: 'hidden' }" :bodyStyle="{ paddingTop: '0px' }">
			<!-- Top Input Fields -->
			<v-row :gutters="32" align="end" style="margin-bottom: 16px;">
				<!-- Label on the left -->

				<!-- Two inputs on the right -->
				<v-col :cols="3">
					<component :is="'SelectBox'" :label="'실비그룹'" :labelCols="12" :textCols="12"
						:propsValue="eqpmGrpSelected" :itemList="eqpmGrpList"
						@update:propsValue="eqpmGrpSelected = $event" :disabled="disabled" :iconShow="false" />
				</v-col>

				<v-col :cols="4" style="text-align: left;">
					<component :is="'SelectBox'" :label="'FAB'" :labelCols="12" :textCols="12"
						:propsValue="localFabSelected" :itemList="fabList"
						@update:propsValue="localFabSelected = $event" :disabled="disabled" :iconShow="false" />
				</v-col>
				<v-col :cols="5" >
					<v-row>
						<v-col :cols="12" style="text-align: left;">
							<div>실비명</div>
						</v-col>

						<v-col :cols="8">
							<a-input class="custom-input" suffix-icon placeholder="Search..."
								:style="{ borderRadius: '6px', }" >
								<template #suffix>
									<a-icon type="search" />
								</template>
								
							</a-input>
						</v-col>
						<v-col :cols="3" class="text-right">
							<!-- 조회버튼 -->
							<BtnSearch @click="searchFab()" />
						</v-col>
					</v-row>
				</v-col>
				

			</v-row>
			<a-divider />
			<!-- Table -->
			<a-table :columns="columns" :dataSource="filteredData" rowKey="id" :rowSelection="rowSelection" bordered />

			<!-- Footer Buttons -->
			<div style="text-align: right; margin-top: 16px;">
				<a-button @click="showDetailModal = false">닫기</a-button>
				<a-button type="primary" style="margin-left: 8px; color:#fff"
					@click="showDetailModal = false">확인</a-button>
			</div>
		</a-modal>
	</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';
import BtnSearch from '~/components/common/button/BtnSearch';

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: 12,
		},
		textCols: {
			type: Number,
			require: false,
			default: 12,
		},
		item: {
			type: Object,
			require: true,
		},
		bindingData: {
			type: String,
			require: false,
		},
		disabled: {
			type: Boolean,
			default: true
		},
		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
		},
		fabSelected: {
			type: String, // or Array, depending on your data
			required: false
		},
		eqpmGrpSelected: {
			type: String, // or Array, depending on your data
			required: false
		},
		size: {
			type: String,
			require: false,
			default: "middle",
		}

	},
	components: {
		Grid,
		selectCodeList,
		dateUtility,
		InputText,
		SelectBox,
		SelectBoxMulti,
		BtnSearch
		// Tree
	},
	data() {
		return {
			labelPrepend: true,
			modalDataKey: 'eqpmSelectPopData',
			myModalKey: 'eqpmSelectPop',
			gridName: 'eqpmSelectGrid',
			loadGrid: false,
			setGrid: false,
			popCheck: false,
			dialog: false,
			activeRowData: {},
			checkedRowDataList: [],

			localFabSelected: this.fabSelected,
			localEqpmGrpSelected: this.eqpmGrpSelected,

			fabList: [],
			eqpmGrpList: [],
			searchWord: '',
			activeRowData: {},
			textFieldData: '',
			selectRow: {},
			showDetailModal: false,
			columns: [
				{
					title: 'FAB',
					dataIndex: 'fab',
					key: 'fab',
				},
				{
					title: '설비ID',
					dataIndex: 'equipmentId',
					key: 'equipmentId',
				},
				{
					title: '설비명',
					dataIndex: 'equipmentName',
					key: 'equipmentName',
				},
			],
			// Table data
			data: [
				{
					id: 1,
					fab: 'FAB001',
					equipmentId: 'EQ001',
					equipmentName: '냉각기 A',
				},
				{
					id: 2,
					fab: 'FAB002',
					equipmentId: 'EQ002',
					equipmentName: '펌프 B',
				},
				{
					id: 3,
					fab: 'FAB003',
					equipmentId: 'EQ003',
					equipmentName: '히터 C',
				},
				{
					id: 4,
					fab: 'FAB001',
					equipmentId: 'EQ004',
					equipmentName: '냉각기 D',
				},
				{
					id: 5,
					fab: 'FAB002',
					equipmentId: 'EQ005',
					equipmentName: '펌프 E',
				},
				{
					id: 6,
					fab: 'FAB003',
					equipmentId: 'EQ006',
					equipmentName: '히터 F',
				},
				{
					id: 7,
					fab: 'FAB001',
					equipmentId: 'EQ007',
					equipmentName: '냉각기 G',
				},
				{
					id: 8,
					fab: 'FAB002',
					equipmentId: 'EQ008',
					equipmentName: '펌프 H',
				},
			],
			filteredData: [],
			// Row selection config
			rowSelection: {
				onChange: (selectedRowKeys, selectedRows) => {
					console.log('Selected Row Keys:', selectedRowKeys);
					console.log('Selected Rows:', selectedRows);
				},
			}
		};
	},
	watch: {

		fabSelected(newVal) {
			this.localFabSelected = newVal;
		},
		eqpmGrpSelected(newVal) {
			this.localEqpmGrpSelected = newVal;
		}

	},

	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.filteredData = this.data;
			// this.activeRowData = {};
			// this.gridInit();
		},
		// search() {
		// 	this.getRowGridData();
		// },
		searchFab() {
			console.log('tttttttttttt')
			// this.filteredData = this.data.filter(item => {
			// 	const matchGrp = this.eqpmGrpSelected ? item.group === this.eqpmGrpSelected : true;
			// 	const matchFab = this.localFabSelected ? item.fab === this.localFabSelected : true;
			// 	return matchGrp && matchFab;
			// });
		},
		async getFab() {

			this.fabList = [
				{ label: 'FAB001', value: 'FAB001' },
				{ label: 'FAB002', value: 'FAB002' },
				{ label: 'FAB003', value: 'FAB003' },
			];

			// this.fabSelected = 'FAB001';

		},
		async getEqpmGrp() {
			this.eqpmGrpList = [
				{ label: 'EQ 1', value: 'EQ001' },
				{ label: 'EQ 2', value: 'EQ002' },
				{ label: 'EQ 3', value: 'EQ003' },
			];

			// this.eqpmGrpSelected = 'EQ001';

		},


	},
};
var eqpmSelectPop = {
	eqpmSelectGrid: {
		data: [],
		column: [],
		option: {}
	}
}

</script>
