<template>
  <div class="colorful-page">
    <div class="main-image">
      <img src="~@/assets/colorful/main.jpg" alt="多彩晶闪" />
      <span class="main-image-text">COLORFUL JOSHINE</span>
    </div>

    <div class="articles-area">
      <div class="article-categories">
        <router-link
          v-for="c in categories"
          :key="c.type"
          :to="`/colorful?category=${c.type}`"
          class="article-category"
          :class="{ active: c === activeCategory }"
          >{{ c.title }}</router-link
        >
      </div>

      <div
        v-if="activeCategory"
        class="articles-list"
        :class="`articles-list-${$isMobile ? 'grid' : activeCategory.layout}`"
      >
        <article v-for="(a, i) in articlesList" :key="i" class="article-item">
          <div class="article-img">
            <img class="cover-parent" :src="a.img" :alt="a.title" />
          </div>
          <h4 class="article-title">{{ a.title }}</h4>
          <div class="article-brief">
            {{ a.brief }}
            <router-link
              v-if="a.id"
              class="article-link"
              :to="`/article/${a.id}?from=ColorfulPage`"
              >查看全文 +</router-link
            >
            <a v-if="a.link" :href="a.link" class="article-link" target="_blank"
              >查看全文 +</a
            >
          </div>
          <div class="article-meta">
            <span class="article-time">{{ a.createdAt }}</span>
            <!-- <a class="article-like" href="javascript:;">
              <i
                class="article-like-icon"
                :class="a.liked ? 'icon-thumb-gold' : 'icon-thumb'"
              ></i>
              <span class="article-like-count">{{ a.likeCount }}</span>
            </a> -->
          </div>
        </article>
      </div>
    </div>
  </div>
</template>
<script>
import Articles from '@/assets/colorful/articles.json'

export default {
  name: 'ColorfulPage',
  data() {
    return {
      categories: [
        { type: 'big-event', title: '晶闪大事件', layout: 'flow' },
        { type: 'employee-activity', title: '员工活动', layout: 'grid' },
      ],

      articles: Articles.map((e) => ({
        ...e,
        img:
          process.env.BASE_URL +
          (process.env.BASE_URL.endsWith('/') ? '' : '/') +
          e.img,
      })),

      articlesList: [],
    }
  },
  computed: {
    activeCategory() {
      const c = this.$route.query.category
      return this.categories.find((e) => e.type === c)
    },
  },
  watch: {
    activeCategory: {
      immediate: true,
      handler() {
        if (!this.activeCategory) return
        this.articlesList = this.articles.filter((e) =>
          e.categories.includes(this.activeCategory.type)
        )
      },
    },
  },
  created() {
    if (!this.activeCategory) {
      if (this.categories.length) {
        this.$router.push(`/colorful?category=${this.categories[0].type}`)
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.main-image {
  font-size: 0;
  position: relative;
  user-select: none;
  height: 33.33vw;

  .main-image-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    color: #fff;
    letter-spacing: 8px;
    font-weight: 100;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.articles-area {
  width: 70%;
  margin: 40px auto;
  display: flex;
  align-items: flex-start;
}

.article-categories {
  width: 25%;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  margin-right: 30px;
}

.article-category {
  display: block;
  transition: 0.3s;
  text-decoration: none;
  padding: 22px 0;
  text-align: center;
  color: #000;
  border: solid 1px #dfdfdf;

  &:not(:last-child) {
    border-bottom: none;
  }

  &.active {
    color: #fff;
    background-color: var(--primary-color);
  }
}

.articles-list {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

.articles-list-flow {
  .article-item {
    width: 100%;
    height: 10vw;
    display: grid;
    grid-template-columns: 15vw 3fr;
    grid-template-rows: auto 1fr auto;
    padding-bottom: 30px;
    margin-bottom: 30px;
    column-gap: 20px;

    &:not(:last-child) {
      border-bottom: solid 1px #e4e4e4;
    }
  }

  .article-img {
    grid-column: 1 / 1;
    grid-row: 1 / 4;
  }

  .article-title {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .article-meta {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }
}

.articles-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;

  .article-item {
    display: flex;
    flex-direction: column;
    border: solid 1px #efefef;
  }

  .article-img {
    padding-top: 61%;
    margin-bottom: 20px;
  }

  .article-title,
  .article-brief,
  .article-meta {
    padding-left: 20px;
    padding-right: 20px;
  }

  .article-brief {
    margin-bottom: 20px;
    flex: 1;
  }

  .article-meta {
    margin-bottom: 20px;
  }
}

.article-img {
  position: relative;

  & > img {
    object-fit: cover;
  }
}

.article-title {
  margin: 0 0 10px;
  font-weight: normal;
  color: #323232;
  font-size: 16px;
}

.article-brief {
  font-size: 14px;
  color: #999;
  line-height: 30px;
}

.article-link {
  color: #323232;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.article-meta {
  display: flex;
  justify-content: space-between;
}

.article-time {
  font-size: 14px;
  color: #999;
}

.article-like {
  font-size: 14px;
  color: #323232;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.article-like-icon {
  display: block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

@media screen and (max-width: 1000px) {
  .main-image .main-image-text {
    font-size: 18px;
    white-space: nowrap;
  }

  .articles-area {
    width: 90%;
    flex-direction: column;
  }

  .article-categories {
    width: auto;
    margin-right: 0;
    margin-bottom: 20px;
    align-self: stretch;
    flex-direction: row;
    justify-content: center;
  }

  .article-category {
    padding: 10px 22px;

    &:not(:last-child) {
      border-right: none;
      border-bottom: solid 1px #dfdfdf;
    }
  }

  .articles-list-grid {
    grid-template-columns: 1fr;
  }
}
</style>
