<template>
  <div class="main">
    <!-- 序号 -->
    <div class="sn">
      <ul>
        <li v-for="(s,i) in Rs.EiSort.slice(0, maxShowNum)" v-show="ctrlShow(i)" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
          <div class="num">{{ i + 1 }}</div>
        </li>
      </ul>
    </div>
    <!-- 激活放松 -->
    <div class="listContainer jhfs">
      <ul>
        <div class="listTitle">
          <img src="../assets/imgs/rank/titile_jhfs.png" alt="">
        </div>
        <div class="listBody">
          <li v-for="(s,i) in Rs.Ei0Sort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="ctrlShow(i)"
            :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
            <div>
              <span class="names">{{ s.Name }}</span>
              <span class="score" v-if="s.ei0Per > 0">{{ s.ei0Per|fmtInt }}%</span>
              <span class="score" v-else>- -</span>
            </div>
          </li>
          <li v-for="j in fakeCount" v-show="ctrlFakeShow(j)"
            :class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
            <div>
              <span class="names">&nbsp;</span>
              <span class="score">&nbsp;</span>
            </div>
          </li>
        </div>
      </ul>
    </div>
    
    <!-- 动态热身 -->
    <div class="listContainer dtrs">
      <ul>
        <div class="listTitle">
          <img src="../assets/imgs/rank/titile_dtrs.png" alt="">
        </div>
        <div class="listBody">
          <li v-for="(s,i) in Rs.Ei1Sort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="ctrlShow(i)"
            :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
            <div>
              <span class="names">{{ s.Name }}</span>
              <span class="score" v-if="s.ei1Per > 0">{{ s.ei1Per|fmtInt }}%</span>
              <span class="score" v-else>- -</span>
            </div>
          </li>
          <li v-for="j in fakeCount" v-show="ctrlFakeShow(j)"
            :class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
            <div>
              <span class="names">&nbsp;</span>
              <span class="score">&nbsp;</span>
            </div>
          </li>
        </div>
      </ul>
    </div>
    
    <!-- 脂肪燃烧 -->
    <div class="listContainer zfrs">
      <ul>
        <div class="listTitle">
          <img src="../assets/imgs/rank/titile_zfrs.png" alt="">
        </div>
        <div class="listBody">
          <li v-for="(s,i) in Rs.Ei2Sort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="ctrlShow(i)"
            :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
            <div>
              <span class="names">{{ s.Name }}</span>
              <span class="score" v-if="s.ei2Per > 0">{{ s.ei2Per|fmtInt }}%</span>
              <span class="score" v-else>- -</span>
            </div>
          </li>
          <li v-for="j in fakeCount" v-show="ctrlFakeShow(j)"
            :class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
            <div>
              <span class="names">&nbsp;</span>
              <span class="score">&nbsp;</span>
            </div>
          </li>
        </div>
      </ul>
    </div>
    
    <!-- 糖分消耗 -->
    <div class="listContainer tfxh">
      <ul>
        <div class="listTitle">
          <img src="../assets/imgs/rank/titile_tfxh.png" alt="">
        </div>
        <div class="listBody">
          <li v-for="(s,i) in Rs.Ei3Sort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="ctrlShow(i)"
            :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
            <div>
              <span class="names">{{ s.Name }}</span>
              <span class="score" v-if="s.ei3Per > 0">{{ s.ei3Per|fmtInt }}%</span>
              <span class="score" v-else>- -</span>
            </div>
          </li>
          <li v-for="j in fakeCount" v-show="ctrlFakeShow(j)"
            :class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
            <div>
              <span class="names">&nbsp;</span>
              <span class="score">&nbsp;</span>
            </div>
          </li>
        </div>
      </ul>
    </div>
    
    <!-- 心肺训练 -->
    <div class="listContainer xfxl">
      <ul>
        <div class="listTitle">
          <img src="../assets/imgs/rank/titile_xfxl.png" alt="">
        </div>
        <div class="listBody">
          <li v-for="(s,i) in Rs.Ei4Sort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="ctrlShow(i)"
            :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
            <div>
              <span class="names">{{ s.Name }}</span>
              <span class="score" v-if="s.ei4Per > 0">{{ s.ei4Per|fmtInt }}%</span>
              <span class="score" v-else>- -</span>
            </div>
          </li>
          <li v-for="j in fakeCount" v-show="ctrlFakeShow(j)"
            :class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
            <div>
              <span class="names">&nbsp;</span>
              <span class="score">&nbsp;</span>
            </div>
          </li>
        </div>
      </ul>
    </div>
    
    <!-- 峰值锻炼 -->
    <div class="listContainer fzdl">
      <ul>
        <div class="listTitle">
          <img src="../assets/imgs/rank/titile_fzdl.png" alt="">
        </div>
        <div class="listBody">
          <li v-for="(s,i) in Rs.Ei5Sort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="ctrlShow(i)"
            :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
            <div>
              <span class="names">{{ s.Name }}</span>
              <span class="score" v-if="s.ei5Per > 0">{{ s.ei5Per|fmtInt }}%</span>
              <span class="score" v-else>- -</span>
            </div>
          </li>
          <li v-for="j in fakeCount" v-show="ctrlFakeShow(j)"
            :class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
            <div>
              <span class="names">&nbsp;</span>
              <span class="score">&nbsp;</span>
            </div>
          </li>
        </div>
      </ul>
    </div>
    
    <!-- 运动强度 -->
    <div class="listContainer ydqd">
      <ul>
        <div class="listTitle">
          <img src="../assets/imgs/rank/titile_ydqd.png" alt="">
        </div>
        <div class="listBody">
          <li v-for="(s,i) in Rs.EiSort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="ctrlShow(i)"
            :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
            <div>
              <span class="names">{{ s.Name }}</span>
              <span class="score" v-if="s.EI > 0">{{ s.EI|fmtInt }}</span>
              <span class="score" v-else>- -</span>
            </div>
          </li>
          <li v-for="j in fakeCount" v-show="ctrlFakeShow(j)"
            :class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
            <div>
              <span class="names">&nbsp;</span>
              <span class="score">&nbsp;</span>
            </div>
          </li>
        </div>
      </ul>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      rsCount: 0,       //获取到的记录数      
      fakeCount: 0,     //记录不足，需要填充的记录数
      maxShowNumPerPage: 8, //单页最大显示记录数
      maxShowNum: 8,    //最大显示记录数
      pageCount: 0,     //总页数
      curPage: 0,       //当前页码 从0开始
      showTimePerPage: 30000,  //每页显示时长 毫秒
      pageRpeatNum: 1, //每页重复显示次数
      showTimeTotal: 0, //总显示时长 毫秒
      pageTimer: null,
      Rs: {
        EiSort: [],
        Ei0Sort: [],    //0-39% 激活放松
        Ei1Sort: [],    //40-54% 动态热身
        Ei2Sort: [],    //55-69% 脂肪燃烧
        Ei3Sort: [],    //70-79% 糖分消耗
        Ei4Sort: [],    //80-89% 心肺训练
        Ei5Sort: [],    //90-100% 峰值锻炼
      },
      Listate: [
        {state: false},{state: false},{state: false},{state: false},{state: false},{state: false},{state: false},{state: false},
        {state: false},{state: false},{state: false},{state: false},{state: false},{state: false},{state: false},{state: false},
        {state: false},{state: false},{state: false},{state: false},{state: false},{state: false},{state: false},{state: false},        
      ],
    }
  },
  mounted() {
    // console.log("eiRank mounted");
    // console.log(JSON.stringify(this.Rs.Ei1Sort));
  },
  beforeDestroy() {
    console.log("eiRank beforeDestroy");
    clearInterval(this.pageTimer);
  },
  props: ['students'],
  watch: {
    'students': {
      handler(newName, oldName) {
        let that = this;
        if (!newName) {
          console.log('没有传入数据');
          return;
        }

        that.computeAcMap(newName.EiSort);

        let Studenlength = newName.EiSort.length;
        if (Studenlength > that.Listate.length)
          Studenlength = that.Listate.length;

        that.pageCount = Math.ceil(Studenlength / that.maxShowNumPerPage);
        if (that.pageCount == 1)
          that.pageRpeatNum = 4;
        else if (that.pageCount == 2)
          that.pageRpeatNum = 3;
        else if (that.pageCount >= 3)
          that.pageRpeatNum = 2;          
        that.showTimeTotal = that.pageCount * that.showTimePerPage * that.pageRpeatNum;

        that.maxShowNum = that.pageCount * that.maxShowNumPerPage;
        if (that.maxShowNum > that.Listate.length)
          that.maxShowNum = that.Listate.length;

        console.log("pageCount:" + that.pageCount);
        console.log("showTimeTotal:" + that.showTimeTotal);
        console.log("maxShowNum:" + that.maxShowNum);


        if (Studenlength < that.maxShowNum) {
          that.rsCount = Studenlength
          that.fakeCount = that.maxShowNum - that.rsCount;
        }
        else {
          that.rsCount = that.maxShowNum
          that.fakeCount = 0;
        }
        console.log("rsCount:" + that.rsCount);
        console.log("fakeCount:" + that.fakeCount);
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    ctrlShow(i) {
      let cmpPage = Math.ceil((i+1) / this.maxShowNumPerPage) - 1;
      return this.Listate[i].state && cmpPage == this.curPage;
    },
    ctrlFakeShow(i) {
      return this.Listate[i+this.rsCount-1].state && this.curPage == this.pageCount - 1;
    },
    // cardPlay() {
    //   let that = this;
    //   // 重置一下状态
    //   that.Listate.map(function (t) {
    //     t.state = false;
    //   })
    //   let timeScope = 100;  //400
    //   let timeLong;
    //   that.timer = setTimeout(() => {   //设置延迟执行
    //     let count = that.Listate.length;
    //     for (let i = 0; i < count; i++) {
    //       timeLong = parseInt(i * timeScope);
    //       that.timer = setTimeout(() => {   //设置延迟执行
    //         that.Listate[i].state = true;
    //       }, timeLong)
    //     }
    //   }, 60);
    // },
    cardPlay(showPage) {
      let that = this;
      that.curPage = showPage;
      let first = showPage * that.maxShowNumPerPage;
      let last = first + that.maxShowNumPerPage;
      console.log("[cardPlay] first: "+ first + " last: " + last);
      if (last > that.Listate.length)
        last = that.Listate.length;

      // 重置一下状态
      that.Listate.map(function (t) {
        t.state = false;
      })
      let timeScope = 100;  //400
      let timeLong;
      let t = 0;
      that.timer = setTimeout(() => {   //设置延迟执行
        for (let i = first; i < last; i++) {
          timeLong = parseInt(t * timeScope);
          that.timer = setTimeout(() => {   //设置延迟执行
            that.Listate[i].state = true;
          }, timeLong)
          t++;
        }
      }, 60);
    },
    pagePlay() {
      let that = this;
      let showPage = 0;

      that.cardPlay(showPage);
      showPage++;
      
      let showTimeTotal = that.showTimeTotal;
      that.pageTimer = setInterval(() => {
        showTimeTotal -= that.showTimePerPage;
        if (showTimeTotal > 0) {
          if (showPage >= that.pageCount) {
            showPage = 0;
          }
          that.cardPlay(showPage);
          showPage++;
        }
        else {
          console.log("[pagePlay] clearInterval showTimeTotal:" + showTimeTotal);
          clearInterval(that.pageTimer);
          that.pageTimer = null;
        }
        

        // if (showPage < that.pageCount) {
        //   that.cardPlay(showPage);
        //   showPage++;
        // }
        // else {
        //   clearInterval(that.pageTimer);
        //   that.pageTimer = null;
        // }
      }, that.showTimePerPage);
    },
    computeAcMap(Rs) {
      let that = this;
      let sumAcMap = 0;
      let EiSort = [];
      let Ei0Sort = [];    //0-39% 激活放松
      let Ei1Sort = [];    //40-54% 动态热身
      let Ei2Sort = [];    //55-69% 脂肪燃烧
      let Ei3Sort = [];    //70-79% 糖分消耗
      let Ei4Sort = [];    //80-89% 心肺训练
      let Ei5Sort = [];    //90-100% 峰值锻炼

      EiSort  = deepClone(Rs);
      that.Rs.EiSort = EiSort.sort(function (a, b) {
        return b.EI - a.EI;
      });

      that.Rs.EiSort.map(function (item, t) {
        sumAcMap = 0;
        for (var key in item.EiCalcBean.acMap) {
          // console.log("key = " + key);
          // console.log("value = " + item.EiCalcBean.acMap[key]);
          sumAcMap += parseFloat(item.EiCalcBean.acMap[key]);
        };
        // console.log("sumAcMap = " + sumAcMap);

        item.ei0Per = that.fmtEiPerValue(item.EiCalcBean.acMap[39] / sumAcMap);
        item.ei1Per = that.fmtEiPerValue(item.EiCalcBean.acMap[54] / sumAcMap);
        item.ei2Per = that.fmtEiPerValue(item.EiCalcBean.acMap[69] / sumAcMap);
        item.ei3Per = that.fmtEiPerValue(item.EiCalcBean.acMap[79] / sumAcMap);
        item.ei4Per = that.fmtEiPerValue(item.EiCalcBean.acMap[89] / sumAcMap);
        item.ei5Per = that.fmtEiPerValue(item.EiCalcBean.acMap[100] / sumAcMap);

        Ei0Sort.push(item);
      });
      // console.log(JSON.stringify(Ei0Sort));

      Ei1Sort = deepClone(Ei0Sort);
      Ei2Sort = deepClone(Ei0Sort);
      Ei3Sort = deepClone(Ei0Sort);
      Ei4Sort = deepClone(Ei0Sort);
      Ei5Sort = deepClone(Ei0Sort);

      that.Rs.Ei0Sort = Ei0Sort.sort(function (a, b) {
        return b.ei0Per - a.ei0Per;
      });
      that.Rs.Ei1Sort = Ei1Sort.sort(function (a, b) {
        return b.ei1Per - a.ei1Per;
      });
      that.Rs.Ei2Sort = Ei2Sort.sort(function (a, b) {
        return b.ei2Per - a.ei2Per;
      });
      that.Rs.Ei3Sort = Ei3Sort.sort(function (a, b) {
        return b.ei3Per - a.ei3Per;
      });
      that.Rs.Ei4Sort = Ei4Sort.sort(function (a, b) {
        return b.ei4Per - a.ei4Per;
      });
      that.Rs.Ei5Sort = Ei5Sort.sort(function (a, b) {
        return b.ei5Per - a.ei5Per;
      });
    },
    fmtEiPerValue(val) {
      let fmtval = (val*100).toFixed(0);
      // console.log("val: " + val);
      // console.log("fmtval: " + fmtval);
      return fmtval
    },
  },
  filters: {
    fmtNum(val) {
      if (val == 0) {
        return '--'
      } else {
        if (parseInt(val) < 0) return 0;
        if (parseInt(val) > 0) return val
      }
    },
    fmtFloat(val) {
      if (val == 0) {
        return '0.0'
      } else {
        return parseFloat(val).toFixed(1);
      }
    },
    fmtInt(val) {
      if (val == 0) {
        return '0'
      } else {
        // return parseFloat(val).toFixed(2);
        return parseInt(val);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$font-color: white;
$yellow: #FFEB50;


@mixin bg {
  // height: auto;
  // min-height: 100%;
  // background-color: #333;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
}

@mixin cube {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

.main {      
  @include cube;
  width: 100%;
  // height: auto;
  padding-top: 0.4rem;
  padding-bottom: 0.2rem;
  overflow: hidden;

  .listContainer {
    width: 2.5rem;
    float: left;
    margin-left: 0.05rem;
    margin-right: 0.13rem;
  }

  ul {
    @include cube;

    .listTitle {
      height: 1.0rem;
      margin-top: 0rem;
      margin: 0 auto;
      margin-bottom: 0.2rem;

      img {
      width: 2.5rem;
      }
    }

    .listBody {
      padding-top: 0.3rem;
      padding-bottom: 0.29rem;
      min-height: 7rem;
      // opacity:0.8;
    }

    li {
      @include cube;
      margin-bottom: 0.3rem;
      width: 100%;
      background: url("../assets/imgs/rank/bg_cell.png");
      // background-color: blue;
      background-size: 100% 100%;
      background-position: left center;

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

      .names {
        float: left;
        color: white;
        font-size: 0.28rem;
        line-height: 0.56rem;
        margin-left: 0.3rem;
        min-width: 1rem;
        text-align: left;
      }

      .score {
        float: right;
        color: #FFE61F;
        font-size: 0.3rem;
        line-height: 0.6rem;
        font-family: Arial;
        font-weight: bold;
        font-style: italic;
        text-align: center;
        padding-right: 0.3rem;
      }
    }
  }
}

.sn {
  width: 0.7rem;
  padding-top: 1.476rem;
  float: left;

  ul {

    li {
      // background: url("");
      background: url("../assets/imgs/wait/litr.svg");
      background-size: 100% 100%;
      background-position: left center;
      background-repeat: no-repeat;
      margin-top: 0rem;
      margin-bottom: 0.244rem;

      .num {
        position: relative;
        left: 0rem;
        width: 0.58rem;
        height: 0.65rem;
        float: left;
        // background: url("../assets/imgs/wait/litr.svg");
        // background-size: 100% 100%;
        // background-position: left center;
        line-height: 0.65rem;
        font-size: 0.35rem;
        font-weight: bold;
        text-align: center;
        // text-indent: 0.2rem;
        font-style: normal;
        color: #fff;
        text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.47);
      }
    }
  }
}

.jhfs {      
  ul {
    .listBody {
      background: url("../../src/assets/imgs/rank/bg_jhfs.png");
      @include bg;
    }
  }
}

.dtrs {      
  ul {
    .listBody {
      background: url("../../src/assets/imgs/rank/bg_dtrs.png");
      @include bg;
    }
  }
}

.zfrs {      
  ul {
    .listBody {
      background: url("../../src/assets/imgs/rank/bg_zfrs.png");
      @include bg;
    }
  }
}

.tfxh {      
  ul {
    .listBody {
      background: url("../../src/assets/imgs/rank/bg_tfxh.png");
      @include bg;
    }
  }
}

.xfxl {      
  ul {
    .listBody {
      background: url("../../src/assets/imgs/rank/bg_xfxl.png");
      @include bg;
    }
  }
}

.fzdl {      
  ul {
    .listBody {
      background: url("../../src/assets/imgs/rank/bg_fzdl.png");
      @include bg;
    }
  }
}

.ydqd {
  margin-left: 0.36rem !important;

  ul {
    .listBody {
      background: url("../../src/assets/imgs/rank/bg_ydqd.png");
      @include bg;
    }
  }
}
</style>