<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-${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
              class="article-link"
              :to="`/article/${a.id}?from=ColorfulPage`"
              >查看全文 +</router-link
            > -->
          </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 ImgArticle1 from '@/assets/colorful/a-1.png'
import ImgArticle2 from '@/assets/colorful/a-2.jpg'
import ImgArticle3 from '@/assets/colorful/a-3.png'
import ImgArticle4 from '@/assets/colorful/a-4.jpg'
import ImgArticle5 from '@/assets/colorful/a-5.jpg'
import ImgArticle6 from '@/assets/colorful/a-6.png'
import ImgArticle7 from '@/assets/colorful/a-7.png'

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

      articles: [
        {
          id: 1,
          categories: ['big-event'],
          img: ImgArticle1,
          title: '2023晶闪科技春季校园招聘正式启动',
          brief: '2023晶闪科技春季校园招聘正式启动！',
          createdAt: '2023-01-01 12:34:56',
          likeCount: Math.round(Math.random() * 1000),
          liked: Math.random() > 0.5,
        },
        {
          id: 2,
          categories: ['big-event'],
          img: ImgArticle2,
          title: '携手并进·筑梦未来丨2023年晶闪科技供应商大会',
          brief:
            '2022年，我们回归初心；2023年，我们展望未来。让我们在这新的一年里，携手共进，筑梦未来！',
          createdAt: '2023-01-02 13:24:57',
          likeCount: Math.round(Math.random() * 1000),
          liked: Math.random() > 0.5,
        },
        {
          id: 3,
          categories: ['big-event', 'employee-activity'],
          img: ImgArticle3,
          title: '万圣节 | 冲刺月前夕的动员狂欢',
          brief:
            '对于跨境电商领域的我们来说，万圣节之后即将开启的十一月，是一个非常特殊的月份。春种长期战，秋收亿亿万，想要年底不吃土，就要全力拼黑五！要想钱包不空虚，就要闷头冲网一！',
          createdAt: '2022-10-30 13:24:57',
          likeCount: Math.round(Math.random() * 1000),
          liked: Math.random() > 0.5,
        },
        {
          id: 4,
          categories: ['big-event'],
          img: ImgArticle4,
          title: '速报 | NC荣获2020年BrandZ中国最具潜力全球化品牌15强',
          brief: 'NC荣获2020年BrandZ中国最具潜力全球化品牌15强',
          createdAt: '2023-01-02 13:24:57',
          likeCount: Math.round(Math.random() * 1000),
          liked: Math.random() > 0.5,
        },
        {
          id: 5,
          categories: ['employee-activity'],
          img: ImgArticle5,
          title: 'CEO私房话 | 第二期-产研小哥的爱恨情仇',
          brief: '嘘！这些悄悄话只说给宁缺听！',
          createdAt: '2023-01-02 13:24:57',
          likeCount: Math.round(Math.random() * 1000),
          liked: Math.random() > 0.5,
        },
        {
          id: 6,
          categories: ['employee-activity'],
          img: ImgArticle6,
          title: '感恩节 | “感谢大声说出口”留言征集活动',
          brief: '感谢打开这篇文章的你~',
          createdAt: '2023-01-02 13:24:57',
          likeCount: Math.round(Math.random() * 1000),
          liked: Math.random() > 0.5,
        },
        {
          id: 7,
          categories: ['employee-activity'],
          img: ImgArticle7,
          title: '生日会 | 7月生辰 快哉乐哉',
          brief: '真的不和我说生日快乐吗？不然下次要再365天了噢～',
          createdAt: '2022-07-01 00:00:01',
          likeCount: Math.round(Math.random() * 1000),
          liked: Math.random() > 0.5,
        },
      ],

      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;

  .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%;
  }
}

.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;
}
</style>
