<template>
  <page-layout title="预约">
    <a-card>
      <a-row>
        <a-input-group class="tool">
          <a-row :gutter="6">
            <a-col
              class="item"
              v-bind="layout1">
              <a-range-picker
                style="width: 100%;"
                :defaultValue="getDateRangeDefaultValue()"
                :value="state.dateRange"
                @change="hangdleDateRangeChange">
              </a-range-picker>
            </a-col>
            <a-col
              class="item"
              v-bind="layout1">
              <a-time-picker
                style="width: 100%;"
                placeholder="选择开始时间"
                :minuteStep="30"
                :secondStep="60"
                :disabledHours="getDisabledHours"
                :disabledMinutes="getDisabledMinutes"
                :hideDisabledOptions="true"
                :inputReadOnly="true"
                v-model="state.startTime"
                @change="handleStartTimeChange">
              </a-time-picker>
            </a-col>
            <a-col
              class="item"
              v-bind="layout1">
              <a-time-picker
                style="width: 100%;"
                placeholder="选择结束时间"
                :minuteStep="30"
                :secondStep="60"
                :disabledHours="getDisabledHours"
                :disabledMinutes="getDisabledMinutes"
                :hideDisabledOptions="true"
                :inputReadOnly="true"
                v-model="state.endTime"
                @change="handleEndTimeChange">
              </a-time-picker>
            </a-col>
          </a-row>
          <a-row :gutter="6">
            <a-col
              class="item"
              v-bind="layout1">
              <a-select
                v-model="params.room"
                style="width: 100%;"
                @change="getData">
                <a-select-option value="">房间筛选</a-select-option>
                <a-select-option :value="item.id" v-for="item in roomList">{{item.name}}</a-select-option>
              </a-select>
            </a-col>
            <a-col
              class="item"
              v-bind="layout1">
              <a-select
                v-model="params.status"
                style="width: 100%;"
                @change="getData">
                <a-select-option value="">状态筛选</a-select-option>
                <a-select-option :value="item.id" v-for="item in statusList">{{item.name}}</a-select-option>
              </a-select>
            </a-col>
            <a-col
              class="item"
              v-bind="layout1">
              <a-select
                v-model="params.ordering"
                style="width: 100%;"
                @change="getData">
                <a-select-option value="">排序</a-select-option>
                <a-select-option value="id">ID正排序</a-select-option>
                <a-select-option value="-id">ID倒排序</a-select-option>
                <a-select-option value="date">日期正排序</a-select-option>
                <a-select-option value="-date">日期倒排序</a-select-option>
                <a-select-option value="start_time">开始时间正排序</a-select-option>
                <a-select-option value="-start_time">开始时间倒排序</a-select-option>
                <a-select-option value="end_time">结束时间正排序</a-select-option>
                <a-select-option value="-end_time">结束时间倒排序</a-select-option>
              </a-select>
            </a-col>
            <a-col
              class="item"
              v-bind="layout2">
              <a-input
                v-model="params.search"
                style="width: 100%;"
                placeholder="ID，用户，房间，日期"
                @keypress.enter="getData">
              </a-input>
            </a-col>
            <a-col
              class="item"
              v-bind="layout2">
              <a-button
                style="width: 100%;"
                icon="search"
                @click="getData">
                搜索
              </a-button>
            </a-col>
            <a-col
              class="item"
              v-bind="layout2">
              <a-button
                style="width: 100%;"
                icon="delete"
                @click="handleClearParams">
                重置
              </a-button>
            </a-col>
            <a-col
              class="item"
              v-bind="layout2">
              <a-button
                type="primary"
                icon="plus"
                style="width: 100%;"
                @click="$router.push({name: 'dashboard'})">
                新建
              </a-button>
            </a-col>
          </a-row>
        </a-input-group>
      </a-row>
      <a-row>
        <a-col class="item">
          <a-table
            rowKey="id"
            :loading="state.loading"
            :columns="columns"
            :dataSource="bookingList"
            :pagination="false">
            <template slot="status" slot-scope="text, record, index">
              {{statusList.find(item=>item.id === text).name}}
            </template>
            <template slot="operation" slot-scope="text, record, index">
              <a-button @click="$router.push({name: 'bookingEdit', params: {id: record.id}})">编辑</a-button>
            </template>
          </a-table>
        </a-col>
      </a-row>
      <a-row>
        <a-col class="item">
          <span style="vertical-align: -5px">共 {{count}} 条</span>
          <a-pagination
            v-model="params.page"
            @change="handelePage"
            style="float: right"
            :total="count">
          </a-pagination>
        </a-col>
      </a-row>
    </a-card>
  </page-layout>
</template>

