<template>
  <a-drawer :width="500" :visible="visible" title="首页通知" @close="close">
    <a-form :form="form" layout="vertical">
      <a-form-item label="名称">
        <a-input v-decorator="['title']" />
      </a-form-item>
      <a-form-item label="内容(18字)">
        <a-input
          v-decorator="[
            'content',
            {
              rules: [
                { required: true, message: '请填写内容' },
                { max: 18, message: '为了显示效果内容应少于18字' }
              ]
            }
          ]"
        />
      </a-form-item>
      <a-form-item label="排序">
        <a-input-number v-decorator="['showOrder']" />
      </a-form-item>
    </a-form>
    <div class="drawer-form-bottom-toolbar">
      <a-button :style="{ marginRight: '8px' }" @click="close"> 取消 </a-button>
      <a-button v-if="hasPerm('SYS02103.EDIT')" type="primary" @click="submit"> 保存 </a-button>
    </div>
  </a-drawer>
</template>
<script>
import { getDetail, save } from '@/api/notice'

export default {
  name: 'NoticeDetail',
  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) {
        getDetail(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
        }
        save(reqData).then(({ code }) => {
          if (code == 200) {
            this.$message.success('保存成功')
            this.close()
            this.success()
          }
        })
      })
    }
  }
}
</script>