<template>
  <van-overlay :z-index='50' :show="submitDialogShow" class="submit-dialog" @click="$emit('close-submit-doalog')">
    <!-- 人数多的时候 -->
    <view class="wrapper" v-if="babyInfoList.length >= 7 ">
      <view class="wrapper-box" >
        <image class="performance" :src="require('@/static/common/performance.png')" />
        <scroll-view 
          class="scroll-view"
          scroll-y
        >
           <view class="records" >
              <view class="records-item" v-for="item in babyInfoList" :key="item.id">
                <image class="ava" :src="item.headImg" />
                <view class="name" >{{item.babyName}}</view>
                <view class="school" >
                  {{item.schoolName}}-{{ item.classLevel | teferClass}}
                </view>
              </view>
            </view>
        </scroll-view>
        <view class="submit-area" >
          <view class="submit-btn" @click="$emit('submit')">
            确认提交
          </view>
        </view>
      </view>
    </view>
    
    <!-- 人数不够滚动的时候 -->
    <view class="plain-wrapper" v-else>
      <view class="plain-wrapper-title" >
        晋级名单
      </view>
      <view class="baby-list-wrapper" >
        <image  class="bg-dog" :src="require('@/static/common/nation-bg.png')"  />
        <view class="baby-list" >
            <view class="records" >
              <view class="records-item" v-for="item in babyInfoList" :key="item.id">
                <image class="ava" :src="item.headImg" />
                <view class="name" >{{item.babyName}}</view>
                <view class="school" >
                  {{item.schoolName}}-{{ item.classLevel | teferClass}}
                </view>
              </view>
            </view>

          <view class="submit-area" >
            <view class="submit-btn" @click="$emit('submit')">
              确认提交
            </view>
          </view>
        </view>
      </view>
    </view>
  </van-overlay>

</template>

<script>
export default {
  name: 'submit-dialog',
  props: {
    submitDialogShow: {
      type: Boolean,
      default: false
    },
    babyInfoList: {
      type: Array,
      require: true
    }
  },
  filters: {
    teferClass ( level ) {
      switch (level) {
        case -1:
          return '托班'
        case 0:
          return '小班'
        case 1:
          return '中班'
        case 2:
          return '大班'
      }
    }
  },
  methods: {
    onClickHide () {
      console.log('2222');
    }
  }
  
}
</script>

<style lang="less" scoped>
.submit-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  .wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .wrapper-box {
      position: relative;
      white-space: pre-wrap;
      .performance {
        width: 672rpx;
        height: 888rpx;
      }
      .submit-area {
        width: 624rpx;
        height: 164rpx;
        position: absolute;
        left: 24rpx;
        bottom: 40rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        .submit-btn {
          width: 572rpx;
          height: 84rpx;
          background: #1677FF;
          border-radius: 200rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
        }
      }
      .scroll-view {
        width: 619rpx;
        height: 526rpx;
        position: absolute;
        top: 158rpx;
        left: 24rpx;
        padding-top: 26rpx;
        box-sizing: border-box;
   
      }
      .scroll-view ::-webkit-scrollbar {
        width: 8rpx;  
        height: 8rpx; 
        color:#dddddd; 
      }
      .scroll-view ::-webkit-scrollbar-thumb {
        width: 4rpx;
        height: 106rpx;
        background: rgba(65, 143, 255, 0.4);
        border-radius: 2rpx;
      }
      // .scroll-view ::-webkit-scrollbar-track {
      //    width: 4rpx;
      //   height: 106rpx;
      //   // background: rgba(65, 143, 255, 0.4);
      //   background:red;
      //   border-radius: 2rpx;
      // }
    }
  }
  .plain-wrapper {
    width: 672rpx;
    background: #1B42FD;
    box-shadow: 0rpx 0rpx 10rpx 0rpx #A5A8A4;
    border-radius: 24rpx;
    padding-bottom: 40rpx;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .plain-wrapper-title {
      font-size: 40rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 48rpx;
    }
    .baby-list-wrapper {
      width: 624rpx;
      min-height: 400rpx;
      position: relative;
      .bg-dog {
        width: 156rpx;
        height: 154rpx;
        display: block;
        position: absolute;
        top: -134rpx;
        right: -40rpx;
        z-index: 1;
      }
      .baby-list {
        width: 624rpx;
        min-height: 400rpx;
        box-sizing: border-box;
        background: #FFFFFF;
        position: relative;
        z-index: 2;
        margin-left: 24rpx;
        margin-top: 158rpx;
        padding-top: 86rpx;
        padding-bottom: 200rpx;
        box-sizing: border-box;
        border-radius: 24rpx;
        .submit-area {
          width: 572rpx;
          height: 164rpx;
          position: absolute;
          left: 22rpx;
          bottom: 40rpx;
          display: flex;
          justify-content: center;
          align-items: center;
            .submit-btn {
              width: 572rpx;
              height: 84rpx;
              background: #1677FF;
              border-radius: 200rpx;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 32rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
          }
        }  
      }
    }
  }
       .records {
          .records-item {
            height: 44rpx;
            display: flex;
            align-items: center;
            padding-left: 40rpx;
            box-sizing: border-box;
            margin-bottom: 36rpx;
            .ava {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
            }
            .name {
              font-size: 32rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #333333;
              margin-left: 24rpx;
              margin-right: 20rpx;
              max-width: 160rpx;
              min-width: 96rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap
            }
            .school {
              min-width: 244rpx;
              max-width: 300rpx;
              padding-left: 18rpx;
              padding-right: 38rpx;
              box-sizing: border-box;
              height: 36rpx;
              line-height: 36rpx;
              background: #F2F4FF;
              border-radius: 18rpx;
              font-size: 20rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: rgba(22, 119, 255, 0.8);
              display: flex;
              justify-content: center;
              align-items: center;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap
            }
          }
        }
}
</style>