<template>
  <div class="topRight">
    <dv-border-box-13>
      <el-carousel direction="vertical" :autoplay="true" :interval="5000">
        <el-carousel-item v-for="item in 3" :key="item">
          <template v-for="(item1, index) in 21">
            <div class="item" :key="item1">
              <dv-border-box-2>
                <p class="numFont">WK{{ String(index + 1).padStart(2, '0') }}</p>
                <p v-if="index % 3" style="color: #f00">手术中</p>
                <p v-else-if="index % 5" style="color: #ff0">麻醉结束</p>
                <p v-else style="color: #fff">空置中</p>
              </dv-border-box-2>
            </div>
          </template>
        </el-carousel-item>
      </el-carousel>
    </dv-border-box-13>
  </div>
</template>

<script>
import { Carousel, CarouselItem } from 'element-ui';
export default {
  components: {
    'el-carousel': Carousel,
    'el-carousel-item': CarouselItem,
  },
};
</script>

<style lang="scss" scoped>
.topRight {
  flex-basis: 65%;
  margin-left: 3%;
  :deep(.el-carousel) {
    height: 100%;
    .el-carousel__container {
      height: 100%;
    }
    .el-carousel__item {
      height: 100%;
      padding: 2vh;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-content: space-evenly;
      .item {
        flex-basis: 13%;
        height: 11vh;
        flex-shrink: 0;
        > div {
          width: 100%;
          height: 100%;
          .border-box-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
            letter-spacing: 0.1vh;
            p:first-child {
              font-size: 2.2vh;
            }
            p:last-child {
              font-size: 2.4vh;
            }
          }
        }
      }
    }
  }
}
</style>
