
<template>
  <a-card :bordered="false" style="height: 100vh">
    <span style="font-size: 20px;padding: 0px 0px;line-height: 0;margin-left: 725px;font-weight: bold">设备运行日历</span>
    <a-calendar @panelChange="onPanelChange" >
      <ul slot="dateCellRender" slot-scope="value" class="events" style="background-color:#e0f0ff;">
        <li v-for="item in getListData(value)" :key="item">
          <a-badge status="success" :text="item" />
        </li>
      </ul>
    </a-calendar>
  </a-card>
</template>

<script>export default {
  name: "BuCalendar",
  data() {
    return {
      description: 'BuCalendar',
      url: {
        calendarData: "/sensor/buSensorDeviceData/getCalendarData",
      },
      data: [],
      isMonth: ''
    }
  },
  created() {
    this.beginDate()
  },
  methods: {

    beginDate() {
      const currentDate = new Date();
      var year = currentDate.getFullYear();
      var month = currentDate.getMonth() + 1
      this.selectDate(year, month);
    },
    onPanelChange(value, mode) {
      var year = value.format('YYYY-MM').split('-')[0]
      var month = value.format('YYYY-MM').split('-')[1]
      this.selectDate(year, month)
    },
    selectDate(year, month) {
      this.isMonth = month;
      this.$http.get(this.url.calendarData, { params: { year: year, month: month } })
        .then(res => {
          if (res.success) {
            // 解析返回的 JSON 字符串
            try {
              this.data = JSON.parse(res.result);
            } catch (e) {
              console.error("Failed to parse calendar data:", e);
              this.data = [];
            }
          } else {
            this.data = []
          }
        })
    },
    getListData(value) {
      var dd = value.format('MM-DD')
      let listData = [];
      for (let i = 0; i < this.data.length; i++) {
        const item = this.data[i];
        if (item.monthDay === dd) {
          listData = item.deviceNameList;
          return listData || [];
        }
      }
      return listData;
    },

  }
};
</script>

<style>.ant-fullcalendar-fullscreen .ant-fullcalendar-header .ant-radio-group {
  display: none !important;
}

.events {
  list-style: none;
  padding: 0;
}

.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 16px;
}

.a-calendar .day:hover {
  cursor: none;
}

.ant-fullcalendar-fullscreen .ant-fullcalendar-value {
  font-family: '新字体', Arial, sans-serif;
  font-size: 16px;
}

.ant-fullcalendar-column-header .ant-fullcalendar-column-header-inner {
  font-family: '新字体', Arial, sans-serif;
  font-weight: bold;
  font-size: 16px;
}
</style>