<template>
  <!-- 首页 -->
  <div class="content">
    <!-- 顶部轮播图 -->
    <b-carousel
      id="carousel-1"
      :interval="4000"
      controls
      indicators
      background="#ababab"
      img-width="1024"
      img-height="480"
    >
      <b-carousel-slide
        v-for="(item,index) in bannerList"
        :key="index"
        :img-src="item.pic"
        :img-alt="item.title"
      >
        <!-- @click.native="goPage(item)" -->
      </b-carousel-slide>
    </b-carousel>

    <!-- company profile -->
    <section>
      <div class="company-profiler container">
        <h5 class="title">{{ $t('index.companyProfile') }}</h5>
        <h4 class="sub-title">{{ $t('index.corporateName') }}</h4>
        <div class="describe d-none d-md-block" v-html="companyInfo"></div>
        <ul class="advantage row pl-0">
          <li 
            v-for="item in advantageList" 
            :key="item.title" 
            class="col-3 d-flex flex-column align-items-center"
          >
            <b-img :src="item.icon" fluid :alt="item.title"></b-img>
            <nuxt-link class="mt-3" style="color: #878b90;font-size: .875rem;" :to="item.link">
              {{ item.title }}
            </nuxt-link>
          </li>
        </ul>
        <nuxt-link class="more box_shadow" to="/separate?maxCatgId=66c10877ee325e7f5da316e69ceb2eb9&title=About%20Us">{{ $t('common.readMore') }}</nuxt-link>
        <b-img class="word-img" src="../assets/image/backGroundImg/home-world.png" alt="word" fluid ></b-img>
      </div>
    </section>

    <!-- popular product -->
    <section class="popular-product" style="background-color: #f5f7f9;">
      <div class="company-profiler container mb-4">
        <h5 class="title">{{ $t('index.popularProduct') }}</h5>
        <h4 class="sub-title">{{ $t('index.productDesc') }}</h4>
      </div>
      <b-carousel
        id="carousel-2"
        class="container"
        :interval="4000"
        controls
        indicators
      >
        <b-carousel-slide v-for="(item,index) in hotProductList" :key="index">
          <template v-slot:img>
            <ul class="row pl-0">
              <li class="col-6 col-md-3 mb-4" v-for="son in item" :key="son.id">
                <article class="product-card box_shadow">
                  <img class="cover" :src="son.mainPic" :alt="son.title"></img>
                  <div class="product-card-content">
                    <h4 class="text-ellipsis">{{ son.title }}</h4>
                    <div class="text-ellipsis" v-html="son.description"></div>
                    <!-- <p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
                    <p>{{ $t('common.dimension') }}: 6800x2490x3668</p>
                    <p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p> -->
                    <nuxt-link class="view-details" :to="`/products/${son.id}?catgId=${son.catgId}&maxCatgId=660179025d0e2e0e4263db0eec86a8cc`">
                      {{ $t('common.viewDetails') }}
                      <img src="~assets/image/icon/goto.png" :alt="$t('common.viewDetails')" />
                    </nuxt-link>
                  </div>
                </article>
              </li>
            </ul>
          </template>
        </b-carousel-slide>
      </b-carousel>
      <nuxt-link class="more box_shadow" to="/products?maxCatgId=660179025d0e2e0e4263db0eec86a8cc">{{ $t('common.readMore') }}</nuxt-link>
    </section>

    <!-- Products -->
    <section>
      <div class="products container mb-4">
        <h5 class="title">{{ $t('common.products') }}</h5>
        <h4 class="sub-title">{{ $t('common.companyProducts') }}</h4>
        <ul style="margin-top: 1.25rem;" class="row pl-0">
          <li class="col-12 col-md-6 mb-4" v-for="item in productTopList" :key="item.id">
              <article class="products-item box_shadow">
                <nuxt-link :to="`/products/${item.id}?catgId=${item.catgId}&maxCatgId=660179025d0e2e0e4263db0eec86a8cc`" class="row">
                  <div class="col-7 col-md-6 pr-0">
                    <b-img :src="item.mainPic" fluid :alt="item.title"></b-img>
                  </div>
                  <div class="products-info col-5 col-md-6">
                    <h3 class="text-ellipsis">{{ item.title }}</h3>
                    <div class="desc text-ellipsis" v-html="item.description"></div>
                    <!-- <p>{{ $t('common.brand') }}: Foton</p>
                    <p>{{ $t('common.driveWheel') }}: 8x4</p>
                    <p>{{ $t('common.drivingStyle') }}: Left-Hand Driving or Right-hand Driving</p>
                    <p>{{ $t('common.placeofOrigin') }}: China</p> -->
                    <div class="view-details d-md-block d-none">
                      {{ $t('common.viewDetails') }}
                      <img src="~assets/image/icon/goto.png" :alt="$t('common.viewDetails')" />
                    </div>
                  </div>
                </nuxt-link>
              </article>
          </li>
        </ul>
        <nuxt-link class="more box_shadow" to="/products?&maxCatgId=660179025d0e2e0e4263db0eec86a8cc">{{ $t('common.readMore') }}</nuxt-link>
      </div>
    </section>
    
    <!-- press center -->
    <section style="background-color: #f5f7f9;">
      <div class="press-center container">
        <h5 class="title">{{ $t('index.pressCenter') }}</h5>
        <h4 class="sub-title">{{ $t('index.realTimeNewsReadingOnline') }}</h4>
        <div class="row mb-4 pl-0">
          <article class="pc-news box_shadow col-md-6 d-none d-md-block" v-if="hotNewsList.length">
            <b-img :src="hotNewsList[0].mainPic" fluid-grow :alt="hotNewsList[0].title"></b-img>
            <div class="pc-news-info">
              <h4 class="text-ellipsis">{{ hotNewsList[0].title }}</h4>
              <p class="text-ellipsis" style="-webkit-line-clamp: 3;">
                {{ hotNewsList[0].description }}
              </p>
              <div class="pc-news-footer">
                <nuxt-link 
                  class="more box_shadow" 
                  :to="`/article-page/${hotNewsList[0].id}?&maxCatgId=660179025d0e2e0e4263db0eec86a8cc&catgId=${hotNewsList[0].catgId}`"
                >
                  {{ $t('common.readMore') }}
                </nuxt-link>
                <span>{{ hotNewsList[0].publicDate}}</span>
              </div>
            </div>
          </article>
          <ul class="col-12 col-md-6">
            <li class="new-item box_shadow mb-3" v-for="item in hotNewsList.slice(1, 5)" :key="item.id">
              <article>
                <nuxt-link class="row" :to="`/article-page/${item.id}?&maxCatgId=660179025d0e2e0e4263db0eec86a8cc&catgId=${item.catgId}`">
                  <img class="col-5 cover" :src="item.mainPic" fluid-grow :alt="item.title"></img>
                  <div class="news-info col-7">
                    <h4 class="text-ellipsis">{{ item.title }}</h4>
                    <p class="text-ellipsis" style="-webkit-line-clamp: 3;">
                      {{ item.description }}
                    </p>
                    <footer class="d-flex justify-content-between align-items-center">
                      <time>{{ item.publicDate }}</time>
                      <img width="27" src="~assets/image/icon/goto1.png" :alt="$t('common.viewDetails')" />
                    </footer>
                  </div>
                </nuxt-link>
              </article>
            </li>
          </ul>
        </div>
        <nuxt-link class="more box_shadow mb-4" to="/article-page?&maxCatgId=660179025d0e2e0e4263db0eec86a8cc">{{ $t('common.readMore') }}</nuxt-link>
      </div>
    </section>

    <!-- Join our newsletter -->
    <!-- <section style="background-color: #0070de;">
      <div class="join-our-newsletter container">
        <h5 class="title">{{ $t('index.joinOurNewsletter') }}</h5>
        <h4 class="sub-title">{{ $t('index.signUpOurNewsletter') }}</h4>
        <b-input-group class="email-input">
          <b-form-input :placeholder="$t('common.enterEail')"></b-form-input>
          <b-input-group-append>
            <b-button variant="outline-secondary">
              <img src="~assets/image/icon/email.png" :alt="$t('common.E-mail')" />
              {{ $t('common.send') }}
            </b-button>
          </b-input-group-append>
        </b-input-group>
        <ul class="d-flex justify-content-center mb-5">
          <li class="mr-4" v-for="(item,index) in contactList" :key="index">
            <a href="javascript:;">
              <b-img :src="item.icon" :alt="item.alt" fluid></b-img>
            </a>
          </li>
        </ul>
      </div>
    </section> -->
  </div>
