<template>

    <Head>
        <Title>{{ tdk?.tdk_title }}</Title>
        <Meta :content=tdk?.tdk_keyword name="keywords" />
        <Meta :content=tdk?.tdk_description name="description" />
        <Meta name="baidu-site-verification" content="" />
    </Head>
    <Header></Header>
    <Poster :type=1 :title="$t('common.poster.about')"></Poster>

    <div class="Home-main">
        <div class="container">
            <article>
                <section>
                    <h1>Company Profile</h1>
                    <h2>{{ $t("about.profile") }}</h2>
                    <p> {{ $t('about.intro') }} </p>
                    <img :src="aboutUs.about_us_profile" alt="">
                    <div class="bg-gray">
                        <p>{{ $t('about.futhermore') }}</p>
                    </div>
                    <img :src="aboutUs.about_us_profile_history" alt="">
                </section>
                <section>
                    <h1>Our honor</h1>
                    <h2>{{ $t("about.honor") }}</h2>
                    <img :src="aboutUs.about_us_honor" alt="">
                    <div class="row gy-3">
                        <template v-for="item in ourHonor">
                            <img class="col-lg-3 col-md-6 col-sm-12" @click="openPreview(item)" :src="item" alt="">
                        </template>
                    </div>
                </section>
                <section>
                    <h1>Factory Photo</h1>
                    <h2>{{ $t("about.factory") }}</h2>
                    <div class="row gy-3">
                        <template v-for="item in factoryPhoto">
                            <img class="col-lg-3 col-md-6 col-sm-12" @click="openPreview(item)" :src="item" alt="">
                        </template>
                    </div>
                </section>

                <section>
                    <h1>Our exhibition</h1>
                    <h2>{{ $t("about.exhibition") }}</h2>
                    <div class="row gy-3">
                        <template v-for="item in ourExhibition">
                            <img class="col-lg-3 col-md-6 col-sm-12" @click="openPreview(item)" :src="item" alt="">
                        </template>
                    </div>
                </section>
            </article>
        </div>
    </div>
    <Final></Final>
    <PopupSidebar></PopupSidebar>
    <PopupMessageUs></PopupMessageUs>
    <PopupImagePreview :images="images" v-model="current"></PopupImagePreview>
</template>

<script setup>

const { l, locale } = useI18n()

const current = ref("");
const openPreview = (item) => {
    current.value = item
}

const ourHonor = ref([])
const factoryPhoto = ref([])
const ourExhibition = ref([])
const images = ref([]);
let aboutUs = ref({})
useFetch('/api/aboutUs/getAboutUs', { params: { locale: locale.value } }).then(res => {
    aboutUs.value = JSON.parse(res.data.value).data || {}
    ourHonor.value = aboutUs.value.about_us_honor_more.split(',')
    factoryPhoto.value = aboutUs.value.about_us_factory.split(',')
    ourExhibition.value = aboutUs.value.about_us_exhibition.split(',')
    images.value = [
        ...ourHonor.value,
        ...factoryPhoto.value,
        ...ourExhibition.value,
    ]
})

// 获取Tdk
let tdk = ref({})
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).then(res => {
    tdk.value = JSON.parse(res.data.value).data
})

onMounted(() => {
    fontSizeReactive({
        880: 1,
        480: 1,
    })
    htmlAddAnimations({
        tagDom: 'Home-main', preload: 1.3
    })
})

/**export**/
defineExpose({
    middleware: 'auth'
})

</script>

<style scoped src="~/assets/css/About/index.scss"></style>
