<template>
  <bi-report-work-form-layout :title="title">
    <slot></slot>
    <template slot="sidebar">
      <ui-form ref="form" :class="{ 'is-viewable': !editable }" :model="formData" :rules="formRules" :editable="editable" label-position="top">
        <ui-form-item label="状态">
          <bi-report-work-status-select
            v-model="formData.examineType"
            :editable="editable"
          ></bi-report-work-status-select>
        </ui-form-item>
        <ui-form-item prop="handlerId" label="处理人">
          <bi-system-user-select
            v-model="formData.handlerId"
            :query-method="handleQueryUserData"
            :editable="editable"
            @select="handleHanderSelect"
          ></bi-system-user-select>
        </ui-form-item>
        <ui-form-item prop="priority" label="优先级">
          <bi-priority-level-select
            v-model="formData.priority"
            :editable="editable"
          ></bi-priority-level-select>
        </ui-form-item>
        <ui-form-item prop="deadline" label="截止日期">
          <ui-date-picker
            size="small"
            :border="false"
            :editable="editable"
            value-format="yyyy-MM-dd"
            v-model="formData.deadline"
            placeholder="请选择"
          ></ui-date-picker>
        </ui-form-item>
        <ui-form-item prop="amountSpent" label="花费金额">
          <ui-spinner
            size="small"
            :border="false"
            :editable="editable"
            :min="0"
            placeholder="请输入"
            v-model="formData.amountSpent"
          ></ui-spinner>
        </ui-form-item>
      </ui-form>
    </template>
  </bi-report-work-form-layout>
</template>
<script>
import { loadHandlerOptions } from '../apis'
import BiReportWorkFormLayout from '../report-work-form-layout/report-work-form-layout'
import BiReportWorkStatusSelect from '../report-work-status-select/report-work-status-select'

export default {
  name: 'WorkbenchFormBase',
  components: {
    BiReportWorkFormLayout,
    BiReportWorkStatusSelect
  },
  props: {
    title: {
      type: String
    },
    data: {
      type: Object
    },
    editable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      loading: false,
      formData: {
        examineType: 1,
        priority: 1,
        handlerId: null,
        handlerName: null,
        handlerUserName: null,
        deadline: undefined,
        amountSpent: undefined
      }
    }
  },
  computed: {
    formRules() {
      return {
        handlerId: [{
          required: true,
          message: '处理人不能为空',
          trigger: 'change'
        }],
        deadline: [{
          required: true,
          message: '截止日期不能为空',
          trigger: 'change'
        }]
      }
    }
  },
  watch: {
    data() {
      this.syncFormData()
    }
  },
  created() {
    this.syncFormData()
  },
  methods: {
    syncFormData() {
      if (this.data) {
        this.formData = JSON.parse(JSON.stringify(this.data))
      }
    },
    handleQueryUserData() {
      return loadHandlerOptions()
    },
    handleHanderSelect({ item }) {
      if (item) {
        this.formData.handlerName = item.name
        this.formData.handleUserName = item.userName
      } else {
        this.formData.handlerName = null
        this.formData.handleUserName = null
      }
    },
    validate() {
      return this.$refs.form.validate()
    },
    getData() {
      return {
        examineType: this.formData.examineType,
        priority: this.formData.priority,
        handlerId: this.formData.handlerId,
        handlerName: this.formData.handlerName,
        handlerUserName: this.formData.handlerUserName,
        deadline: this.formData.deadline,
        amountSpent: this.formData.amountSpent
      }
    }
  }
}
</script>
