<template>
  <work-form-base :editable="false" ref="baseForm" title="上报维修">
    <ui-form ref="form" :editable="false" :model="formData" :rules="formRules" label-position="top">
      <ui-form-item prop="vehicleNum" label="维修车辆">
        <ui-select
          v-model="formData.vehicleNum"
          :remote="true"
          :editable="false"
          :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
          v-model="formData.reportType"
          :editable="false"
          :query-method="handleQueryRepairOptions"
          placeholder="请选择维修类型"
          text-field="text"
          value-field="value"
        ></ui-select>
      </ui-form-item>
      <ui-form-item prop="describes" label="问题描述">
        <ui-textarea
          v-model="formData.describes"
          placeholder="请输入问题描述"
          :editable="false"
        ></ui-textarea>
      </ui-form-item>
      <ui-form-item label="照片" v-if="formData.picList && formData.picList.length">
        <ui-upload
          v-model="formData.picList"
          type="card"
          :editable="false"
        ></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 { createWorkflowRepair, queryVehicleData, loadWorkflowTypeOptions, createWorkflowComment } from '../apis'

export default {
  name: 'WorkFormRepair',
  components: {
    WorkFormBase
  },
  props: {
    data: {
      type: Object
    },
    editable: {
      type: Boolean,
      default: true
    },
    success: {
      type: Function
    }
  },
  data() {
    return {
      formData: {
        vehicleNum: '', // 津AN3599
        reportType: '',
        describes: '',
        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 || '')
    },
    handleQueryRepairOptions() {
      return loadWorkflowTypeOptions()
    },
    handleConfirmClick() {
      Promise.all([
        this.$refs.baseForm.validate(),
        this.$refs.form.validate()
      ]).then(() => {
        return createWorkflowRepair(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>
