<template>
  <div class="topRight">
    <dv-border-box-13>
      <el-carousel direction="vertical" :autoplay="false" :interval="5000">
        <el-carousel-item v-for="item in 3" :key="item">
          <div class="item" v-for="(item1, index) in 21" :key="item1">
            <dv-border-box-2>
              <p>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>
        </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%;
      .item {
        float: left;
        width: 13%;
        padding-top: 10%;
        position: relative;
        margin-left: 1%;
        margin-top: 1.8%;
        > div {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          .border-box-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
            p:first-child {
              font-size: 18px;
            }
            p:last-child {
              font-size: 22px;
            }
          }
        }
      }
    }
  }
}
</style>
