<template>
  <div class="common">
    <div class="heads">
      <p-button type="link" @click="goUrl"><p-icon type="arrow-left" /> </p-button>
      <span>损溢管理编辑</span>
      <p-button type="primary" style="float: right" @click="saveClick">保存</p-button>
    </div>
    <div class="contents">
      <div class="gridFroms">
        <p class="p1">商品信息</p>
        <p-grid-form :span="8" ref="forms" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }" :items="items" />
      </div>
      <div class="gridFroms">
        <p class="p1">库存信息</p>
        <p-grid-form :span="8" ref="forms1" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }" :items="items1" />
      </div>
      <div class="foot">
        <div class="gridFroms1 bg1">
          <p class="p2">盘点前</p>
          <div class="borderForm">
            <p-grid-form :span="8" ref="forms2" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }" :items="items2" />
          </div>
        </div>
        <div class="gridFroms1">
          <p class="p2">
            盘点后
            <!-- <span class="span1"
              ><p-checkbox-group v-model="value" name="checkboxgroup" :options="plainOptions" @change="onChange"
            /></span> -->
          </p>
          <div class="borderForm">
            <p-grid-form :span="8" ref="forms3" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }" :items="items3" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import API from '../../api/default.js'
import { adjustAdd } from '../../api/api.js'

