<template>
  <div class="wrap">
    <el-carousel v-if="modules[0].list" :interval="6000"
      :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
      :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
      <template v-for="(item, i) in modules[0].list">
        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
          <img :class="[{ 'cursor-pointer': isLink(item.link.linkName) }]" width="100%" :src="item.pic" alt=""
            @click="openLink(item)">
        </el-carousel-item>
      </template>
    </el-carousel>

    <div class="block banner-block" id="part1">
      <div class="inner">
        <div class="title wow fadeInUp">
          <h5>
            {{ modules[1].form.title }}
            <span class="sub">{{ modules[1].form.subTitle }}</span>
          </h5>
          <span class="more" @click="toAll(modules[2].form)">MORE</span>
        </div>
        <template v-if="articles.length">
          <div class="sfel-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[2].form)">
            <div style="width: 50%;overflow: hidden;" class="newBox">
              <img class="pic" width="100%" height="100%" :src="curArticle.titleImg" alt="">
            </div>
            <div class="right">
              <h6>{{ curArticle.title }}</h6>
              <div class="des" v-html="curArticle.mainBody"></div>
              <p class="meta">{{ curArticle.releaseTime }} {{ curArticle.classificationName && ' | ' +
                curArticle.classificationName }}</p>
              <ul class="inds">
                <li v-for="i in articles.length > 3 ? 4 : articles.length" :key="i" :class="{ active: curInd == i - 1 }"
                  @click.stop="switchCarousel(i - 1)"></li>
              </ul>
            </div>
          </div>

          <ul class="card">
            <template v-for="(item, i) in articles">
              <li v-if="i > 3 && i < 7" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
                <img class="pic" :src="item.titleImg" alt="">
                <div class="texts">
                  <p class="meta">{{ item.releaseTime }} {{ item.classificationName && ' | ' + item.classificationName
                    }}</p>
                  <div class="des">{{ item.title }}</div>
                  <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[2].form)">
                </div>
              </li>
            </template>
          </ul>
        </template>
      </div>
    </div>

    <div class="block talent" id="part2">
      <div class="inner">
        <div class="title wow fadeInUp">
          <h5>
            {{ modules[3].form.title }}
            <span class="sub">{{ modules[3].form.subTitle }}</span>
          </h5>
          <!-- <span class="more" @click="toAll(modules[4].form)">MORE</span> -->
        </div>
        <div class="shows">
          <div class="left wow fadeInLeft" data-wow-delay="0.5s">
            <h6>{{ modules[4].form.title }}</h6>
            <div class="text" v-html="modules[4].form.des"></div>
            <el-button v-if="isLink(modules[4].form.link.linkName)" type="primary" round
              @click="openLink(modules[4].form)">{{ $t('column.more') }}</el-button>
          </div>
          <img :src="modules[4].form.pic" alt="" class="pic">
        </div>
      </div>
    </div>

    <div class="block conference" id="part3">
      <div class="inner">
        <div class="title wow fadeInUp">
          <h5>
            {{ modules[5].form.title }}
            <span class="sub">{{ modules[5].form.subTitle }}</span>
          </h5>
          <span class="more" @click="toAll(modules[6].form)">MORE</span>
        </div>
        <div class="shows" v-if="articles2.length">
          <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles2[0], modules[6].form)">
            <img class="pic" width="100%" height="100%" :src="articles2[0].titleImg" alt="">
            <div class="text">{{ articles2[0].title }}</div>
          </div>
          <ul class="card-list wow fadeInRight" data-wow-delay="0.5s">
            <template v-for="(item, i) in articles2">
              <li v-if="i && i < 4" :key="i" @click="toArtice(item, modules[6].form)">
                <img class="pic" :src="item.titleImg" alt="">
                <div class="texts">
                  <h6>{{ item.title }}</h6>
                  <p class="sum">{{ item.mainBody }}</p>
                  <p v-if="item.keynoteSpeaker" class="text">
                    <img class="icon" src="@/assets/images/mine.png" alt="">
                    {{ item.keynoteSpeaker }}
                  </p>
                  <p v-if="item.activityStartTime" class="text">
                    <img class="icon" src="@/assets/images/time.png" alt="">
                    会议时间: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
                  </p>
                  <p v-if="item.onlineLocation" class="text">
                    <img class="icon" src="@/assets/images/online.png" alt="">
                    {{ item.onlineLocation }}
                  </p>
                  <p v-if="item.offlineLocation" class="text">
                    <img class="icon" src="@/assets/images/location.png" alt="">
                    {{ item.offlineLocation }}
                  </p>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </div>
    </div>

    <div class="block program" id="part4">
      <div class="inner">
        <div class="title wow fadeInUp">
          <h5>
            {{ modules[7].form.title }}
            <span class="sub">{{ modules[7].form.subTitle }}</span>
          </h5>
          <span class="more" @click="toAll(modules[8].form)">MORE</span>
        </div>
        <template v-if="articles3.length">
          <div class="slide" @click="toArtice(articles3[0], modules[8].form)">
            <div class="texts">
              <h6>{{ articles3[0].title }}</h6>
              <div class="des">{{ articles3[0].mainBody }}</div>
              <div class="meta">发表日期：{{ articles3[0].releaseTime }} &emsp;浏览量：{{ articles3[0].totalBrowsing }}</div>
            </div>
            <div class="img-wrap">
              <img class="pic" :src="articles3[0].titleImg" alt="">
            </div>
          </div>
          <ul class="list">
            <template v-for="(item, i) in articles3">
              <li v-if="i && i < 4" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'"
                @click="toArtice(item, modules[8].form)">
                <div class="des">{{ item.title }}</div>
                <p class="date">{{ item.releaseTime }}</p>
              </li>
            </template>
          </ul>
        </template>
      </div>
    </div>

    <!-- <div class="tools">
      <div class="logo">
        <img src="@/assets/images/logo.png"
             alt="">
      </div>
      <ul class="nav">
        <li v-for="(item, i) in navs"
            :key="i"
            class="column"
            @click="toAnchor(item)">{{ item.name }}</li>
      </ul>
    </div> -->
  </div>
