<template>
  <div class="w-[116.94vh] h-[39.62vh] bgTopRightBox bg-contain bg-center bg-no-repeat p-[2.96vh] box-border" v-loading="isLoading">
    <el-carousel direction="vertical" :autoplay="false" :interval="5000" indicatorPosition="none">
      <el-carousel-item v-for="item in opList" :key="item['roomCode']">
        <section>
          <template v-for="(subItem, index) in item">
            <div class="w-[12.59vh] h-[9.81vh] ItemBox relative" :key="index">
              <p class="absolute w-[10.74vh] h-[2.77vh] leading--[2.77vh] text-[1.85vh] left-[0.92vh] top-[0.74vh] text-center youshe PBg">
                {{ subItem['roomName'] }}
              </p>
              <div class="absolute w-[10vh] h-[2.77vh] left-[1.03vh] bottom-[1.48vh] flex justify-between items-end">
                <img src="@/assets/svg/Monitor/TopRight/OpingIcon.svg" />
                <span class="text-[1.85vh] text-[#B53FDF] youshe text-nowrap">{{ subItem['operStatusName'] }}</span>
              </div>
            </div>

            <!-- <div v-if="index % 3" class="w-[12.59vh] h-[9.81vh] ItemBox relative" :key="index">
              <p class="absolute w-[10.74vh] h-[2.77vh] leading--[2.77vh] text-[1.85vh] left-[0.92vh] top-[0.74vh] text-center youshe PBg">
                OR-{{ String(index + 1).padStart(3, '0') }}
              </p>
              <div class="absolute w-[8.51vh] h-[2.77vh] left-[2.03vh] bottom-[1.48vh] flex justify-between items-end">
                <img src="@/assets/svg/Monitor/TopRight/OpingIcon.svg" />
                <span class="text-[1.85vh] text-[#B53FDF] youshe">手术中</span>
              </div>
            </div>
            <div v-else-if="index % 5" class="w-[12.59vh] h-[9.81vh] ItemBox relative" :key="index">
              <p class="absolute w-[10.74vh] h-[2.77vh] leading--[2.77vh] text-[1.85vh] left-[0.92vh] top-[0.74vh] text-center youshe PBg">
                OR-{{ String(index + 1).padStart(3, '0') }}
              </p>
              <div class="absolute w-[10.27vh] h-[2.77vh] left-[1.2vh] bottom-[1.48vh] flex justify-between items-end">
                <img src="@/assets/svg/Monitor/TopRight/OpendIcon.svg" />
                <span class="text-[1.85vh] text-[#946FEC] youshe">麻醉结束</span>
              </div>
            </div>
            <div v-else class="w-[12.59vh] h-[9.81vh] ItemBox relative" :key="index">
              <p class="absolute w-[10.74vh] h-[2.77vh] leading--[2.77vh] text-[1.85vh] left-[0.92vh] top-[0.74vh] text-center youshe PBg">
                OR-{{ String(index + 1).padStart(3, '0') }}
              </p>
              <div class="absolute w-[8.51vh] h-[2.77vh] left-[2.03vh] bottom-[1.48vh] flex justify-between items-end">
                <img src="@/assets/svg/Monitor/TopRight/OpWaitIcon.svg" />
                <span class="text-[1.85vh] text-[#0CFFFF] youshe">空置中</span>
              </div>
            </div> -->
          </template>
        </section>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { Carousel, CarouselItem } from 'element-ui';
import { GetMonitorOperationRoomStatus } from '@/api/monitor';
import dayjs from 'dayjs';
export default {
  data() {
    return {
      opList: [],
      isLoading: true,
    };
  },
  methods: {
    onGetPageData() {
      let nowDay = dayjs().format('YYYY-MM-DD');
      nowDay = '2024-06-06';
      GetMonitorOperationRoomStatus(nowDay).then(res => {
        this.formatData(res['data']);
        this.isLoading = false;
      });
    },
    formatData(pageData) {
      this.opList = [];
      let group = 0;
      for (let i = 0; i < pageData['length']; i++) {
        group = parseInt(i / 21);
        if (this.opList[group]) {
          this.opList[group].push(pageData[i]);
        } else {
          this.opList[group] = [pageData[i]];
        }
      }
    },
  },
  mounted() {
    this.onGetPageData();
  },
  components: {
    'el-carousel': Carousel,
    'el-carousel-item': CarouselItem,
  },
};
</script>

<style lang="scss" scoped>
.bgTopRightBox {
  background-image: url('@/assets/svg/Monitor/TopRight/Box.svg');
  :deep(.el-carousel) {
    height: 39.62vh;
    .el-carousel__container {
      height: 39.62vh;
      .el-carousel__item {
        section {
          display: grid;
          grid-template-columns: repeat(7, minmax(12.59vh, 1fr));
          gap: 3.7vh;
          grid-row-gap: 1.85vh;
        }
      }
    }
  }
}

.ItemBox {
  background-image: url('@/assets/svg/Monitor/TopRight/ItemBox.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.PBg {
  background: linear-gradient(90deg, rgba(0, 147, 255, 0) 0%, rgba(0, 147, 255, 0.37) 44%, rgba(0, 147, 255, 0) 99%);
  position: relative;
  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, rgba(0, 147, 255, 0) 0%, #0093ff 49%, rgba(0, 147, 255, 0) 99%);
  }
}
</style>