<script>
  const columns = [
    {
      title: '编号',
      dataIndex: 'id',
      width: '8%'
    },
    {
      title: '房间',
      dataIndex: 'room.name',
      width: '14%'
    },
    {
      title: '日期',
      dataIndex: 'date',
      width: '12%'
    },
    {
      title: '开始时间',
      dataIndex: 'start_time',
      width: '12%'
    },
    {
      title: '结束时间',
      dataIndex: 'end_time',
      width: '12%'
    },
    {
      title: '用户',
      dataIndex: 'user.username',
      width: '14%'
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: '14%',
      scopedSlots: { customRender: 'status' }
    },
    {
      title: '操作',
      dataIndex: 'operation',
      scopedSlots: { customRender: 'operation' }
    }
  ]
  import moment from 'moment'
  import bookingAPI from '../../api/booking'
  import roomAPI from '../../api/room'
  import settingAPI from '../../api/setting'
  import PageLayout from '../../components/page/PageLayout'

  export default {
    name: 'Booking',
    components: {
      PageLayout
    },
    data () {
      return {
        columns,
        layout1: {
          xs: { span: 24 },
          sm: { span: 8 },
          xl: { span: 8 },
        },
        layout2: {
          xs: { span: 12 },
          sm: { span: 8 },
          xl: { span: 6 },
        },
        params: {
          search: '',
          page: 1,
          ordering: 'date',
          room: '',
          status: '',
          min_date: this.getDateRangeDefaultValue()[0].format('YYYY-MM-DD'),
          max_date: this.getDateRangeDefaultValue()[1].format('YYYY-MM-DD'),
          min_time: '',
          max_time: ''
        },
        state: {
          loading: false,
          dateRange: this.getDateRangeDefaultValue(),
          startTime: new moment(),
          endTime: new moment()
        },
        roomList: [],
        count: 0,
        bookingList: [],
        statusList: [],
        setting: {}
      }
    },
    mounted () {
      roomAPI.getRoomList(null)
        .then(data => {
          this.roomList = data
        })
      settingAPI.getSettingDetail()
        .then(data => {
          this.params.min_time = data.start_time
          this.params.max_time = data.end_time
          data.start_time = new moment(data.start_time, 'HH:mm:ss')
          this.state.startTime = data.start_time
          data.end_time = new moment(data.end_time, 'HH:mm:ss')
          this.state.endTime = data.end_time
          this.setting = data
        })
      bookingAPI.getStatusList()
        .then(data=>{
          this.statusList = data
        })
      this.getData()
    },
    methods: {
      getData () {
        this.state.loading = true
        bookingAPI.getBookingList(this.params)
          .then(data => {
            this.bookingList = data.results
            this.count = data.count
            this.state.loading = false
          })
          .catch(() => {
            this.state.loading = false
          })
      },
      handleClearParams () {
        this.params = {
          search: '',
          page: 1,
          ordering: 'date',
          room: '',
          status: '',
          min_date: this.getDateRangeDefaultValue()[0].format('YYYY-MM-DD'),
          max_date: this.getDateRangeDefaultValue()[1].format('YYYY-MM-DD'),
          min_time: this.setting.start_time.format('HH:mm:ss'),
          max_time: this.setting.end_time.format('HH:mm:ss')
        }
        this.state = {
          loading: false,
          dateRange: this.getDateRangeDefaultValue(),
          startTime: this.setting.start_time,
          endTime: this.setting.end_time
        }
        this.getData()
      },
      handelePage (page) {
        this.params.page = page
        this.getData()
      },
      hangdleDateRangeChange (dates, dateStrings) {
        this.params.min_date = dateStrings[0]
        this.params.max_date = dateStrings[1]
        this.getData()
      },
      handleStartTimeChange (time, timeString) {
        this.params.min_time = timeString
        this.getData()
      },
      handleEndTimeChange (time, timeString) {
        this.params.max_time = timeString
        this.getData()
      },
      getDateRangeDefaultValue () {
        let now = new moment()
        let aWeekLater = (new moment()).add(7, 'days')
        return [now, aWeekLater]
      },
      getDisabledHours () {
        let ret = []
        let start_hour = this.setting.start_time.hour()
        let end_hour = this.setting.end_time.hour()
        for (let i = 0; i < 24; i++) {
          if (i < start_hour || i > end_hour) {
            ret.push(i)
          }
        }
        return ret
      },
      getDisabledMinutes (selectedHour) {
        let ret = []
        if (selectedHour === this.setting.end_time.hour()) {
          ret.push(30)
        }
        return ret
      }
    }
  }
</script>

<style scoped lang="less">
  .item {
    margin: 8px 0;
  }
</style>