<template>
  <page-layout :title="isEdit ? '编辑预约' : '新建预约'">
    <a-card>
      <a-col
        :xs="{span: 24}"
        :sm="{span: 20}"
        :xl="{span: 18}">
        <a-divider v-if="isEdit">预约信息</a-divider>
        <a-form>
          <a-form-item
            label="ID"
            v-if="isEdit"
            v-bind="layout">
            {{bookingEdit.id}}
          </a-form-item>
          <a-form-item
            label="房间"
            v-bind="layout">
            <router-link
              :to="{ name: 'roomEdit', params: { id: bookingEdit.room.id} }">
              {{isEdit ? bookingEdit.room.name : bookingCreate.room.name}}
            </router-link>
          </a-form-item>
          <a-form-item
            label="日期"
            v-bind="layout">
            {{isEdit ? bookingEdit.date : bookingCreate.date}}
          </a-form-item>
          <a-form-item
            label="开始时间"
            v-bind="layout">
            {{isEdit ? bookingEdit.start_time : bookingCreate.start_time}}
          </a-form-item>
          <a-form-item
            label="结束时间"
            v-bind="layout">
            {{isEdit ? bookingEdit.end_time : bookingCreate.end_time}}
          </a-form-item>
          <div v-if="bookingEdit">
            <a-form-item
              v-for="(item, index) in bookingEdit.seats" :key="index"
              :label="'座位' + (index + 1).toString()"
              v-bind="layout">
              <div>{{item.name}}</div>
            </a-form-item>
          </div>
          <div v-if="bookingCreate">
            <a-form-item
              v-for="(item, index) in bookingCreate.seats" :key="index"
              :label="'座位' + (index + 1).toString()"
              v-bind="layout">
              <div>{{item.name}}</div>
            </a-form-item>
          </div>
          <a-form-item
            label="用户"
            v-bind="layout">
            <a-select
              showSearch
              placeholder="搜索用户名邮箱"
              :showArrow="false"
              :filterOption="false"
              :notFoundContent="null"
              @search="handleSearch"
              v-if="!isEdit"
              v-model="createBookingForm.user">
              <a-select-option v-for="item in userList" :value="item.id">{{item.username}} {{item.email}}
              </a-select-option>
            </a-select>
            <router-link
              :to="{ name: 'accountEdit', params: { id: bookingEdit.user.id} }"
              v-else>
              {{bookingEdit.user.username}} {{bookingEdit.user.email}}
            </router-link>
          </a-form-item>
          <a-form-item
            label="申请时间"
            v-if="isEdit"
            v-bind="layout">
            {{bookingEdit.created_datetime}}
          </a-form-item>
          <a-form-item
            label="到达时间"
            v-if="isEdit"
            v-bind="layout">
            {{bookingEdit.arrive_time || '未签到'}}
          </a-form-item>
          <a-form-item
            label="离开时间"
            v-if="isEdit"
            v-bind="layout">
            {{bookingEdit.leave_time || '未签离'}}
          </a-form-item>
          <a-form-item
            label="状态"
            v-if="isEdit"
            v-bind="layout">
            {{statusName}}
          </a-form-item>
          <a-form-item v-if="!isEdit">
            <a-button type="primary" @click="handleCreateSubmit" style="float: right">
              提交申请
            </a-button>
            <a-button @click="$router.go(-1)" style="float: right; margin-right: 8px">
              取消
            </a-button>
          </a-form-item>
        </a-form>
        <a-divider v-if="isEdit">取消预约</a-divider>
        <a-form
          v-if="isEdit"
          :form="cancelBookingForm">
          <a-form-item
            label="取消人"
            v-bind="layout">
            {{bookingEdit.cancel_by ? bookingEdit.cancel_by.username : ''}}
          </a-form-item>
          <a-form-item
            label="取消时间"
            v-bind="layout">
            {{bookingEdit.cancel_datetime}}
          </a-form-item>
          <a-form-item
            label="取消原因"
            v-bind="layout">
            <a-textarea
              :rows="4"
              v-decorator="[
                'cancel_reason',
                {rules: [
                  {max: 512, message: '最多512个字符'},
                ], validateTrigger: 'blur',
                initialValue: bookingEdit.cancel_reason}
              ]">
            </a-textarea>
          </a-form-item>
          <a-form-item>
            <a-popconfirm
              v-if="bookingEdit.status === 'SUCCESS'"
              style="float: right"
              title="取消预约不可逆"
              @confirm="handleCancelSubmit"
              okText="确定"
              cancelText="关闭">
              <a-button
                type="primary">
                取消预约
              </a-button>
            </a-popconfirm>
            <a-button
              v-else
              style="float: right"
              :disabled="true">取消预约
            </a-button>
            <a-button @click="$router.go(-1)" style="float: right; margin-right: 8px">
              返回
            </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: {
      id: Number,
      bookingCreate: Object
    },
    data () {
      return {
        layout: {
          'label-col': { span: 6 },
          'wrapper-col': { span: 18 }
        },
        userList: [],
        bookingEdit: {
          room: {
            id: '0',
            name: ''
          },
          user: {
            id: 0,
            name: '',
            email: ''
          }
        },
        createBookingForm: {
          user: this.$store.getters.userid,
        },
        cancelBookingForm: this.$form.createForm(this),
        params: {
          search: ''
        },
        statusList: []
      }
    },
    beforeRouteEnter (to, from, next) {
      if (from.path !== '/') {
        next()
      } else {
        next({ name: 'dashboard' })
      }
    },
    mounted () {
      this.getData()
    },
    methods: {
      getData () {
        if (this.isEdit) {
          bookingAPI.getBooking(this.id)
            .then(data => {
              this.bookingEdit = data
            })
          bookingAPI.getStatusList()
            .then(data => {
              this.statusList = data
            })
        } else {
          accountAPI.getUserList(this.params)
            .then(data => {
              this.userList = data.results
            })
        }
      },
      handleCreateSubmit () {
        let form = {
          user: this.createBookingForm.user,
          room: this.bookingCreate.room.id,
          seats: this.bookingCreate.seats.map((item) => {
            return item.id
          }),
          date: this.bookingCreate.date,
          start_time: this.bookingCreate.start_time,
          end_time: this.bookingCreate.end_time
        }
        bookingAPI.createBooking(form)
          .then(data => {
            this.$notification.success({ message: '成功', description: '提交申请成功', key: 'SUCCESS' })
            this.$router.push({ name: 'dashboard' })
          })
      },
      handleCancelSubmit () {
        this.cancelBookingForm.validateFields((error, data) => {
          if (!error) {
            bookingAPI.cancelBooking(this.bookingEdit.id, data)
              .then(data => {
                this.$notification.success({ message: '成功', description: '取消预约成功', key: 'SUCCESS' })
                this.getData()
              })
          }
        })
      },
      handleSearch (value) {
        this.params.search = value
        this.getData()
      }
    },
    computed: {
      isEdit () {
        return this.$route.path.split('/').pop() === 'edit'
      },
      statusName () {
        let ret = ''
        let result = this.statusList.find(item => item.id === this.bookingEdit.status)
        if (result) {
          ret = result.name
        }
        return ret
      }
    }
  }
</script>

<style scoped>

</style>