<template>
  <a-card :bordered="false">
    <!-- <a-table :columns="columns" :data-source="data" bordered :pagination="false" :scroll="{ x: 1300, y: 500 }">
      <template slot="name" slot-scope="text">
        <a>{{ text }}</a>
      </template>
    </a-table> -->
    <a-radio-group @change="onTypeChange" :default-value="1" button-style="solid" style="margin-bottom:8px;">
      <a-radio-button :value="1">
        按楼层
      </a-radio-button>
      <a-radio-button :value="0">
        按房型
      </a-radio-button>
    </a-radio-group>
    <div class="wrapper-content">
      <div class="row-top">
        <div class="top-header">
          <div>
            <a-popover placement="bottom">
              <template slot="content">
                <a-calendar :fullscreen="false" v-model="mStartDate" @change="onPanelChange" />
              </template>
              <div class="wrapper-td date-selection" style="border-left:none;border-right: 1px solid #CDCDCDCC;">
                {{ startDate.format('yyyy-MM-dd') }}
              </div>
            </a-popover>

          </div>
          <div>
            <div class="wrapper-td date-selection" style="border-right:1px solid #CDCDCDCC; cursor:pointer;border-left: none;"
              @click="changeExpanded">
              {{ expandedStatus == 1 ? "收起" : "展开" }}
            </div>
          </div>
        </div>
        <div style="overflow-x: auto;overflow-y: scroll;" ref='externalForm' class="wrapper-item wrapper-header no-scorll"
          @scroll="sysHandleScroll">
          <div class="wrapper-item data-row">
            <div class="wrapper-td" :key="index" v-for="(item, index) in columns">
              {{ item.title }}
            </div>
          </div>
          <div class="wrapper-item data-row">
            <div class="wrapper-td" :key="index" v-for="(item, index) in columnsCount">
              剩{{ item.title }}间
            </div>
          </div>
        </div>
      </div>
      <div v-if="expandedStatus == 1" class="row-top no-scorll" style="display: flex; height:500px;overflow-y:hidden;">
        <div class="lefter row-top" ref="leftScrl" @scroll="leftScroll"
          style="flex-direction: column;width: fit-content;width: 210px; height:calc(500px - 9px);overflow-y:auto;overflow-x:hidden;">
          <div class="top-header" style="width: fit-content;" v-for="(item, index) in data" :key="index">
            <div class="left-wrapper">
              <div class="wrapper-td date-selection left-content" :style="{ height: `${100 * (item.rooms.length)}px`, borderLeft:'none' }">
                <div class="wrapper-td-flex">
                  {{ item.name }}
                </div>
              </div>
              <div style="display: flex; flex-direction: column;">
                <div class="wrapper-td date-selection left-content" :key="roomIndex"
                  style="border-right:1px solid #CDCDCDCC;height: 100px;" v-for="(room, roomIndex) in item.rooms">
                  <a-popover placement="right">
                    <template slot="content">
                      <div v-if="room.roomStatus == 6" style="text-align: left;">
                        <a-button @click="handleOffLock(room)" type="link" size="small" block>解锁</a-button>
                      </div>
                      <div v-else-if="room.roomStatus == 5" style="text-align: left;">
                        <a-button @click="handleCompleteRepair(room)" type="link" size="small" block>完成维修</a-button>
                      </div>
                      <div v-else-if="checkDirty(room.roomStatus)" style="text-align: left;">
                        <a-button @click="handleClean(room)" type="link" size="small" block>置干净</a-button>
                      </div>
                      <div v-else style="text-align: left;">
                        <a-button type="link" size="small" block @click="handleDirty(room)">置脏</a-button>
                        <a-button type="link" size="small" block @click="handleLock(room)">锁房</a-button>
                        <a-button type="link" size="small" block @click="handleWx(room)">置维修</a-button>
                      </div>
                    </template>
                    <div class="wrapper-td-flex" style="position: relative;">
                      <span>{{ room.name }}</span>
                      <span style="position: absolute;right: 0;top: 0;" v-if="room.roomStatus == 6">
                        <a-tag color="#000000" style="margin-right: 0 !important;">
                          锁
                        </a-tag>
                      </span>
                      <span style="position: absolute;right: 0;top: 0;" v-else-if="room.roomStatus == 5">
                        <a-tag color="#000000" style="margin-right: 0 !important;">
                          修
                        </a-tag>
                      </span>
                      <span style="position: absolute;right: 0;top: 0;" v-else-if="checkDirty(room.roomStatus)">
                        <a-tag color="#000000" style="margin-right: 0 !important;">
                          脏
                        </a-tag>
                      </span>
                    </div>
                  </a-popover>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="wrapper-header" style="flex: 1; overflow-x: auto;height: 100%;overflow-y: auto; cursor: pointer;"
          @scroll="exterHandleScroll" ref="systemForm">
          <div v-for="(sItem, sIndex) in data" :key="sIndex">
            <div v-for="(rItem, rIndex) in sItem.rooms" :key="rIndex" style="height:100px;">
              <div class="wrapper-item data-row">
                <div class="wrapper-td " :key="index" v-for="(item, index) in columns" style="height:100px;"
                  @mouseenter="onMouseenter($event, `${sIndex}_${rIndex}_${index}`)" @mouseleave="onMouseleave">
                  <div class="wrapper-td-flex align-left"
                    v-if="tax == `${sIndex}_${rIndex}_${index}` && !inDateRange(`${sIndex}_${rIndex}_${index}`)"
                    style="position: relative;z-index: 88; background-color: blanchedalmond;color: #1890FF;">
                    <span style="color: transparent;">a</span>
                    <div
                      style="width: 100%; display: flex; flex-direction: column;justify-content: center;align-items: start;">
                      <div style="flex: 1;width: 1px;"></div>
                      <span>{{ rItem.layoutName }}</span>
                      <div style="flex: 1;width: 1px;"></div>
                      <span>{{ rItem.name }}</span>
                      <div style="flex: 1;width: 1px;"></div>
                      <span>￥{{ rItem.marketPrice }}</span>
                      <div v-if="checkDateLt(item)" style="height:1px;width: 100%;background-color: #CDCDCDaa;"></div>
                      <span v-if="checkDateLt(item)" style="position: relative;left: -10px;">
                        <a-button type="link" size="small" @click="scheduleClick(rItem)">
                          预定
                        </a-button>
                        <a-button type="link" size="small" v-if="checkDateLt(item, 1)" @click="handleMenuClick(rItem)">
                          入住
                        </a-button>
                      </span>
                      <div style="flex: 1;width: 1px;"></div>
                    </div>
                  </div>
                  <a-popover v-else-if="inDateRange(`${sIndex}_${rIndex}_${index}`)" placement="right">
                    <template slot="content">
                      <div style="min-width: 350px;max-width: 600px;">
                        <div style="display: flex;">
                          <span>{{ inDateRange(`${sIndex}_${rIndex}_${index}`).data.customerName }}</span>
                          <div style="width: 4px;height: 1px;"></div>
                          <span>{{ inDateRange(`${sIndex}_${rIndex}_${index}`).data.customerPhone }}</span>
                          <div style="flex: 1;text-align: right;">
                            <a-tag color="#108ee9">
                              {{ inDateRange(`${sIndex}_${rIndex}_${index}`).data.settleType > -1 ? '离' :
                                (inDateRange(`${sIndex}_${rIndex}_${index}`).data.isLiving ? '住' : '预') }}
                            </a-tag>
                          </div>
                        </div>
                        <div style="display: flex;width: 100%;">
                          <span>{{ inDateRange(`${sIndex}_${rIndex}_${index}`).data.arrivalTime }}到店</span>
                          <div style="flex:1; height: 1px;"></div>
                          <span>{{ inDateRange(`${sIndex}_${rIndex}_${index}`).data.dueOutTime }}离店</span>
                          <div style="flex:1;height: 1px;"></div>
                          <span>{{ inDateRange(`${sIndex}_${rIndex}_${index}`).livingCount }}晚</span>
                        </div>
                        <div style="display: flex;width: 100%;">
                          <span>{{ getCusSource(inDateRange(`${sIndex}_${rIndex}_${index}`).data.customerSourceId)
                          }}</span>
                        </div>
                        <div style="display: flex;width: 100%;">
                          <span>预收：￥{{ inDateRange(`${sIndex}_${rIndex}_${index}`).data.yushou }}</span>
                          <div style="flex:1; height: 1px;"></div>
                          <span>押金：￥{{ inDateRange(`${sIndex}_${rIndex}_${index}`).data.yajin }}</span>
                        </div>
                        <div style="display: flex;width: 100%;">
                          <span>消费：￥{{ inDateRange(`${sIndex}_${rIndex}_${index}`).data.xiaofei }}</span>
                          <div style="flex:1; height: 1px;"></div>
                          <span>余额：￥{{ inDateRange(`${sIndex}_${rIndex}_${index}`).data.yuE }}</span>
                        </div>
                      </div>
                    </template>
                    <div class="wrapper-td-flex align-left"
                      style="color: aliceblue; height: 100%;font-size: smaller;position: relative;z-index: 99;border-radius: 3px; "
                      :style="{
                        width: `${(inDateRange(`${sIndex}_${rIndex}_${index}`).dayCount * 110) - 16}px`, backgroundColor: ((inDateRange(`${sIndex}_${rIndex}_${index}`).data.settleType < 1 ?
                          (inDateRange(`${sIndex}_${rIndex}_${index}`).data.isLiving ? 'red' : 'blue') : '#aaa'))
                      }" @click="handleBillInfo(inDateRange(`${sIndex}_${rIndex}_${index}`).data)">
                      <span style="color: transparent;">a</span>
                      <div
                        style="display: flex; flex-direction: column;justify-content: start;align-items: start;height: 100%;">
                        <div style="flex: 1;width: 1px;"></div>
                        <span style="word-wrap: break-word; font-weight: 600;">{{
                          inDateRange(`${sIndex}_${rIndex}_${index}`).data.customerName }}</span>
                        <div style="flex: 1;width: 1px;"></div>
                        <span style=" font-weight: 600;">{{
                          getCusSource(inDateRange(`${sIndex}_${rIndex}_${index}`).data.customerSourceId) }}</span>
                        <div style="flex: 1;width: 1px;"></div>
                        <span>
                          <a-tag color="#000000" v-if="inDateRange(`${sIndex}_${rIndex}_${index}`).data.yuE < 0">
                            欠
                          </a-tag>
                        </span>
                        <div style="flex: 1;width: 1px;"></div>
                        <!-- <span style=" font-weight: 600;">{{ `${sIndex}_${rIndex}_${index}` }}</span> -->
                      </div>

                    </div>
                  </a-popover>

                  <div class="wrapper-td-flex temp" v-else>

                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>


      </div>
      <div v-if="expandedStatus == 0" class="row-top no-scorll" style="display: flex; height:500px;overflow-y:hidden;">
        <div class="lefter row-top" ref="leftScrl" @scroll="leftScroll"
          style="flex-direction: column;width: fit-content;width: 210px; height:calc(500px - 9px);overflow-y:auto;overflow-x:hidden;">
          <div class="top-header" style="width: fit-content;" v-for="(item, index) in data" :key="index">
            <div class="left-wrapper">
              <div class="wrapper-td date-selection left-content"
                :style="{ height: `${100 * (item.roomsCount.length)}px` }">
                <div class="wrapper-td-flex">
                  {{ item.name }}
                </div>
              </div>
              <div style="display: flex; flex-direction: column;">
                <div class="wrapper-td date-selection left-content" :key="roomIndex"
                  style="border-right:1px solid #CDCDCDCC;height: 100px;" v-for="(room, roomIndex) in item.roomsCount">
                  <div class="wrapper-td-flex" style="position: relative;">
                    <span>剩余</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="wrapper-header" style="flex: 1; overflow-x: auto;height: 100%;overflow-y: auto;"
          @scroll="exterHandleScroll" ref="systemForm">
          <div v-for="(sItem, sIndex) in data" :key="sIndex">
            <div v-for="(rItem, rIndex) in sItem.roomsCount" :key="rIndex" style="height:100px;">
              <div class="wrapper-item">
                <div class="wrapper-td " :key="index" v-for="(item, index) in columns" style="height:100px;">
                  <div class="wrapper-td-flex">
                    剩{{ getGroupCount(rItem.typeId, item.date) }}间
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <clean-room-modal ref="ModalCleanRoom" @ok="modalLockRoomFormOk"></clean-room-modal>
    <lock-room-modal ref="ModalLockRoom" @ok="modalLockRoomFormOk"></lock-room-modal>
    <upkeep-room-modal ref="modalForm" @ok="modalLockRoomFormOk"></upkeep-room-modal>
    <schedule-room-modal ref="ModalScheduleRoom" @ok="modalFormOk"></schedule-room-modal>
    <bill-room-form-modal ref="ModalBillRoomForm" @ok="modalBillRoomFormOk" @close="onPanelChange"></bill-room-form-modal>
    <BillRoomInfoModal ref="ModalBillRoomInfo" @close="onPanelChange"/>
  </a-card>
