<template>
	<div>
		<div
			class="d-flex justify-space-between"

		>
			<v-card-title class="px-0 pt-0 custom-title-4">검침개소 추가 정보</v-card-title>
			<Buttons
				:parentPrgmId="parentPrgmId"
				:bindingData="gridName"
				:btnActionsFnc="btnActions"
			/>
		</div>
		<div ref="gridParent">
			<Grid
				:ref="gridName"
				:gridName="gridName"
				:parentPrgmId="parentPrgmId"
				:editorGrid="true"
				:innerTabGridInfo="innerTabGridInfo"
				@getRowsData="getRowData"
				:dataPath="addInfoTabData"
			/>
		</div>
	</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Buttons from '~/components/common/button/Buttons';
import Grid from '~/components/common/Grid';
import InputText from '~/components/common/input/InputText';
import Form from '~/components/common/form/Form';
import mixinGlobal from '@/mixin/global.js';
import { NewCustomRenderer } from '~/plugins/gridUtility';
import { NewCustomEditor } from '~/plugins/gridUtility';
export default {
	mixins: [mixinGlobal],
	components: {
		Buttons,
		Grid,
		InputText,
		Form,
	},
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		innerTabGridInfo: {
			type: Object,
			default: null,
		},
	},
	data() {
		return {
			loadGrid: true,
			gridName: 'rowDetailGrid',
			rowKey: null,
			edtingFinishFlag: 'Y',
			addInfoTabData: {
				"rowDetailGrid": {
					data: [



						{
							readPlcNm: '서울 본사',
							plcKind: '전기',
							useFg: '1',
						},


					],
					column: [
						// { header: '회사 ID', name: 'comId', hidden: true },
						{
							header: '검침개소명',
							name: 'readPlcNm',
							align: 'left',
							minWidth: 400,
						},
						{
							header: '개소 종류',
							name: 'plcKind',
							minWidth: 100,
							align: 'center',
							// formatter({ value }) {
							// 	let retVal = '';
							// 	const newValue = _this.pageData.plcKindList.filter(
							// 		item => item.commCd == value,
							// 	);
							// 	if (newValue.length > 0) {
							// 		retVal = newValue[0].commCdNm;
							// 	}
							// 	return retVal;
							// },
						},
						{
							header: '사용 여부',
							name: 'useFg',
							minWidth: 100,
							align: 'center',
							// formatter({ value }) {
							// 	value = value === true ? '1' : '0';
							// 	const newValue = _this.pageData.useFgList.filter(
							// 		item => item.commCd == value,
							// 	);
							// 	return newValue[0].commCdNm;
							// },
						},
					]

				}
			}
		};
	},
	computed: {
		...mapState({
			pageData(state) {
				return state.pageData[this.parentPrgmId];
			},
		}),
		selectedCommCd() {
			return this.pageData[this.gridName].data;
		},
		myUseFgList() {
			return this.pageData.useFgList;
		},
		selectedComId() {
			return this.pageData.rowGridSelectData.comId;
		},
		selectedBlocId() {
			return this.pageData.rowGridSelectData.blocId;
		},
		selectedReadPlcId() {
			return this.pageData.rowGridSelectData.readPlcId;
		},
	},
	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.gridInit();
		},
		gridInit() {
			const gridHeight = this.$refs.gridParent.offsetHeight - 30;

			const myOptions = {
				columnOptions: {
					resizable: true,
				},
				bodyHeight: gridHeight,
				minBodyHeight: gridHeight,
				header: {
					height: 28,
				},
				rowHeight: 29,
				minRowHeight: 29,
				selectionUnit: 'row',
				editingEvent: 'click',
			};
			this.setGridOption({
				gridKey: this.gridName,
				value: myOptions,
			});

			// const _this = this;
			// let useFgSelectList = [];
			// this.pageData.useFgList.forEach(item => {
			// 	const it = { text: item.commCdNm, value: item.commCd };
			// 	useFgSelectList.push(it);
			// });
			// let addInfoList = [];
			// this.pageData.addInfoList.forEach(item => {
			// 	const it = { text: item.addInfoNm, value: item.addInfoId };
			// 	addInfoList.push(it);
			// });
			// let addInfoDataKindList = [];
			// this.pageData.addInfoDataKindList.forEach(item => {
			// 	const it = { text: item.commCdNm, value: item.commCd };
			// 	addInfoDataKindList.push(it);
			// });

			// const myColumns = [
			// 	{ header: '회사 ID', name: 'comId', hidden: true },
			// 	{ header: '검침개소 번호', name: 'readPlcId', hidden: true },
			// 	{
			// 		header: '추가 정보',
			// 		name: 'addInfoId',
			// 		align: 'left',
			// 		formatter({ value }) {
			// 			let retVal = '';
			// 			const newValue = addInfoList.filter(item => item.value == value);
			// 			if (newValue.length > 0) {
			// 				retVal = newValue[0].text;
			// 			}
			// 			return retVal;
			// 		},
			// 	},
			// 	{
			// 		header: 'Data 구분',
			// 		name: 'addInfoDataKind',
			// 		align: 'center',
			// 		formatter({ value }) {
			// 			let retVal = '';
			// 			const newValue = addInfoDataKindList.filter(
			// 				item => item.value == value,
			// 			);
			// 			if (newValue.length > 0) {
			// 				retVal = newValue[0].text;
			// 			}
			// 			return retVal;
			// 		},
			// 		// editor: {
			// 		//   type: "select",
			// 		//   options: {
			// 		//     listItems: addInfoDataKindList
			// 		//   }
			// 		// }
			// 	},
			// 	{
			// 		header: '숫자 값',
			// 		name: 'addInfoNumVal',
			// 		align: 'right',
			// 		editor: 'text',
			// 		hidden: true,
			// 	},
			// 	{
			// 		header: '문자 값',
			// 		name: 'addInfoTxtVal',
			// 		align: 'left',
			// 		editor: 'text',
			// 		hidden: true,
			// 	},
			// 	{
			// 		header: '추가 정보 값',
			// 		name: 'addInfoVal',
			// 		align: 'center',
			// 		renderer: {
			// 			type: NewCustomRenderer,
			// 		},
			// 		editor: {
			// 			type: NewCustomEditor,
			// 		},
			// 		formatter(data) {
			// 			return data.row.addInfoDataKind;
			// 		},
			// 	},
				//{ header: "추가 정보 값", name: "addInfoVal", align: "center" , editor: "text",
				// formatter({ value, row , column}) {
				//   console.log("addInfoVal row : ", row);
				//   console.log("addInfoVal state : ", column);
				//   if(row.addInfoDataKind === "NUM"){
				//     column.align = "right";
				//   }else{
				//     column.align = "left";
				//   }
				//   return value;
				// }
				//},
				/*{
          header: "사용여부",
          name: "useFg",
          align: "center",
          formatter({ value }) {
            return value == "1" ? "사용" : "사용안함";
          },
          editor: {
            type: "select",
            options: {
              // listItems: useFgSelectList
              listItems: [
                {text:"사용", value:"1"},
                {text:"사용안함", value:"0"},
              ]
            }
          }
        },*/
				// { 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,
			// });

			this.loadGrid = true;
		},
		async getRowData2(data, gridName) {
			this.setGridSelectData({
				gridKey: gridName,
				gridSelect: true,
				rowGridSelectKey: data.rowKey,
				rowGridSelectData: Object.assign({}, data),
			});
		},
		async btnActions(action) {
			let dataArr = [];
			switch (action) {
				case 'add':
					this.$refs[this.gridName].addRow();
					this.edtingFinishFlag = 'Y';
					break;

				case 'remove':
					this.$refs[this.gridName].removeRow();
					this.edtingFinishFlag = 'N';
					break;

				case 'save':
					if (this.edtingFinishFlag == 'Y') {
						await this.$refs[this.gridName].editingFinish({
							rowKey: this.rowKey,
						});
					}
					this.loadGrid = false;
					dataArr = this.$refs[this.gridName].save();
					// this.setPageData({ isFind: true });

					for (var i = 0; i < dataArr.length; i++) {
						if (
							dataArr[i].addInfoDataKind == 'NUM' &&
							dataArr[i].addInfoVal == ''
						) {
							dataArr[i].addInfoVal = null;
						}
					}

					if (dataArr.length > 0) {
						const sendParam = {
							datas: {
								dsReadPlcAddInfo: dataArr.map(item => ({
									...item,
									comId: this.selectedComId,
									blocId: this.selectedBlocId,
									readPlcId: this.selectedReadPlcId,
								})),
							},
							params: {},
						};
						await this.postUpdateApi({
							apiKey: 'saveReadPlcAddInfoList',
							sendParam: sendParam,
						});
						this.loadGrid = true;
						this.setPageData({ isFind: true });
						this.edtingFinishFlag = 'Y';
					} else {
						this.loadGrid = true;
						alert('저장할 내용이 없습니다.');
					}
					break;

				default:
					break;
			}
		},
		async getRowData(data) {
			this.rowKey = data.rowKey;
			this.edtingFinishFlag = 'Y';
		},
		gridEditingFinish2(data, bindingData) {
			this.$refs[bindingData].editingFinish(data);
		},
		search() {},
	},
};
</script>
