<template>
  <page-layout title="概览">
    <a-card>
      <date-picker-bar @change="handleDateChange" :default-date="getDefaultDate()"></date-picker-bar>
      <a-spin :spinning="status.loading">
        <a-row class="room-status-wrapper" :gutter="20">
          <a-col
            class="room-status"
            :xs="{ span: 24 }"
            :sm="{ span: 12 }"
            :xl="{ span: 8 }"
            v-for="item in roomBookingStatusList"
            :key="item.id"
            @click="$router.push({name: 'dashboardDetail', params: {id: item.id, date: params.date}})">
            <a-card class="room-status-card">
              <span class="name">{{item.name}}</span>
              <span class="booked-count">{{item.booking_count}}</span>
              <span> 条,</span>
              <span> {{((1 - item.booked_count/item.count)*100).toFixed(2)}} % 剩余</span>
            </a-card>
          </a-col>
        </a-row>
      </a-spin>
      <a-row>
        <span>共 {{bookingCountTotal}} 条, {{((1 - bookedCountTotal/countTotal)*100).toFixed(2)}} % 剩余</span>
        <a-tooltip placement="top" title="每分钟自动">
          <div style="float: right;">
            <span style="vertical-align: -2px;">更新时间: {{updateTime}} 自动更新 </span>
            <a-switch checkedChildren="开" unCheckedChildren="关" defaultChecked @change="handleAutoChange"></a-switch>
          </div>
        </a-tooltip>
      </a-row>
    </a-card>
  </page-layout>
</template>

<script>
  import PageLayout from '../../components/page/PageLayout'
  import moment from 'moment'
  import api from '../../api/dashboard'
  import DatePickerBar from './components/DatePickerBar'

  export default {
    name: 'Dashboard',
    components: {
      PageLayout,
      DatePickerBar
    },
    data () {
      return {
        params: {
          date: new moment().format('YYYY-MM-DD')
        },
        status: {
          loading: false
        },
        updateTime: '',
        roomBookingStatusList: [],
        countTotal: 0,
        bookedCountTotal: 0,
        bookingCountTotal: 0,
        intervalID: null
      }
    },
    mounted () {
      this.getData()
      this.handleAutoChange(true)
    },
    destroyed () {
      this.handleAutoChange(false)
    },
    methods: {
      getData () {
        this.status.loading = true
        api.getRoomBookingStatus(this.params)
          .then(data => {
            this.roomBookingStatusList = data.results
            this.countTotal = data.count_total
            this.bookedCountTotal = data.booked_count_total
            this.bookingCountTotal = data.booking_count_total
            this.updateTime = new moment().format('YYYY-MM-DD hh:mm:ss')
            this.status.loading = false
          })
      },
      handleDateChange (date) {
        this.params.date = date.format('YYYY-MM-DD')
        this.getData()
      },
      handleAutoChange (checked) {
        if (checked) {
          this.intervalID = setInterval(this.getData, 1000 * 60)
        } else {
          clearInterval(this.intervalID)
        }
      },
      getDefaultDate () {
        return new moment()
      }
    },
  }
</script>

<style scoped lang="less">
  @import '../../../public/color';

  .room-status-wrapper {
    padding: 12px 0;

    .room-status {
      margin: 10px 0;

      .room-status-card {
        text-align: center;

        .name {
          display: block;
          font-size: 20px;
        }

        .booked-count {
          font-size: 50px;
        }

        &:hover {
          box-shadow: 0 0 4px @primary-color;
        }
      }
    }
  }
</style>
