<script setup>

import {ref} from "vue";
import TMenu from "@/components/ui/TMenu.vue";
import TDivider from "@/components/ui/TDivider.vue";

const year = ref("")
year.value = new Date().getFullYear().toString()

const props = defineProps({
	data: null,
	ctx: Object
})

</script>

<template>
	{{ ctx.supportPosts.value }}
	<div class="page-footer">
		<div class="site-map grid grid-cols-4">
			<div class="col">
				<TMenu :items="[
          {
            label: '产品',
            items: [
                {
                  label: 'CDN',
                  url: '/portal/products/cdn'
                },
                /** {
                  label: 'DNS',
                  url: '/portal/products/dns'
                }**/
            ]
          }
      ]"></TMenu>
			</div>
			<div class="col">
				<TMenu :model="[
          {
            label: '价格',
            items: [
                {
                  label: 'CDN套餐',
                  url: '/plans'
                },
                /** {
                  label: 'DNS套餐'
                }**/
            ]
          }
      ]"></TMenu>
			</div>
			<div class="col">
				<TMenu :items="[
          {
            label: '文档',
            items: [
                {
                  label: '文档中心',
                  url: '/docs'
                }
            ]
          }
      ]"></TMenu>
			</div>
			<div class="col">
				<TMenu :items="[
       {
            label: '支持与服务',
            items:ctx.supportPosts.map(function (v) {
				return {
					label: v.subject,
					url: '/portal/post?postId=' + v.id
				}
            })
          }
      ]"></TMenu>
			</div>
		</div>

		<TDivider></TDivider>
		<div class="copyright-box">
			&copy; {{ year }} {{ ctx.productName }}
		</div>
	</div>
</template>

<style scoped lang="postcss">
.page-footer {
	/*background: var(--gray-200);**/
	padding: 0 1rem 1rem 1rem;
	margin-top: -1rem;
}

.site-map {
	margin: 0 auto 0 auto;
	width: 1024px;
}

:deep(.p-menu) {
	background: none !important;
	border: none;

	.p-menu-submenu-label {
		background: none !important;
		font-weight: bold;
		padding-left: 0;
	}

	.p-menu-item-link {
		padding-left: 0;
		margin-left: 0;
	}
}

</style>