<template>
  <page-layout :title="`${room.name} 编辑`">
    <a-card>
      <a-col
        :xs="{span: 24}"
        :sm="{span: 20}"
        :xl="{span: 16}">
        <a-form
          id="form"
          ref="form"
          :form="form"
          @submit="handleSubmit">
          <a-form-item
            label="ID"
            v-bind="layout">
            {{room.id}}
          </a-form-item>
          <a-form-item
            label="名称"
            v-bind="layout">
            <a-input
              type="text"
              v-decorator="[
                'name',
                {initialValue: room.name}
               ]">
            </a-input>
          </a-form-item>
          <a-form-item
            label="说明"
            v-bind="layout">
            <a-textarea
              type="text"
              :rows="4"
              v-decorator="[
                'description',
                {initialValue: room.description}
               ]">
            </a-textarea>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSubmit" style="float: right">
              保存
            </a-button>
            <a-popconfirm title="是否要取消？" @confirm="$router.go(-1)">
              <a-button style="float: right; margin: 0 4px;">
                取消
              </a-button>
            </a-popconfirm>
          </a-form-item>
        </a-form>
      </a-col>
    </a-card>
  </page-layout>
</template>

<script>
  import api from '../../api/room'
  import PageLayout from '../../components/page/PageLayout'

  export default {
    name: 'RoomDetail',
    components: {
      PageLayout
    },
    props: {
      id: String,
    },
    data () {
      return {
        layout: {
          'label-col': { span: 6 },
          'wrapper-col': { span: 18 }
        },
        form: this.$form.createForm(this),
        room: {}
      }
    },
    mounted () {
      this.getData()
    },
    methods: {
      getData () {
        api.getRoom(this.id)
          .then(data => {
            this.room = data
          })
      },
      handleSubmit (e) {
        e.preventDefault()
        this.form.validateFields((error, data) => {
            if (!error) {
              api.updateRoom(this.id, data)
                .then(data => {
                  this.$notification.success({ message: '成功', description: '成功修改房间', key: 'SUCCESS' })
                  this.$router.push({ name: 'room' })
                })
            }
          }
        )
      },
    }
  }
</script>

<style scoped lang="less">

</style>