<template>
  <work-form-base :data="formData" :editable="editable" ref="baseForm" title="上报加油">
    <ui-form ref="form" :model="formData" :rules="formRules" :editable="editable" label-position="top">
      <ui-form-item prop="vehicleNum" label="加油车辆">
        <ui-select
          v-model="formData.vehicleNum"
          :remote="true"
          :editable="editable"
          :filterable="true"
          text-field="vehicleNum"
          value-field="vehicleNum"
          placeholder="请选择维修车辆"
          :query-method="handleQueryVehicleData"
        ></ui-select>
      </ui-form-item>
      <ui-form-item prop="refuelingLitres" label="加油升数">
        <ui-textbox v-model="formData.refuelingLitres" placeholder="请输入加油升数" :editable="editable"></ui-textbox>
      </ui-form-item>
      <ui-form-item prop="refuelingLocation" label="加油地点">
        <ui-textbox v-model="formData.refuelingLocation" placeholder="请输入加油地点" :editable="editable"></ui-textbox>
      </ui-form-item>
      <ui-form-item label="照片（0/3）">
        <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 { queryVehicleData, createWorkflowComment } from '../apis'

export default {
  name: 'WorkFormOiling',
  components: {
    WorkFormBase
  },
  props: {
    data: {
      type: Object
    },
    editable: {
      type: Boolean,
      default: true
    },
    success: {
      type: Function
    }
  },
  data() {
    return {
      formData: {
        vehicleNum: null, // 车辆牌照',
        refuelingLitres: null, // '加油升数',
        refuelingLocation: null //  '加油地点'
      }
    }
  },
  computed: {
    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))
      }
    },
    handleQueryVehicleData({ keyword }) {
      return queryVehicleData(keyword || '')
    },
    handleSendComment(evt) {
      return createWorkflowComment({
        id: this.formData.id,
        solveContent: evt.content
      }).then(() => {
        return Promise.all(this.success ? [this.success()] : null).finally(() => {
          this.$success('操作成功')
        })
      })
    }
  }
}
</script>
