<template>
  <el-dialog title="" :visible.sync="studentInfo.dialogVisible" :close-on-click-modal="false">
    <div :class="[{'newStudentContainer':true}]">
      <div class="info">
        <ul :class="[{'many':studentInfo.Rs.length > 5},{'little':studentInfo.Rs.length >= 1 && studentInfo.Rs.length <= 5}]">
          <li v-for="(s,i) in studentInfo.Rs.slice(0, maxShowNum)"
              :class="[{'bigLi':studentInfo.Rs.length <= 4}, {'smallLi':studentInfo.Rs.length > 10}]">
            <img :src="s.Head" alt="" v-if="s.Head" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
            <!-- <img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]"> -->
            <default-head v-if="!s.Head" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]"></default-head>
            <span class="names">{{ s.Name }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div v-show="studentInfo.studentTime > 0" class="countdown">{{studentInfo.studentTime}}</div>
  </el-dialog>
</template>

<script>
import defaultHead from '@/components/defaultHead'

export default {
  data() {
    return {
      percent: 0,
      totalTime: 0,
      sumTime: 4,
      bg: 0,
      maxShowNum: 12,    //最大显示记录数
    };
  },
  props: ['studentInfo'],
  watch: {
    studentInfo: {
      handler(newName, oldName) {
        let that = this;
        if (newName.Rs != '') {
          if (newName.Rs.length > 3) {
            that.bg = 0
          } else {
            that.bg = 1
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  components: {
    defaultHead
  }
}
</script>

<style lang="scss" scoped>

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

/*成就彩蛋*/
/deep/ .el-dialog {
  width: 12.6rem;
  height: 6rem;
  background: none;
  box-shadow: none;
  border: none;
  padding-bottom: 1rem;
  margin-top: 0.76rem !important;
}

/deep/ .el-dialog__header {
  display: none;
  padding: 0rem 0rem;
}
// /deep/ .el-dialog__body {
//   padding: 0rem 0rem;
// }

.newStudentContainer {
  height: 6rem;
  margin-top: 0;
  background: url("../assets/imgs/newStudent/bg.svg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

ul {
  @include cube;
  // width: 70%;
  display: inline-flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-grow: 1;
  // padding-top: 18%;

  &.little {
    justify-content: space-around;
    padding-top: 20%;
    width: 86%;

    .bigLi img {
      width: 2.2rem;
      height: 2.2rem;
    }
  }

  &.many {
    justify-content: space-around;
    // justify-content: space-between;
    padding-top: 13.7%;
    width: 86%;
  }

  li {
    height: 2rem;
    overflow: hidden;

    img {
      @include cube;
      width: 1.8rem;
      height: 1.8rem;
      border-radius: 250rem;

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

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

    &.smallLi {
      height: 2rem;

      img {
        width: 1.6rem;
        height: 1.6rem;
      }
    }

    &.bigLi {
      height: 3rem;

      img {
        width: 2.3rem;
        height: 2.3rem;
      }
    }


  }

  .names {
    @include cube;
    width: 1.6rem;
    background: rgba(0, 0, 0, 0.7);
    font-size: 0.25rem;
    text-align: center;
    padding: 0% 1%;
    border-radius: 250rem;
    position: relative;
    bottom: 0.3rem;
    color: #fff;
    line-height: 0.3rem;
  }
}

.countdown {
  width: 1.5rem;
  position: relative;
  font-size: 0.6rem;
  color: #797979;
  margin: 0 auto;
  margin-top: 0.8rem;
}

/*响应式调整*/
@media (max-aspect-ratio: 1920/1080) {  //max-aspect-ratio: 小于等于   min-aspect-ratio: 大于等于
  /deep/ .el-dialog {
    margin-top: 1.5rem !important;
  }

  .countdown {
    margin-top: 0.8rem;
  }
}

</style>
