<template>
	<section class="section-footer">
		<div class="content">
			<div class="mate">
				<div class="logos">
					<img
						src="@/assets/images/logos/code-create-black.png"
						@click="openView(UrlList.codeCreate)"
					/>
					<img src="@/assets/images/logos/stylish-parade-black.png" />
					<img
						src="@/assets/images/logos/aida-black.png"
						@click="openView(UrlList.aida)"
					/>
				</div>
				<div class="tip">{{ $t('Home.FooterTip') }}</div>
				<div class="link">
					<span class="text" @click="openView(UrlList.aida)">{{
						$t('Home.FooterAidaTip')
					}}</span>
					<span class="icon"><svg-icon name="arrow_right" size="12" /></span>
				</div>
			</div>
			<div v-for="v in list" :key="v.title" :class="[v.class]">
				<div class="title">{{ $t(v.title) }}</div>
				<div v-for="item in v.child" :key="item.title" class="item" @click="onItem(item)">
					{{ $t(item.title) }}
				</div>
			</div>
		</div>
		<HomeFooter class="footer" isHome />
	</section>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue'
	import { useRouter } from 'vue-router'
	const router = useRouter()
	import HomeFooter from '@/components/Footer.vue'
	import { UrlList, openView } from '../../utils/UrlList'
	const list = ref([
		{
			title: 'Home.Help',
			class: 'help',
			child: [
				{
					title: 'Home.FAQ',
					url: UrlList.faq
				},
				{
					title: 'Home.MyAccount',
					name: 'settings'
				},
				{
					title: 'Home.MyOrders',
					name: 'wardrobe'
				},
				{
					title: 'Home.PaymentInvoices',
					url: ''
				},
				{
					title: 'Home.CopyrightLicense',
					url: ''
				}
			]
		},
		{
			title: 'Home.Polices',
			class: 'polices',
			child: [
				{
					title: 'Home.Legal',
					url: ''
				},
				{
					title: 'Home.PrivacyPolicy',
					url: UrlList.privacy
				},
				{
					title: 'Home.CookiesSettings',
					url: ''
				},
				{
					title: 'Home.PurchaseConditions',
					url: ''
				}
			]
		},
		{
			title: 'Home.Company',
			class: 'company',
			child: [
				{
					title: 'Home.AboutUs',
					url: UrlList.aboutUs
				},
				{
					title: 'Home.Offices',
					url: ''
				},
				{
					title: 'Home.JoinWithUs',
					url: UrlList.joinWithUs
				}
			]
		}
	])
	const onItem = (item) => {
		if (item.url) {
			openView(item.url)
		} else if (item.name) {
			router.push({ name: item.name })
		}
	}
</script>

<style lang="less">
	.section-footer {
		background-color: #f6f6f6;
		border-top: 0.1rem solid #232323;
		> .content {
			display: flex;
			min-height: 37rem;
			padding: 0 8rem;
			border-bottom: 0.1rem solid #c4c4c4;
			> div {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				padding: 3rem 2rem;
				flex: 1;
				border-right: 0.1rem solid #c4c4c4;
				&:last-child {
					border-right: none;
				}
			}
			> .mate {
				> .logos {
					margin-bottom: 3rem;
					display: flex;
					gap: 2.9rem;
					> img {
						width: auto;
						height: 3rem;
					}
				}
				> .tip {
					font-family: KaiseiOpti-Regular;
					font-size: 1.4rem;
					line-height: 140%;
					color: #585858;
					margin-bottom: 4.4rem;
				}
				> .link {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 0.1rem solid #232323;
					user-select: none;
					cursor: pointer;
					> .text {
						font-size: 1.4rem;
						line-height: 120%;
						color: #232323;
						margin-right: 1rem;
					}
					> .icon {
						width: 2.4rem;
						height: 2.4rem;
						transform: rotate(-45deg);
					}
				}
			}
			> .help,
			> .polices,
			> .company {
				> .title {
					font-family: KaiseiOpti-Bold;
					font-size: 1.8rem;
					color: #232323;
					margin-bottom: 2.3rem;
					text-transform: uppercase;
				}
				> .item {
					font-family: KaiseiOpti-Regular;
					font-size: 1.4rem;
					color: #585858;
					margin-bottom: 0.6rem;
					line-height: 2rem;
					user-select: none;
					cursor: pointer;
				}
			}
		}
		> .footer {
			border: none;
			width: 100%;
		}
	}
</style>
