<template>
  <div class="content">
    <Headside></Headside>
    <div class="sumTitle">
      <div class="md">
        <span>动作评分</span>
      </div>
    </div>
    <div class="listContainer">
      <div class="lt">
        <ul>
          <div class="ltTitle">
            <span v-for="item in actionList">{{ item.name }}</span>
          </div>
          <li v-for="(item,index) in memberList" v-if="index <= 7" v-show="Listate[index].state"
              :class="[{ 'box animate__animated animate__flipInX': Listate[index].state }]">
            <div class="gary">
              <em>{{ index + 1 }}</em>
              <div class="head">
                <img :src="item.Head" alt="" v-if="item.Head" :class="[{'boy':item.Sex == 1},{'girl':item.Sex == 2}]">
                <!-- <img src="../static/img/people/flyhead.png" alt="" v-if="!item.Head" :class="[{'boy':item.Sex == 1},{'girl':item.Sex == 2}]"> -->
                <default-head v-if="!item.Head" :class="[{'boy':item.Sex == 1},{'girl':item.Sex == 2}]"></default-head>                
              </div>
              <span class="names">{{ item.Name }}</span>
              <span class="score" v-for="item in item.DetailScore">
                <span class="glory">
                  <img src="../assets/imgs/rank/champion.png" v-if="item > 50">
                </span>
                {{ item }}
              </span>

            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Headside from '@/components/Headside'
import defaultHead from '@/components/defaultHead'
import {ClassUserRank} from "@/api/getApiRes";

let qs = require('qs');
export default {
  data() {
    return {
      actionList: [
        {
          "name": "排名",
          "id": "-2",
        }, {
          "name": "成员",
          "id": "-1",
        }, {
          "name": "反向卷腹",
          "id": "1",
        }, {
          "name": "仰卧起坐",
          "id": "2",
        }, {
          "name": "卧姿提踵",
          "id": "3",
        }, {
          "name": "仰卧推举",
          "id": "4",
        }, {
          "name": "向前箭步",
          "id": "5",
        }, {
          "name": "向前箭步",
          "id": "5",
        }, {
          "name": "向前箭步",
          "id": "5",
        }, {
          "name": "向前箭步",
          "id": "5",
        },{
          "name": "总分",
          "id": "7",
        }],
      memberList: [],
      pageStyle: RandomBg(),
      trueDate: true,//真实数据 true false
      autoJump: true,//开启自动跳走

      rankTimer: null,
      totalTime: '',
      Listate: [
        {state: false},
        {state: false},
        {state: false},
        {state: false},
        {state: false},
        {state: false},
        {state: false},
        {state: false},
      ],
    }
  },
  mounted() {
    this.init();
  },
  watch: {
    '$route': function (val) {
      if (val.path == '/actionScore') {
        if (this.trueDate) {
          this.init();
        } else {
          // this.rankTimer  = setInterval(() => {
          this.memberList = fakeNews(5);
          this.students.CalSort = fakeNews(5);
          // }, 5000);
        }
      } else {
        clearInterval(this.autoJump);
        clearInterval(this.rankTimer);
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.rankTimer);
    this.rankTimer = null;
  },
  methods: {
    init() {
      this.getClassUserRank();
    },
    getClassUserRank() {
      let that = this;
      let param = {
        eqSn: localStorage.eqSn
      };
      let postdata = qs.stringify(param);
      ClassUserRank(postdata).then(res => {
        let json = res;
        console.log(json);
        let jsonString = "{\"Code\":0,\"Memo\":\"执行成功\",\"Rs\":[{\"CsId\":154,\"AgdId\":49,\"Sex\":2,\"Name\":\"王甜羽\",\"Head\":\"img/testhead.d6e4566c.png\",\"ToTalScore\":2221,\"DetailScore\":{\"1\":12,\"2\":64,\"3\":57,\"4\":43,\"5\":31,\"6\":67,\"7\":8,\"8\":31,\"9\":67}},{\"CsId\":155,\"AgdId\":49,\"Sex\":1,\"Name\":\"孙舒涵\",\"Head\":\"img/testhead.d6e4566c.png\",\"ToTalScore\":212,\"DetailScore\":{\"1\":23,\"2\":53,\"3\":57,\"4\":64,\"5\":71,\"6\":37,\"7\":8,\"8\":31,\"9\":67}},\n" +
            "{\"CsId\":156,\"AgdId\":49,\"Sex\":2,\"Name\":\"张咏葳\",\"Head\":\"img/testhead.d6e4566c.png\",\"ToTalScore\":232,\"DetailScore\":{\"1\":22,\"2\":74,\"3\":27,\"4\":13,\"5\":41,\"6\":97,\"7\":8,\"8\":31,\"9\":67}}]}";
        json = JSON.parse(jsonString);
        if (json.Code == 0) {
          let CkSort = json.Rs;
          let CalSort = deepClone(json.Rs);
          let Rs = json.Rs;
          if (Rs != '') {
            // 排序
            that.memberList = json.Rs;
            that.cardPlay();
            console.log(that.memberList);
          }
        } else {
          this.memberList = [];
          if (json.Code == '999') {
          } else {
            // 已出错
            that.$message.error(json.Memo);
          }
        }
      })
    },
    cardPlay() {
      let that = this;
      // 重置一下状态
      that.Listate.map(function (t) {
        t.state = false;
      })
      let timeScope = 100;  //400
      let timeLong;
      that.timer = setTimeout(() => {   //设置延迟执行
        for (let i = 0; i < 8; i++) {
          timeLong = parseInt(i * timeScope);
          that.timer = setTimeout(() => {   //设置延迟执行
            that.Listate[i].state = true;
          }, timeLong)
        }
      }, 60);
    },
  },
  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 parseInt(val);
      }
    },
  },
  components: {
    Headside, defaultHead
  }
}
</script>

