<template>
  <div class="w-[172.22vh] h-[83.51vh] bgBox mx-auto relative">
    <div class="absolute w-[38.51vh] h-[3.7vh] bgTitleBox top-[-1.9vh] left-[3.6vh]">
      <div class="w-[29.62vh] h-[2.5vh] mx-auto mt-[0.64vh] flex justify-between items-center leading-none">
        <div class="h-[0.64vh]">
          <img class="h-full" src="@/assets/svg/Monitor/Triangle.svg" />
        </div>
        <span class="panmen text-[1.66vh]">白班</span>
        <p class="panmen text-[1.66vh]">手术间: {{ roomCount }}</p>
        <p class="panmen text-[1.66vh]">护理人员: {{ nurseCount }}</p>
      </div>
    </div>
    <section class="w-[166.2vh] h-[77.12vh] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
      <el-carousel direction="vertical" :autoplay="true" :interval="5000" indicatorPosition="none">
        <el-carousel-item v-for="item in schedulingList" :key="item['roomName']">
          <section class="carouselItemBox">
            <template v-for="(subItem, index) in item">
              <div class="w-[54.25vh] h-[4.44vh] leading-[4.44vh] text-center" :class="index % 6 < 3 ? 'bgOdd' : 'bgEven'" :key="index">
                <div class="inline-block w-[9.07vh] h-[1.66vh] leading-none">
                  <span class="panmen text-[#8C5AFA] text-[1.48vh]">{{ subItem['roomName'] }}</span>
                </div>
                <div class="inline-block w-[23vh] h-[1.66vh] leading-none pl-[1.94vh] border-l border-dashed border-l-[rgba(213,209,228,0.24)]">
                  <span class="text-[1.48vh]">{{ subItem['nurseNames'] }}</span>
                </div>
              </div>
            </template>
          </section>
        </el-carousel-item>
      </el-carousel>
    </section>
  </div>
</template>

<script>
import { Carousel, CarouselItem } from 'element-ui';
import { GetMonitorOperationNurseSchedule } from '@/api/scheduling';
import dayjs from 'dayjs';

export default {
  data() {
    return {
      toDate: dayjs().format('YYYY-MM-DD'),
      roomCount: 178,
      nurseCount: 135,
      schedulingList: [],
      redenTimer: null,
    };
  },
  methods: {
    onGetPageData() {
      this.isLoading = true;
      GetMonitorOperationNurseSchedule(this.toDate).then(res => {
        if (res['data']['nurseScheduleDetails']['length']) {
          this.roomCount = res['data']['roomCount'];
          this.nurseCount = res['data']['nurseCount'];
          this.schedulingList = [];
          res['data']['nurseScheduleDetails'].forEach((item, index) => {
            if (this.schedulingList[Math.floor(index / 39)]) {
              this.schedulingList[Math.floor(index / 39)].push(item);
            } else {
              this.schedulingList[Math.floor(index / 39)] = [item];
            }
          });
        } else {
          if (this.$store.getters.isMock) {
            this.schedulingList = [];
            for (let index = 0; index < 100; index++) {
              if (this.schedulingList[Math.floor(index / 39)]) {
                this.schedulingList[Math.floor(index / 39)].push({
                  roomName: String(index + 1).padStart(3, '0'),
                  nurseNames: '陈宇、孙晨、邓一帆',
                });
              } else {
                this.schedulingList[Math.floor(index / 39)] = [
                  {
                    roomName: String(index + 1).padStart(3, '0'),
                    nurseNames: '陈宇、孙晨、邓一帆',
                  },
                ];
              }
            }
          }
        }
        this.isLoading = false;
      });
    },
  },
  mounted() {
    this.onGetPageData();
    this.redenTimer = setInterval(() => {
      this.onGetPageData();
    }, 300000);
  },
  components: {
    'el-carousel': Carousel,
    'el-carousel-item': CarouselItem,
  },
  beforeRouteLeave() {
    clearInterval(this.renderTimer);
  },
};
</script>

<style lang="scss" scoped>
.bgBox {
  background-image: url('@/assets/svg/Schedule/Box.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.bgTitleBox {
  background-image: url('@/assets/svg/Schedule/TitleBox.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
:deep(.el-carousel) {
  height: 100%;
  .el-carousel__item,
  .el-carousel__container {
    height: 100%;
    .carouselItemBox {
      display: grid;
      grid-template-columns: repeat(3, minmax(54.25vh, 1fr));
      grid-row-gap: 1.64vh;
    }
  }
}
.bgOdd {
  background-color: rgba(50, 35, 105, 0.38);
}
.bgEven {
  background-color: rgba(74, 78, 103, 0.15);
}
</style>
