<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="vehicleNum" label="事故车辆">
        <ui-select
          v-model="formData.vehicleNum"
          :editable="editable"
          :remote="true"
          :filterable="true"
          text-field="vehicleNum"
          value-field="vehicleNum"
          placeholder="请选择事故车辆"
          :query-method="handleQueryVehicleData"
        ></ui-select>
      </ui-form-item>
      <ui-form-item prop="reportType" label="事故类型">
        <ui-select
          :editable="editable"
          v-model="formData.reportType"
          :query-method="handleQueryTypeOptions"
          placeholder="请选择维修类型"
          text-field="text"
          value-field="value"
        ></ui-select>
      </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="照片（0/3）">
        <ui-upload
          :editable="editable"
          v-model="formData.picList"
          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 { loadWorkflowTypeOptions, queryVehicleData, createWorkflowComment } from '../apis'

export default {
  name: 'WorkFormFault',
  components: {
    WorkFormBase
  },
  props: {
    data: {
      type: Object
    },
    editable: {
      type: Boolean,
      default: true
    },
    success: {
      type: Function
    }
  },
  data() {
    return {
      formData: {
        reportType: null,
        describes: null, // 原因描述',
        vehicleNum: null, // 车辆牌照',
        picList: []
      }
    }
  },
  computed: {
    formRules() {
      return {
        vehicleNum: [{
          required: true,
          message: '事故车辆不能为空',
          trigger: 'change'
        }],
        reportType: [{
          required: true,
          message: '事故类型不能为空',
          trigger: 'change'
        }]
      }
    },
    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 || '')
    },
    handleQueryTypeOptions() {
      return loadWorkflowTypeOptions()
    },
    handleConfirmClick() {
    },
    handleSendComment(evt) {
      return createWorkflowComment({
        id: this.formData.id,
        solveContent: evt.content
      }).then(() => {
        return Promise.all(this.success ? [this.success()] : null).finally(() => {
          this.$success('操作成功')
        })
      })
    }
  }
}
</script>
