<!-- -->
<template>
  <div class="home-cr">
    <div class="title wow animate__animated animate__fadeInUp">
      <div class="ch">每日推送</div>
      <div class="en">Daily Exhibition Push</div>
    </div>
    <div class="text wow animate__animated animate__fadeInUp">文物</div>
    <div class="list wow animate__animated animate__zoomIn">
      <!-- <div class="list" v-if="list.length>0"> -->
      <el-carousel indicator-position="outside" :autoplay="false" arrow="never">
        <el-carousel-item v-for="(item, index) in list" :key="index">
          <el-row :gutter="14">
            <el-col
              :span="6"
              v-for="i in item"
              :key="i.crId"
              class="container"
              @click.native="handleClick(i)"
            >
              <div class="img">
                <img
                  v-if="$getFullUrl(i.faceImagePressUrl)"
                  :src="$getFullUrl(i.faceImagePressUrl)"
                />
                <img
                  v-else-if="$getFullUrl(i.faceImageUrl)"
                  :src="$getFullUrl(i.faceImageUrl)"
                />
                <div v-else class="no-pic">暂无图片</div>
                <div
                  class="info"
                  v-show="$getFullUrl(i.faceImagePressUrl || i.faceImageUrl)"
                >
                  <div class="name">{{ i.name }}</div>
                  <div class="sourceWay">{{ i.sourceWay }}</div>
                </div>
              </div>
              <div class="modal">{{ i.name }}</div>
            </el-col>
          </el-row>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import { getRecommendCr } from "@/api/culturalRelic";

export default {
  name: "CulturalRelic",
  data() {
    return {
      list: [],
      length: "",
    };
  },
  created() {
    this.loadList();
  },
  watch: {
    list: {
      handler: function (value) {
        this.list = value;
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    async loadList() {
      let res = await getRecommendCr();
      if (res.data.length > 8) {
        this.length =
          res.data.length % 8 == 0
            ? res.data.length / 8
            : Math.floor(res.data.length / 8) + 1;
        for (let i = 0; i < this.length; i++) {
          let data = [];
          if (i == length - 1) {
            data = res.data.slice(8 * i, res.data.length);
          } else {
            data = res.data.slice(8 * i, (i + 1) * 8);
          }

          this.$set(this.list, i, data);
        }
      } else {
        this.list = [res.data];
      }
    },
    handleClick(item) {
      const { crId } = item;
      this.$router.push({
        path: "culturalRelic/" + crId,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$blue: #2069c4;
.home-cr {
  background-image: url("@/assets/imgs/home/display-bg.png");
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0 0 0;
    font-family: "Alibaba PuHuiTi";
    .ch {
      font-size: 30px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 12px;
    }
    .en {
      font-size: 14px;
      color: #fff;
      margin-bottom: 80px;
    }
  }
  .text {
    color: #fff;
    margin-bottom: 36px;
    font-family: "Alibaba PuHuiTi";
    font-size: 22px;
  }
  .list {
    width: 100%;
    padding: 0 13%;
    height: 492px;
  }

  .container {
    // height: 20%;
    margin-bottom: 40px;
    cursor: pointer;
    position: relative;
    height: 200px;
    overflow: hidden;

    &:hover {
      img {
        transform: scale(1.1);
      }
      .info {
        transform: translateY(0);
      }
    }
    .img {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.5s ease;
      }
      .no-pic {
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
      }
    }
    .info {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 16px;
      background-color: rgba($color: #000000, $alpha: 0.1);
      color: #fff;
      transform: translateY(100px);
      text-align: right;
      transition: all ease 0.5s;
      font-family: Lisu;
    }
  }
}
::v-deep .el-carousel__container {
  height: 492px;
}
.el-carousel--horizontal {
  overflow: hidden;
}
</style>
