<template>
  <div>
    <!--自动分配-->
    <Modal v-model="showTimeModal">
      <p slot="header">计划完成时间</p>
      <div>
        <Alert type="success" show-icon>{{ total }}</Alert>
        <Form ref="formObj" :model="formObj" :rules="ruleValidate" :label-width="150" inline>
          <Form-item label="计划完成时间" prop="planDate" style="width:100%">
            <Date-picker v-model="formObj.planDate" :editable="false" @on-change="_endDateChange"
                         type="date" placeholder="计划完成时间" format="yyyy-MM-dd"
                         style="width: 100%;"></Date-picker>
          </Form-item>
        </Form>
      </div>
      <div slot="footer">
        <Button @click="_timeCancel" style="margin-left: 8px">取消</Button>
        <Button @click="_timeOk" type="primary">提交</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
/**
 *自动分配
 */

export default {
  components: {},
  data() {
    return {
      showTimeModal: false,
      formObj: {
        planDate: ''
      },
      planDate: '',
      ruleValidate: {
        planDate: [
          {
            required: true,
            message: '请选择计划完成时间',
            trigger: 'change',
            type: 'date'
          }
        ]
      },
      total: ''
    }
  },
  methods: {
    _open(num) {
      this.showTimeModal = true
      this.total = '可自动分配项目有 ' + num + ' 条'
    },
    _endDateChange(data) {
      this.planDate = data
      console.log(this.planDate, 123)
    },
    _timeCancel() {
      this.showTimeModal = false
    },
    _timeOk() {
      this.$refs.formObj.validate(valid => {
        if (valid) {
          this.$store.dispatch('FoodItem/autoAllot', this.planDate).then(() => {
            this._resultChange('自动分配成功！')
          })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    _resultChange(msg) {
      if (this.$store.state.FoodItem.success) {
        this.$Message.success(msg)
        this.$emit('on-result-change')
        this.showTimeModal = false
      }
    }
  }
}
</script>
