<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import logoCn from '@/assets/images/logoCn.png'
import logoEn from '@/assets/images/logoEn.png'
import wechat from '@/assets/images/footer/wechat.svg'
import wb from '@/assets/images/footer/wb.svg'
import dy from '@/assets/images/footer/dy.svg'
import { pcFooter } from './data'
const { locale: language, t } = useI18n()
const infosList = pcFooter(t)
</script>

<template>
  <div class="footer relative">
    <div class="layout container">
      <div class="infos clear flex justify-between">
        <div class="infos-contact">
          <img :src="language === 'zh' ? logoCn : logoEn" alt="logo" class="logo" />
          <ul>
            <li>{{ t('header.footer.saleEmail') }}：sales@4dage.com</li>
            <li>{{ t('header.footer.meitiEmail') }}：pr@4dage.com</li>
            <li>{{ t('header.footer.phone') }}：400-669-8025</li>
          </ul>
        </div>
        <div class="infos-list">
          <div class="infos-item" v-for="item in infosList" :key="item.title">
            <h6>{{ item.title }}</h6>
            <a v-for="i in item.list" :key="i.text" target="_blank" @click="toLink(i)">{{
              i.text
            }}</a>
          </div>
        </div>
        <ul class="contacts-w">
          <popup :icon="wechat" :hovericon="wechat" :code="`${$cdn}images/code_wx.jpg`" />
          <popup :icon="wb" :hovericon="wb" :code="`${$cdn}images/code_wb.jpg`" />
          <popup :icon="dy" :hovericon="dy" :code="`${$cdn}images/code_dy.jpg`" />
        </ul>
      </div>
      <div class="relevant clear flex justify-between">
        <p class="relevant-1">Copyright © 2022 4DAGE Co., Ltd. All rights reserved.</p>
        <p class="relevant-2">
          <a
            target="_blank"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44049102496647"
            class="a_class"
          >
            <img src="@/assets/images/baicon.png" alt="" />
            粤公网安备 44049102496647号
          </a>
          <a target="_blank" href="https://beian.miit.gov.cn/" class="a_class">
            <img src="@/assets/images/baicon.png" alt="" />
            粤ICP备14078495号
          </a>
          <!-- </p>
        <p class="relevant-2"> -->
        </p>
      </div>
    </div>
    <!-- <div class="contentPage">
      <div class="relevant clear">
        <p class="relevant-1">Copyright © 2022 4DAGE Co., Ltd. All rights reserved.</p>
        <span>
          <p class="relevant-2">
          <a target="_blank" href="https://beian.miit.gov.cn/" class="a_class">
            <img src="@/assets/images/baicon.png" alt="" />
            粤ICP备14078495号
          </a>
        </p>
        <p class="relevant-2">
          <a
            target="_blank"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44049102496647"
            class="a_class"
          >
            <img src="@/assets/images/baicon.png" alt="" />
            粤公网安备 44049102496647号
          </a>
        </p>
        </span>
      </div>
    </div> -->
  </div>
</template>
<style lang="less" scoped>
.footer {
  padding-top: 76px 0 26px;
  background-color: #323233 !important;
  position: relative;
  width: 100%;
  bottom: 0;
  z-index: 888;
  .layout {
    margin: 0 auto;
    max-width: 1280px;
    padding-left: 20px;
    padding-right: 20px;
    .relevant {
      margin-top: 86px;
      border-top: 1px solid #909090;
      padding: 26px 0;
      color: #909090;
      &-1 {
        // float: left;
        background-color: transparent;
      }
      &-2 {
        // float: right;
      }
      div {
        margin-bottom: 8px;

        a {
          color: #15bec8;
          font-size: 14px;
          text-decoration: underline;
          display: inline-block;
          line-height: 25px;

          &:nth-child(2) {
            margin: 0 42px;
          }
        }
      }
      a {
        color: #909090;
      }
      p {
        font-size: 14px;
        color: #909090;
        margin-bottom: 8px;
      }
    }
    &::after {
      content: '';
      display: block;
      clear: both;
    }
  }
}

.infos {
  font-size: 16px;
  color: #ebebeb;
  padding: 76px 0 0 0;
  .infos-contact {
    float: left;
    ul {
      margin-top: 27px;
    }
    li {
      margin-bottom: 15px;
    }
  }
  .infos-list {
    float: left;
    padding-top: 25px;
  }
  .infos-item {
    float: left;
    color: #909090;
    min-width: 138px;
    margin-right: 30px;
    h6 {
      margin-bottom: 27px;
      color: #fff;
    }
    a {
      display: block;
      color: #909090;
      margin-bottom: 15px;
      cursor: pointer;
      &:hover {
        color: #ffffff;
      }
    }
  }
}
.contacts-w {
  display: flex;
}
.a_class,
.a_class:hover,
.a_class:active {
  color: #fff;
  text-decoration: none;
  cursor: initial;
  img {
    display: inline-block;
  }
}
</style>
