<template>
	<div class="l-layout">
		<!-- 조회조견 -->
		<v-row ref="searchFilter">
			<v-col :cols="12">
				<v-card class="searchFilter">
					<v-row align="center" no-gutters>
						<v-col :cols="6">
							<!-- <component :is="'SelectDateVcTime'" :parentPrgmId="myPrgmId" /> -->
							<DatePicker
								:parentPrgmId="myPrgmId"
								:label="'조회기간'"
								:timePicker="true"
								:labelCols="3"
							/>
						</v-col>
						<v-col :cols="4">
							<component :is="'UserPopPage'" :parentPrgmId="myPrgmId" />
						</v-col>
						<v-col :cols="2" class="text-right">
							<BtnSearch />
						</v-col>
					</v-row>
				</v-card>
			</v-col>
		</v-row>

		<v-row ref="contents">
			<v-col :cols="12">
				<v-card>
					<div class="pa-5">
						<v-tabs v-model="tab">
							<v-tab v-for="item in items" :key="item.id">
								{{ item.name }}
							</v-tab>
						</v-tabs>
						<v-tabs-items v-model="tab" class="py-6">
							<v-tab-item
								v-for="(item, idx) in items"
								:key="item.id"
								class="py-2"
							>
								<!-- <div ref="gridParent" class="py-5" style="height: calc(100% - 300px)"> -->
								<template v-if="item.id == 'loginLog'">
									<component
										:ref="gridNameTab1"
										:is="loadGrid ? 'Grid' : null"
										:parentPrgmId="myPrgmId"
										:gridName="gridNameTab1"
										:innerTabGridInfo="{ tab, idx }"
									/>
								</template>
								<template v-else-if="item.id == 'menuCnctLog'">
									<component
										:ref="gridNameTab2"
										:is="loadGrid ? 'Grid' : null"
										:parentPrgmId="myPrgmId"
										:gridName="gridNameTab2"
										:innerTabGridInfo="{ tab, idx }"
									/>
								</template>
								<!-- </div> -->
							</v-tab-item>
						</v-tabs-items>
					</div>
				</v-card>
			</v-col>
		</v-row>
	</div>
</template>
<script>
import mixinGlobal from '@/mixin/global.js';
// import SelectDateVcTime from "~/components/common/select/SelectDateVcTime";
import UserPopPage from '~/components/common/modal/UserPopPage';
import BtnSearch from '~/components/common/button/BtnSearch';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import DatePicker from '~/components/common/Datepicker';
import DateUtility from '~/plugins/dateUtility';