</template>

<script>
import mixins from '@/mixins/page'
import Setting from '@/setting'
import Util from '@/libs/util'
import WOW from 'wow.js'
export default {
  mixins: [mixins],
  data () {
    return {
      navs: [],
      articles: [],
      articles1: [],
      articles2: [],
      articles3: [],
      curInd: 0,
      curArticle: {},
    }
  },
  mounted () {
    new WOW().init()
  },
  methods: {
    // 获取文章详情
    getInfo () {
      // 预览/详情
      this.$post(this.api[this.preview ? 'getRedisCache' : 'findPage'], Util.rsa(this.id)).then(({ data }) => {
        if (data.length) {
          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
          const json = JSON.parse(this.preview ?
            data :
            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
          console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", json)

          // 获取文章列表
          if (json[2].form.column && json[2].form.column.length) {
            const { column, articleNum } = json[2].form
            this.$post(this.api.queryArticlesByColumnType, Util.rsa(column[column.length - 1])).then(({ data }) => {
              this.articles = Util.removeTag(data.slice(0, articleNum || 7))
              this.curArticle = this.articles[0]
              this.carouselInterval()
            }).catch(err => { })
          }
          if (json[6].form.column && json[6].form.column.length) {
            const { column, articleNum } = json[6].form
            this.$post(this.api.queryArticlesByColumnType, Util.rsa(column[column.length - 1])).then(({ data }) => {
              this.articles2 = Util.removeTag(data.slice(0, articleNum || 4))
            }).catch(err => { })
          }
          if (json[8].form.column && json[8].form.column.length) {
            const { column, articleNum } = json[8].form
            this.$post(this.api.queryArticlesByColumnType, Util.rsa(column[column.length - 1])).then(({ data }) => {
              this.articles3 = Util.removeTag(data.slice(0, articleNum || 4))
            }).catch(err => { })
          }

          // 获取页面的所有标题，展示到左侧导航
          const navs = []
          let id = 0
          json.forEach((e, i) => {
            if (i % 2 && e.form.title) navs.push({
              id: ++id,
              name: e.form.title
            })
          })
          this.navs = navs

          this.modules = json
        }
      }).catch(err => { })
    },
    // 自动轮播
    carouselInterval () {
      const len = this.articles.length > 3 ? 4 : this.articles.length
      console.log("🚀 ~ file: index.vue:309 ~ carouselInterval ~ len:", len)
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.curInd++
        if (this.curInd > len) this.curInd = 0
        this.curArticle = this.articles[this.curInd] || {}
      }, 5000)
    },
    // 手动轮播切换
    switchCarousel (i) {
      if (this.curInd !== i) {
        this.curInd = i
        this.curArticle = this.articles[this.curInd] || {}
      }
    },
    // 左侧导航点击回调
    toAnchor (e) {
      const el = document.querySelector(`#part${e.id}`)
      el && el.scrollIntoView()
    }
  }
};
</script>

