<template>
  <div class="footerbarArea">
    <div class="backgroundgry" />
    <div class="itemArea logoArea">
      <img src="logo.webp" alt="logo" class="logo" />
      <span class="desc">{{
        $t(
          'BgSub is a website that uses AI technology to automatically remove or replace image backgrounds'
        )
      }}</span>
      <template v-if="showBeian">
        <span class="item">深圳市深度图景科技有限公司版权所有</span>
        <a
          class="item"
          target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030402005757"
        >
          <div style="display: flex; align-items: center; flex-direction: row">
            <img src="http://www.beian.gov.cn/img/ghs.png" />
            <span>粤公网安备 44030402005757号</span>
          </div></a
        >
        <a class="item" href="https://beian.miit.gov.cn/" target="_blank">
          粤ICP备2022098181号-1
        </a>
      </template>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import '../css/bgsub_common.scss';
.logo {
  height: 40px;
  margin-bottom: 24px;
}
.footerbarArea {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding-top: 60px;
  padding-bottom: 60px;
  position: relative;
  flex-direction: row;
}
.itemArea {
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 171.5%;
    color: $color-text;
    margin-bottom: 16px;
  }
  .emailItem {
    font-weight: 420;
    font-size: 24px;
    line-height: 171.5%;
    color: rgba($color-text, 0.9);
  }
  .item {
    font-style: normal;
    font-weight: 420;
    font-size: 16px;
    line-height: 171.5%;
    min-height: 24px;
    margin: 5px 0;
    text-decoration-line: none;
    color: rgba($color-text, 0.6);
    .icon {
      font-size: 28px;
      margin: 6px;
      margin-left: 0;
      color: $primary;
    }
  }
  a:visited {
    color: rgba($color-text, 0.6);
    text-decoration: none;
  }
}
.mainArea {
  max-width: 200px;
}
.logoArea {
  .desc {
    font-style: normal;
    font-weight: 420;
    font-size: 16px;
    line-height: 171.5%;
    color: rgba($color-text, 0.6);
  }
}
</style>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FooterBar',
  props: {},
  data() {
    return {
      showBeian: false,
      FollowItems: [],
      AboutItems: [
        {
          label: 'About Us',
          link: '/pages/#/about',
        },
        {
          label: 'Blogs',
          link: 'https://bgsub.blogspot.com/',
        },
      ],
    };
  },
  created() {
    if (this.$i18n.locale == 'zh-CN') {
      this.showBeian = true;
      this.AboutItems = [
        {
          label: 'About Us',
          link: '/pages/#/about',
        },
        {
          label: 'Blogs',
          link: 'https://www.jianshu.com/u/8faba218617e',
        },
      ];
      this.FollowItems = [];
    }
  },
});
</script>