let myTitle;
let myPrgmId;
export default {
	mixins: [mixinGlobal],
	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: {
		// SelectDateVcTime,
		UserPopPage,
		BtnSearch,
		Grid,
		DatePicker,
	},
	data() {
		return {
			myPrgmId: myPrgmId,
			loadGrid: false,
			gridNameTab1: 'loginLogRowGrid',
			gridNameTab2: 'menuCnctLogRowGrid',
			tab: null,
			items: [
				{ name: '로그인 이력', id: 'loginLog' },
				{ name: '메뉴 접근 이력', id: 'menuCnctLog' },
			],
		};
	},
	computed: {
		chkIsFind() {
			// 조회 플래그
			return this.pageData.isFind;
		},
		chkMyUserList() {
			// 사용자 선택 감지
			return this.pageData.myUserList;
		},
		chkFromDt() {
			// 조회기간 시작일 선택 감지
			return this.pageData.fromDt;
		},
		chkToDt() {
			// 조회기간 종료일 선택 감지
			return this.pageData.toDt;
		},
	},
	watch: {
		chkIsFind(val) {
			if (val) this.search();
		},
		chkMyUserList() {
			this.setPageData({ isFind: true });
		},
		chkFromDt() {
			if (
				DateUtility.diff(
					Utility.setFormatDate(this.pageData.fromDt, 'YYYY-MM-DD'),
					Utility.setFormatDate(this.pageData.toDt, 'YYYY-MM-DD'),
				) < 0
			) {
				this.setPageData({
					toDt: Utility.setFormatDate(
						this.pageData.fromDt,
						'YYYY-MM-DD 23:59:59',
					),
				});
			}
			this.setPageData({ isFind: true });
		},
		chkToDt() {
			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.contents.offsetHeight - 200;
			const myOptions = {
				// minWidth: 100,
				scrollX: false,
			};
			this.setGridOption({
				gridKey: this.gridNameTab1,
				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
			});
			this.setGridColumn({
				gridKey: this.gridNameTab1,
				value: loginLogColumns,
			});
			this.setGridOption({
				gridKey: this.gridNameTab2,
				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
			});
			this.setGridColumn({
				gridKey: this.gridNameTab2,
				value: menuCnctLogColumns,
			});

			this.loadGrid = true;
			this.setPageData({ isFind: true });
		},
		async search() {
			await this.getRowGridData();
			await this.setPageData({ isFind: false });
		},
		async getRowGridData() {
			const sendParam = {
				// date: "2010-01-01 00:00:00 - 2021-08-31 23:59:00", => 이건 없어도 조회는 되는 듯,.
				comId: this.comId, // 회사별 고정값 =>  mixin/global 에서 불러옴
				userList: this.pageData.myUserList, // 선택된 사용자 userNo Array => 처음부터 사용자 지정없으면 조회 안됨, 전체기능은 없는듯,.
				// userList: ["2", "3"], // 선택된 사용자 userNo Array => 처음부터 사용자 지정없으면 조회 안됨, 전체기능은 없는듯,.
				frDttm: this.pageData.fromDt, // "2018-01-01 00:00:00", //
				endDttm: this.pageData.toDt, // "2021-08-31 23:59:00" //
				// frDttm: "2021-01-01 00:00:00", //
				// endDttm: "2021-08-31 23:59:00" //
			};
			const resTab1 = await this.postApiReturn({
				apiKey: 'selectLoginLog',
				resKey: 'loginLogData',
				sendParam,
			});
			this.setGridData({
				gridKey: this.gridNameTab1,
				value: resTab1,
			});
			const resTab2 = await this.postApiReturn({
				apiKey: 'selectMenuCnctLog',
				resKey: 'menuCnctLogData',

				sendParam,
			});
			this.setGridData({
				gridKey: this.gridNameTab2,
				value: resTab2,
			});
		},
	},
};

const defaultData = {
	/* 검색옵션 */
	cmCycle: 'CYC_HOUR', // 주기
	defaultRange: {
		CYC_HOUR: 'no limite',
	},
	fromDt: '',
	toDt: '',
	myUserList: '',

	selecUserList: [], // 선택된 사용자 데이타
	selecUserListRowKeys: [], // 선택된 사용자 데이타

	isFind: false,

	modalData: {}, // 모달 관련 데이타 저장소

	/* data 세팅 */
	loginLogRowGrid: {
		data: [],
		column: [], // myColumns,
		option: {}, // myOptions
	},
	menuCnctLogRowGrid: {
		data: [],
		column: [], // myColumns,
		option: {}, // myOptions
	},
};

const loginLogColumns = [
	{
		header: '사용자NO',
		name: 'userNo',
		align: 'center',
		width: 200,
		hidden: true,
	},
	{ header: '사용자ID', name: 'userLoginId', align: 'center', width: 200 },
	{ header: '사용자명', name: 'userNm', align: 'center', width: 200 },
	{ header: '로그인일시', name: 'loginDttm', align: 'center' },
];

const menuCnctLogColumns = [
	{
		header: '사용자NO',
		name: 'userNo',
		align: 'center',
		width: 200,
		hidden: true,
	},
	{ header: '사용자ID', name: 'userLoginId', align: 'center', width: 200 },
	{ header: '사용자명', name: 'userNm', align: 'center', width: 200 },
	{ header: '메뉴명', name: 'menuNm', align: 'left' },
	{ header: '메뉴 접근 일시', name: 'menuCnctDttm', align: 'center' },
];
</script>
