<template>
	<div class="l-layout">
		<!-- 조회조견 -->
		<CommonPageTitle />
		<v-row ref="searchFilter">
			<v-col :cols="12">
				<v-card class="searchFilter">
					<v-row align="end" no-gutters>
						<v-col :cols="3">
							<!-- 사업장 -->
							<component
								:is="'SelectBlocMstr'"
								:parentPrgmId="myPrgmId"
								:sendParam="{ comId }"
								customClass="select-large"
								:labelCols="12"
								:textCols="12"
							/>
							<!-- <component
                :is="'selectCodeList'"
                :parentPrgmId="myPrgmId"
                :label="'사용여부'"
                :dataKey="'selectUseFg'"
                :sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
                :addAll="true"
              /> -->
						</v-col>
						<!-- <v-col :cols="2">
              <InputText
                :parentPrgmId="myPrgmId"
                label="사용자No"
                valueNm="userNo"
                :searchOption="true"
              />
            </v-col> -->
						<v-col :cols="3">
							<InputText
								:parentPrgmId="myPrgmId"
								label="로그인ID"
								valueNm="userLoginId"
								:searchOption="true"
								customClass="input-large"
							/>
						</v-col>
						<v-col :cols="3">
							<InputText
								:parentPrgmId="myPrgmId"
								label="사용자명"
								valueNm="userNm"
								:searchOption="true"
								customClass="input-large"
							/>
						</v-col>
						<v-col :cols="3" class="text-right">
							<BtnSearch size="large"/>
						</v-col>
					</v-row>
				</v-card>
			</v-col>
		</v-row>

		<v-row ref="contents">
			<!-- 사용자 리스트 -->
			<v-col :cols="5" class="h100">
				<v-card class="pb-5">
					<div class="d-flex align-center justify-space-between pa-5">
						<v-card-title class="pa-0">사용자 리스트</v-card-title>
						<Buttons
							:parentPrgmId="myPrgmId"
							:bindingData="gridName"
							:detailList="pageData.detailList"
							:btnActionsFnc="btnActions"
						/>
					</div>
					<div class="h100 px-5" style="height:calc(100% - 70px)">
						<div ref="gridParent" class="h100 w100">
							<component
								:ref="gridName"
								:is="loadGrid ? 'Grid' : null"
								:parentPrgmId="myPrgmId"
								:gridName="gridName"
								@getRowsData="getRowData"
								@sendSelectedRowStatInfo="getSelectedRowStatInfo"
								:selectedRowDataWatchFlag="true"
							/>
						</div>
					</div>
				</v-card>
			</v-col>
			<!-- 사용자 정보 -->
			<v-col :cols="7" class="h100">
				<v-card class="pb-5 h100">
					<v-card-title class="custom-title-4 pb-0">사용자 정보</v-card-title>
					<div class="px-5" :style="{ height: 'calc(100% - 62.5px)' }">
						<v-tabs v-model="tab">
							<v-tab
								v-for="item in items"
								:key="item.id"
								@click="clickTab(item.name)"
								:disabled="item.disabledFlag"
							>
								{{ item.name }}
							</v-tab>
						</v-tabs>
						<v-tabs-items
							v-model="tab"
							class="py-6"
							style="height: calc(100% - 45px);"
						>
							<v-tab-item v-for="(item, idx) in items" :key="item.id">
								<v-row ref="tabsGridParent" class="w100 h100" no-gutters>
									<!-- 상세정보 -->
									<template v-if="item.id == 'detailUser'">
										<v-col>
											<div class="d-flex align-center justify-space-between">
												<v-card-title class="pa-0"></v-card-title>
											</div>
											<div class="mt-5" style="height:calc(100% - 70px)">
												<component
													:is="'Form'"
													:parentPrgmId="myPrgmId"
													:detailList="pageData.detailList"
													@gridEditingFinish="gridEditingFinish"
												/>
											</div>
										</v-col>
									</template>

									<!-- 역할수정 -->
									<template v-else-if="item.id == 'AsgnRoleByUser'">
										<v-col :cols="12" class="overflow-y-scroll grid-toggle-section">
											<v-card-title
												class="pa-0 custom-subtitle-tab"
												style="min-height:36px;"
												>역할리스트</v-card-title
											>
											<div class="py-5">
												<component
													class="w100"
													:is="loadGridTab2 ? 'Grid' : null"
													:ref="gridName2"
													:gridName="gridName2"
													:parentPrgmId="myPrgmId"
													@getRowsData="getUnAsgnRowData"
													:innerTabGridInfo="{ tab, idx }"
												/>
											</div>
										</v-col>
										<v-col :cols="12" class="d-flex justify-center">
											<ActionButtons
												:parentPrgmId="myPrgmId"
												:leftGridName="gridName2"
												:rightGridName="gridName3"
												:btnActionsFnc="dualGridBtnActions"
												directionBtn="vertically"
											/>
										</v-col>
										<v-col :cols="12" class="h100">
											<div class="d-flex align-center justify-space-between">
												<v-card-title class="pa-0 custom-subtitle-tab">
													사용자 역할</v-card-title
												>
												<div>
													<Buttons
														:parentPrgmId="myPrgmId"
														:bindingData="gridName3"
														:btnActionsFnc="btnActionsAsgnRoleByUser"
													/>
												</div>
											</div>
											<div style="height:calc(100% - 36px)" class="py-5">
												<component
													class="w100"
													:is="loadGridTab2 ? 'Grid' : null"
													:ref="gridName3"
													:gridName="gridName3"
													:parentPrgmId="myPrgmId"
													:editorGrid="true"
													@getRowsData="getAsgnRowData"
													:innerTabGridInfo="{ tab, idx }"
												/>
											</div>
										</v-col>
									</template>

									<!-- 사용자별 메뉴리스트 -->
									<template v-else-if="item.id == 'MenuByUser'">
										<v-col class="h100">
											<div class="h100">
												<component
													class="w100"
													:is="loadGridTab3 ? 'Grid' : null"
													:ref="gridName4"
													:gridName="gridName4"
													:parentPrgmId="myPrgmId"
													:innerTabGridInfo="{ tab, idx }"
												/>
											</div>
										</v-col>
									</template>
								</v-row>
							</v-tab-item>
						</v-tabs-items>
					</div>
				</v-card>
			</v-col>
		</v-row>
	</div>