<style lang="scss" scoped>
@mixin bg {
  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;
}

.content {
  background: url("../../src/assets/imgs/rank/Training.png");
  margin: auto;

  @include bg;

  .sumTitle {
    @include cube;
    width: 80%;
    height: 0.75rem;
    margin-top: 0.7rem;
    overflow: visible;

    h5 {
      float: left;
      width: 80%;
      margin: 0;
      text-align: center;
      color: #fff;
      font-size: 0.5rem;
      font-weight: bold;
    }

    .md {
      position: relative;
      width: 3rem;
      height: 0.9rem;
      margin: 0 auto;
      bottom: 0.1rem;
      background: url("../../src/assets/imgs/rank/titleBg.png");
      background-repeat: no-repeat;
      background-position: top center;
      background-size: 100% 100%;
      line-height: 0.9rem;

      span {
        @include cube;
        position: relative;
        color: #fff;
        text-align: center;
        font-size: 0.35rem;
        font-weight: bold;
      }
    }
  }
}

.listContainer {
  @include cube;
  width: 95%;
  padding-top: 0.5rem;
  margin: 0 auto;
  align-content: center;
  text-align: center;

  .lt {
    display: inline-block;
    margin: auto;
    //float: left;
  }

  .ltTitle {
    @include cube;
    text-align: center;

    span {
      float: left;
      color: #fff;
      font-size: 0.25rem;
      padding-left: 0.2rem;


      &:nth-child(1) { //第一个元素
        margin-left: -0.1rem;
      }

      &:nth-child(2) {
        margin-left: 1.6rem;
      }

      &:last-child { //最后一个元素
        //float: right;
        margin-left: 0.2rem;
      }
    }
  }

  ul {
    @include cube;
    margin: 0 auto;
    //width: 9rem;

    li {
      @include cube;
      height: 0.7rem;
      padding-top: 0.2rem;

      .gary {
        @include cube;
        height: 0.6rem;
        margin-bottom: 0.3rem;
        background: url("../assets/imgs/rank/row.png");
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100% 100%;
        overflow: visible;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 250px;
        border-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      em {
        width: 0.6rem;
        height: 0.6rem;
        float: left;
        background: url("../assets/imgs/rank/rowTitle.png");
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100% 100%;
        text-align: left;
        text-indent: 0.1rem;
        font-size: 0.3rem;
        font-weight: bold;
        text-decoration: none;
        font-style: normal;
        color: white;
        line-height: 0.6rem;
      }

      .head {
        position: relative;
        bottom: 0.5rem;
        float: left;
        margin-left: 0.3rem;

        img {
          width: 0.65rem;
          height: 0.65rem;
          border-radius: 250rem;

          &.girl {
            border: 1px solid #EA26EA;
          }

          &.boy {
            border: 1px solid #39B6FF;
          }
        }
      }

      .names {
        float: left;
        color: white;
        font-size: 0.3rem;
        line-height: 0.6rem;
        margin-left: 0.4rem;
      }

      .glory {
        float: left;
        //margin-left: 0.4rem;

        img {
          float: right;
          width: 0.4rem;
          //margin-left: 0.2rem;
          margin-right: -0.4rem;
          margin-top: 0.1rem;
        }
      }

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

.icons {
  @include cube;
  position: absolute;
  bottom: 0.2rem;

  img {
    @include cube;
    // width: 40%;
    width: 18%;
  }
}
</style>