<template>
  <a-drawer
    :width="500"
    :visible="visible"
    :title="id ? '编辑' : '新增'"
    @close="close"
  >
    <a-form :form="form" layout="vertical">
      <a-form-item label="姓名">
        <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入姓名' }] }]" />
      </a-form-item>
      <a-form-item label="手机号">
        <a-input v-decorator="['phone', { rules: [{ required: true, message: '请输入手机号' }] }]" />
      </a-form-item>
    </a-form>
    <div class="drawer-form-bottom-toolbar">
      <a-button :style="{ marginRight: '8px' }" @click="close"> 取消 </a-button>
      <a-button type="primary" @click="submit" v-if="hasPerm('SYS0200201.EDIT')"> 保存 </a-button>
    </div>
  </a-drawer>
</template>
<script>
import ImageUpload from '@/components/image-upload/ImageUpload'
import { save, getDetail, update } from '@/api/worker'

export default {
  name: 'ServiceWorkerEdit',
  components: { ImageUpload },
  props: { success: Function },
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      id: null
    }
  },
  methods: {
    show(id) {
      this.id = id
      this.visible = true
      if (this.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
        }
        const saveRequest = this.id ? update : save
        saveRequest(reqData).then(({ code }) => {
          if (code == 200) {
            this.$message.success('保存成功')
            this.close()
            this.success()
          }
        })
      })
    }
  }
}
</script>