<style lang="scss" scoped>
@import url(../../../plugins/wow/animate.css);
@import '../../../styles/page/page.scss';

/deep/ .el-carousel {
  height: 100vh;

  .el-carousel__container,
  .el-carousel__item,
  img {
    height: 100vh;
    object-fit: cover;
  }
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 25px;
  margin-bottom: 30px;
  border-bottom: 1px solid #ddd;

  h5 {
    padding-left: 16px;
    font-size: 1.6rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 1;
    border-left: 6px solid #2b96ef;
  }

  .sub {
    font-size: 1.1rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #afb7bf;
  }

  .more {
    font-size: 0.8rem;
    color: #666;
    cursor: pointer;
  }
}

/deep/.articles {
  width: 50%;

  .el-carousel__indicators--horizontal {
    bottom: 20px;
    left: 804px;
  }
}

.banner-block {
  background: url(../../../assets/images/sfel/2.png) 0 0 / cover no-repeat;
}

.sfel-banner {
  display: flex;
  cursor: pointer;

  .pic {
    transition: 0.5s;
    object-fit: cover;

    &:hover {
      transform: scale(1.3);
    }
  }

  .right {
    position: relative;
    width: 50%;
    padding: 50px 50px 30px;
    background: #1583ff;
    color: #fff;

    &:hover {
      background: #465f85;

      h6,
      .des,
      .meta {
        color: #fff;
        transform: translateY(15px);
      }
    }
  }

  .inds {
    position: absolute;
    bottom: 40px;
    left: 60px;
    display: flex;

    li {
      width: 10px;
      height: 10px;
      margin-right: 12px;
      background: #ffffff;
      border-radius: 50%;
      transition: 0.2s;

      &.active {
        width: 30px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 5px;
      }
    }
  }

  h6 {
    font-size: 1.3rem;
    transition: 0.3s;
  }

  .des {
    margin: 30px 0;
    font-size: 0.9rem;
    line-height: 24px;
    transition: 0.3s;
  }

  .meta {
    font-size: 0.8rem;
    transition: 0.3s;
  }
}

.card {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;

  li {
    width: calc((100% - 56px) / 3);
    margin-right: 28px;
    box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
    border-radius: 6px;
    transition: 0.3s;
    background-color: #fff;

    &:hover {
      transform: scale(1.05);
    }

    &:last-child {
      margin-right: 0;
    }
  }

  .pic {
    width: 100%;
    // height: 259px;
    object-fit: cover;
  }

  .texts {
    padding: 40px 30px;
  }

  .meta {
    font-size: 0.9rem;
    color: #666;
  }

  .des {
    height: 60px;
    margin: 10px 0;
    font-size: 1rem;
    font-family: SFProDisplay;
    font-weight: 500;
    color: #333;
    line-height: 28px;
    -webkit-line-clamp: 2;
  }

  .arrow {
    width: 36px;
  }
}

.talent {
  .shows {
    display: flex;
    color: #fff;
    background: #1a2844;
    border-radius: 0px 100px 0px 100px;

    .left {
      width: 50%;
      padding: 120px 0 0 5%;
    }

    h6 {
      font-size: 1.6rem;
    }

    .text {
      margin: 20px 0;
      font-size: 1rem;
      line-height: 2;
    }

    .pic {
      width: 50%;
      min-height: 465px;
      object-fit: cover;
    }
  }
}

.conference {
  background: url(../../../assets/images/sfel/4.png) 0 0 / cover no-repeat;

  .shows {
    display: flex;
  }

  .left {
    position: relative;
    width: 550px;
    // min-width: 550px;
    height: 550px;
    margin-right: 20px;
    cursor: pointer;
    overflow: hidden;

    .text {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 0 12px;
      line-height: 3rem;
      font-size: 1rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.57);
    }

    .pic {
      transition: 0.5s;
      object-fit: cover;
    }

    &:hover {
      .pic {
        transform: scale(1.3);
      }
    }
  }

  .card-list {
    width: 600px;

    li {
      display: flex;
      align-items: center;
      padding: 6px;
      margin-bottom: 7px;
      background-color: #fff;
      cursor: pointer;
      transition: 0.3s;

      &:last-child {
        margin-bottom: 0;
      }

      &:hover {
        transform: translateX(20px);
      }
    }

    .pic {
      width: 167px;
      height: 167px;
      margin-right: 36px;
      object-fit: cover;
    }

    .texts {
      width: calc(100% - 210px);
    }

    h6 {
      margin-bottom: 10px;
      font-size: 1.2rem;
      color: #333;
      @include ellipsis;
    }

    .sum {
      margin-bottom: 6px;
      font-size: 1rem;
      color: #666;
      @include ellipsis;
    }

    .text {
      display: flex;
      align-items: center;
      margin: 10px 0;
      font-size: 0.9rem;
      @include ellipsis;
    }

    .icon {
      margin-right: 5px;
    }
  }
}

