<template>
  <div>
    <div class="modul1">
      <ul class="tap-btn">
        <li :class="showIndex === 1 ? 'active' : ''" @click="tap(1)">项目背景</li>
        <li :class="showIndex === 2 ? 'active' : ''" @click="tap(2)">项目特色</li>
      </ul>
    </div>
    <div class="tap-item-box">
      <div class="t-item2 con970" v-show="showIndex === 1">
        <news :data="newsData"></news>
      </div>
      <div class="t-item2 con970" v-show="showIndex === 2">
        <news :data="newsData2"></news>
      </div>
    </div>
  </div>
</template>

<script>
import cAction from '@action'
import news from '@/components/news/news.vue'
export default {
  components: {
    news
  },
  data() {
    return {
      newsData2: [],
      newsData: [],
      showIndex: 1
    }
  },
  mounted() {
    this.getData(1)
    this.getData(2)
  },
  methods: {
    tap(n) {
      this.showIndex = n
    },
    getData(n) {
      let requestType = []
      if (n === 1) {
        requestType = [
          {
            name: 'CRCS介绍',
            image: 'https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png'
          },
          {
            name: '本科项目介绍',
            image: 'https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png'
          },
          {
            name: '硕士项目介绍',
            image: 'https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png'
          }
        ]
      } else {
        requestType = [
          {
            name: '项目特色',
            image: 'https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png'
          }
        ]
      }
      requestType.map((item, index) => {
        this.request(item, index, n)
      })
    },
    request(item, index, n) {
      cAction.reportAction.getContent(item.name).then(json => {
        if (n === 1) {
          this.newsData.push({
            id: index,
            title: item.name,
            content: json === null ? '' : json[0].content,
            image: item.image
          })
          this.newsData = this.newsData.sort((a, b) => a.id - b.id)
        } else {
          this.newsData2.push({
            id: index,
            title: item.name,
            content: json === null ? '' : json[0].content,
            image: item.image
          })
          this.newsData2 = this.newsData2.sort((a, b) => a.id - b.id)
        }
      }).catch(e => { this.$message.error(e.message) }).finally(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.con970{
  width: 970px;
  margin: 0 auto;
}
.modul1{
  position: relative;
  width: 100%;
  height: 190px;
  background: url(https://zws-imgs-pub.ezijing.com/static/public/e5edeacd362ce7876f52c799f7e1a98d.png) center;
  background-size: cover;
  .tap-btn{
    width: 970px;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    display: flex;
    li{
      width: 128px;
      height: 36px;
      background: #BF0927;
      margin-right: 2px;
      font-size: 16px;
      line-height: 36px;
      text-align: center;
      color: #fff;
      &.active{
        color: #BF0927;
        background: #fff;
      }
    }
  }
}
.tap-item-box{
  .t-item1{
    li{
      border-bottom: 1px solid #CCCCCC;
      padding: 30px 0 40px;
      display: flex;
      .info{
        .img{
          background: #F5F7F8;
          padding: 21px;
          img{
            width: 178px;
            height: 248px;
            display: block;
          }
        }
        p{
          width: 100%;
          color: #000;
          font-size: 14px;
          line-height: 30px;
          margin: 0;
          text-align: center;
          &.name{
            font-size: 24px;
            font-weight: bold;
          }
        }
      }
      .msg{
        margin-left: 30px;
        .title{
          font-size: 23px;
          color: #000;
          line-height: 32px;
        }
        p{
          margin-top: 28px;
          line-height: 30px;
          color: #000;
          font-size: 14px;
        }
      }
    }
  }
  .new-items{
    display: flex;
  }
  .child-tabs{
    width: 670px;
    margin-bottom: 40px;
  }
  .t-item2{
    // display: flex;
    padding: 60px 0;
    .article{
      width: 670px;
      .title{
        line-height: 100%;
        font-size: 23px;
        font-weight: bold;
      }
      .t2{
        line-height: 25px;
        font-size: 18px;
        font-weight: bold;
        margin-top: 5px;
      }
      .txt{
        padding-top: 30px;
        p{
          line-height: 30px;
          font-size: 14px;
          color: #000;
          // text-indent: 2em;
          &.martop{
            margin-top: 30px;
          }
        }
      }
    }
    .right-img{
      position: relative;
      margin-left: auto;
    }
    .photo{
      position: relative;
      z-index: 9;
      width: 235px;
      height: 300px;
      display: flex;
      position: relative;
    }
    .line{
      position: absolute;
      top: 35px;
      right: 35px;
      width: 213px;
      height: 280px;
      border: 1px solid #979797;
    }
  }
  .t-item3{
    padding-top: 60px;
    position: relative;
    .t1{
      line-height: 32px;
      font-size: 23px;
      font-weight: bold;
    }
    .t2{
      margin-top: 5px;
      line-height: 25px;
      font-size: 18px;
      font-weight: bold;
      padding-bottom: 30px;
    }
    .new-img{
      width: 891px;
      margin: 0 auto 60px auto;
      display: block;
      // position: absolute;
      // top: 60px;
      // left: 50%;
      // -webkit-transform: translateX(-50%);
    }
    ul{
      li{
        padding: 40px 0;
        .con970{
          overflow: hidden;
        }
        img{
          display: block;
          width: 140px;
          height: 140px;
          float: left;
        }
        .wenb{
          float: left;
          width: 510px;
          .title{
            font-size: 18px;
            font-weight: bold;
            color: #262626;
            line-height: 25px;
            margin-bottom: 25px;
          }
          p{
            margin-bottom: 10px;
            font-size: 14px;
            color: #2B2B2B;
            line-height: 20px;
          }
        }
        &.type-l{
          background: #F3F3F3;
          img{
            margin-right: 60px;
          }
        }
        &.type-r{
          .con970{
            justify-content: right;
          }
          img{
            float: right;
          }
          .wenb{
            text-align: right;
            margin-right: 60px;
            float: right;
          }
        }
      }
    }
  }
}
.new-style{
  padding-bottom: 60px;
  .top-cont{
    width: 970px;
    margin: 0 auto;
    display: flex;
    .left{
      width: 434px;
      height: 496px;
      background: url(https://zws-imgs-pub.ezijing.com/static/public/9ca050bb75b08a232433f570bcac652d.png);
      background-size: 100% 100%;
      .txt{
        font-size: 16px;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 29px;
        width: 353px;
        margin: 180px auto 0;
        text-indent: 2em;
      }
    }
    ul{
      margin-left: auto;
      li{
        transition: all .5s;
        width: 464px;
        height: 50px;
        background: #F1F2F3;
        padding: 0;
        margin-bottom: 14px;
        &.br{
          &:hover{
            height: 163px;
          }
        }
        &:hover{
          height: 143px;
          background: #D83C56;
          .dis-b{
            display: none;
          }
          .dis-n{
            display: block;
          }
        }
        .dis-b{
          display: flex;
          align-items: center;
          height: 100%;
          .d{
            width: 8px;
            height: 8px;
            background: #BF0927;
            margin-left: 30px;
            border-radius: 50%;
          }
          .txt{
            font-size: 18px;
            color: #BF0927;
            line-height: 25px;
            margin-left: 10px;
          }
        }
      }
    }
  }
  .dis-n{
    margin-left: 50px;
    display: none;
    .title{
      font-size: 24px;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 33px;
      padding-top: 30px;
      margin-bottom: 36px;
    }
    .txt{
      font-size: 14px;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 20px;
    }
  }
}
.content{
  position: relative;
  width: 100%;
  height: 350px;
  background: url(https://zws-imgs-pub.ezijing.com/static/public/3ec70f7e95c722cc38d5b38749768b87.png);
  background-size: 100% 100%;
  .title{
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 33px;
    padding-top: 60px;
    text-align: center;
  }
  .p1{
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 20px;
    margin-top: 10px;
  }
  .box-cont{
    width: 1000px;
    height: 155px;
    border: 1px solid rgba(216,60,86,.5);
    // border: 1px solid #D83C56;
    margin: 35px auto 0;
    position: relative;
    .le-tj{
      position: absolute;
      top: 0;
      left: 0;
      width: 198px;
      height: 155px;
      background: rgba(255,255,255,.2);
      font-size: 18px;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 155px;
      text-align: center;
    }
    // .txt-box{
    //   position: absolute;
    //   top: 0;
    //   left: 50%;
    //   -webkit-transform: translateX(-50%);
    //   padding-top: 33px;
    //   .pp1{
    //     font-size: 14px;
    //     font-weight: bold;
    //     color: #FFFFFF;
    //     line-height: 20px;
    //     margin-bottom: 15px;
    //   }
    // }
  }
  .txt-box{
    position: absolute;
    top: 30%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    padding-top: 33px;
    .pp1{
      font-size: 20px;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 20px;
      margin-bottom: 30px;
    }
  }
}
.zs-cont{
  padding-top: 60px;
}
</style>