</template>

<script>
import { onMounted } from 'vue'


export default {
  name: 'index',
  data() {
    return {
      // 优势
      advantageList: [
        {
          title: this.$t('index.highQuality'),
          icon: require('../assets/image/icon/high-quality.png'),
          link: '/'
        },
        {
          title: this.$t('index.LEadingbBraNd'),
          icon: require('../assets/image/icon/LEading-braNd.png'),
          link: '/'
        },
        {
          title: this.$t('index.experiencedStaff'),
          icon: require('../assets/image/icon/experienced-staff.png'),
          link: '/'
        },
        {
          title: this.$t('index.advancedEquipment'),
          icon: require('../assets/image/icon/advanced-equipment.png'),
          link: '/'
        }
      ],
      // 联系
      contactList: [
        {
          alt: 'facebook',
          icon: require('../assets/image/icon/facebook.png'),
        },
        {
          alt: 'X',
          icon: require('../assets/image/icon/X.png'),
        },
        {
          alt: 'google',
          icon: require('../assets/image/icon/google.png'),
        },
        {
          alt: 'in',
          icon: require('../assets/image/icon/in.png'),
        },
        {
          alt: 'YouTube',
          icon: require('../assets/image/icon/YouTube.png'),
        }
      ],
    }
  },
  async asyncData({$axios}) {
    // 轮播图
    const {data: bannerList} = await $axios.get('/web/pic')
    // 公司介绍
    const {data: companyInfo} = await $axios.get('/web/indexCompanyInfo')
    // 热门产品
    const {data: originalArray} = await $axios.get('/web/hotProduct')
    const chunkSize = 4;
    const hotProductList = [];
    for (let i = 0; i < originalArray.length; i += chunkSize) {
      hotProductList.push(originalArray.slice(i, i + chunkSize));
    }
    // 普通产品前十
    const {data: productTopList} = await $axios.get('/web/product')
    // 热门新闻
    const { data: hotNewsList } = await $axios.get('/web/hotNews')

    return {
      bannerList,
      companyInfo, 
      hotProductList,
      productTopList,
      hotNewsList
    }
  },
  mounted() {
  },
  methods: {
    goPage(item) {
      if (item.link) {
        window.open(item.link)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  section {
    overflow: hidden;
  }
  @mixin commonSector {
    .title {
      margin: 1.625rem 0 .9375rem;
      color: #015fe8;
      font-size: 1.5rem;
      text-align: center;
      font-family: 'SourceHanSansCN-Heavy';
    }
    .sub-title {
      color: #015fe8;
      text-align: center;
      font-size: .875rem;
      font-weight: 400;
    }
    .more {
      margin-top: 3.75rem;
      padding: .5rem 2.1875rem;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      background-color: #015fe8;
      border-radius: 1.875rem;
      font-size: .875rem;
    }
    .view-details {
      width: max-content;
      padding: .375rem 1.5625rem;
      display: flex;
      align-items: center;
      color: #0070de;
      border: .0625rem solid #0070de;
      border-radius: 1.875rem;
      img {
        width: 1.0625rem;
        height: 1.0625rem;
      }
    }
  }
  .company-profiler {
    @include commonSector;
    ::v-deep .describe {
      margin-top: 1.125rem;
      margin-bottom: 3.25rem;
      color: #575757;
      font-size: .875rem;
      img {
        max-width: 100%;
      }
    }
    .word-img {
      margin-top: -11.25rem;
      pointer-events: none;
    }
  }
  .popular-product {
    @include commonSector;
    #carousel-2 {
      @mixin controls {
        width: 2.875rem;
        height: 2.875rem;
        background-color: #7f7f7f;
        background-size:  1.25rem;
      }
      ::v-deep .carousel-control-prev-icon {
        @include controls;
      }
      ::v-deep .carousel-control-next-icon {
        @include controls;
      }
    }
    .product-card {
      background-color: #fff;
      .cover {
        width: 100%;
        height: 24.1875rem;
        object-fit: cover;
      }
      .product-card-content {
        padding: 1.125rem 1rem;
        border-top: .0625rem solid #e6e8ec;
        font-size: .875rem;
        >div {
        	-webkit-line-clamp: 4;
        }
        h4 {
          margin-bottom: .8125rem;
        	-webkit-line-clamp: 1;
          color: #212222;
          font-size: .875rem;
        }
        p {
          color: #878b90;
        }
        .view-details {
          margin: 0 auto;
          margin-top: 2rem;
        }
      }
    }
    .more {
      margin: 2.75rem 0;
    }
  }
  .products {
    @include commonSector;
    .products-item {
      border: .0625rem solid #e4e6ea;
      .products-info {
        padding: 1.3125rem 1rem;
        border-left: .0625rem solid #e6e8ec;
        h3 {
          margin-bottom: 1.75rem;
          color: #212222;
          font-size: .875rem;
        }
        .desc {
          -webkit-line-clamp: 9;
        }
        p {
          color: #878b90;
          font-size: .875rem;
        }
        .view-details {
          margin-top: .625rem;
        }
      }
    }
  }
  .press-center {
    @include commonSector;
    .pc-news {
      background-color: #ffffff;
      .pc-news-info {
        padding: 1.25rem 1.0625rem;
        font-size: .875rem;
        h4 {
          margin-bottom: 1.25rem;
          color: #212222;
        }
        p {
          color: #878b90;
        }
        .pc-news-footer {
          margin-top: 3.8125rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .more {
            position: unset;
            left: 0;
            transform: translateX(0);
          }
          span {
            color: #878b90;
          }
        }
      }
    }
    .new-item {
      background-color: #fff;
      .cover {
        height: 12.5rem;
        object-fit: cover;
      }
      .news-info {
        padding: 1.625rem 1.125rem .875rem;
        font-size: .875rem;
        h4 {
          margin-bottom: 1.25rem;
          color: #212222;
          font-size: .875rem;
        }
        p, footer {
          color: #878b90;
        }
        footer {
          margin-top: 1.625rem;
          img {
            margin-right: .625rem;
          }
        }
      }
    }
  }
  .join-our-newsletter {
    @include commonSector;
    .title, .sub-title {
      color: #fff;
    }
    .email-input {
      margin: 2.6875rem auto 1.875rem;
      width: 23.9375rem;
      ::v-deep .form-control {
        color: #fff;
        background-color: #0070de;
        border: .0625rem solid #ffffff;
        border-radius: 3.125rem;
        font-size: .875rem;
        z-index: 10;
        &::placeholder {
          color: #a6cdf4;
          font-size: .875rem;
        }
      }
      ::v-deep .btn {
        margin-left: -3.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0070de;
        border: none;
        background-color: #fff;
        border-radius: 3.125rem;
        z-index: 99;
        img {
          width: 1.125rem;
          height: 1.125rem;
          margin-right: .375rem;
        }
      }
    }
  }
  .more {
    margin-top: 0 !important;
  }
}

// 特殊样式小屏幕处理
@media screen and (max-width:780px) {
  .popular-product {
    .product-card {
      .cover {
        height: 11.25rem !important;
      }
    }
  }
}
</style>
