<template>
  <div class="bgRightMidBox">
    <section>
      <header>
        <div>
          <div class="col1">手术间</div>
          <div class="col2">人员</div>
          <div class="col3">手术名称</div>
          <div class="col4">申请类型</div>
          <div class="col5">入手术室时间</div>
          <div class="col6">麻醉开始时间</div>
          <div class="col7">手术开始时间</div>
          <div class="col8">是否准点</div>
        </div>
      </header>
      <main>
        <el-carousel direction="vertical" :autoplay="true" :interval="15000" indicatorPosition="none">
          <el-carousel-item v-for="(item, index) in scheduList" :key="index">
            <template v-for="(subItem, index) in item">
              <div class="rowBox" :key="index">
                <div>
                  <div class="col1 panmen">
                    {{ subItem['roomName'] }}
                  </div>
                  <div class="col2">
                    {{ subItem['patientName'] }}
                  </div>
                  <div class="col3">
                    <marquee scrollamount="2">{{ subItem['operationName'] }}</marquee>
                  </div>
                  <div class="col4">
                    <img class="mx-auto" src="@/assets/svg/Operation/RightMid/Emergency.svg"
                      v-if="subItem['OperationType']" />
                    <img class="mx-auto" src="@/assets/svg/Operation/RightMid/Other.svg" v-else />
                  </div>
                  <div class="col5">
                    {{ formatData(subItem['inDateTime']) }}
                  </div>
                  <div class="col6">
                    {{ formatData(subItem['anesStartTime']) }}
                  </div>
                  <div class="col7">
                    {{ formatData(subItem['operStartTime']) }}
                  </div>
                  <div class="col8" :class="subItem['IsFirstOnTime'] ? '!text-[#2BB699]' : '!text-[#ED7783]'">
                    {{ subItem['IsFirstOnTime'] ? '准点' : '不准点' }}
                  </div>
                </div>
              </div>
            </template>
          </el-carousel-item>
        </el-carousel>
      </main>
    </section>
  </div>
</template>

<script>
import { Carousel, CarouselItem } from 'element-ui';
import { GetMonitorOperationCount } from '@/api/operation';
import dayjs from 'dayjs';
export default {
  data() {
    return {
      scheduList: [],
      isLoading: true,
    };
  },
  methods: {
    onGetPageData() {
      let nowDay = dayjs().format('YYYY-MM-DD');
      if (this.$store.getters.isMock) {
        nowDay = '2024-06-06';
      }
      GetMonitorOperationCount(nowDay).then(res => {
        this.scheduList = [];
        let group = 0;
        for (let i = 0; i < res['data']['length']; i++) {
          group = parseInt(i / 14);
          if (this.scheduList[group]) {
            this.scheduList[group].push(res['data'][i]);
          } else {
            this.scheduList[group] = [res['data'][i]];
          }
        }
        this.isLoading = false;
      });
    },
    formatData(date) {
      let txt = '';
      if (date) {
        txt = dayjs(date).format('YYYY-MM-DD HH:mm:ss');
      }
      return txt;
    },
  },
  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>
