<template>
    <div>
            <el-form ref="form" :model="formData" :rules="rules" inline  label-position="top" :disabled="mode==='detail'">
                <el-row :gutter="40">
                    <el-col :span="24">
                        <el-collapse v-model="activeNames" >
                            <el-collapse-item title="公共信息" name="1">
                                    <el-form-item label="货主" prop="ownerCode">
                                       <PublicQuery
                                        title="货主"
                                        :disabled="mode==='edit'"
                                        single
                                        :rowData.sync="ownerData"
                                        cfgKey="bdWmsCustomer"
                                        baseUrl="/bd_web/bdweb"
                                        :valueField.sync="formData.ownerCode"
                                        :textField.sync="formData.ownerName"
                                      ></PublicQuery>
                                    </el-form-item>
                                    <el-form-item label="商品编码" prop="skuCode">
                                        <el-input v-model="formData.skuCode"  :disabled="mode==='edit'"></el-input>
                                    </el-form-item>
                                    <el-form-item label="商品名称" prop="skuName">
                                        <el-input v-model="formData.skuName" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="包装规格" prop="packCode">
                                       <PublicQuery
                                        title="包装规格"
                                        single
                                        :rowData.sync="packData"
                                        cfgKey="bdWmsPackage"
                                        baseUrl="/bd_web/bdweb"
                                        :valueField.sync="formData.packCode"
                                        :textField.sync="formData.cdpaFormat"
                                      ></PublicQuery>
                                    </el-form-item>
                                    <el-form-item label="保质期" prop="shelfLife">
                                        <el-input v-model="formData.shelfLife" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="毛重" prop="grossWeight">
                                        <el-input v-model="formData.grossWeight" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="净重" prop="netWeight">
                                        <el-input v-model="formData.netWeight" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="单价" prop="price">
                                        <el-input v-model="formData.price" ></el-input>
                                    </el-form-item>
                            </el-collapse-item>
                        </el-collapse>
                      </el-col>
                </el-row>
                <el-row :gutter="40" class="row-mrg-t">
                    <el-col :span="24">
                        <el-collapse  v-model="activeNames" >
                            <el-collapse-item title="规则控制信息" name="3">
                                    <el-form-item label="上架库位指定规则" prop="reserveCode">
                                       <el-select v-model="formData.reserveCode">
                                          <el-option label="人工指定库位" value="MAN"></el-option>
                                          <el-option label="收货前计算库位-一步收货" value="B_RCV_ONE"></el-option>
                                          <el-option label="收货前计算库位-两步收货" value="B_RCV_TWO"></el-option>
                                          <el-option label="收货时计算库位" value="RCV"></el-option>
                                          <el-option label="上架时计算库位" value="PA"></el-option>
                                      </el-select>
                                    </el-form-item>
                                    <el-form-item label="批次属性" prop="lotCode">
                                       <PublicQuery
                                        title="批次属性"
                                        single
                                        :rowData.sync="lotData"
                                        cfgKey="bdWmsLot"
                                        baseUrl="/bd_web/bdweb"
                                        :valueField.sync="formData.lotCode"
                                        :textField.sync="formData.lotName"
                                      ></PublicQuery>
                                    </el-form-item>
                                    <el-form-item label="库存周转规则" prop="rotationRule">
                                        <PublicQuery
                                        title="库存周转规则"
                                        single
                                        :rowData.sync="crrhrulenameData"
                                        cfgKey="bdWmsRotationRule"
                                        baseUrl="/bd_web/bdweb"
                                        :valueField.sync="formData.rotationRule"
                                        :textField.sync="formData.rotationRule"
                                      ></PublicQuery>
                                    </el-form-item>
                                    <el-form-item label="分配规则" prop="allocRule">
                                        <PublicQuery
                                        title="分配规则"
                                        single
                                        :rowData.sync="crahrulenameData"
                                        cfgKey="bdWmsAllocRule"
                                        baseUrl="/bd_web/bdweb"
                                        :valueField.sync="formData.allocRule"
                                        :textField.sync="formData.allocRule"
                                      ></PublicQuery>
                                    </el-form-item>
                                    <el-form-item label="是否质检管理" prop="isQc">
                                       <el-checkbox v-model="formData.isQc" true-label="Y" false-label="N"></el-checkbox>
                                    </el-form-item>
                                   <el-form-item label="质检阶段" prop="qcPhase" :rules="formData.isQc==='N'?[]:rules.qcPhase">
                                       <el-select v-model="formData.qcPhase" :disabled="formData.isQc==='N'" >
                                          <el-option label="收货前" value="RCV"></el-option>
                                          <el-option label="收货后上架前" value="PA"></el-option>
                                      </el-select>
                                    </el-form-item>
                                    <el-form-item label="质检规则" prop="qcRule" :rules="formData.isQc==='N'?[]:rules.qcRule">
                                        <PublicQuery
                                        title="质检规则"
                                        :disabled="formData.isQc==='N'"
                                        single
                                        :rowData.sync="qcRuleData"
                                        cfgKey="bdWmsQcRule"
                                        baseUrl="/bd_web/bdweb"
                                        :valueField.sync="formData.qcRule"
                                        :textField.sync="formData.qcRule"
                                      ></PublicQuery>
                                    </el-form-item>
                                    <el-form-item label="质检项" prop="itemGroupCode" :rules="formData.isQc==='N'?[]:rules.itemGroupCode">
                                        <PublicQuery
                                        title="质检项"
                                        :disabled="formData.isQc==='N'"
                                        single
                                        :rowData.sync="itemGrouprData"
                                        cfgKey="bdWmsQcItem"
                                        baseUrl="/bd_web/bdweb"
                                        :valueField.sync="formData.itemGroupCode"
                                        :textField.sync="formData.itemGroupCode"
                                      ></PublicQuery>
                                    </el-form-item>
                            </el-collapse-item>
                        </el-collapse>
                    </el-col>
                </el-row>
                <el-row :gutter="40" class="row-mrg-t">
                    <el-col :span="24">
                        <el-collapse  v-model="activeNames" >
                            <el-collapse-item title="商品控制信息" name="3">
                                    <el-form-item label="缺省收货单位" prop="rcvUom">
                                       <PublicQuery
                                        title="缺省收货单位"
                                        single
                                        :rowData.sync="rcvUomData"
                                        cfgKey="bdWmsUom"
                                        baseUrl="/bd_web/bdweb"
                                        :valueField.sync="formData.rcvUom"
                                        :textField.sync="formData.receivingUnitDesc"
                                        :before="controlInfoBefore"
                                      ></PublicQuery>
                                    </el-form-item>
                                    <el-form-item label="缺省发货单位" prop="shipUom">
                                       <PublicQuery
                                        title="缺省发货单位"
                                        single
                                        :rowData.sync="shipUomData"
                                        cfgKey="bdWmsUom"
                                        baseUrl="/bd_web/bdweb"
                                        :valueField.sync="formData.shipUom"
                                        :textField.sync="formData.shipmentUnitDesc"
                                        :before="controlInfoBefore"
                                       ></PublicQuery>
                                    </el-form-item>
                                    <el-form-item label="缺省打印单位" prop="printUom">
                                       <PublicQuery
                                        title="缺省打印单位"
                                        single
                                        :rowData.sync="printUomData"
                                        cfgKey="bdWmsUom"
                                        baseUrl="/bd_web/bdweb"
                                        :valueField.sync="formData.printUom"
                                        :textField.sync="formData.printUnitDesc"
                                        :before="controlInfoBefore"
                                       ></PublicQuery>
                                    </el-form-item>
                                    <el-form-item label="商品重量形态" prop="formatCode">
                                       <el-select v-model="formData.formatCode">
                                          <el-option label="标品" value="STANDARD"></el-option>
                                          <el-option label="非标品-平均重" value="NOT_STANDARD_AVGWEIGHT"></el-option>
                                          <el-option label="非标品-称重" value="NON_STANDARD_WEIGHT"></el-option>
                                      </el-select>
                                    </el-form-item>
                                    <el-form-item label="入库计量方式"  prop="asnMeasType">
                                      <el-select v-model="formData.asnMeasType" :disabled="formData.formatCode==='STANDARD'">
                                        <el-option value="PIECE" label="按件"></el-option>
                                        <el-option value="WEIGHT" label="按重量"></el-option>
                                      </el-select>
                                    </el-form-item>
                                    <el-form-item label="出库计量方式"  prop="soMeasType">
                                      <el-select v-model="formData.soMeasType" :disabled="formData.formatCode==='STANDARD'">
                                        <el-option value="PIECE" label="按件"></el-option>
                                        <el-option value="WEIGHT" label="按重量"></el-option>
                                      </el-select>
                                    </el-form-item>
                            </el-collapse-item>
                        </el-collapse>
                    </el-col>
                </el-row>
                <el-row class="row-mrg-t">
                    <el-col :span="24">
                        <el-collapse v-model="activeNames" >
                            <el-collapse-item title="商品拣货位" name="6">
                                <el-row>
                                    <el-button v-auth="50300030101" type="primary" @click="handleAddGoods">添加</el-button>
                                    <el-button v-auth="50300030101" type="primary" @click="handleDelGoods">删除</el-button>
                                </el-row>
                                <el-row>
                                    <el-table
                                    :data='goodsList'
                                    @select="handleSelect"
                                    @selection-change='handleSelectChange'>
                                        <table-column type="selection" fixed align="center"></table-column>
                                        <table-column
                                            label="库位拣货类型">
                                            <template slot-scope="scope">
                                              {{ $utils.keyMatcher(scope.row.locPkType, $keys.warehouseBasic.locPkType).name }}
                                            </template>
                                        </table-column>
                                        <table-column
                                            label="商品拣货位类型">
                                            <template slot-scope="scope">
                                              {{ $utils.keyMatcher(scope.row.skuLocType, $keys.warehouseBasic.skuLocType).name }}
                                            </template>
                                        </table-column>
                                        <table-column
                                            label="固定拣货位"
                                            prop="locCode">
                                        </table-column>
                                        <table-column
                                            label="动态拣货位"
                                            prop="zoneName">
                                        </table-column>
                                        <table-column
                                            label="动态拣货位数量"
                                            prop="qtyLoc">
                                        </table-column>
                                        <table-column
                                            label="库存上限"
                                            prop="maxLimit">
                                        </table-column>
                                        <table-column
                                            label="库存下限"
                                            prop="minLimit">
                                        </table-column>
                                        <table-column
                                            label="最小补货数量"
                                            prop="minRp">
                                        </table-column>
                                        <table-column
                                            label="最小补货单位"
                                            prop="cdprDesc">
                                        </table-column>
                                        <table-column
                                            label="是否补被占用数">
                                            <template slot-scope="scope">
                                              {{ $utils.keyMatcher(scope.row.isRpAlloc, $keys.warehouseBasic.isRpAlloc).name }}
                                            </template>
                                        </table-column>
                                        <table-column
                                            label="是否超量分配">
                                            <template slot-scope="scope">
                                              {{ $utils.keyMatcher(scope.row.isOverAlloc, $keys.warehouseBasic.isOverAlloc).name }}
                                            </template>
                                        </table-column>
                                        <table-column
                                            label="是否超量补货">
                                            <template slot-scope="scope">
                                              {{ $utils.keyMatcher(scope.row.isOverRp, $keys.warehouseBasic.isOverRp).name }}
                                            </template>
                                        </table-column>
                                        <table-column label="操作" width="100" fixed="right" v-if="mode!=='detail'">
                                            <template slot-scope="scope">
                                              <el-tooltip content="编辑" placement="top">
                                                <el-button
                                                    size="mini"
                                                    type="primary"
                                                    icon="el-icon-edit"
                                                    plain
                                                    circle
                                                    @click="handleGoodsEdit(scope.$index, scope.row)"></el-button>
                                              </el-tooltip>
                                              <el-tooltip content="删除" placement="top">
                                                <el-button
                                                  size="mini"
                                                  type="danger"
                                                  icon="el-icon-delete"
                                                  plain
                                                  circle
                                                  @click="handleDelGoodsOne(scope.$index, scope.row)"></el-button>
                                              </el-tooltip>
                                            </template>
                                        </table-column>
                                    </el-table>
                                </el-row>
                            </el-collapse-item>
                        </el-collapse>
                    </el-col>
                </el-row>
                <el-row :gutter="40" class="row-mrg-t">
                    <el-col :span="24">
                        <el-collapse  v-model="activeNames" >
                            <el-collapse-item title="温湿度属性" name="5">
                                    <el-form-item label="是否温控" prop="isCold">
                                      <el-checkbox v-model="formData.isCold" true-label="Y" false-label="N" ></el-checkbox>
                                    </el-form-item>
                                    <el-form-item label="最低温度" prop="minTemp">
                                      <el-input v-model="formData.minTemp" :disabled="formData.isCold==='N'"></el-input>
                                    </el-form-item>
                                    <el-form-item label="最高温度" prop="maxTemp">
                                       <el-input v-model="formData.maxTemp" :disabled="formData.isCold==='N'"></el-input>
                                    </el-form-item>
                                    <el-form-item label="商品温层" prop="tempLevel">
                                       <el-select v-model="formData.tempLevel">
                                          <el-option label="恒温" value="TT"></el-option>
                                          <el-option label="冷藏" value="RT"></el-option>
                                          <el-option label="冷冻" value="FT"></el-option>
                                          <el-option label="常温" value="NT"></el-option>
                                      </el-select>
                                    </el-form-item>
                                    <el-form-item label="闪点" prop="flashPoint">
                                      <el-input v-model="formData.flashPoint"></el-input>
                                    </el-form-item>
                                    <el-form-item label="燃点" prop="burningPoint">
                                       <el-input v-model="formData.burningPoint"></el-input>
                                    </el-form-item>
                            </el-collapse-item>
                        </el-collapse>
                    </el-col>
                </el-row>
            </el-form>
             <hr style="background-color:#F5F5F5;height:1px;border:none" v-if="mode==='detail'">
              <div class="row-mrg-t" v-if="mode==='detail'">
                  <div class="operation-info">
                    <span>创建人登录名(姓名)：{{formData.creatorLoginName}}({{formData.creatorNameCn}})</span>
                    <span>创建时间：{{formData.createTime}}</span>
                    <span>修改人登录名(姓名)：{{formData.modifierLoginName}}({{formData.modifierNameCn}})</span>
                    <span>修改时间：{{formData.modifyTime}}</span>
                  </div>
              </div>
            <div class="row-mrg-t" v-if="mode!=='detail'">
              <el-button v-auth="50300030101" type="primary" @click="submitForm">保存</el-button>
              <!-- <el-button v-auth="50300030101" type="primary" @click="$router.back()">取 消</el-button> -->
            </div>

        <goods-form
        :goodsFormVisible="goodsFormVisible"
        :code="this.formData.ownerCode"
        :currentRow="goodsEditRow"
        :rowIndex="rowIndex"
        :editBool="editBool"
        @close="close"
        @editOK="editOK"
        @handleConfirm="handleConfirm"
        @handleConfirmAdd="handleConfirmAdd">
        </goods-form>
    </div>
