<template>
  <div>
    <a-form :form="form">
      <row-list :col="1" v-show="false">
        <row-item>
          <a-form-item>
            <a-input v-decorator="['sbId',{initialValue: oilModel.sbId}]" type="hidden"/>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item>
            <a-input v-decorator="['storeId',{initialValue: oilModel.storeId}]" type="hidden"/>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item>
            <a-input v-decorator="['spareStoreId',{initialValue: oilModel.spareStoreId}]" type="hidden"/>
          </a-form-item>
        </row-item>
      </row-list>
      <row-list :col="2">
        <row-item>

          <a-form-item
            label="设备名称"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              disabled
              v-decorator="['sbName', {initialValue: oilModel.sbName}]"/>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="设备编号"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              disabled
              v-decorator="['sbNo', {initialValue: oilModel.sbNo}]"/>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="设备卡片编号"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              disabled
              v-decorator="['sbCardNo', {initialValue: oilModel.sbCardNo}]"/>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="仓库名称"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              disabled
              style="width:60%;margin-right:5px"
              v-decorator="['storeName', {initialValue: oilModel.storeName,rules: [{required: true, message: '仓库不能为空'}]}]" />
            <a-button type="primary" @click="()=> this.$refs.storeSelectModal.base({},{},{filter: 2})">选择仓库</a-button>
          </a-form-item>
        </row-item>

        <row-item>
          <a-form-item
            label="燃油类型"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              disabled
              style="width:60%;margin-right:5px"
              v-decorator="['spareName', {initialValue: oilModel.spareName,rules: [{required: true, message: '燃油类型不能为空'}]}]" />
            <a-button type="primary" @click="handleSpareSelect">选择燃油</a-button>
          </a-form-item>
        </row-item>

        <row-item v-if="false">
          <a-form-item
            label="工程项目"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-select
              v-decorator="['projectQuantityId',
                            {initialValue: oilModel.projectQuantityId,rules: [{required: true, message: '作业名称不能为空'}]}]"
              placeholder="请选择">
              <a-select-option
                v-for="(item,index) in projectQuantityList"
                :key="index"
                :label="item.name"
                :value="item.id">{{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="用途"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-select v-decorator="['reason', {initialValue: oilModel.reason,rules: [{required: true, message: '用途不能为空'}]}]" placeholder="请选择">
              <a-select-option value="施工领用">
                施工领用
              </a-select-option>
              <a-select-option value="办公领用">
                办公领用
              </a-select-option>
              <a-select-option value="维修领用">
                维修领用
              </a-select-option>
              <a-select-option value="其他领用">
                其他领用
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="申请油量"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input-number
              style="width: 80%"
              :min="0.01"
              :step="0.01"
              :formatter="BaseTool.Amount.formatter"
              :parser="BaseTool.Amount.parser"
              v-decorator="['applyOil', {initialValue: oilModel.applyOil||0,rules: [{required: true, message: '申请油量不能为空'}]}]"/>
            <span class="ant-input-group-addon" style="display: inline-block; width: 20%;height: 31px;line-height: 31px;margin-bottom: 6px;">升</span>
          </a-form-item>
        </row-item>

      </row-list>
      <row-list :col="1">
        <row-item>
          <a-form-item
            label="申请说明"
            :labelCol="BaseTool.Constant.labelCol2"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-textarea
              :rows="4"
              v-decorator="['applyRemark',{initialValue: oilModel.applyRemark}]"/>
          </a-form-item>
        </row-item>
      </row-list>
    </a-form>
    <store-select-modal ref="storeSelectModal" @selected="handleStoreSelected"/>
    <spare-store-page-modal ref="spareStorePageModal" :type="'radio'" @selected="handleSpareStoreSelected"/>
  </div>
</template>

<script>
import StoreSelectModal from '@/views/store/store/modules/StoreSelectModal'
import SpareStorePageModal from '@/views/store/sparestore/modules/SpareStorePageModal'
import pick from 'lodash.pick'

export default {
  name: 'FillForm',
  components: {
    StoreSelectModal,
    SpareStorePageModal
  },
  data () {
    return {
      form: this.$form.createForm(this)
    }
  },
  props: {
    oilModel: {
      type: Object,
      default: () => {}
    },
    projectQuantityList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    oilModel (val) {
      this.formSetModel()
    }
  },
  created () {
  },
  methods: {
    handleStoreSelected (record, keys, rows) {
      const [ key ] = keys
      const [ row ] = rows
      const { form: { setFieldsValue } } = this
      // 日期处理
      this.$nextTick(() => {
        setFieldsValue(Object.assign({
          'storeId': key,
          'storeName': row.name,
          'spareName': null,
          'spareStoreId': null
        }))
      })
    },
    handleSpareSelect () {
      const { form: { getFieldValue } } = this
      const storeId = getFieldValue('storeId')
      if (this.BaseTool.String.isBlank(storeId)) {
        this.$message.error('请先选择仓库')
        return
      }
      this.$refs.spareStorePageModal.base({}, { storeId: storeId, num: 0, typeNameLike: '燃油' })
    },
    handleSpareStoreSelected (record, keys, rows) {
      const [ row ] = rows
      const { form: { setFieldsValue } } = this
      // 日期处理
      this.$nextTick(() => {
        setFieldsValue(Object.assign({
          'spareStoreId': row.id,
          'spareName': row.spareName
        }))
      })
    },
    formSetModel () {
      const { form: { setFieldsValue } } = this
      this.$nextTick(() => {
        setFieldsValue(Object.assign(pick(this.oilModel, [
          'id',
          'sbId',
          'sbName',
          'sbNo',
          'sbCardNo',
          'storeId',
          'userId',
          'userName',
          'storeUserId',
          'storeUserName',
          'status',
          'applyOil',
          'realOil',
          'projectQuantityId',
          'spareName',
          'spareStoreId',
          'reason',
          'applyRemark',
          'handleRemark',
          'remark'
        ])))
      })
    }
  }
}
</script>
