<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="purchasedGoodsName" label="采购物品">
        <ui-textbox :editable="editable" v-model="formData.purchasedGoodsName" placeholder="请输入采购物品"></ui-textbox>
      </ui-form-item>
      <ui-form-item prop="purchasedGoodsQuantity" label="采购数量">
        <ui-textbox :editable="editable" v-model="formData.purchasedGoodsQuantity" placeholder="请输入采购数量"></ui-textbox>
      </ui-form-item>
      <ui-form-item label="原因描述">
        <ui-textarea :editable="editable" v-model="formData.describes" placeholder="请输入原因描述"></ui-textarea>
      </ui-form-item>
      <ui-form-item :label="editable ? '照片（0/3）' : '照片'" v-if="editable || (formData.picList && formData.picList.length)">
        <ui-upload
          v-model="formData.picList"
          :editable="editable"
          type="card"
        ></ui-upload>
      </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 { createWorkflowProcure, createWorkflowComment } from '../apis'

export default {
  name: 'WorkFormProcure',
  components: {
    WorkFormBase
  },
  props: {
    data: {
      type: Object
    },
    editable: {
      type: Boolean,
      default: true
    },
    success: {
      type: Function
    }
  },
  data() {
    return {
      formData: {
        describes: null, // 原因描述',
        purchasedGoodsName: null, // '采购物品名称',
        purchasedGoodsQuantity: null, // 采购物品数量'
        picList: []
      }
    }
  },
  computed: {
    formRules() {
      return {
        purchasedGoodsName: [{
          required: true,
          message: '采购物品不能为空',
          trigger: 'blur'
        }],
        purchasedGoodsQuantity: [{
          required: true,
          message: '采购数量不能为空',
          trigger: 'blur'
        }]
      }
    },
    operateLogData() {
      return (this.formData ? this.formData.operLogs || [] : []).map(v => {
        return {
          name: v.operatorName,
          content: v.operationContent,
          date: v.createTime
        }
      })
    }
  },
  watch: {
    data() {
      this.syncFormData()
    }
  },
  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(() => {
        const saveData = Object.assign({}, this.$refs.baseForm.getData(), this.formData)
        if (saveData.picList) {
          saveData.picList = saveData.picList.map(item => {
            return {
              realPath: item
            }
          })
        }
        return createWorkflowProcure(saveData).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>
