<template>
  <a-modal
    :title="modalTitle"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <a-form :form="form">

      <a-form-item v-show="false" >
        <a-input v-decorator="['id']" type="hidden"/>
      </a-form-item>

      <a-form-item
        label="维修单id"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
        v-show="false"
      >
        <a-input
          v-decorator="['repairId', {rules: [{required: true, message: '维修单id不能为空'}]}]" />
      </a-form-item>
      <a-form-item
        label="维修单号"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
      >
        <a-input
          disabled
          v-decorator="['repairNo', {rules: [{required: true, message: '维修单号不能为空'}]}]" />
      </a-form-item>
      <a-form-item
        label="费用金额"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
      >
        <a-input-number
          style="width: 100%"
          :min="0"
          :step="0.01"
          :formatter="BaseTool.Amount.formatter"
          :parser="BaseTool.Amount.parser"
          v-decorator="['fee', {rules: [{required: true, message: '费用金额不能为空'}]}]" />
      </a-form-item>
      <a-form-item
        label="费用类别"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
      >
        <a-select v-decorator="['type', {rules: [{required: true, message: '费用类别不能为空'}]}]" placeholder="请选择">
          <a-select-option
            v-for="(label,value) in typeMap"
            :key="value"
            :label="label"
            :value="parseInt(value)">{{ label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="费用原因"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
      >
        <a-textarea
          v-decorator="['reason']" />
      </a-form-item>
      <a-form-item
        label="费用描述"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
      >
        <a-textarea
          v-decorator="['descripition']" />
      </a-form-item>
      <a-form-item
        label="备注"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
      >
        <a-textarea
          v-decorator="['remark']" />
      </a-form-item>
      <a-form-item
        label="图片"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
      >
        <a-upload
          :action="uploadUrl"
          :multiple="true"
          list-type="picture"
          :file-list="defaultImageList"
          @change="handleImageFileChange"
          accept="image/*"
          :headers="headers"
        >
          <a-button> <a-icon type="upload" /> 上传图片 </a-button>
        </a-upload>
      </a-form-item>
      <a-form-item
        label="附件"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
      >
        <a-upload
          :action="uploadUrl"
          :multiple="true"
          :file-list="defaultFileList"
          @change="handleFileChange"
          :headers="headers"
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>
      </a-form-item>
    </a-form>
    <template slot="footer">
      <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
    </template>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { addRepairFee, updateRepairFee } from '@/api/repair/fee'
import { uploadUrl } from '@/api/upms/file'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  name: 'BaseRepairFee',
  data () {
    return {
      confirmLoading: false,
      modalTitle: null,
      defaultImageList: [],
      imageList: [],
      defaultFileList: [],
      fileList: [],
      uploadUrl: uploadUrl,
      headers: {
        Authorization: 'Bearer ' + Vue.ls.get(ACCESS_TOKEN)
      },
      form: this.$form.createForm(this),
      visible: false,
      // 下拉框map
      typeMap: {}
    }
  },
  props: {
  },
  created () {
    // 下拉框map
    this.typeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REPAIR_FEE_TYPE)
  },
  methods: {
    base (record, repairForm = {}) {
      this.visible = true
      // 如果是空标识添加
      const { form: { setFieldsValue } } = this
      if (this.BaseTool.Object.isBlank(record)) {
        this.$nextTick(() => {
          setFieldsValue({
            'repairId': repairForm.id,
            'repairNo': repairForm.outNo
          })
        })
        this.imageList = []
        this.fileList = []
        this.defaultImageList = []
        this.defaultFileList = []
        this.modalTitle = '添加'
        return
      }
      this.imageList = record.imageList
      this.fileList = record.fileList
      this.defaultImageList = this.BaseTool.UPLOAD.transImg(this.imageList)
      this.defaultFileList = this.BaseTool.UPLOAD.transImg(this.fileList)
      this.modalTitle = '编辑'
      // 日期处理
      this.$nextTick(() => {
        setFieldsValue(Object.assign(pick(record, [
          'id',
          'repairId',
          'repairNo',
          'fee',
          'type',
          'reason',
          'descripition',
          'remark'
        ])))
      })
    },
    save () {
      const { form: { validateFieldsAndScroll } } = this
      this.confirmLoading = true
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          this.confirmLoading = false
          return
        }
        // 上传文件
        values.imageList = this.imageList
        values.fileList = this.fileList
        // 日期处理
        if (this.BaseTool.String.isBlank(values.id)) {
          addRepairFee(values)
            .then(() => {
              this.handleCancel(values)
            }).catch(() => {
              this.confirmLoading = false
            })
        } else {
          updateRepairFee(values)
            .then(() => {
              this.handleCancel(values)
            }).catch(() => {
              this.confirmLoading = false
            })
        }
      })
    },
    handleImageFileChange (info) {
      this.defaultImageList = info.fileList
      this.imageList = this.setFileList(info, 18)
    },
    handleFileChange (info) {
      this.defaultFileList = info.fileList
      this.fileList = this.setFileList(info, 18)
    },
    setFileList (info, type) {
      const file = info.file
      const fileList = info.fileList
      if (file.status === 'done') {
        return this.BaseTool.UPLOAD.getUploadFileDTO(fileList, type)
      } else if (file.status === 'removed') {
        return this.BaseTool.UPLOAD.getUploadFileDTO(fileList, type)
      } else if (file.status === 'error') {
        this.$message.error('上传失败')
        return []
      }
    },
    handleCancel (values) {
      this.visible = false
      this.confirmLoading = false
      this.form.resetFields()
      if (this.BaseTool.Object.isNotBlank(values)) {
        this.$emit('ok', values)
      }
    }

  }
}
</script>