</template>
<script>
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
// import { mapState, mapMutations, mapActions } from "vuex";
// import selectCodeList from "@/components/common/select/selectCodeList";
import SelectBlocMstr from '~/components/common/select/SelectBlocMstr';
import InputText from '@/components/common/input/InputText';
import BtnSearch from '~/components/common/button/BtnSearch';
import Grid from '~/components/common/Grid';
import Buttons from '~/components/common/button/Buttons';
import Form from '~/components/common/form/Form';
import ActionButtons from '~/components/common/button/ActionButtons';
// import DetailUser from "~/components/pages/userRoleMng/DetailUser";
// import AsgnRoleByUser from "~/components/pages/userRoleMng/AsgnRoleByUser";
// import MenuByUser from "~/components/pages/userRoleMng/MenuByUser";
import Utility from '~/plugins/utility';

let myTitle;
let myPrgmId;
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;
	},
	meta: {
		title: () => {
			return myTitle;
		},
		prgmId: myPrgmId,
		closable: true,
	},
	components: {
		SelectBlocMstr,
		InputText,
		BtnSearch,
		// Form,
		Grid,
		// DetailUser,
		// AsgnRoleByUser,
		// MenuByUser,
		Buttons,
		Form,
		ActionButtons,
	},
	data() {
		return {
			myPrgmId: myPrgmId,
			loadGrid: false,
			loadGridTab2: false,
			loadGridTab3: false,
			gridName: 'rowGrid',
			gridName2: 'rowGridUnAsgnRoleByUser',
			gridName3: 'rowGridAsgnRoleByUser',
			gridName4: 'rowGridAsgnMenuByUser',
			// rowGridOrigin: [],
			tab: null,
			items: [
				{ name: '상세정보', id: 'detailUser', disabledFlag: false },
				{ name: '역할수정', id: 'AsgnRoleByUser', disabledFlag: false },
				{ name: '사용자별 메뉴리스트', id: 'MenuByUser', disabledFlag: false },
			],
			leftSelectRowData: {},
			rightSelectRowData: {},
		};
	},
	computed: {
		chkIsFind() {
			// 조회 플래그
			// console.log("조회 플래그 ", this.pageData.isFind);
			return this.pageData.isFind;
		},
		chkBlocCd() {
			// 사업장 선택 감지
			return this.pageData.blocId;
		},
		chkRowGridSelectKey() {
			return this.pageData.rowGridSelectKey;
		},
	},
	watch: {
		chkIsFind(val) {
			if (val) this.search();
		},
		chkBlocCd() {
			this.setPageData({ isFind: true });
		},
	},
	beforeCreate() {
		myPrgmId = this.$route.query.prgmId;
		this.$store.dispatch('chkOpenTabList', {
			key: 'create',
			prgmId: myPrgmId,
			defaultData: defaultData,
		});
	},
	mounted() {
		this.init();
	},
	methods: {
		async init() {
			await this.gridInit();
		},
		// 사용자 리스트 그리드 세팅
		gridInit() {
			const gridHeight = this.$refs.gridParent.offsetHeight - 90;

			const myOptions = {
				scrollX: false,
			};
			this.setGridOption({
				gridKey: this.gridName,
				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
			});
			this.setGridColumn({
				gridKey: this.gridName,
				value: myColumns,
			});
			this.loadGrid = true;
		},
		async search() {
			await this.setPageData({
				detailList: myDetail(this.pageData.blocMstrList),
				// detailList: myDetail(this.pageData.blocMstrList[0].blocId)
			});
			await this.getRowGridData();
			await this.setPageData({
				isFind: false,
			});
		},
		// 사용자 리스트 호출
		async getRowGridData() {
			const res = await this.postApiReturn({
				apiKey: 'selectUser',
				resKey: 'userData',
				sendParam: {
					// blocId: this.chkBlocCd,
					blocId: this.pageData.blocMstrList[this.chkBlocCd].blocId,
					comId: this.comId,
					userLoginId: this.pageData.userLoginId, // 검색키워드: 로그인ID
					userNm: this.pageData.userNm, // 검색키워드: 사용자명
					userNo: this.pageData.userNo, // 검색키워드: 사용자No
				},
			});
			this.setGridData({
				gridKey: this.gridName,
				value: res.map(item => ({
					...item,
					rowStat: null,
					pwBk: item.userPswd,
				})),
			});
			this.$nextTick(() => {
				if (res.length > 0) {
					this.$refs[this.gridName].focus({
						// rowKey: this.chkRowGridSelectKey || 0,
						rowKey:
							this.pageData.rowGridSelectKey == '' ||
							this.pageData.rowGridSelectKey == null
								? 0
								: this.pageData.rowGridSelectKey ==
								  this.$refs[this.gridName].getData().length - 1
								? this.pageData.rowGridSelectKey
								: 0,
						setScroll: true,
					});
				}
			});
		},
		// 사용자 리스트 그리드 클릭 이벤트
		async getRowData(data) {
			this.setPageData({
				rowGridSelectKey: data.rowKey,
				//rowGridSelectData: Object.assign({}, data),
				rowGridSelectData: data,
			});
			// 열할 수정 리스트 호출
			this.getUnAsgnRoleByUser(data); // 역할리스트
			this.getAsgnRoleByUser(data); // 사용자 역할
			// 사용자별 메뉴리스트 호출
			this.getAsgnMenuByUser(data);
		},

		async clickTab(activeTab) {
			switch (activeTab) {
				case '상세정보':
					await this.setPageData({
						detailList: myDetail(this.pageData.blocMstrList),
					});
					break;

				case '역할수정':
					await this.gridInitUnAsgnRoleByUser();
					await this.gridInitAsgnRoleByUser();
					this.loadGridTab2 = true;
					break;

				case '사용자별 메뉴리스트':
					await this.gridInitAsgnMenuByUser();
					this.loadGridTab3 = true;
					break;

				default:
					break;
			}
		},

		/* 상세정보 */
		gridEditingFinish(data) {
			this.$refs[this.gridName].editingFinish(data);
		},
		getSelectedRowStatInfo(data) {
			if (data) {
				var rowStat = data.rowStat;
				if (rowStat === 'I') {
					this.tab = 0;
					for (var i = 1; i < this.items.length; i++) {
						this.items[i].disabledFlag = true;
					}
					// console.log('this.items : ', this.items);
				} else if (rowStat === 'U') {
					for (var i = 1; i < this.items.length; i++) {
						this.items[i].disabledFlag = false;
					}
				} else if (rowStat === 'D') {
					for (var i = 1; i < this.items.length; i++) {
						this.items[i].disabledFlag = false;
					}
				} else if (rowStat === null) {
					for (var i = 1; i < this.items.length; i++) {
						this.items[i].disabledFlag = false;
					}
				}
			}
		},
		async btnActions(action) {
			switch (action) {
				case 'add':
					this.$refs[this.gridName].addRow();
					break;

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

				case 'save':
					var dataArr = this.$refs[this.gridName].save();
					var validCheck = true;
					if (dataArr.length > 0) {
						var dsUserList = await Promise.all(
							dataArr.map(async item => {
								if (
									item.userNm == '' ||
									item.userLoginId == '' ||
									item.blocId == '' ||
									item.userPswd == ''
								) {
									alert('필수 입력값을 입력해주세요.');
									validCheck = false;
								}
								if (item.rowStat === 'I') {
									var encryptedPassword = await sha512(item.userPswd);
								} else {
									encryptedPassword = item.userPswd;
								}
								const req = {
									blocId: item.blocId,
									comId: item.comId,
									deptId: item.deptId,
									email: item.email,
									procDttm: item.procDttm,
									procUserNo: item.procUserNo,
									regDttm: item.regDttm,
									regUserNo: item.regUserNo,
									rowStat: item.rowStat,
									userLoginId: item.userLoginId,
									userNm: item.userNm,
									userNo: item.userNo,
									userPswd: encryptedPassword,
								};
								return req;
							}),
						);
						if (validCheck) {
							const sendParam = {
								datas: {
									dsUser: dsUserList,
								},
								params: {},
							};
							await this.postUpdateApi({
								apiKey: 'saveUser',
								sendParam: sendParam,
							});
							this.setPageData({ isFind: true });
						}
					} else {
						alert('저장할 내용이 없습니다.');
					}
					break;

				default:
					break;
			}
		},

		/* 역할수정 */
		getUnAsgnRowData(data) {
			const getRowData = data;
			this.leftSelectRowData = Object.assign({}, getRowData);
			this.rightSelectRowData = {};
		},
		getAsgnRowData(data) {
			const getRowData = data;
			this.rightSelectRowData = Object.assign({}, getRowData);
			this.leftSelectRowData = {};
		},
		async dualGridBtnActions(action) {
			let addTargetGrid = '';
			let removeTargetGrid = '';
			let moveData = {};
			switch (action) {
				case 'addLeftToRight':
					if (
						this.leftSelectRowData.comId === null ||
						this.leftSelectRowData.comId === undefined
					) {
						break;
					}
					addTargetGrid = this.$refs[this.gridName3][0];
					removeTargetGrid = this.$refs[this.gridName2][0];
					moveData = this.leftSelectRowData;
					moveData.aplyStartDt = Utility.setFormatDate(
						'today',
						'YYYY-MM-DD HH:mm:ss',
					);
					moveData.aplyEndDt = '9999-12-31 23:59:59';
					break;

				case 'removeRightToLeft':
					if (
						this.rightSelectRowData.comId === null ||
						this.rightSelectRowData.comId === undefined
					) {
						break;
					}
					addTargetGrid = this.$refs[this.gridName2][0];
					removeTargetGrid = this.$refs[this.gridName3][0];
					moveData = this.rightSelectRowData;
					break;

				default:
					break;
			}
			// if (!moveData) {
			if (Object.keys(moveData).length <= 2) {
				alert('선택된 역할이 없습니다.');
			} else {
				addTargetGrid.addRow(moveData);
				removeTargetGrid.removeRow('immediately');
				// 초기화
				if ('tuigridrowGridAsgnRoleByUser' in addTargetGrid.$refs) {
					this.getAsgnRowData(moveData);
					this.leftSelectRowData = {};
				} else {
					this.getUnAsgnRowData(moveData);
					this.rightSelectRowData = {};
				}
				moveData = {};
				// 초기화 끝
			}
		},
		async btnActionsAsgnRoleByUser(action) {
			switch (action) {
				case 'save':
					var dataArr = this.$refs[this.gridName3][0].save();
					if (dataArr.length > 0) {
						let validation = true;
						const sendParam = {
							datas: {
								dsRoleUser: dataArr.map(item => {
									if (
										item.aplyStartDt.length !== 19 ||
										item.aplyEndDt.length !== 19
									)
										validation = false;
									const req = {
										aplyEndDt: item.aplyEndDt,
										aplyStartDt: item.aplyStartDt,
										comId: item.comId,
										roleId: item.roleId,
										roleNm: item.roleNm,
										rowStat: item.rowStat,
										// updateIcon: item.updateIcon, // ??
										userNo: item.userNo,
									};
									return req;
								}),
							},
							params: {},
						};
						if (validation) {
							await this.postUpdateApi({
								apiKey: 'saveRoleUser',
								sendParam: sendParam,
							});
							this.setPageData({ isFind: true });
						} else {
							alert('필수값중 누락된 값이 있습니다.');
						}
					} else {
						alert('저장할 내용이 없습니다.');
					}
					break;

				default:
					break;
			}
		},
		async btnActions2(action) {
			switch (action) {
				case 'add':
					break;

				case 'remove':
					break;

				case 'save':
					var dataArr = this.$refs[this.gridName3].save();
					if (dataArr.length > 0) {
						const sendParam = {
							datas: { dsRoleUser: dataArr },
							params: {},
						};
						await this.postUpdateApi({
							apiKey: 'saveRoleUser',
							sendParam: sendParam,
						});
						this.setPageData({ isFind: true });
					} else {
						alert('저장할 내용이 없습니다.');
					}
					break;

				default:
					break;
			}
		},
		// 역할리스트 그리드 세팅
		gridInitUnAsgnRoleByUser() {
			const gridHeight =
				this.$refs.tabsGridParent[this.$refs.tabsGridParent.length - 1]
					.offsetHeight - 36;

			const myOptions = {
				columnOptions: {
					resizable: true,
				},
			};
			this.setGridOption({
				gridKey: this.gridName2,
				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
			});
			this.setGridColumn({
				gridKey: this.gridName2,
				value: unAsgnRoleByUserColumns,
			});
		},
		// 역할리스트 호출
		async getUnAsgnRoleByUser(params) {
			const res = await this.postApiReturn({
				apiKey: 'selectUnAsgnRoleByUser',
				resKey: 'roleUserData',
				sendParam: params,
			});
			this.setGridData({
				gridKey: this.gridName2,
				// value: res
				value: res.map(item => ({ ...item, rowStat: null })),
			});
			// this.$nextTick(() => {
			//   if (res.length > 0) {
			//     this.$refs[this.gridName2].focus({
			//       rowKey: 0,
			//       setScroll: true
			//     });
			//   }
			// });
		},
		// 사용자 역할 그리드 세팅
		gridInitAsgnRoleByUser() {
			const gridHeight =
				this.$refs.tabsGridParent[this.$refs.tabsGridParent.length - 1]
					.offsetHeight - 36;

			const myOptions = {
				columnOptions: {
					resizable: true,
				},
			};
			this.setGridOption({
				gridKey: this.gridName3,
				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
			});
			this.setGridColumn({
				gridKey: this.gridName3,
				value: asgnRoleByUserColumns,
			});
		},
		// 사용자 역할 호출
		async getAsgnRoleByUser(params) {
			const res = await this.postApiReturn({
				apiKey: 'selectAsgnRoleByUser',
				resKey: 'roleUserData',
				sendParam: params,
			});
			this.setGridData({
				gridKey: this.gridName3,
				// value: res
				value: res.map(item => ({ ...item, rowStat: null })),
			});
			// this.$nextTick(() => {
			//   if (res.length > 0) {
			//     this.$refs[this.gridName3].focus({
			//       rowKey: 0,
			//       setScroll: true
			//     });
			//   }
			// });
		},

		/* 사용자별 메뉴리스트 */
		// 사용자별 메뉴리스트 그리드 세팅
		gridInitAsgnMenuByUser() {
			const gridHeight =
				this.$refs.tabsGridParent[this.$refs.tabsGridParent.length - 1]
					.offsetHeight - 56;

			const myOptions = {
				treeColumnOptions: {
					name: 'menuNm',
				},
			};
			this.setGridOption({
				gridKey: this.gridName4,
				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
			});
			this.setGridColumn({
				gridKey: this.gridName4,
				value: asgnMenuByUserColumns,
			});
		},
		// 사용자별 메뉴리스트 호출
		async getAsgnMenuByUser(params) {
			const res = await this.postApiReturn({
				apiKey: 'selectAsgnMenuByUser',
				resKey: 'roleUserData',
				sendParam: params,
			});
			const myTree = await this.setTree({
				treeKey: 'MENU_ID',
				value: await res.map(item => ({
					...item,
					menuIdNm: item.menuNm,
					menuId: item.menuId == 0 ? '00' : item.menuId,
					parentId: item.parentId == 0 ? '00' : item.parentId,
					rowStat: null,
					upMenuId:
						item.upMenuId && item.upMenuId != '0'
							? item.upMenuId
							: item.upMenuId == '0'
							? '00'
							: 'ROOT',
				})),
			});
			this.setGridData({
				gridKey: this.gridName4,
				value: myTree['ROOT'] || [],
			});
			// this.$nextTick(() => {
			//   if (res.length > 0) {
			//     this.$refs[this.gridName4].focus({
			//       rowKey: 0,
			//       setScroll: true
			//     });
			//   }
			// });
		},
	},
};

