<template>
	<div :class="style['base-header']">
		<div :class="style['container']">
			<div :class="style['welcome-text']">
				<img
					:class="style['logo']"
					src="~@/assets/svg/header_logo.svg"
				/>
				<span :class="style[collapsed ? 'text-collapsed' : 'text']">{{
					getI18n('common', 'Common_JcBussiness_Design_System')
				}}</span>
				<menu-unfold-outlined
					v-if="collapsed"
					class="trigger"
					@click="onCollapsedClick"
				/>
				<menu-fold-outlined
					v-else
					class="trigger"
					@click="onCollapsedClick"
				/>
			</div>
			<div :class="style['action-button']">
				<div
					class="login-custom-dropdown-wrapper"
					ref="dropdownWrapper"
				>
					<a-dropdown
						:getPopupContainer="() => $refs.dropdownWrapper"
						:class="style['type-dropdown']"
					>
						<!-- <a>
							<base-svg-icon
								v-if="userPhoto"
								:name="userPhoto"
								:class="style['user-select']"
							/>
							<a-avatar v-else :class="style['user-default']">
								<template #icon><UserOutlined /></template>
							</a-avatar>
							<span :class="style['user-name']">{{
								userName
							}}</span>
						</a> -->
						<a>
							<base-svg-icon
								v-if="userPhoto"
								:name="userPhoto"
								:class="style['user-select']"
							/>
							<a-avatar v-else :class="style['user-default']">
								<template #icon><UserOutlined /></template>
							</a-avatar>
							<span :class="style['user-name']">{{
								userName
							}}</span>
							<DownOutlined />
						</a>
						<template #overlay>
							<a-menu>
								<!-- 退出 -->
								<a-menu-item
									@click="onConfirmShowClick()"
									class="custom-item quit"
								>
									{{ getI18n('common', 'Common_Logout') }}
								</a-menu-item>
								<!-- 关于 -->
								<a-menu-item
									@click="onViewAboutClick()"
									class="custom-item license-about"
								>
									{{ getI18n('common', 'Common_About') }}
								</a-menu-item>
								<!-- 许可配置 
								<a-menu-item
									@click="onLicenseConfigClick()"
									class="custom-item license"
								>
									{{
										getI18n(
											'common',
											'Common_License_Config'
										)
									}}
								</a-menu-item>-->
							</a-menu>
						</template>
					</a-dropdown>
				</div>
			</div>
		</div>
	</div>

	<base-operational-qualification
		:confirmModalVisible="confirmModalVisible"
		@confirm-modal-ok="onConfirmOkClick"
		@confirm-modal-cancel="onConfirmCancelClick"
		:text="confirmTips"
		:ok-loading="confirmLoading"
	/>

	<a-modal
		:visible="viewAboutVisible"
		:title="''"
		:footer="null"
		@cancel="onAboutModalCancel"
		:dialogClass="'view-about-modal'"
	>
		<a-row>
			<!-- 图标 -->
			<a-col :span="4">
				<a-image
					:width="60"
					:height="60"
					src="/src/assets/svg/header_logo.svg"
					fallback="data:image/svg+xml;base64,77u/PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjM0cHgiIGhlaWdodD0iMjZweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMSAtMTUgLTEzICkiPg0KICAgIDxwYXRoIGQ9Ik0gMzMgMjQuNTY1MTE2NzA5MDc3NyAgQyAzMi45NTU4MTc4NDMyMzg2IDI0LjU2NTExNjcwOTA3NzcgIDI5LjczODcwNTQ1NDg4NTUgMjYuNDc4Mzg5NTQ5MDI3NSAgMjAuNDE4MDI3Mzc5NjEzNiAyMi4yNjU3ODM2MjY0NzEzICBDIDE0Ljk3NjAzNjk5NDQyMzggMTkuODA1NDAzNjAzNDQ2OCAgMTEuODk0ODc3OTQ0ODkyNyAyNC41NjQ5OTEwMzg0MjU4ICA3Ljg4MDMwMTE5NjUyNzAzIDI0LjU2NDk5MTAzODQyNTggIEMgMy42ODk2NjAwNTMzNDYzNSAyNC41NjQ0ODgzNTU4MTgyICAwLjA0NDE4MjE1Njc2MTQwMjkgMjMuMDMyMTg2MDk3MTIyOCAgMCAyMy4wMzIxODYwOTcxMjI4ICBMIDAgMi4zMzkyNTY1NTQyMDYyMyAgTCAwLjA0NDE4MjE1Njc2MTQwMjkgMTcuNjY3MzY4ODAyNTYyMyAgQyAwLjA0NDE4MjE1Njc2MTQwMjkgMTcuNjY3MzY4ODAyNTYyMyAgNS4zMTIwMzY1NjMyODk3MSAyMC4yMzI3NDY2NTUyNTQ3ICA5LjQ0NzUyNTAwNDQ4MDE2IDE4LjQzMzk1OTc3OTE5MTYgIEMgMTQuNzg0MzUyNDI4NzY1NSAxNi4xMTMzODgzNTY0MTMgIDE3LjUzMzExNjgxMzk3MDggMTUuNzA5OTg1NTYzNzkzMyAgMjAuNDE4MDI3Mzc5NjEzNiAxNi45MDExNTQ4Mzc4ODg2ICBDIDIzLjAxNzU5NjYzNTA3NjEgMTcuOTc0MzgyMjA1MTY5NyAgMjYuMzk1NjAzMjExMTcgMTguNzgwNDMzNzY2NDk3NyAgMjggMTkuMjAwMzYyMjQ5ODQzMSAgTCAyOCAzLjAxNzYyNjczMzE5NzI3ICBDIDMxLjg4NTk5Njg0MTgxMjcgMy42Njk0ODA0MDQ2MzYwNCAgMzIuOTU1ODE3ODQzMjM4NiAzLjg3MjE4NzE2NjE2MTE1ICAzMyAzLjg3MjE4NzE2NjE2MTE1ICBMIDMzIDI0LjU2NTExNjcwOTA3NzcgIFogTSA4LjMxODk1MTU5MDkxMDg2IDE1LjkzNTQzODcxMzMxMzUgIEMgMTQuMzA4ODA1MDA1MzExMyAxMi45NzYyMDkwMzc1NDYzICAxNi42MTg5MTg5OTYxMzI4IDEzLjE1NTEwMTIxMDUzNTEgIDIwLjQxODAyNzM3OTYxMzYgMTQuNjAxNjk2MDg0NjMwMyAgQyAyMy4wNDc1NTEzNjU5OTM5IDE1LjYwMjkxNDE2ODM2OSAgMjQuODI4Mzc5NDAzMjE2OSAxNS43MTQ2MzUzNzc5MTM5ICAyNi42ODY5MjI2MTE0MjYxIDE2LjEzNDUwMTAyNTkzMzMgIEwgMjYuNjg2OTIyNjExNDI2MSAxMC43Njk2ODM3MzEzNzI4ICBDIDI0LjgyODM3OTQwMzIxNjkgMTAuMzQ5NDQxMDcxMzk3NiAgMjMuMDQ3NTUxMzY1OTkzOSAxMC4yMzgyMjI1NDQ0NjA0ICAyMC40MTgwMjczNzk2MTM2IDkuMjM2ODc4NzkwMDY5NzcgIEMgMTYuNjE5MDQ3NTU3MjA5NyA3Ljc5MDE1ODI0NTMyMjY5ICAxNC42NTM3OTg2NTUxNzMyIDcuODA5ODg4NTM3NjcyICA4LjY2Mzg4MDk2MDIzNDM3IDEwLjc2OTY4MzczMTM3MjggIEMgNy42NjA3ODMxNTc3MTk3NyAxMS4yNjU2NDI5NTkxMjE2ICA2LjQ4OTE0MTc4MzM4ODg3IDExLjYwNzcxODQ3MzYxMSAgNS41Mjk0MzMzNDQzMjgxMiAxMS41MzYyNzQ3MDgwMDIxICBMIDUuNTI5NDMzMzQ0MzI4MTIgOS4yMzY4Nzg3OTAwNjk3NyAgQyA2LjQ4OTE0MTc4MzM4ODg3IDkuMzA4MzIyNTU1Njc4NTkgIDcuNjYwNzgzMTU3NzE5NzcgOC45NjY2ODY4ODg0NzA5ICA4LjY2Mzg4MDk2MDIzNDM3IDguNDcwMjg3ODEzNDQwNDEgIEMgMTQuNjUzNzk4NjU1MTczMiA1LjUxMDc0Mzk2MTA0MzQ0ICAxNi42MTg5MTg5OTYxMzI4IDUuNDkxMTM5MzM5MzQ2MDMgIDIwLjQxODAyNzM3OTYxMzYgNi45Mzc0ODI4NzIxMzc0ICBDIDIzLjA0NzU1MTM2NTk5MzkgNy45Mzg5NTIyOTcxNzk5MyAgMjQuODI4Mzc5NDAzMjE2OSA4LjA1MDQyMjE2NTQyMDk1ICAyNi42ODY5MjI2MTE0MjYxIDguNDcwMjg3ODEzNDQwNDEgIEwgMjYuNjg2OTIyNjExNDI2MSAzLjEwNTY1OTAyNDg1Nzc0ICBDIDI2LjY4OTE3MjQzMDI3MTggMy4xMDYwOTg4NzIxMzk0MSAgMjYuNjg0NzM3MDczMTE4OCAzLjEwNTA5MzUwNjkyNDE2ICAyNi42ODY5MjI2MTE0MjYxIDMuMTA1NjU5MDI0ODU3NzQgIEMgMjQuODI4NDQzNjgzNzU1MyAyLjY4NTQ3OTIwMDIwODUxICAyMi44MTgxMzQxMjQyNjUzIDIuNjA4MDAzMjQzMzA4MTggIDIwLjE4NjQyNDU5OTU3NzcgMS42MDYwOTM5NzA5ODM5OSAgQyAxNi4zODc0NDQ3NzcxNzM4IDAuMTU5NzUwNDM4MTkyNjE4ICAxNC4zMDg4MDUwMDUzMTEzIDAuNTk3Mzk4NDgzNDU2ODQxICA4LjMxODk1MTU5MDkxMDg2IDMuNTU3MTkzNjc3MTU3NjIgIEMgNS4zNTM3NTQ2MzI3NDM4NiA1LjAyMjcwMTk4NDM2NDczICAxLjc1OTA1ODM2MTUzNDUzIDMuMDg2NjE5OTIxMDkzOTEgIDAuODU5NzczNjI4NjE2OTE2IDIuMzg1NDQwNTE4NzgxODYgIEMgMC4xNDA2MDI5NjQ0MzY2MjkgMS44MjQ4MjM3NDA2MjcxNyAgMC4wNDQxODIxNTY3NjE0MDI5IDEuNjg2MTQ2MTc2MjQ4NCAgMCAxLjY4NjE0NjE3NjI0ODQgIEwgMCAxNC45MDUzNzkyMTQ5NjIzICBDIDAuMDQ0MTgyMTU2NzYxNDAyOSAxNC45MDUzNzkyMTQ5NjIzICA0LjI3OTE3Njg3MTQ3MjY5IDE3LjkzMjAzMTE5NTQ3NzMgIDguMzE4ODIzMDI5ODMzOTYgMTUuOTM1NDM4NzEzMzEzNSAgWiAiIGZpbGwtcnVsZT0ibm9uemVybyIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSJub25lIiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIDE1IDEzICkiIC8+DQogIDwvZz4NCjwvc3ZnPg=="
				/>
			</a-col>
			<!-- 许可信息 -->
			<a-col :span="20">
				<a-row>
					<a-col :span="24" class="about-name">
						{{ projectName }}
					</a-col>
					<a-col :span="24" class="about-version" />
					<a-col :span="24" class="about-customer-name"
						>客户名称: {{ customerName }}
					</a-col>
					<a-col :span="24" class="about-valid-period"
						>有效期限: {{ createTimeFormat }}
					</a-col>
					<a-col :span="24" class="about-version"
						>#{{ buildNo }}
					</a-col>
				</a-row>
			</a-col>
		</a-row>
	</a-modal>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import style from './basic-layout.module.less'
