<template>
  <page-layout :title="isEdit ? '编辑预约' : '新建预约'">
    <a-card>
      <a-col
        :xs="{span: 24}"
        :sm="{span: 20}"
        :xl="{span: 18}">
        <a-form>
          <a-form-item
            label="日期"
            v-bind="layout">
            {{newBooking.date}}
          </a-form-item>
          <a-form-item
            label="房间"
            v-bind="layout">
            {{newBooking.room.name}}
          </a-form-item>
          <a-form-item
            v-for="(item, index) in newBooking.booking_list" :key="index"
            :label="'预约' + (index + 1).toString()"
            v-bind="layout">
            <div>座位: {{item.seat.name}}</div>
            <div>开始时间: {{item.start_time}}</div>
            <div>结束时间: {{item.end_time}}</div>
          </a-form-item>
          <a-form-item
            label="用户"
            v-bind="layout">
            <a-select
              showSearch
              placeholder="搜索用户名邮箱"
              :showArrow="false"
              :filterOption="false"
              :notFoundContent="null"
              @search="handleSearch"
              v-model="form.user">
              <a-select-option v-for="item in userList" :value="item.id">{{item.username}} {{item.email}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSubmit" style="float: right">
              提交
            </a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-card>
  </page-layout>

</template>

<script>
  import PageLayout from '../../components/page/PageLayout'
  import accountAPI from '../../api/account'
  import bookingAPI from '../../api/booking'
  export default {
    name: 'BookingDetail',
    components: {
      PageLayout
    },
    props: {
      newBooking: Object
    },
    data () {
      return {
        layout: {
          'label-col': { span: 6 },
          'wrapper-col': { span: 18 }
        },
        userList: [],
        form: {
          user: this.$store.getters.userid,
          room: this.newBooking.room.id,
          seats: [
            this.newBooking.booking_list[0].seat.id
          ],
          start_time: this.newBooking.booking_list[0].start_time,
          end_time: this.newBooking.booking_list[0].end_time,
          date: this.newBooking.date
        },
        params: {
          search: ''
        }
      }
    },
    mounted () {
      if (!this.isEdit) {
        this.getData()
      }
    },
    methods: {
      getData () {
        accountAPI.getUserList(this.params)
          .then(data => {
            this.userList = data.results
          })
      },
      handleSubmit () {
        bookingAPI.createBooking(this.form)
          .then(data => {
            console.log(data)
          })
      },
      handleSearch (value) {
        this.params.search = value
        this.getData()
      }
    },
    computed: {
      isEdit () {
        return this.$route.path.split('/').pop() === 'edit'
      }
    }
  }
</script>

<style scoped>

</style>