.program {
  background: #fff;

  .slide {
    display: flex;
    margin-bottom: 14px;
    cursor: pointer;
  }

  .texts {
    width: 51%;
    padding: 56px;
    background: #fbfbfb;

    h6 {
      font-size: 1.3rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }

    .des {
      margin: 35px 0 25px;
      font-size: 1rem;
      color: #666;
      line-height: 32px;
    }

    .meta {
      font-size: 0.9rem;
      color: #666;
    }
  }

  .img-wrap {
    width: 49%;
    min-height: 334px;
    overflow: hidden;
  }

  .pic {
    width: 100%;
    height: 100%;
    transition: 0.5s;
    object-fit: cover;
  }

  &:hover {
    .pic {
      transform: scale(1.3);
    }
  }

  .list {
    display: flex;

    li {
      width: calc((100% - 28px) / 3);
      height: 204px;
      padding: 36px 22px;
      margin-right: 14px;
      background: url(../../../assets/images/sfel/7.png) no-repeat center;
      transition: 0.5s;
      cursor: pointer;

      &:nth-child(2) {
        background-image: url(../../../assets/images/sfel/8.png);
      }

      &:nth-child(3) {
        margin-right: 0;
        background-image: url(../../../assets/images/sfel/9.png);
      }

      &:hover {
        transform: translateY(20px);
      }
    }

    .des {
      height: 90px;
      margin-bottom: 30px;
      font-size: 1rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 30px;
    }

    .date {
      font-size: 0.9rem;
      font-family: LaoSangamMN;
      color: #ffffff;
    }
  }
}

.tools {
  z-index: 9;
  position: fixed;
  top: 200px;
  left: 0;
  width: 180px;
  text-align: center;

  .logo {
    padding: 15px 0;
    background: #0c60be;
    box-shadow: 0px 0px 20px 0px rgba(184, 191, 200, 0.3);
  }

  .nav {
    li {
      padding: 0 10px;
      font-size: 1.1rem;
      line-height: 50px;
      color: #fff;
      background-color: #1d1d1d;
      cursor: pointer;
      @include ellipsis;

      &.active {
        background-color: #1583ff;
      }

      &:hover {
        background-color: #1583ff;
      }
    }
  }
}

@media (max-width: 1200px) {
  .sfel-banner {
    flex-direction: column;

    .newBox {
      width: 100% !important;
    }

    .right {
      margin-top: 10px;
      width: 100%;
      height: 410px;
    }
  }

  .card {
    flex-direction: column;

    li {
      width: 100%;
      margin-top: 20px;
    }
  }

  .shop-shows {
    flex-direction: column;

    .left {
      width: 100%;
    }

    .right {
      width: 100%;
      margin-top: 20px;
    }
  }

  .shows {
    flex-direction: column;

    .left {
      width: 100%;
    }

    .card-list {
      width: 100%;
      margin-top: 20px;

      li {
        flex-direction: column;

        .pic {
          width: 100% !important;
          margin-right: 0;
        }

        .texts {
          margin-top: 20px;
          width: 100%;
        }
      }
    }
  }

  .talent {
    .shows {
      .left {
        width: 100%;
        margin-bottom: 20px;
      }

      .pic {
        width: 100%;
        min-height: 0;
      }
    }
  }

  .media-wrap {
    flex-direction: column;

    .left {
      width: 100%;
    }

    .right {
      width: 100%;
      margin-top: 20px;
    }
  }

  .news {
    flex-direction: column;

    li {
      margin-top: 30px;
      width: 100%;
    }
  }

  .slide,
  .list {
    flex-direction: column;

    .texts,
    .img-wrap {
      width: 100%;
    }
  }

  .list {
    li {
      width: 100% !important;
      margin-top: 20px;
    }
  }

  .slides {
    div {
      flex: 1;
    }
  }

  .program {
    .list {
      li {
        background-size: cover;
      }
    }
  }

  #part6 {
    .slide {
      .texts {
        height: 430px;
      }
    }
  }
}
</style>