import {
	UserOutlined,
	DownOutlined,
	MenuUnfoldOutlined,
	MenuFoldOutlined,
} from '@ant-design/icons-vue'
import { USER_INFO_KEY } from '@/global/cacheKey'
import { userStore } from '@/store/modules/user'
import Storage from 'web-storage-cache'
import { UserInfo } from '@/types/store'
import { getI18n } from '@/utils/i18n'
import { validatenull } from '@/utils/tool/translateValue'

import { getLicenseTnformationApi } from '@/api/license'
import router from '@/router'

export default defineComponent({
	components: {
		UserOutlined,
		DownOutlined,
		MenuUnfoldOutlined,
		MenuFoldOutlined,
	},
	emits: ['refresh-sider-collapsed'],
	setup(_props, context) {
		const collapsed = ref<boolean>(false)
		const useUserStore = userStore()
		// 缓存中获取用户信息
		const localStorage = new Storage()
		const userInfo = reactive<UserInfo>(localStorage.get(USER_INFO_KEY))
		const userPhoto = ref<string>()
		const userName = ref<string>()
		if (!validatenull(userInfo)) {
			userPhoto.value = userInfo.photo || ''
			userName.value = userInfo.name || ''
		}
		const customerName = ref<string>('')
		const createTimeFormat = ref<string>('')
		const buildNo = ref<string>('')
		// 弹窗确认显示隐藏
		const confirmModalVisible = ref<boolean>(false)
		// 弹窗提示信息
		const confirmTips = ref<string>('')
		// 弹窗确认取消按钮loading
		const confirmLoading = ref<boolean>(false)
		// 弹窗显示按钮点击事件
		const onConfirmShowClick = () => {
			confirmTips.value = getI18n('common', 'Common_Logout_Tips')
			confirmModalVisible.value = true
		}
		// 弹窗确认按钮点击事件
		const onConfirmOkClick = async () => {
			confirmLoading.value = true
			await useUserStore.logout()
			confirmLoading.value = false
			confirmModalVisible.value = false
		}
		// 弹窗取消按钮点击事件
		const onConfirmCancelClick = () => (confirmModalVisible.value = false)

		// 隐藏、展开侧边栏
		const onCollapsedClick = () => {
			collapsed.value = !collapsed.value
			context.emit('refresh-sider-collapsed', collapsed.value)
		}

		const passwordModifyVisiable = ref<boolean>(false)
		// 修改密码
		const onModifyPasswordClick = async () => {
			passwordModifyVisiable.value = true
		}
		// 弹框关闭
		const onConfirmModifyClick = () => {
			passwordModifyVisiable.value = false
		}

		const personalInfoVisiable = ref<boolean>(false)
		// 个人信息
		const onModifyPersonalInfoClick = () => {
			personalInfoVisiable.value = true
		}
		const onPersonalInfoCloseClick = () => {
			personalInfoVisiable.value = false
		}
		const onPersonalInfoConfirmClick = (name: string, photo: string) => {
			userPhoto.value = photo
			userName.value = name
			useUserStore.setUserInfo({
				id: userInfo.id,
				name: name,
				photo: photo,
				username: userInfo.username,
			})
			personalInfoVisiable.value = false
		}

		// 查看关于
		const viewAboutVisible = ref<boolean>(false)
		const projectName = ref('')
		const onViewAboutClick = async () => {
			await getLicenseTnformationApi().then(res => {
				viewAboutVisible.value = true
				projectName.value = `${res.data[0].app_name}(${res.data[0].appEditionCN})`
				customerName.value = res.data[0].customer_name
				createTimeFormat.value = res.data[0].lic_start_end
				buildNo.value = res.data[0].buildVersion
			})
		}
		// 查看关于 - 弹窗关闭
		const onAboutModalCancel = () => {
			viewAboutVisible.value = false
		}

		// 许可配置页面
		const onLicenseConfigClick = () => {
			router.push({ name: 'License40399' })
		}

		return {
			getI18n,
			style,
			confirmModalVisible,
			confirmLoading,
			confirmTips,
			onConfirmShowClick,
			onConfirmOkClick,
			onConfirmCancelClick,
			collapsed, // collapsed: ref<boolean>(false),
			onCollapsedClick,
			onModifyPasswordClick,
			onConfirmModifyClick,
			passwordModifyVisiable,
			onModifyPersonalInfoClick,
			onPersonalInfoCloseClick,
			onPersonalInfoConfirmClick,
			personalInfoVisiable,
			customerName,
			createTimeFormat,
			projectName,
			userPhoto,
			userName,
			buildNo,
			viewAboutVisible,
			onViewAboutClick,
			onLicenseConfigClick,
			onAboutModalCancel,
		}
	},
})
</script>
