<template>
  <div class="bgBox">
    <div class="bgTitleBox">
      <img src="@/assets/svg/Schedule/Triangle.svg" />
      <span class="panmen">白班</span>
      <p class="panmen">手术间: {{ roomCount }}</p>
      <p class="panmen">护理人员: {{ nurseCount }}</p>
    </div>
    <section>
      <el-carousel direction="vertical" :autoplay="false" :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="itemBox" :class="`rowBg${Math.ceil((index + 1) % 9 / 3)}`" :key="index">
                <div class="panmen">
                  {{ subItem['roomName'] }}
                </div>
                <p>{{ subItem['nurseNames'] }}</p>
              </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.$store.getters.isMock) {
          this.roomCount = res['data']['roomCount'];
          this.nurseCount = res['data']['nurseCount'];
          this.schedulingList = [];
          res['data']['nurseScheduleDetails'].forEach((item, index) => {
            if (this.schedulingList[Math.floor(index / 45)]) {
              this.schedulingList[Math.floor(index / 45)].push(item);
            } else {
              this.schedulingList[Math.floor(index / 45)] = [item];
            }
          });
        } else {
          if (this.$store.getters.isMock) {
            this.schedulingList = [];
            for (let index = 0; index < 100; index++) {
              if (this.schedulingList[Math.floor(index / 45)]) {
                this.schedulingList[Math.floor(index / 45)].push({
                  roomName: String(index + 1).padStart(3, '0'),
                  nurseNames: '陈宇、孙晨、邓一帆',
                });
              } else {
                this.schedulingList[Math.floor(index / 45)] = [
                  {
                    roomName: String(index + 1).padStart(3, '0'),
                    nurseNames: '陈宇、孙晨、邓一帆',
                  },
                ];
              }
            }
          }
        }
        this.isLoading = false;
      });
    },
  },
  mounted() {
    this.onGetPageData();
    this.redenTimer = setInterval(() => {
      this.onGetPageData();
    }, this.$store.getters.intervalTime);
  },
  components: {
    'el-carousel': Carousel,
    'el-carousel-item': CarouselItem,
  },
  beforeRouteLeave() {
    clearInterval(this.renderTimer);
  },
};
</script>

<style lang="scss" scoped>
@import './index.scss'
</style>
