<template>
  <a-modal :title="title" v-model="visible" :confirmLoading="confirmLoading" @ok="handleSubmit">
    <a-form :form="form">
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称">
        <a-input
          :disabled="disabled"
          placeholder="请输入名称"
          v-decorator="['title', { rules: [{ required: true, message: '请输入名称' }] }]"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'

export default {
  address: 'TreeModules',
  props: {},
  components: {},
  data() {
    return {
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      title: '',
      mdl: {},
      disabled: false,

      operation: 1,
      record: {},
    }
  },
  beforeCreate() {},
  created() {},
  computed: {},
  methods: {
    add(record) {
      this.operation = record.operation
      if (record.operation === 1) {
        this.title = '新增'
      } else {
        this.title = '添加下级'
      }
      this.form.resetFields()
      this.visible = true
      this.disabled = false
      this.record = record
    },
    edit(record) {
      this.record = record
      this.operation = 3
      this.disabled = false
      this.title = '编辑名称'
      this.mdl = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.mdl, 'title'))
      })
    },
    // 保存
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          values.operation = this.operation
          values.key = this.record.key
          this.confirmLoading = true
          this.$emit('ok', values)
          this.form.resetFields()
          this.$message.success('保存成功')
          this.visible = false
          this.confirmLoading = false
        }
      })
    },
  },
}
</script>

<style scoped lang="less"></style>