const items = function(that) {
  return [
    // form 表单
    {
      type: 'input',
      name: 'cargoOwnerCode',
      label: '货主编号',
      span: 6,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'cargoOwnerName',
      label: '货主名称',
      span: 6,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'itemCode',
      label: '商品编号',
      span: 6,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'itemName',
      label: '商品名称',
      span: 6,
      disabled: true,
      value: ''
    },
    // {
    //   type: 'input',
    //   name: 'condition',
    //   label: '商品大类',
    //   span: 6,
    //   disabled: true,
    //   value: ''
    // },
    // {
    //   type: 'input',
    //   name: 'condition',
    //   label: '商品代码',
    //   span: 6,
    //   disabled: true,
    //   value: ''
    // },
    {
      type: 'input',
      name: 'specification',
      label: '商品规格',
      span: 6,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'uom',
      label: '包装单位',
      span: 6,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'conversionRate',
      label: '包装数量',
      span: 6,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'manufacturerName',
      label: '生产厂家',
      labelCol: {
        span: 4
      },
      wrapperCol: {
        span: 20
      },
      span: 12,
      disabled: true,
      value: ''
    }
  ]
}
const items1 = function(that) {
  return [
    // form 表单
    {
      type: 'input',
      name: 'batchNum',
      label: '批次号',
      span: 6,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'oddCaseQuantity',
      label: '库存整件数',
      span: 6,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'rcvQuantity',
      label: '入库已分配数量',
      span: 6,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'outQuantity',
      label: '出库已分配数量',
      span: 6,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'batchProductionDateShow',
      label: '生产日期',
      span: 6,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'quantity',
      label: '库存总数量',
      span: 6,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'oddPieceQuantity',
      label: '库存零散数',
      span: 6,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'repQuantity',
      label: '补货已分配数量',
      span: 6,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'batchExpiredDateShow',
      label: '有效期至',
      span: 6,
      disabled: true,
      value: ''
    }
  ]
}
const items2 = function(that) {
  return [
    // form 表单
    {
      type: 'input',
      name: 'manufacturerLotNum',
      label: '原批号',
      span: 12,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'batchProductionDateShow',
      label: '生产日期',
      span: 12,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'batchExpiredDateShow',
      label: '有效期至',
      span: 12,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'quantity',
      label: '库存数量',
      span: 12,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'warehouseLocatorCode',
      label: '货位编码',
      span: 12,
      disabled: true,
      value: ''
    }
    // {
    //   type: 'input',
    //   name: 'oddCaseQuantity',
    //   label: '原件数',
    //   span: 12,
    //   disabled: true,
    //   value: ''
    // },
    // {
    //   type: 'input',
    //   name: 'oddPieceQuantity',
    //   label: '零散数',
    //   span: 12,
    //   disabled: true,
    //   value: ''
    // }
  ]
}
const items3 = function(that) {
  return [
    // form 表单
    {
      type: 'search',
      name: 'manufacturerLotNum',
      label: '批号',
      targetClick: true,
      destroyOnClose: true,
      allowClear: false,
      targetValueKey: 'manufacturerLotNum',
      span: 12,
      value: '',
      tableConfig: {
        rowKey: 'manufacturerLotNum',
        rowSelectType: 1,
        hasRowSelectCheck: true,
        remoteBefore: (res, remoteParams) => {
          console.log(remoteParams, 'remoteParamsremoteParamsremoteParamsremoteParams')
          remoteParams.params = {
            ...remoteParams.params,
            cargoOwnerId: that.recordDatas.cargoOwnerId,
            warehouseId: that.recordDatas.warehouseId,
            itemId: that.recordDatas.itemId
          }
          return remoteParams
        },
        columns: [
          { dataIndex: 'manufacturerLotNum', title: '批号', key: 'manufacturerLotNum' },
          { dataIndex: 'batchProductionDateShow', title: '生产日期', key: 'batchProductionDateShow' },
          { dataIndex: 'batchExpiredDateShow', title: '有效期至', key: 'batchExpiredDateShow' }
        ]
      },
      remoteUrl: API.batchPage,
      on: {
        ok(event, value, rowData, form) {
          console.log(arguments)
          form.setFieldsValue({
            batchProductionDateShow: rowData[0].batchProductionDateShow,
            batchExpiredDateShow: rowData[0].batchExpiredDateShow,
            batchIdNew: rowData[0].batchId,
            batchNumNew: rowData[0].batchNum,
            pieceAccountFact: that.recordDatas.quantity
          })
        },
        change(event, value, rowData, form) {
          console.log(arguments, '8888888')
          if (!value) {
            form.setFieldsValue({
              batchExpiredDateShow: '',
              batchProductionDateShow: '',
              batchIdNew: '',
              batchNumNew: ''
            })
          }
        }
      }
    },
    {
      type: 'input',
      name: 'pieceAccountFact',
      label: '实盘数量 ',
      span: 12,
      value: '',
      on: {
        change(e, form) {
          form.setFieldsValue({
            manufacturerLotNum: that.recordDatas.manufacturerLotNum,
            batchProductionDateShow: that.recordDatas.batchProductionDateShow,
            batchExpiredDateShow: that.recordDatas.batchExpiredDateShow,
            batchExpiredDate: that.recordDatas.batchExpiredDate,
            batchProductionDate: that.recordDatas.batchProductionDate
          })
        }
      }
    },
    {
      type: 'input',
      name: 'batchIdNew',
      label: '新批次ID',
      span: 12,
      hidden: true,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'batchNumNew',
      label: '新批次号',
      span: 12,
      hidden: true,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'batchProductionDateShow',
      label: '生产日期',
      span: 12,
      disabled: true,
      value: ''
    },
    {
      type: 'input',
      name: 'batchExpiredDateShow',
      label: '有效期至',
      span: 12,
      disabled: true,
      value: ''
    }
  ]
}
export default {
  name: 'Collection',
  data() {
    return {
      dataSource: [],
      items: items(this),
      items1: items1(this),
      items2: items2(this),
      items3: items3(this),
      recordDatas: {},
      dates: 0,
      value: [],
      plainOptions: [
        // { label: '数量', value: '数量' },
        { label: '批号', value: '批号' }
      ]
    }
  },
  props: {
    detialRecord: {
      type: Object,
      default: {}
    }
  },
  watch: {
    // 监听
    detialRecord(newVal) {
      console.log(newVal, 'detialRecorddetialRecorddetialRecord')
      this.recordDatas = newVal
    }
  },
  created() {
    this.recordDatas = this.detialRecord
    console.log(this.detialRecord, '33333333333333')
    this.$nextTick(() => {
      this.$refs.forms.form.resetFields()
      this.$refs.forms.form.setFieldsValue({
        cargoOwnerCode: this.recordDatas.cargoOwnerCode,
        cargoOwnerName: this.recordDatas.cargoOwnerName,
        itemCode: this.recordDatas.itemCode,
        itemName: this.recordDatas.itemName,
        pieceConversionRate: this.recordDatas.pieceConversionRate,
        uom: this.recordDatas.uom,
        conversionRate: this.recordDatas.conversionRate,
        specification: this.recordDatas.specification,
        manufacturerName: this.recordDatas.manufacturerName
      })
      this.$refs.forms1.form.setFieldsValue({
        batchNum: this.recordDatas.batchNum,
        oddCaseQuantity: this.recordDatas.oddCaseQuantity,
        rcvQuantity: this.recordDatas.rcvQuantity,
        outQuantity: this.recordDatas.outQuantity,
        batchProductionDateShow: this.recordDatas.batchProductionDateShow,
        quantity: this.recordDatas.quantity,
        oddPieceQuantity: this.recordDatas.oddPieceQuantity,
        repQuantity: this.recordDatas.repQuantity,
        batchExpiredDateShow: this.recordDatas.batchExpiredDateShow
      })
      this.$refs.forms2.form.setFieldsValue({
        manufacturerLotNum: this.recordDatas.manufacturerLotNum,
        batchProductionDateShow: this.recordDatas.batchProductionDateShow,
        batchExpiredDateShow: this.recordDatas.batchExpiredDateShow,
        quantity: this.recordDatas.quantity,
        warehouseLocatorCode: this.recordDatas.warehouseLocatorCode
      })
      this.$refs.forms3.form.setFieldsValue({
        manufacturerLotNum: this.recordDatas.manufacturerLotNum,
        batchProductionDateShow: this.recordDatas.batchProductionDateShow,
        batchExpiredDateShow: this.recordDatas.batchExpiredDateShow,
        pieceAccountFact: this.recordDatas.quantity,
        warehouseLocatorCode: this.recordDatas.warehouseLocatorCode
      })
    })
  },
  methods: {
    goUrl() {
      // 返回
      this.$emit('requestUrl', false)
      console.log('返回')
    },
    onChange(val) {
      console.log(val, 'valvalvalvalval')
      if (val && val[0] == '批号') {
        this.changeStatus = true
        this.$refs.forms3.form.enableItem()
      } else {
        this.changeStatus = false
        this.$refs.forms3.form.disableItem()
      }
      // 勾选
    },
    saveClick() {
      let nowData = new Date()
      console.log(nowData.getTime(), 'nowData.getTime()nowData.getTime()nowData.getTime()')
      if (nowData.getTime() - this.dates > 3000) {
        this.debounce()
      }
      this.dates = new Date().getTime()
    },
    debounce() {
      let values = this.$refs.forms3.form.getFieldsValue()
      let type = 0 // 0-批号调整，1-数量调整
      if (!values.manufacturerLotNum) return this.$message.warn('请输入批号')
      if (values.manufacturerLotNum == this.recordDatas.manufacturerLotNum) {
        type = 1
      }
      let params = {
        adjustType: '1',
        type: type,
        batchIdNew: values.batchIdNew,
        batchNumNew: values.batchNumNew,
        batchExpiredDate: this.recordDatas.batchExpiredDate,
        batchId: this.recordDatas.batchId,
        batchNum: this.recordDatas.batchNum,
        cargoOwnerId: this.recordDatas.cargoOwnerId,
        conversionRate: this.recordDatas.conversionRate,
        dcId: this.recordDatas.dcId,
        itemId: this.recordDatas.itemId,
        manufacturerLotNum: values.manufacturerLotNum,
        manufacturerLotNumPre: this.recordDatas.manufacturerLotNum,
        pieceAccount: this.recordDatas.quantity,
        quantity: values.pieceAccountFact - this.recordDatas.quantity,
        pieceAccountFact: values.pieceAccountFact,
        productionDate: this.recordDatas.batchProductionDate,
        stockStatus: this.recordDatas.status,
        uom: this.recordDatas.uom,
        warehouseId: this.recordDatas.warehouseId,
        whLocatorId: this.recordDatas.warehouseLocatorId
      }
      adjustAdd(params).then(res => {
        if (res.success) {
          console.log(res)
          this.$emit('requestUrl', false)
          this.$message.success('保存成功!')
        } else {
          this.$exception(res)
        }
      })
    },
    adjustUpdate() {}
  }
}
</script>

<style lang="less" scoped>
.p1 {
  margin-bottom: 8px;
}
.p2 {
  margin-bottom: 12px;
  padding-left: 20px;
}
.span1 {
  float: right;
}
.bg1 {
  background: #fcfcfc;
}
.heads {
  padding: 12px 20px 12px 10px;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
}
.contents {
  // padding: 0 20px 20px 20px;
  padding-bottom: 20px;
  background: #fff;
}
.gridFroms {
  padding: 12px 20px 15px 23px;
  border-bottom: 1px solid #f0f2f5;
}
.foot {
  padding: 20px 20px 37px 23px;
  display: flex;
  justify-content: space-around;
}
.borderForm {
  padding: 15px 20px 15px 0;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
}
.gridFroms1 {
  width: 49%;
}
</style>
