<script>
export default {
  props: {
    datas: Array
  },
  computed: {
    showData() {
      let arr = []
      for (let i = 0, len = this.datas.length; i < len; i++) {
        let slideItem = this.datas[i]
        let iconClassName = slideItem.iconClass
        let iconClassObj = {}
        if (iconClassName.indexOf(' ')) {
          let iconArr = iconClassName.split(' ')
          for (let j = 0; j < iconArr.length; j++) {
            iconClassObj[iconArr[j]] = true
          }
        } else {
          iconClassObj[iconClassName] = true
        }
        slideItem.iconClassObj = iconClassObj
        arr.push(slideItem)
      }
      return arr
    },
    classData() {
      let len = this.datas.length
      let index = this.curIndex
      let arr = [{}, {}, {}, {}, {}]
      arr[(index - 2 + len) % len] = {'slider__item_0': true}
      arr[(index - 1 + len) % len] = {'slider__item_1': true}
      arr[index] = {'slider__item_cur': true}
      arr[(index + 1) % len] = {'slider__item_3': true}
      arr[(index + 2) % len] = {'slider__item_4': true}
      return arr
    }
  },
  data() {
    return {
      curIndex: 2
    }
  },
  methods: {
    doPrev() {
      if (this.curIndex === 0) {
        this.curIndex = this.datas.length - 1
      } else {
        this.curIndex--
      }
    },
    doNext() {
      if (this.curIndex === this.datas.length - 1) {
        this.curIndex = 0
      } else {
        this.curIndex++
      }
    },
    toSlideItem(idx) {
      this.curIndex = idx
    }
  }
}
</script>
<template>
  <div class="m-stastic-slider">
    <div class="slider__item" :class="classData[index]" @click="toSlideItem(index)" v-for="(item,index) in showData" :key="index">
      <div class="m-stastic-item">
        <div class="m-stastic-item__title" v-text="item.name"></div>
        <div class="m-stastic-item__icon">
          <i :class="item.iconClassObj"></i>
        </div>
        <div class="m-stastic-item__content">
          <p class="content-total">
            <em v-text="item.totalValue"></em>{{item.totalLabel}}</p>
          <p class="content-detail" v-html="item.info"></p>
        </div>
        <div class="m-stastic-item__morelink">
          <a :href="item.moreLink">
            <i class="fa fa-plus"></i>
            <span>更多</span>
          </a>
        </div>
      </div>
    </div>
    <a href="javascript:;" class="slider__btn slider__btn_prev" @click="doPrev"><i class="fa fa-angle-left"></i></a>
    <a href="javascript:;" class="slider__btn slider__btn_next" @click="doNext"><i class="fa fa-angle-right"></i></a>
  </div>
</template>
<style scoped>
  .m-stastic-slider {
      position: relative;
      height: 400px;
      width: 100%
    }

    .m-stastic-slider .slider__item {
      position: absolute;
      background: #fff;
      border: solid 1px #E5E5E5;
      border-radius: 10px;
      box-shadow: 0 8px 64px rgba(0,0,0,.1);
      left: 50%;
      bottom: 0;
      -webkit-transform: translate3d(-50%, 0, 0);
      transform: translate3d(-50%, 0, 0);
      -webkit-transition: all .6s;
      transition: all .6s;
      width: 300px;
      height: 370px;
      text-align: center;
      z-index: 1;
    }

    .m-stastic-slider .slider__item_cur {
      z-index: 3
    }

    .m-stastic-slider .slider__item_0 {
      -webkit-transform: translate3d(-1374%, 3%, 0) scale3d(.6, .6, 1);
      transform: translate3d(-137%, 3%, 0) scale3d(.6, .6, 1)
    }

    .m-stastic-slider .slider__item_1 {
      -webkit-transform: translate3d(-100%, 2%, 0) scale3d(.8, .8, 1);
      transform: translate3d(-100%, 2%, 0) scale3d(.8, .8, 1);
      z-index: 2
    }

    .m-stastic-slider .slider__item_3 {
      -webkit-transform: translate3d(-2%, 2%, 0) scale3d(.8, .8, 1);
      transform: translate3d(-2%, 2%, 0) scale3d(.8, .8, 1);
      z-index: 2
    }

    .m-stastic-slider .slider__item_4 {
      -webkit-transform: translate3d(35%, 3%, 0) scale3d(.6, .6, 1);
      transform: translate3d(35%, 3%, 0) scale3d(.6, .6, 1)
    }

    .slider__btn {
      text-align: center
    }

    .m-stastic-item {
      padding-top: 35px;
    }

    .m-stastic-item__title {
      padding-right: 30px;
      position: relative;
      text-align: right;
    }

    .m-stastic-item__title:after {
      content: '';
      position: absolute;
      width: 16px;
      height: 3px;
      right: 0;
      top: 10px;
      background: #29B06E;
    }

    .m-stastic-item__icon {
      padding: 30px 0 20px;
      font-size: 56px;
      color: #28B06E
    }
    .m-stastic-item__icon i,
    .content-total em{
      text-shadow: 5px 6px 8px rgba(40 , 176 , 110, 0.15);
    }
    .slider__item_cur .m-stastic-item__morelink a{
      box-shadow: 5px 6px 8px rgba(40 , 176 , 110, 0.15);
    }
    .content-total {
      color: #898989;
      font-size: 12px;
    }

    .content-total em {
      font-size: 40px;
      color: #27B26F;
      margin-right: 6px;
    }

    .m-stastic-item__morelink {
      margin-top: 35px;
      text-align: right;
      padding-right: 30px;
    }

    .m-stastic-item__morelink a {
      transition: all 0.8s;
      -moz-transition: all 0.8s;
      -webkit-transition: all 0.8s;
      -o-transition: all 0.8s;
      display: inline-block;
      height: 30px;
      width: 30px;
      background: #27B26F;
      overflow: hidden;
      color: #fff;
      text-align: center;
      border-radius: 30px;
      line-height: 30px;
    }

    .m-stastic-item__morelink a span {
      display: none;
    }

    .slider__item_cur .m-stastic-item__morelink a {
      text-decoration: none;
      width:100px
    }

    .slider__item_cur .m-stastic-item__morelink a span {
      margin-left: 5px;
      display: inline;
    }
    .content-detail em{
      color:#00B56D
    }

    .slider__btn {
      position: absolute;
      left: 0;
      top: 50%;
      width: 50px;
      line-height:50px;
      border-radius: 50px;
      height: 50px;
      margin-top:-25px;
      text-align: center;
      color:#fff;
      background: #28B06E;
      display: block;
      font-size: 32px;
    }
    .slider__btn:hover{
      background:#3ABF80
    }

    .slider__btn_next {
      left:auto;
      right:0;
      text-indent: 2px;
    }
  .m-stastic-item__content{
    padding: 0 1.2em;
  }
</style>
