<template>
  <a-drawer :width="500" :visible="visible" title="服务类别" @close="close">
    <a-form :form="form" layout="vertical">
      <a-form-item label="名称">
        <a-input v-decorator="['serviceName']" />
      </a-form-item>
      <a-form-item label="次级标题">
        <a-input v-decorator="['description']" />
      </a-form-item>
      <a-form-item label="排序">
        <a-input-number v-decorator="['sequence']" />
      </a-form-item>
    </a-form>
    <div class="drawer-form-bottom-toolbar">
      <a-button :style="{ marginRight: '8px' }" v-if="hasPerm('SYS0210101.CATEGORY')" @click="close"> 取消 </a-button>
      <a-button type="primary" @click="submit"> 保存 </a-button>
    </div>
  </a-drawer>
</template>
<script>
import { updateCategory, getDetails } from '@/api/serv'

export default {
  name: 'CategoryEdit',
  props: { success: Function },
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      id: null,
      categoryId: null,
      categoryName: ''
    }
  },
  methods: {
    show(id) {
      this.id = id
      this.visible = true
      if (id) {
        getDetails(this.id).then(({ data }) => {
          this.form.setFieldsValue(data)
        })
      }
    },
    close() {
      this.id = null
      this.form.resetFields()
      this.visible = false
    },
    submit() {
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        const reqData = {
          ...values,
          id: this.id
        }
        updateCategory(reqData).then(({ code }) => {
          if (code == 200) {
            this.$message.success('保存成功')
            this.close()
            this.success()
          }
        })
      })
    }
  }
}
</script>