<template>
	<view class="common-layout" :style="{ minHeight: appStore.windowInfo.screenHeight + 'px', background: bgColor }">
		<!-- 		<el-container>
			<el-aside
				v-if="!appStore.isMobileView"
				width="200px"
			>
				<PcSiderBar />
			</el-aside>
			<el-container> -->
		<!-- <el-header> -->
		<!-- <MobileHeader v-if="appStore.isMobileView"></MobileHeader> -->
		<!-- <PcHeader v-if="!appStore.isMobileView"></PcHeader> -->
		<!-- </el-header> -->
		<!-- 	<el-main>
					<view
						class="content-container"
						:class="{
							'content-container-mobile-padding': appStore.isMobileView,
							'content-container-pc-padding': !appStore.isMobileView
						}"
					>
						<slot></slot>
						<PcFooter v-if="!appStore.isMobileView"></PcFooter>
					</view>
				</el-main>
			</el-container>
		</el-container> -->
		<slot></slot>
		<view v-if="showCustomer" class="service-icon" style="width: 50px; height: 50px;"
			:style="{ 'bottom': serviceIconXY.bottom + 'px', 'left': serviceIconXY.x + 'px' }"
			@click.stop="handleServiceClick" @touchmove.prevent="handleTouchMove">
			<theme-image src="@/static/icon-service-top.png" style="width: 50px; height: 50px;"></theme-image>
		</view>
		<DepositClosePopup />
	</view>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useAppStore } from '@/store/useAppStore.js'
import { useUserStore } from '@/store/useUserStore'

import PcHeader from '@/components/header/PcHeader.vue'
import MobileHeader from '@/components/header/MobileHeader.vue'
import PcFooter from '@/components/footer/PcFooter.vue'
import MobileFooter from '@/components/footer/MobileFooter.vue'
import PcSiderBar from '@/components/siderbar/PcSiderBar.vue'

import Toast from '@/module/toast/toast'
import { openUrl } from '@/module/utils/openUrl'
import { useI18n } from 'vue-i18n'
import GlobalConfig from '@/config/global.config.js'

import DepositClosePopup from '@/pages/wallet/components/DepositClosePopup.vue'

onMounted(() => {
	loadData()
	// handlePages()
})
defineProps({
	bgColor: {
		type: String,
		default: 'transparent'
	},
	showCustomer: {
		type: Boolean,
		default: true
	}
})
const appStore = useAppStore()
const userStore = useUserStore()
const { t } = useI18n()

const serviceIconXY = reactive({
	x: appStore.windowInfo.windowWidth - 50,
	y: appStore.windowInfo.windowHeight * 0.7,
	bottom: 100
})

const loadData = () => {
}

const handlePages = () => {
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const currentRoute = currentPage.route
	console.log('currentRoute', currentRoute);

	const pathKeys = currentRoute.split('/').slice(1).join('.')
	uni.setNavigationBarTitle({
		title: `${GlobalConfig.appName} - ${t(pathKeys)}`
	})
}

const handleTouchMove = (e) => {
	if (e.type === 'touchmove' && e.touches.length) {
		const windowInfo = uni.getWindowInfo()
		const currentTouch = e.touches[0]
		const x = currentTouch.pageX
		const y = currentTouch.pageY
		if (x > 0 && x < windowInfo.windowWidth - 50) {
			serviceIconXY.x = x
		}
		if (y > 0 && y < windowInfo.windowHeight - 50) {
			serviceIconXY.y = y
			serviceIconXY.bottom = windowInfo.windowHeight - y
		}
	}
}

const handleServiceClick = async () => {
	// openUrl(appStore.FAQ)
	uni.navigateTo({
		url: '/pages/account/CustomService'
	})
}
</script>

<style lang="scss" scoped>
.common-layout {
	position: relative;
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
	overflow-y: auto;
	// transform: translate(0,0)
}

.service-icon {
	position: fixed;
	z-index: 1011;
}

.content-container {
	position: relative;
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
}

.content-container-mobile-padding {
	// padding-top: 120rpx;
	padding-bottom: 110rpx;
}

.content-container-pc-padding {
	padding-top: 64px;
	padding-bottom: 0px;
}
</style>

<style lang="scss">
.common-layout {

	.el-header {
		padding: 0px !important;
	}

	.el-main {
		padding: 0px !important;
	}
}
</style>
