<template>
  <p-card title="商品批号调整">
    <div slot="extra">
      <p-button @click="onCancel">取消</p-button>
      <p-button type="primary" class="ml-10" @click="onSave">保存</p-button>
    </div>
    <p-form-model ref="ruleForm" :model="form" :rules="{
        manufacturerLotNumNew: [{ required: true, message: '请输入商品批号', trigger: 'blur' }],
        batchProductionDateNew: [{ required: true, message: '请选择生产日期', trigger: 'blur' }],
        batchProductionShowNew: [{ required: true, message: '请选择显示生产日期', trigger: 'blur' }],
        batchExpiredDateNew: [{ required: true, message: '请选择有效期至', trigger: 'blur' }],
        batchExpiredShowNew: [{ required: true, message: '请选择显示有效期至', trigger: 'blur' }],
        adjustReason: [{ required: true, message: '请输入调整原因', trigger: 'blur' }],
      }" 
      :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
      <a-row style="padding: 12px;">
        <a-col :span="6">
          <p-form-model-item label="商品编号">
            <p-input v-model="form.itemCode" disabled></p-input>
          </p-form-model-item>
        </a-col>
        <a-col :span="6">
          <p-form-model-item label="商品名称">
            <p-input v-model="form.itemName" disabled></p-input>
          </p-form-model-item>
        </a-col>
        <a-col :span="6">
          <p-form-model-item label="包装单位">
            <p-input v-model="form.uom" disabled></p-input>
          </p-form-model-item>
        </a-col>
        <a-col :span="6">
          <p-form-model-item label="规格">
            <p-input v-model="form.specification" disabled></p-input>
          </p-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-col class="title">调整前</a-col>
          <a-row style="padding: 12px;">
            <a-col :span="12">
              <p-form-model-item label="商品批号">
                <p-input v-model="form.manufacturerLotNum" disabled></p-input>
              </p-form-model-item>
            </a-col>
            <a-col :span="12">
              <p-form-model-item label="生产日期">
                <p-input v-model="form.batchProductionDate" disabled></p-input>
              </p-form-model-item>
            </a-col>
            <a-col :span="12">
              <p-form-model-item label="显示生产日期">
                <p-input v-model="form.batchProductionShow" disabled></p-input>
              </p-form-model-item>
            </a-col>
            <a-col :span="12">
              <p-form-model-item label="有效期至">
                <p-input v-model="form.batchExpiredDate" disabled></p-input>
              </p-form-model-item>
            </a-col>
            <a-col :span="12">
              <p-form-model-item label="显示有效期至">
                <p-input v-model="form.batchExpiredShow" disabled></p-input>
              </p-form-model-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12">
          <a-col class="title">调整后</a-col>
          <a-row style="border-left: 1px solid #e8e8e8;padding: 12px;">
            <a-row>
              <a-col :span="12">
                <p-form-model-item prop="manufacturerLotNumNew">
                  <div slot="label" class="label">商品批号</div>
                  <p-input v-model="form.manufacturerLotNumNew" placeholder="请输入商品批号" allowClear></p-input>
                </p-form-model-item>
              </a-col>
              <a-col :span="12">
                <p-form-model-item prop="batchProductionDateNew">
                  <div slot="label" class="label">生产日期</div>
                  <!-- <p-input v-model="form.batchProductionDateNew" placeholder="请选择生产日期" allowClear></p-input> -->
                  <p-date-picker v-model='form.batchProductionDateNew' :showToday='false' style='width: 100%;' valueFormat='YYYY-MM-DD' />
                </p-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <p-form-model-item prop="batchProductionShowNew">
                  <div slot="label" class="label">显示生产日期</div>
                  <!-- <p-input v-model="form.batchProductionShowNew" placeholder="请选择显示生产日期" allowClear></p-input> -->
                  <p-date-picker v-model='form.batchProductionShowNew' :showToday='false' style='width: 100%;' valueFormat='YYYY-MM-DD' />
                </p-form-model-item>
              </a-col>
              <a-col :span="12">
                <p-form-model-item prop="batchExpiredDateNew">
                  <div slot="label" class="label">有效期至</div>
                  <!-- <p-input v-model="form.batchExpiredDateNew" placeholder="请选择有效期至" allowClear></p-input> -->
                  <p-date-picker v-model='form.batchExpiredDateNew' :showToday='false' style='width: 100%;' valueFormat='YYYY-MM-DD' />
                </p-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <p-form-model-item prop="batchExpiredShowNew">
                  <div slot="label" class="label">显示有效期至</div>
                  <!-- <p-input v-model="form.batchExpiredShowNew" placeholder="请选择显示有效期至" allowClear></p-input> -->
                  <p-date-picker v-model='form.batchExpiredShowNew' :showToday='false' style='width: 100%;' valueFormat='YYYY-MM-DD' />
                </p-form-model-item>
              </a-col>
              <a-col :span="12">
                <p-form-model-item prop="adjustReason">
                  <div slot="label" class="label">调整原因</div>
                  <p-input v-model="form.adjustReason" placeholder="请输入调整原因" allowClear></p-input>
                </p-form-model-item>
              </a-col>
            </a-row>
          </a-row>
        </a-col>
      </a-row>
    </p-form-model>
  </p-card>
</template>

<script>
import { saveBatchInfo } from './api'
export default {
  props: {
    detailData: {
      type: Object,
    }
  },
  data() {
    return {
      form:{}
    }
  },
  mounted() {
    this.form = this.detailData
  },
  methods: {
    onCancel() {
      this.form = {}
      this.$emit('close')
    },
    onSave() {
      this.$refs.ruleForm.validate(flag => {
        console.log(flag,'flag');
        if (!flag) return
        saveBatchInfo(this.form).then(res => {
          if (res.success) {
            this.onCancel()
          } else {
            this.$exception(res)
          }
        })
      })
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-card-body{
  padding: 0 !important;
}
.title{
  padding: 12px 18px;
  width: 100%;
  font-size: 14px;
  color: #0b7db4;
  border-bottom: 1px solid #e8e8e8;
}

.label{
  display: inline-block;
  color:#36b8f3;
}
</style>