<template>
  <div class="box">
    <el-carousel direction="vertical" :autoplay="true" :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="subItem['className']" :key="index">
              <p class="panmen">
                {{ subItem['roomName'] }}
              </p>
              <div class="line"></div>
              <div>
                <img :src="subItem['iconUrl']" />
                <span>{{ subItem['operStatusName'] }}</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: [],
    };
  },
  methods: {
    onGetPageData() {
      let nowDay = dayjs().format('YYYY-MM-DD');
      if (this.$store.getters.isMock) {
        nowDay = '2025-08-11';
      }

      GetMonitorOperationRoomStatus(nowDay).then(res => {
        this.formatData(res['data']);
      });
    },
    formatData(pageData) {
      this.opList = [];
      let group = 0;
      for (let i = 0; i < pageData['length']; i++) {
        if (i % 6 == 0) {
          pageData[i]['procStatus'] = 10;
          pageData[i]['operStatusName'] = `入手术间`;
        }
        if (i % 6 == 1) {
          pageData[i]['procStatus'] = 15;
          pageData[i]['operStatusName'] = `麻醉开始`;
        }
        if (i % 6 == 2) {
          pageData[i]['procStatus'] = 20;
          pageData[i]['operStatusName'] = `手术开始`;
        }
        if (i % 6 == 3) {
          pageData[i]['procStatus'] = 25;
          pageData[i]['operStatusName'] = `手术结束`;
        }
        if (i % 6 == 4) {
          pageData[i]['procStatus'] = 30;
          pageData[i]['operStatusName'] = `麻醉结束`;
        }
        if (i % 6 == 5) {
          pageData[i]['procStatus'] = 35;
          pageData[i]['operStatusName'] = `空置中`;
        }
        if (pageData[i]['procStatus'] == 10) {
          pageData[i]['className'] = `opEnter`
          pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/OpRooms.svg`)
        } else if (pageData[i]['procStatus'] == 15) {
          pageData[i]['className'] = `anesStart`
          pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/AnesStarts.svg`)
        } else if (pageData[i]['procStatus'] == 20) {
          pageData[i]['className'] = `opStart`
          pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/OpingIcons.svg`)
        } else if (pageData[i]['procStatus'] == 25) {
          pageData[i]['className'] = `opEnd`
          pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/OpEnds.svg`)
        } else if (pageData[i]['procStatus'] == 30) {
          pageData[i]['className'] = `anesEnd`
          pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/OpendIcons.svg`)
        } else {
          pageData[i]['className'] = `empty`
          pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/OpWaitIcons.svg`)
        }
        group = parseInt(i / 18);
        if (this.opList[group]) {
          this.opList[group].push(pageData[i]);
        } else {
          this.opList[group] = [pageData[i]];
        }
      }
    },
  },
  mounted() {
    this.onGetPageData();
    // setInterval(() => {
    //   this.onGetPageData();
    // }, this.$store.getters.intervalTime);
  },
  components: {
    'el-carousel': Carousel,
    'el-carousel-item': CarouselItem,
  },
};
</script>

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