</template>

<script>
import { httpAction, getAction, postAction } from "@/api/manage";
import UpkeepRoomModal from "./modules/upkeep/UpkeepRoomModal.vue";
import BillRoomInfoModal from "./modules/checkIn/BillRoomInfoModal.vue";
import BillRoomFormModal from "./modules/checkIn/BillRoomFormModal.vue";
import ScheduleRoomModal from "./modules/schedule/ScheduleRoomModal.vue";
import LockRoomModal from "./modules/lock/LockRoomModal.vue";
import CleanRoomModal from "./modules/clean/CleanRoomModal.vue";
import moment from 'moment'

export default {
  components: {
    CleanRoomModal,
    LockRoomModal,
    UpkeepRoomModal,
    ScheduleRoomModal,
    BillRoomFormModal,
    BillRoomInfoModal
  },
  data() {

    return {
      flag: false,
      data: [],
      columns: [],
      columnsCount: [],
      tax: null,
      mStartDate: moment(new Date()),
      startDate: new Date(),
      endDate: null,
      roomStatuList: [],
      tempOrderIds: [],
      times: 0,
      customerSourceList: [],
      roomCount: 0,
      expandedStatus: 1,
      groupType: 1,
      groupCountArr: [],
      res: null
    }
  },
  mounted() {
    this.initColumns()
    setTimeout(() => {
      this.getData()
    }, 200)
  },
  methods: {
    handleWx(roomInfo) {
      var selectRoom = [{ roomId: roomInfo.id, roomNo: roomInfo.name }];
      this.$refs.modalForm.add({ roomRepairList: selectRoom });
      this.$refs.modalForm.title = "维修";
      this.$refs.modalForm.disableSubmit = false;
    },
    handleLock(roomInfo) {
      var selectRoom = [{ roomId: roomInfo.id, roomNo: roomInfo.name }];
      this.$refs.ModalLockRoom.add({ roomLockList: selectRoom });
      this.$refs.ModalLockRoom.title = "锁房";
      this.$refs.ModalLockRoom.disableSubmit = false;
    },
    handleClean(roomInfo) {
      var selectRoom = [{ roomId: roomInfo.id, roomNo: roomInfo.name }];
      this.$refs.ModalCleanRoom.add({ roomCleanList: selectRoom });
      this.$refs.ModalCleanRoom.title = "清理房间";
      this.$refs.ModalCleanRoom.disableSubmit = false;
    },
    scheduleClick(roomInfo) {
      var selectRoom = [roomInfo];
      this.$refs.ModalScheduleRoom.addList(selectRoom, "1");
      this.$refs.ModalScheduleRoom.title = "散客预定登记";
      this.$refs.ModalScheduleRoom.disableSubmit = false;
    },
    handleMenuClick(roomInfo) {
      var selectRoom = [roomInfo];
      this.$refs.ModalBillRoomForm.addList(selectRoom, "1");
      this.$refs.ModalBillRoomForm.title = "散客入住登记";
      this.$refs.ModalBillRoomForm.disableSubmit = false;
    },
    handleBillInfo(info) {
      if (info.isLiving != 1) {
        this.$router.push({
          name: "room-scheduledetail",
          params: {
            id: info.orderNo
          },
        });
        return
      }
      this.$refs.ModalBillRoomInfo.add(
        info.bookingOrderId,
        1
      );
      this.$refs.ModalBillRoomInfo.title = "账单";
      this.$refs.ModalBillRoomInfo.disableSubmit = true;
    },
    handleCompleteRepair(roomInfo) {
      var ids = roomInfo.id;
      postAction("/fw/fwRoomRepair/completeRepairRoom?roomIds=" + ids, {}).then(
        (res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.onPanelChange();
          }
        }
      );
    },

    handleDirty(roomInfo) {
      var ids = roomInfo.id;
      postAction("/rooms/cesRooms/dirtyRoom?roomIds=" + ids, {}).then((res) => {
        if (res.success) {
          this.$message.success(res.message);
          this.onPanelChange();
        }
      });
    },
    handleOffLock(roomInfo) {
      var ids = roomInfo.id;
      postAction("/fw/fwRoomLock/offLockRoom?roomIds=" + ids, {}).then(
        (res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.onPanelChange();
          }
        }
      );
    },
    modalFormOk(e) {
      this.onPanelChange();
      this.$router.push({
        name: "room-scheduledetail",
        params: { id: e },
      });
    },
    modalBillRoomFormOk(e) {
      this.onPanelChange();
      console.log("e", e);
      this.$refs.ModalBillRoomInfo.add(e);
      this.$refs.ModalBillRoomInfo.title = "账单";
      this.$refs.ModalBillRoomInfo.disableSubmit = true;
    },
    onTypeChange(e) {
      console.log(e);
      this.groupType = e.target.value
      this.data = this.groupType == 1 ? this.res.result.floorRoomVos : this.res.result.layoutRoomVos
      this.loadDataSource()
    },
    onPanelChange() {
      console.log(this.mStartDate);
      this.startDate = new Date(this.mStartDate.format('YYYY-MM-DD'))
      this.initColumns()
      setTimeout(() => {
        this.getData()
      }, 200)
    },
    mapRoomStatus(status) {
      switch (status) {
        case 1: return "空净"
      }
    },
    getGroupCount(typeId, date) {
      let findIndex = this.groupCountArr.findIndex(s => s.typeId == typeId && s.date == date)
      if (findIndex > -1) {
        let item = this.groupCountArr[findIndex]
        return item.total - item.goCount
      }
      return 0
    },
    changeExpanded() {
      this.expandedStatus = this.expandedStatus == 1 ? 0 : 1;
    },
    checkDirty(status) {
      return status == 2 || status == 4
    },
    inDateRange(key) {
      let findKey = this.tempOrderIds.findIndex(s => s.key == key)
      return findKey > -1 ? this.tempOrderIds[findKey] : null
    },
    checkDateLt(item, type) {
      if (type == 1) return item.date == new Date().format('yyyy-MM-dd')
      return item.date >= new Date().format('yyyy-MM-dd')
    },
    getCusSource(id) {
      let index = this.customerSourceList.findIndex(s => s.id == id)
      if (index > -1) return this.customerSourceList[index].itemText
      return ''
    },
    onMouseenter(e, flag) {
      this.tax = flag
    },
    onMouseleave() {
      this.tax = null
    },
    exterHandleScroll() {
      this.$refs.externalForm.scrollLeft = this.$refs.systemForm.scrollLeft
      this.$refs.leftScrl.scrollTop = this.$refs.systemForm.scrollTop
    },
    changeFlag(flag) {
      this.flag = flag
    },
    leftScroll() {
      this.$refs.systemForm.scrollTop = this.$refs.leftScrl.scrollTop
    },
    sysHandleScroll() {
      this.$refs.systemForm.scrollLeft = this.$refs.externalForm.scrollLeft
    },
    getOrderSource() {
      return new Promise((rs, rj) => {
        var _info = JSON.parse(localStorage.getItem("storeInfo"));
        getAction("/business/busDictItem/list", {
          hotelId: _info.id,
          dictId: "1639538915239743490",
        }).then((res) => {
          if (res.success) {
            this.customerSourceList = res.result.records;
          }
          rs(true)
        }).catch(() => {
          rs(false)
        });
      })
    },
    async getData() {
      await this.getOrderSource()
      let end = new Date(this.startDate.format('yyyy-MM-dd'))
      for (let i = 0; i < 30; i++) {
        end = end.setDate(end.getDate() + 1);
        end = new Date(end);

      }
      this.endDate = end
      getAction("/business/busRoomBookingOrders/rili-fangtai", {
        start: this.startDate.format("yyyy-MM-dd"),
        end: end.format('yyyy-MM-dd')
      }).then(res => {
        console.log('rilifangtai', res);
        this.res = res
        this.data = this.groupType == 1 ? res.result.floorRoomVos : res.result.layoutRoomVos
        this.roomStatuList = res.result.riLiFangTaiVoList
        this.loadDataSource()

      })
    },
    modalLockRoomFormOk() {
      this.onPanelChange()
    },
    loadDataSource() {
      this.tempOrderIds = []
      let roomCountObjs = []
      this.roomCount = 0
      this.data.forEach((s, index) => {
        this.roomCount += s.rooms.length

        let ctArr = []
        s['roomsCount'] = [{
          id: `${index}_${s.date}`,
          name: 'aaa',
          typeId: s.id
        }]
        s.rooms.forEach((t, rIndex) => {

          this.columns.forEach((d, dIndex) => {
            let fdIndex = roomCountObjs.findIndex(c => c.typeId == s.id && c.date == d.date)
            if (fdIndex == -1) {
              roomCountObjs.push({
                typeId: s.id,
                date: d.date,
                goCount: 0,
                total: s.rooms.length
              })
            }
            let findOrderIndex = this.roomStatuList.findIndex(w => w.roomId == t.id && d.date >= new Date(w.arrivalTime).format('yyyy-MM-dd') && d.date < new Date(w.dueOutTime).format('yyyy-MM-dd'))
            if (findOrderIndex > -1) {
              let fdIndex1 = roomCountObjs.findIndex(c => c.typeId == s.id && c.date == d.date)
              roomCountObjs[fdIndex1].goCount++;
              let tpOrder = JSON.parse(JSON.stringify(this.roomStatuList[findOrderIndex]))
              let findExistOrderIndex = this.tempOrderIds.findIndex(w => w.orderId == tpOrder.orderId)
              if (findExistOrderIndex == -1) {
                let dayCount = this.getDiffDay(new Date(tpOrder.arrivalTime).format('yyyy-MM-dd'), new Date(tpOrder.dueOutTime).format('yyyy-MM-dd'))
                let livingCount = dayCount
                if (new Date(tpOrder.arrivalTime).format('yyyy-MM-dd') < this.startDate.format('yyyy-MM-dd') && new Date(tpOrder.dueOutTime).format('yyyy-MM-dd') > this.startDate.format('yyyy-MM-dd')) {
                  let dayCountSub = Math.abs(this.getDiffDay(new Date(tpOrder.arrivalTime).format('yyyy-MM-dd'), this.startDate.format('yyyy-MM-dd')))
                  if (dayCountSub > 0) dayCount = dayCount - dayCountSub
                } else if (new Date(tpOrder.arrivalTime).format('yyyy-MM-dd') < this.endDate.format('yyyy-MM-dd') && new Date(tpOrder.dueOutTime).format('yyyy-MM-dd') > this.endDate.format('yyyy-MM-dd')) {
                  let dayCountSub = Math.abs(this.getDiffDay(new Date(tpOrder.arrivalTime).format('yyyy-MM-dd'), this.endDate.format('yyyy-MM-dd')))
                  if (dayCountSub > 0) dayCount = dayCount - dayCountSub

                }

                if ((30 - dIndex) < dayCount) dayCount = (30 - dIndex);

                if (dayCount > 30) dayCount = 30
                this.tempOrderIds.push({
                  key: `${index}_${rIndex}_${dIndex}`,
                  orderId: tpOrder.orderId,
                  data: tpOrder,
                  dayCount,
                  livingCount: livingCount
                })
              }
            }
          })
        })
      })
      this.countRooms()
      this.groupCountArr = roomCountObjs
    },
    getDiffDay(date_1, date_2) {
      // 计算两个日期之间的差值
      let totalDays, diffDate
      let myDate_1 = Date.parse(date_1)
      let myDate_2 = Date.parse(date_2)
      // 将两个日期都转换为毫秒格式，然后做差
      diffDate = Math.abs(myDate_1 - myDate_2) // 取相差毫秒数的绝对值

      totalDays = Math.ceil(diffDate / (1000 * 3600 * 24)) // 向下取整
      // console.log(totalDays)    
      if (totalDays == 0) totalDays = 1
      return totalDays    // 相差的天数
    },
    calDataRows(items, matches) {
      let roomRows = []
      let rowCount = 0
      let rowSpans = []
      items.forEach((item, itemIndex) => {
        rowCount += (item.rooms.length)
        let startRowIndex = rowCount
        rowSpans.push({
          index: startRowIndex,
          span: item.rooms.length
        })
        item.rooms.forEach(room => {
          let roomObj = {
            col_1: item.name,
            col_2: `${room.prefix || ''}${room.name}`
          }
          for (let i = 1; i < 31; i++) {
            roomObj[`col_${(i + 2)}`] = room
          }
          roomObj['key'] = room.id
          roomRows.push(roomObj)
        })
      })
      this.data = [{
        col_1: '折叠'
      }, ...roomRows]
      this.columns[0]['customRender'] = function (value, row, index) {
        const obj = {
          children: value,
          attrs: {},
        };

        if (index > 0) {
          let sIndex = rowSpans.filter(s => (s.index - s.span + 1) == index)
          console.log(sIndex,);
          if (sIndex.length > 0) {
            let it = sIndex[0]
            obj.attrs.rowSpan = it.span
          } else {
            obj.attrs.rowSpan = 0
          }
        }

        if (index == 0) {
          obj.attrs.colSpan = 2
        }

        return obj;
      }

    },
    countRooms() {
      let countObjs = []
      this.columnsCount = []
      this.columns.forEach(s => {
        let dayCountTitle = this.roomCount
        this.roomStatuList.forEach(r => {
          if (s.date >= new Date(r.arrivalTime).format('yyyy-MM-dd') && s.date < new Date(r.dueOutTime).format('yyyy-MM-dd')) {
            dayCountTitle -= 1;
          }
        })
        countObjs.push({
          title: dayCountTitle
        })
      })

      this.columnsCount = countObjs
    },
    initColumns() {
      let cols = [];
      let dateTime = new Date(this.startDate.format('yyyy-MM-dd'));
      for (let i = 0; i < 30; i++) {
        dateTime = dateTime.setDate(dateTime.getDate() + (i == 0 ? 0 : 1));
        dateTime = new Date(dateTime);
        let title = dateTime.format('MM-dd')
        if (title == new Date().format('MM-dd')) title = '今天'
        cols.push({
          title: title,
          date: dateTime.format('yyyy-MM-dd'),
          dataIndex: `col_${(i + 1)}`,
          width: 100
        })
      }
      this.columns = cols
    }
  }
}
</script>

<style >
.wrapper-item {
  white-space: nowrap;
}

.wrapper-td {
  padding: 6px 8px;
  text-align: center;
  display: inline-block;
  width: 110px !important;
  border-left: 1px solid #CDCDCDCC;
  border-bottom: 1px solid #CDCDCDCC;
}

.date-selection {
  width: 210px !important;
}

.row-top {
  display: flex;
}

.wrapper-content {
  border: 1px solid #CDCDCDCC;
}

.wrapper-header {
  width: 100%;
  overflow-x: auto !important;
}

.no-scorll::-webkit-scrollbar {
  /* display: none; */
  height: 0;
}

.left-wrapper {
  display: flex;
}

.left-content {
  width: 105px !important;
}

.lefter::-webkit-scrollbar {
  width: 0px;
  height: 1px;
  display: inline;
}

.wrapper-td-flex {
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-overflow: ellipsis;
  overflow: hidden;
}

.temp::after {
  content: "1";
  color: white;

}

.align-left {
  align-items: center;
  justify-content: start !important;
}
.data-row>:first-child{
  border-left: none !important;
}
</style>