const defaultData = {
	/* 검색옵션 */
	blocId: null,
	blocMstrList: [],
	userLoginId: '',
	userNm: '',
	userNo: '',

	isFind: false,
	detailList: [],

	/* data 세팅 - 사용자 리스트 */
	rowGrid: {
		data: [],
		column: [], // myColumns,
		option: {}, // myOptions
		defaultRow: {
			comId: '',
			deptId: '',
			userNo: '',
			userNm: '',
			userLoginId: '',
			userPswd: '',
			blocId: '',
			email: '',
			regUserNo: '',
			regDttm: '',
			procUserNo: '',
			procDttm: '',
			rowStat: 'I',
			pwBk: '',
		},
		buttonAuth: {
			add: true,
			remove: true,
			save: true,
			excel: false,
		},
	},
	rowGridSelectKey: 0,
	rowGridSelectData: null,
	rowGridModify: false,

	/* data 세팅 - 역할수정 > 역할리스트 */
	rowGridUnAsgnRoleByUser: {
		data: [],
		column: [],
		option: {},
		defaultRow: {
			userNo: null,
			roleNm: null,
			roleId: null,
			comId: null,
			aplyStartDt: null,
			aplyEndDt: null,
			rowStat: null,
		},
	},

	/* data 세팅 - 역할수정 > 사용자 역할 */
	rowGridAsgnRoleByUser: {
		data: [],
		column: [],
		option: {},
		defaultRow: {
			userNo: null,
			roleNm: null,
			roleId: null,
			comId: null,
			aplyStartDt: null,
			aplyEndDt: null,
			rowStat: null,
		},
		buttonAuth: {
			save: true,
		},
	},

	/* data 세팅 - 사용자별 메뉴리스트 */
	rowGridAsgnMenuByUser: {
		data: [],
		column: [],
		option: {},
	},

	// xlsFileInfo: {
	//   // 출력하려는 grid 와 같은 이름으로 세팅
	//   rowGrid: {
	//     // 엑셀변환시 데이타 가공이 추가로 필요하게 된다면 여기에 가공된 rowData 를 넣어야 할듯
	//     fileName: null, // 갑이 없으면 해당 페이지 메뉴명
	//     sheetName: null //  갑이 없으면 'Sheet1'
	//   }
	// }
};

