<template>
  <work-form-base :editable="editable" ref="baseForm" title="上报请假">
    <ui-form ref="form" :editable="editable" :model="formData" :rules="formRules" label-position="top">
      <ui-form-item prop="day" label="请假时长">
        <ui-spinner
          v-model="formData.day"
          :editable="editable"
          placeholder="请输入请假时长"
        ></ui-spinner>
      </ui-form-item>
      <ui-form-item prop="startTime" label="请假开始时间">
        <ui-date-picker
          v-model="formData.startTime"
          :editable="editable"
          value-format="yyyy-MM-dd"
          placeholder="请输入请假开始时间"
        ></ui-date-picker>
      </ui-form-item>
      <ui-form-item prop="endTime" label="请假结束时间">
        <ui-date-picker
          v-model="formData.endTime"
          :editable="editable"
          value-format="yyyy-MM-dd"
          placeholder="请输入请假结束时间"
        ></ui-date-picker>
      </ui-form-item>
      <ui-form-item label="原因描述">
        <ui-textarea
          v-model="formData.describes"
          :editable="editable"
          placeholder="请输入原因描述"
        ></ui-textarea>
      </ui-form-item>
      <ui-toolbar v-if="editable">
        <ui-button type="primary" :click="handleConfirmClick">确定</ui-button>
      </ui-toolbar>
      <template v-else>
        <bi-operate-log
          :data="operateLogData"
          :send-comment-method="handleSendComment"
        ></bi-operate-log>
      </template>
    </ui-form>
  </work-form-base>
</template>
<script>
import WorkFormBase from './report-work-form-base'
import { createWorkflowLeave, createWorkflowComment } from '../apis'

export default {
  name: 'WorkFormLeave',
  components: {
    WorkFormBase
  },
  props: {
    data: {
      type: Object
    },
    editable: {
      type: Boolean,
      default: true
    },
    success: {
      type: Function
    }
  },
  data() {
    return {
      formData: {
        describes: null, // 原因描述',
        startTime: null, // '请假开始时间',
        endTime: null, // '请假结束时间',
        day: null // '请假天数',
      }
    }
  },
  watch: {
    data() {
      this.syncFormData()
    }
  },
  computed: {
    formRules() {
      return {
        day: [{
          required: true,
          message: '请假天数不能为空',
          trigger: 'change'
        }],
        startTime: [{
          required: true,
          message: '请假开始时间不能为空',
          trigger: 'change'
        }],
        endTime: [{
          required: true,
          message: '请假结束时间不能为空',
          trigger: 'change'
        }]
      }
    },
    operateLogData() {
      return (this.formData ? this.formData.operLogs || [] : []).map(v => {
        return {
          name: v.operatorName,
          content: v.operationContent,
          date: v.createTime
        }
      })
    }
  },
  created() {
    this.syncFormData()
  },
  methods: {
    syncFormData() {
      if (this.data) {
        this.formData = JSON.parse(JSON.stringify(this.data))
      }
    },
    handleConfirmClick() {
      return Promise.all([
        this.$refs.baseForm.validate(),
        this.$refs.form.validate()
      ]).then(() => {
        return createWorkflowLeave(Object.assign({}, this.$refs.baseForm.getData(), this.formData)).then(() => {
          this.$success('上报成功')
          this.$emit('success')
        })
      })
    },
    handleSendComment(evt) {
      return createWorkflowComment({
        id: this.formData.id,
        solveContent: evt.content
      }).then(() => {
        return Promise.all(this.success ? [this.success()] : null).finally(() => {
          this.$success('操作成功')
        })
      })
    }
  }
}
</script>
