<template>
<a-modal :title="title" :visible="value" :maskClosable="false" @cancel="handleClose" :footer="null">
  <ActiveForm v-if="value" ref="form" :layout="layout" :model="model" :label-width="100">
    <div style="text-align:right;">
      <a-popconfirm title="确定删除此任务吗？" @confirm="handleDelete">
        <a-button type="danger">删除</a-button>
      </a-popconfirm>
      <a-button @click="handleSave" type="primary">保存</a-button>
    </div>
  </ActiveForm>
</a-modal>
</template>

<script>
export default {
  name: 'GanttModal',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    task: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  data() {
    return {
      layout: [
        {
          text: {
            label: '任务名',
            type: 'input',
            width: 24,
            placeholder: '任务名',
          },
          name: {
            label: '人员',
            type: 'input',
            width: 24,
            placeholder: '人员名称',
          },
          date: {
            label: '起止日期',
            type: 'daterange',
            width: 24,
            validate: {
              rules: [{required: true, message: '请选择任务起止日期'}]
            }
          },
        }
      ],
    }
  },
  methods: {
    handleClose() {
      this.$emit('input', false)
      this.$emit('cancel', this.model)
    },
    handleDelete() {
      this.$emit('delete', this.model)
    },
    handleSave() {
      this.$refs.form.validate(err => {
        if (err) return
        this.$emit('save', this.model)
        this.handleClose()
      })
    }
  },
  computed: {
    title() {
      const {text, name} = this.task
      return `${text || ''}  ${name || ''}`
    },
    model() {
      const task = {...this.task}
      task.date = [task.start_date, task.end_date]
      return task
    },
  }
}
</script>
