<template>
  <a-spin :spinning="loading">
    <div class="energy-overView">
      <commonSearch hasAreaSearch ref="commonSearch" type="nodate" @search="handleSearch"></commonSearch>
      <a-calendar style="background: #fff;">
        <ul slot="dateCellRender" slot-scope="value" class="events">
          <li v-for="item in getListData(value)" :key="item.content">
            <a-badge :status="item.type" :text="item.content" />
          </li>
        </ul>
        <template slot="monthCellRender" slot-scope="value">
          <div v-if="getMonthData(value)" class="notes-month">
            <section>{{ getMonthData(value) }}</section>
            <span>Backlog number</span>
          </div>
        </template>
      </a-calendar>
    </div>
  </a-spin>
</template>
<script>
import * as echarts from 'echarts'
import commonSearch from '../components/commonSearch'
import { httpAction, getAction } from '@/api/manage'
export default {
  name: '',
  components: {
    commonSearch,
  },
  data () {
    return {
      description: '能效日历',
      loading: false,
    }
  },
  created () {
  },
  mounted () {
    this.$nextTick(() => {
      // this.getEnergyoverview()
    })
  },
  methods: {
    getListData(value) {
      let listData;
      switch (value.date()) {
        case 8:
          listData = [
            { type: 'warning', content: 'E: 6.81' },
            { type: 'success', content: 'C: 45826.9' },
            { type: 'error', content: 'P: 2563.9' },
          ];
          break;
        case 10:
          listData = [
          { type: 'warning', content: 'E: 6.81' },
            { type: 'success', content: 'C: 45826.9' },
            { type: 'error', content: 'P: 2563.9' },
          ];
          break;
        case 15:
          listData = [
          { type: 'warning', content: 'E: 6.81' },
            { type: 'success', content: 'C: 45826.9' },
            { type: 'error', content: 'P: 2563.9' },
          ];
          break;
        case 18:
          listData = [
          { type: 'warning', content: 'E: 6.81' },
            { type: 'success', content: 'C: 45826.9' },
            { type: 'error', content: 'P: 2563.9' },
          ];
          break;
        default:
      }
      return listData || [];
    },

    getMonthData(value) {
      if (value.month() === 8) {
        return 1394;
      }
    },
  },
};
</script>
<style scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
</style>
