<template>
  <footer class="home-page-footer">
    <div class="footer-left">
      <ul class="footer-links">
        <li
          v-for="(l, i) in links"
          :key="i"
          class="footer-link-item footer-title underline-title"
          :class="{ active: isRouteActive(l) }"
        >
          <router-link class="footer-link" :to="l.route">{{
            l.title
          }}</router-link>
        </li>
      </ul>
      <div class="footer-text">
        <span class="footer-icp">{{ icp }}</span>
        <span class="footer-copyright"
          >© 2015-{{ year }} {{ hostname }} All rights reserved.</span
        >
      </div>
    </div>
    <div class="footer-right">
      <div class="footer-mp">
        <div class="footer-title underline-title">公众号</div>
        <img
          class="footer-mp-qrcode"
          src="~@/assets/mp-qrcode.png"
          alt="公众号二维码"
        />
      </div>
    </div>
  </footer>
</template>
<script>
export default {
  name: 'HomePageFooter',
  data() {
    return {
      links: [
        { title: '关于晶闪', route: '/about' },
        { title: '多彩晶闪', route: '/colorful' },
        { title: '加入我们', route: '/join-us' },
        { title: '联系我们', route: '/contact' },
      ],
      icp: '粤ICP备1234567号-1',
      hostname: location.hostname,
      year: new Date().getFullYear(),
      mp: '',
    }
  },
  methods: {
    isRouteActive(nav) {
      const path = this.$route.path
      if (nav.route === path) return true
      if (nav.children?.length) {
        return nav.children.some((e) => e.route === path)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.home-page-footer {
  background-color: #323232;
  color: #fff;
  display: flex;
  padding: 20px;
}

.footer-left {
  flex: 2;
  border-right: solid 1px #bbb;
}

.footer-right {
  flex: 1;
  padding-left: 100px;
}

.footer-links {
  margin: 0;
  padding: 0;
  display: flex;
}

.footer-link-item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  margin-right: 100px;

  &.active .footer-link {
    color: var(--primary-color);
  }
}

.footer-link {
  color: inherit;
  text-decoration: none;
  transition: 0.3s;
}

.footer-text {
  margin-top: 20px;
  color: #999;
}

.footer-mp {
  display: flex;
  align-items: flex-start;
}

.footer-mp-qrcode {
  width: 90px;
  height: 90px;
  margin-left: 20px;
}

@media screen and (max-width: 1000px) {
  .home-page-footer {
    flex-direction: column-reverse;
  }

  .footer-link-item {
    margin-right: 10px;
    font-size: 12px;
    padding-bottom: 8px !important;
  }

  .footer-text {
    font-size: 12px;
  }

  .footer-left {
    border-right: none;
  }

  .footer-right {
    padding-left: 0;
    margin-bottom: 20px;
  }
}
</style>
