<template>
  <div class="novelChannel">
    <div class="novelChannel_header">
      <div class="novel-retation">
        <hori-car :lunbotuList="hornImgs"></hori-car>
        <ver-car :lunbotuList="verImgs"></ver-car>
      </div>
      <div class="novel_ranking">
        <h1>最新排行榜</h1>
        <ul>
          <li v-for="(item, i) in novelRanking" :key="item.id">
            <a href="#">
              <span :class="[{ index1: i == 0 }, { index2: i == 1 }, { index3: i == 2 }]">{{ item.id }}</span>
              <span class="novelName"
                ><a href="#">{{ item.name }}</a></span
              >
              <b>{{ item.Nub }}</b>
            </a>
          </li>
        </ul>
        <div>
          <a href="#">更多<i class="fa fa-chevron-right" aria-hidden="true"></i></a>
        </div>
      </div>
    </div>
    <novelFire></novelFire>
    <novelWriter></novelWriter>
    <literatureRead></literatureRead>
    <novelComment></novelComment>
    <novelClassic></novelClassic>
    <novelHotText :flag="flag" :hotTextList="hotTextList" :judge="judge" :AppraiseList="novelNewAppraise"></novelHotText>
  </div>
</template>

<script>
import horiCar from './subcomponents/HorizontalCarousel.vue';
import verCar from './subcomponents/VerticalCarousel.vue';
import novelFire from './novelChannel/NovelFire.vue';
import novelWriter from './novelChannel/NovelWriter.vue';
import literatureRead from './novelChannel/LiteratureRead.vue';
import novelComment from './novelChannel/NovelComment.vue';
import novelClassic from './novelChannel/NovelClassic.vue';
import novelHotText from './share/HotText.vue';

export default {
  data() {
    return {
      hornImgs: [],
      verImgs: [],
      novelRanking: [],
      flag: null,
      hotTextList: [],
      judge: true,
      novelNewAppraise: []
    };
  },
  created() {
    this.getHornImgs();
    this.getVerImgs();
    this.getRanking();
    this.getHotText();
    this.getNovelNewAppraise();
  },
  methods: {
    getHornImgs() {
      this.axios.get('/src/data/novel_data/horn_imgs.json').then(res => {
        this.hornImgs = res.data;
      });
    },
    getVerImgs() {
      this.axios.get('/src/data/novel_data/ver_imgs.json').then(res => {
        this.verImgs = res.data;
      });
    },
    getRanking() {
      this.axios.get('/src/data/novel_data/novel_anking.json').then(res => {
        this.novelRanking = res.data;
      });
    },
    getHotText() {
      this.axios.get('/src/data/movie_data/hot_text.json').then(res => {
        this.hotTextList = res.data;
        this.hotTextList.forEach((item, i) => {
          if (item.img == '') {
            this.index = i;
            this.flag = i;
          }
        });
      });
    },
    getNovelNewAppraise() {
      this.axios.get('/src/data/novel_data/novel_new_appraise.json').then(res => {
        this.novelNewAppraise = res.data;
      });
    }
  },
  components: {
    horiCar,
    verCar,
    novelFire,
    novelWriter,
    literatureRead,
    novelComment,
    novelClassic,
    novelHotText
  }
};
</script>

<style lang='less' scoped>
.novelChannel {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  .novelChannel_header {
    width: 1200px;
    height: 340px;
    margin-top: 50px;
    overflow: hidden;
    .novel-retation {
      width: 797px;
      height: 340px;
      float: left;
    }
    .novel_ranking {
      width: 350px;
      height: 340px;
      float: right;
      h1 {
        width: 350px;
        height: 70px;
        font-size: 20px;
        text-align: center;
        line-height: 70px;
        opacity: 0.7;
        color: #fff;
        font-weight: normal;
        letter-spacing: 1px;
        border-radius: 5px 5px 0 0;
        background-image: linear-gradient(-90deg, #97461a 0%, #b87957 54%, #6c2e16 100%);
      }
      ul {
        li {
          width: 350px;
          height: 45px;
          line-height: 20px;
          border-bottom: 1px solid #eee;
          cursor: pointer;
          > a {
            > span {
              a {
                color: #3c3c3c;
                font-size: 15px;
              }
            }
            > span:first-child {
              display: inline-block;
              width: 20px;
              height: 20px;
              background-color: #aaa;
              color: #fff;
              text-align: center;
              margin: 13px 10px 0 8px;
            }
            .novelName {
              a:hover {
                color: red;
              }
            }
            > .index1 {
              background-color: #ef4238 !important;
            }
            > .index2 {
              background-color: #ff9654 !important;
            }
            > .index3 {
              background-color: #ffbd54 !important;
            }
            > b {
              float: right;
              line-height: 45px;
              font-size: 14px;
              color: #aaa;
            }
          }
        }
        li:nth-child(odd) {
          background: rgb(245, 245, 245);
        }
        li:hover {
          background-color: #eee;
        }
      }
      div {
        width: 50px;
        height: 40px;
        float: right;
        text-align: center;
        line-height: 40px;
        a {
          color: #333;
          font-size: 14px;
        }
        a:hover {
          color: red;
        }
      }
    }
  }
}
</style>