const myColumns = [
	
	{ header: '사용자No', name: 'userNo', align: 'center', hidden: true },
	{ header: '사용자명', name: 'userNm' },
	{ header: '사용자ID', name: 'userLoginId' },
	{ header: '사용자비밀번호', name: 'userPswd', hidden: true },
	{ header: '사업장', name: 'blocId', hidden: true },
	{ header: 'email', name: 'email', hidden: true },
	{ header: '등록자NO', name: 'regUserNo', hidden: true },
	{ header: '등록일시', name: 'regDttm', hidden: true },
	{ header: '수정자NO', name: 'procUserNo', hidden: true },
	{ header: '수정일시', name: 'procDttm', hidden: true },
	{ header: 'comId', name: 'comId', hidden: true },
	{ header: 'deptId', name: 'deptId', hidden: true },
];

const unAsgnRoleByUserColumns = [
	{ header: '역할ID', name: 'roleId', align: 'left' },
	{ header: '역할명', name: 'roleNm' },
	{ header: '적용시작일', name: 'aplyStartDt', hidden: true },
	{ header: '적용종료일', name: 'aplyEndDt', hidden: true },
	{ header: 'userNo', name: 'userNo', hidden: true },
	{ header: 'comId', name: 'comId', hidden: true },
];

const asgnRoleByUserColumns = [
	{ header: '역할ID', name: 'roleId', align: 'left' },
	{ header: '역할명', name: 'roleNm' },
	{
		header: '적용시작일',
		name: 'aplyStartDt',
		align: 'center',
		editor: 'text',
	},
	{ header: '적용종료일', name: 'aplyEndDt', align: 'center', editor: 'text' },
	{ header: 'userNo', name: 'userNo', hidden: true },
	{ header: 'comId', name: 'comId', hidden: true },
];