</template>
<script>
import GoodsForm from './childrenForm/goods-form'
import { time } from 'apec-fe-utils'

export default {
  components: {
    GoodsForm
  },
  created () {
    this.mode = this.$route.params.mode || 'create'
    if (this.mode !== 'create') {
      this.formData = this.$route.params[0]
      this.goodsList = this.$route.params[1]
    }
  },
  data () {
    var checkNumber = (rule, value, callback) => {
      const reg = /^(([1-9][0-9]*)|(([0]\.\d{1,3}|[1-9][0-9]*\.\d{1,3})))$/
      if (value === '') {
        callback(new Error('必填,不能为空！'))
      } else if (!reg.test(value)) {
        callback(new Error('输入数字,不能为0,只能保留3位小数'))
      } else {
        callback()
      }
    }
    return {
      needRefresh: false, // 是否需要父路由刷新
      mode: 'create', // 模式
      activeNames: ['1', '2', '3', '4', '5', '6', '7'],
      goodsList: [],
      ownerData: {}, // 货主
      packData: {}, // 包装规格
      lotData: {}, // 批次属性
      crrhrulenameData: {}, // 库存周转规则
      crahrulenameData: {}, // 分配规则
      qcRuleData: {}, // 质检规则
      itemGrouprData: {}, // 质检项
      rcvUomData: {}, // 缺省收货
      shipUomData: {}, // 缺省发货
      printUomData: {}, // 缺省打印
      goodsEditRow: {},
      rowIndex: '',
      editBool: false,
      goodsFormVisible: false,
      ids: [],
      cacheIds: [],
      formData: {
        isQc: 'N',
        isCold: 'N',
        asnMeasType: 'PIECE',
        soMeasType: 'PIECE',
        formatCode: 'STANDARD'
      },
      rules: {
        ownerCode: [{ required: true, message: '货主编码必填', trigger: 'change' }],
        skuCode: [{ required: true, message: '商品编码必填', trigger: 'change' }],
        skuName: [ { required: true, message: '商品名称必填', trigger: 'change' } ],
        packCode: [{ required: true, message: '包装规格必填', trigger: 'change' }],
        reserveCode: [{ required: true, message: '上架库位指定规则必填', trigger: 'change' }],
        lotCode: [{ required: true, message: '批次属性必填', trigger: 'change' }],
        // rotationRule: [{ required: true, message: '库存周转规则必填', trigger: 'change' }],
        // allocRule: [ { required: true, message: '分配规则必填', trigger: 'change' } ],
        qcPhase: [{ required: true, message: '质检阶段必填', trigger: 'change' }],
        qcRule: [{ required: true, message: '质检规则必填', trigger: 'change' }],
        itemGroupCode: [{ required: true, message: '质检项必填', trigger: 'change' }],
        rcvUom: [{ required: true, message: '缺省收货单位必填', trigger: 'change' }],
        shipUom: [{ required: true, message: '缺省发货单位必填', trigger: 'change' }],
        printUom: [ { required: true, message: '缺省打印单位必填', trigger: 'change' } ],
        formatCode: [{ required: true, message: '商品重量形态必填', trigger: 'change' }],
        grossWeight: [ { required: true, validator: checkNumber, trigger: 'change' } ],
        netWeight: [{ required: true, validator: checkNumber, trigger: 'change' }],
      },

    }
  },
  props: {

  },
  mounted () {
  },
  methods: {

    // 打开商品弹窗
    handleAddGoods () {
      if (!this.formData.ownerCode) {
        this.$message.warning('货主编码不能为空')
        return
      }
      this.goodsEditRow = {}
      this.goodsFormVisible = true
      this.editBool = false
    },
    close () {
      this.goodsFormVisible = !this.goodsFormVisible
    },

    // 商品勾选checkbox
    handleSelect (selection, row) {
      row.isChecked = !row.isChecked
    },
    // 商品checkbox勾选,存储id
    handleSelectChange (selection) {
      this.ids = selection.map(item => {
        return item.jobId
      })
      console.log('ids', this.ids)
    },

    // 商品信息编辑
    handleGoodsEdit (index, row) {
      let data = Object.assign({ isChecked: 'false' }, row)
      this.goodsEditRow = data
      this.rowIndex = index
      this.goodsFormVisible = true
      this.editBool = true
    },

    // 商品信息保存成功
    editOK (row, index) {
      this.$set(this.goodsList, index, row)
      this.goodsFormVisible = false
      this.editBool = false
    },

    // 商品信息删除多行
    handleDelGoods () {
      this.cacheIds = this.ids
      this.goodsList = this.goodsList.filter((item, index) => {
        if (!item.isChecked) return item
      })
      console.log(this.cacheIds)
    },

    // 删除商品单行
    handleDelGoodsOne (index, row) {
      this.cacheIds.push(row.jobId)
      console.log(this.cacheIds)
      this.goodsList.splice(index, 1)
    },

    // 确认
    handleConfirm (list) {
      this.goodsList.push(list)
      this.goodsFormVisible = false
    },

    // 确认并添加
    handleConfirmAdd (list) {
      this.goodsList.push(list)
    },

    // 商品控制信息中的前置操作
    controlInfoBefore () {
      return {
        queryParams: {
          packCode: this.formData.packCode,
        }
      }
    },

    // 提交表单
    submitForm () {
      this.$refs.form.validate((valid) => {
        const url = this.$API.warehouseBasic.libraryGoods.saveSku
        const param = {
          headerData: JSON.stringify(this.formData || []),
          skuLocList: JSON.stringify(this.goodsList || []),
          deleteSkuLocJobIds: JSON.stringify(this.cacheIds)
        }
        if (valid) {
          this.$https.post(url, param).then(res => {
            if (res.success) {
              this.needRefresh = true
              this.$refs.form.resetFields()
              this.$router.back()
              this.$getLotAttrs() // 重新获取全局批次属性
            }
          })
        }
      })
    },

  },
  beforeRouteLeave (to, from, next) {
    this.needRefresh && (to.meta.needRefresh = true)
    next()
  },
  watch: {
    ownerData: {
      handler (item) {
        this.formData.ebcuNameCn = item.ebcuNameCn
      },
      deep: true
    },
    packData: {
      handler (item) {
        this.formData.cdpaFormat = item.cdpaFormat
      },
      deep: true
    },
    lotData: {
      handler (item) {
        this.formData.lotName = item.lotName
      },
      deep: true
    },
    // 库存规则
    crrhrulenameData: {
      handler (item) {
        this.formData.rotationRule = item.ruleCode
        this.formData.crrhrulename = item.ruleName
      },
      deep: true
    },
    // 分配规则
    rotationRule: {
      handler (item) {
        this.formData.allocRule = item.ruleCode
        this.formData.crahrulename = item.ruleName
      },
      deep: true
    },
    // 缺省收货
    rcvUomData: {
      handler (item) {
        this.formData.receivingUnitDesc = item.cdprDesc
        this.formData.rcvUom = item.cdprUnitLevel
      },
      deep: true
    },
    // 缺省发货
    shipUomData: {
      handler (item) {
        this.formData.shipmentUnitDesc = item.cdprDesc
        this.formData.shipUom = item.cdprUnitLevel
      },
      deep: true
    },
    // 缺省打印
    printUomData: {
      handler (item) {
        this.formData.printUnitDesc = item.cdprDesc
        this.formData.printUom = item.cdprUnitLevel
      },
      deep: true
    },
    // 质检规则
    qcRuleData: {
      handler (item) {
        //
      },
      deep: true
    },
    // 质检项
    itemGrouprData: {
      handler (item) {
        //
      },
      deep: true
    }
  }
}
</script>
 <style lang="scss">
    .el-collapse{
        border: 1px solid #ebeef5;
        .el-collapse-item__header{
            padding-left: 10px;
            font-weight: bold;
            background-color: #f5f5f5;
            border-bottom: 1px solid #ebeef5 !important;
        }
        .el-collapse-item__content{
            padding-top:25px;
            padding-left: 15px;
        }
    }
    .row-mrg-t {
        margin-top: 20px;
    }
</style>
