<template>
  <div class="wrap">
    <el-carousel :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">
          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
               @click="openLink(item)">
            <img :src="item.pic"
                 alt="">
            <p class="banner-name">{{ item.title }}</p>
          </div>
        </el-carousel-item>
      </template>
    </el-carousel>

    <div class="inner">
      <Breadcrumb ref="breadcrumb"
                  :data.sync="routes" />
      <ul class="list">
        <template v-for="(item, i) in modules[1].list">
          <li v-if="item.isEnable"
              :key="i">
            <img class="pic wow fadeInLeft"
                 data-wow-delay="0.1s"
                 :src="item.pic"
                 alt="">
            <div class="texts wow fadeInRight"
                 data-wow-delay="0.1s">
              <h6>{{ item.title }}</h6>
              <p class="sub">{{ item.subTitle }}</p>
              <div class="des">{{ item.des }}</div>
              <img src="@/assets/images/arrow.png"
                   alt=""
                   :class="{'arrow': isLink(item.link.linkName)}"
                   @click="openLink(item)">
            </div>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins/page'
import Setting from '@/setting'
import Util from '@/libs/util'
import Breadcrumb from '@/components/breadcrumb'
import WOW from 'wow.js'
export default {
  mixins: [mixins],
  data () {
    return {
      routes: []
    }
  },
  components: {
    Breadcrumb
  },
  mounted () {
    new WOW().init()
    this.getColumn()
  },
  methods: {
    // 获取文章详情
    getInfo () {
      // 预览/详情
      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${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'])
          this.modules = json
          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
        }
      }).catch(err => { })
    },
    // 获取父级所有栏目名称和id
    getParent (data, id) {
      for (const e of data) {
        if (e.id == id) {
          this.routes.push({
            name: e.columnName,
            query: {
              id: e.id
            }
          })
          break
        } else if (e.children.length) {
          this.routes.push({
            name: e.columnName,
            query: {
              id: e.id
            }
          })
          this.getParent(e.children, id)
        }
      }
    },
    // 获取上级面包屑
    getColumn () {
      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`).then(({ data }) => {
        this.getParent(data, this.id)
      }).catch(err => { })
    },
  }
};
</script>

<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.wrap {
    /deep/ .el-carousel {
        height: 24rem;
        .el-carousel__container {
            height: 24rem;
        }
        img {
            height: 24rem;
        }
    }
}
.banner-item {
    .banner-name {
        font-size: 2.16rem;
    }
}
.block {
    padding: 3.85rem 0;
}
.inner {
    /deep/ .el-breadcrumb__item {
        font-size: 1.5rem;
    }
    padding-top: 35px;
}
.list {
    margin: 2rem 0;
    li {
        position: relative;
        &:nth-child(even) {
            text-align: right;
            .texts {
                left: 0;
                padding: 3rem 6rem 1.5rem 1.5rem;
                text-align: left;
            }
        }
    }
    .pic {
        width: 47%;
        height: auto;
    }
    .texts {
        position: absolute;
        top: 6rem;
        right: -2rem;
        width: 61%;
        // height: 440px;
        padding: 3rem 1.5rem 1.5rem 5rem;
        background: rgba(247, 247, 247, 0.72);
    }
    h6 {
        font-size: 2rem;
        font-family: SFProDisplay-Bold, SFProDisplay;
        font-weight: bold;
        color: #3c3c3c;
    }
    .sub {
        margin: 1rem 0;
        font-size: 1.2rem;
        font-weight: 600;
        font-family: PingFangSC-Semibold, PingFang SC;
        color: #1c1c1c;
        line-height: 33px;
    }
    .des {
        margin-bottom: 1rem;
        font-size: 1rem;
        color: #3c3c3c;
        line-height: 1.6rem;
    }
    img {
        width: 3.3rem;
        height: 3.3rem;
    }
}
@media (max-width: 1520px) {
    .list {
        li {
            &:nth-child(even) {
                .texts {
                    left: 25px;
                }
            }
        }
        .texts {
            right: 25px;
            width: 55%;
        }
    }
}
@media (min-width: 280px) and (max-width: 1200px) {
    .wrap {
        /deep/ .el-carousel {
            height: 18rem;
            .el-carousel__container {
                height: 18rem;
            }
            img {
                height: 18rem;
            }
        }
    }
    .banner-item .banner-name[data-v-1525064c] {
        font-size: 1.5rem;
    }

    .inner {
        width: 95%;
        .list {
            li {
                margin-top: 20px;
                .pic {
                    width: 100%;
                    height: 25rem !important;
                }
                .texts {
                    padding: 10px 5px 10px !important;
                    top: 30px;
                    height: auto;
                    h6 {
                        font-size: 1.5rem !important;
                    }
                    p {
                        font-size: 1rem;
                        margin: 5px 0 !important;
                        line-height: 1.5rem;
                    }
                    .sub {
                        margin: 10px 0;
                    }
                    .des {
                        margin-bottom: 10px;
                    }
                }
            }
        }
    }
}
</style>