<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="30%"
    @close="handleClose">
    <div class="formWrap">
      <el-form
        inline
        :model="form"
        ref="form"
        class="form-wrap"
        label-width="150px"
      >
        <el-form-item
          verify
          label="座位图名称"
          prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item
          verify
          label="行数"
          prop="y">
          <el-input-number
            :controls="false"
            :min="1"
            :max="80"
            :step="1"
            v-model="form.y">
          </el-input-number>
        </el-form-item>

        <el-form-item
          verify
          label="列数"
          prop="x">
          <el-input-number
            :controls="false"
            :min="1"
            :max="80"
            :step="1"
            v-model="form.x"></el-input-number>
        </el-form-item>
      </el-form>
    </div>

    <span slot="footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { updateSeatConfig, addSeatConfig } from '@/api/seat'

export default {
  data () {
    return {
      visible: false,
      title: '',
      form: {
        name: '',
        x: 1,
        y: 1
      }
    }
  },
  methods: {
    show (info, type) {
      this.type = type
      this.title = type === 'edit' ? '编辑座位表' : '新增座位表'
      this.visible = true
      this.$nextTick(() => {
        this.reset()

        if (type === 'edit' && info) {
          this.form = Object.assign({}, this.form, JSON.parse(JSON.stringify(info)))
        } else {
          this.form = JSON.parse(JSON.stringify(this.form))
        }
      })
    },
    reset () {
      this.$refs.form.resetFields()
    },
    handleClose () {
      this.visible = false
    },
    handleSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.type === 'edit') {
            updateSeatConfig(this.form).then(res => {
              this.$message.success('更新成功')

              this.handleClose()

              this.$emit('update')
            })
          } else {
            addSeatConfig(this.form).then(res => {
              this.$message.success('更新成功')

              this.handleClose()

              this.$emit('update')
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.formWrap{
  padding: 20px 20px 0;
}
</style>