const asgnMenuByUserColumns = [
	{
		header: '',
		name: '',
		align: 'center',
		width: 50,
		formatter: (props) => {
			return `<label class="custom-radio">
						<span class="radio-mark"></span>
					</label>`;
		}
	},	
	{ header: '메뉴명', name: 'menuNm' }];

const myDetail = blocCdList => {
	return [
		{
			type: 'InputText',
			label: '사용자NO',
			valueNm: 'userNo',
			elseDisabled: 'I', // 선택적 disabled => rowStat 상태가 해당 값이 아닐경우 true
			readonly: true,
			cols: 6,
			labelCols: 12,
			textCols: 12,
			class: 'py-2 pr-4 mt-2',
			iconShow: true,
			required: false,
			placeholder: '시스템 자동입력',
		},
		{
			type: 'InputText',
			label: '사용자ID',
			valueNm: 'userLoginId',
			cols: 6,
			labelCols: 12,
			textCols: 12,
			class: 'py-2 pl-4 mt-2',
			iconShow: true,
			required: true,
		},
		{
			type: 'ChangeUserPswdPopPage',
			// type: "InputText",
			label: '사용자비밀번호',
			valueNm: 'userPswd',
			// disabled: true,
			cols: 6,
			labelCols: 12,
			textCols: 12,
			class: 'py-2 pr-4 mt-2',
			required: true,
		},
		{
			type: 'InputText',
			label: '사용자명',
			valueNm: 'userNm',
			cols: 6,
			labelCols: 12,
			textCols: 12,
			class: 'py-2 pl-4 mt-2',
			iconShow: true,
			required: true,
		},
		{
			type: 'SelectBox',
			label: '사업장',
			valueNm: 'blocId',
			cols: 6,
			labelCols: 12,
			textCols: 12,
			class: 'py-2 pr-4 mt-2',
			iconShow: true,
			list: blocCdList.map(item => ({
				text: item.blocNm,
				value: item.blocId,
			})),
			required: true,
		},
		{
			type: 'InputText',
			label: 'email',
			valueNm: 'email',
			cols: 6,
			labelCols: 12,
			textCols: 12,
			class: 'py-2 pl-4 mt-2',
			iconShow: true,
		},
		{
			type: 'InputText',
			label: '등록자NO',
			valueNm: 'regUserNo',
			disabled: true,
			cols: 6,
			labelCols: 12,
			textCols: 12,
			class: 'py-2 pr-4 mt-2',
			iconShow: true,
			placeholder: '시스템 자동입력',
		},
		{
			type: 'InputText',
			label: '등록일시',
			valueNm: 'regDttm',
			disabled: true,
			cols: 6,
			labelCols: 12,
			textCols: 12,
			class: 'py-2 pl-4 mt-2',
			iconShow: true,
			placeholder: '시스템 자동입력',
		},
		{
			type: 'InputText',
			label: '수정자NO',
			valueNm: 'procUserNo',
			disabled: true,
			cols: 6,
			labelCols: 12,
			textCols: 12,
			class: 'py-2 pr-4 mt-2',
			iconShow: true,
			placeholder: '시스템 자동입력',
		},
		{
			type: 'InputText',
			label: '수정일시',
			valueNm: 'procDttm',
			disabled: true,
			cols: 6,
			labelCols: 12,
			textCols: 12,
			class: 'py-2 pl-4 mt-2',
			iconShow: true,
			placeholder: '시스템 자동입력',
		},
	];
};

function sha512(str) {
	// return crypto.subtle.digest("SHA-512", new TextEncoder("utf-8").encode(str)).then(buf => {
	//   return Array.prototype.map.call(new Uint8Array(buf), x=>(('00'+x.toString(16)).slice(-2))).join('');
	// });

	const crypto = require('crypto');
	return crypto
		.createHash('sha512')
		.update(str)
		.digest('hex');
}
</script>
<style lang="scss" scoped>
	::v-deep{
		.tui-grid-layer-state{
			top: 40px !important;
		}
	}
</style> 