<template>
    <div>
          <el-form ref="form" :model="formData" label-position="right" label-width="110px" inline :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="拣货任务ID：" class="form-item">
                                      <el-input v-model="formData.allocId" disabled></el-input>
                                    </el-form-item>
                                    <el-form-item label="拣货波次单号：" class="form-item">
                                      <el-input v-model="formData.pkNo" disabled></el-input>
                                    </el-form-item>
                                    <el-form-item label="订单波次单号：" class="form-item">
                                      <el-input v-model="formData.waveNo" disabled></el-input>
                                    </el-form-item>
                                    <el-form-item label="出库单号：" class="form-item">
                                      <el-input v-model="formData.soNo" disabled></el-input>
                                    </el-form-item>
                                    <el-form-item label="出库单行号：" class="form-item">
                                      <el-input v-model="formData.asnLineNo" disabled></el-input>
                                    </el-form-item>
                                    <el-form-item label="状态：" class="form-item">
                                      <el-input disabled v-model="$utils.keyMatcher(formData.status, $keys.stockOut.status).name"></el-input>
                                    </el-form-item>
                                    <el-form-item label="货主：" class="form-item">
                                      <el-input disabled v-model="formData.ownerName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="商品编码：" class="form-item">
                                      <el-input disabled v-model="formData.skuCode"></el-input>
                                    </el-form-item>
                                    <el-form-item label="商品名称：" class="form-item">
                                      <el-input disabled v-model="formData.skuName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="批次号：" class="form-item">
                                      <el-input disabled v-model="formData.lotNum"></el-input>
                                    </el-form-item>
                                    <el-form-item label="源库位：" class="form-item">
                                      <el-input disabled v-model="formData.locCode"></el-input>
                                    </el-form-item>
                                    <el-form-item label="源跟踪号：" class="form-item">
                                      <el-input disabled v-model="formData.traceId"></el-input>
                                    </el-form-item>
                                    <el-form-item label="包装规格：" class="form-item">
                                      <el-input v-model="formData.packDesc"></el-input>
                                    </el-form-item>
                                    <el-form-item label="包装单位：" class="form-item">
                                      <!--<el-input v-model="formData.uom"></el-input>-->
                                      <PublicQuery title="包装单位" single  baseUrl="/oub_web/oubweb" cfgKey="oubWmsUom"  :textField.sync="formData.uomDesc">
                                      </PublicQuery>
                                    </el-form-item>
                                    <el-form-item label="拣货数：" class="form-item">
                                      <el-input v-model="formData.qtyPkUom"></el-input>
                                    </el-form-item>
                                    <el-form-item label="拣货数EA：" class="form-item">
                                      <el-input disabled v-model="formData.qtyPkEa"></el-input>
                                    </el-form-item>
                                    <el-form-item label="拣货重量：" class="form-item">
                                      <el-input disabled v-model="formData.pkWeight"></el-input>
                                    </el-form-item>
                                    <el-form-item label="目标库位：" class="form-item">
                                      <PublicQuery
                                        title="目标库位"
                                        baseUrl="/oub_web/oubweb"
                                        cfgKey="oubWmsLoc"
                                        :valueField.sync="formData.toLoc">
                                      </PublicQuery>
                                      <!--<el-input v-model="formData.toLoc"></el-input>-->
                                    </el-form-item>
                                    <el-form-item label="目标跟踪号：" class="form-item">
                                      <el-input v-model="formData.toId"></el-input>
                                    </el-form-item>
                                    <el-form-item label="复核状态：" class="form-item">
                                      <el-input disabled v-model="$utils.keyMatcher(formData.checkStatus, $keys.stockOut.checkStatus).name"></el-input>
                                    </el-form-item>
                                    <el-form-item label="拣货人：" class="form-item">
                                      <PublicQuery
                                        title="拣货人"
                                        baseUrl="/oub_web/oubweb"
                                        cfgKey="oubWmsOperator"
                                        :textField.sync="formData.pickOpName">
                                      </PublicQuery>
                                      <!--<el-input v-model="formData.pickOpName"></el-input>-->
                                    </el-form-item>
                                    <el-form-item label="拣货时间：" class="form-item">
                                      <el-date-picker
                                        v-model="formData.pickTime"
                                        type="datetime"
                                        format="yyyy-MM-dd hh:mm"
                                        placeholder="选择日期时间">
                                      </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="收货人：" class="form-item">
                                      <el-input disabled v-model="formData.consigneeName"></el-input>
                                    </el-form-item>
                                    <div>
                                      <el-button type="primary" @click="doConfirm">确认</el-button>
                                    </div>
                            </el-collapse-item>
                        </el-collapse>
                      </el-col>
                </el-row>
                <el-row>
                  <Car :activeNames="activeNames"  :mode="mode" businessType="SHIPMENT" NoKey="soNo" :No="formData.soNo"  :getUrl="this.$API.stockOut.sendOrder.carList" :saveUrl="this.$API.stockOut.picking.saveCarrier"></Car>
                </el-row>
                <el-row class="row-mrg-t">
                  <el-col :span="24">
                    <el-collapse v-model="activeNames" >
                      <el-collapse-item title="操作信息" name="5">
                        <div class="operation-info">
                          <span>创建人登录名(姓名)：{{formData.creatorLoginName}}({{formData.creatorName}})</span>
                          <span>创建时间：{{formData.createTime}}</span>
                          <span>修改人登录名(姓名)：{{formData.modifierLoginName}}({{formData.modifierName}})</span>
                          <span>修改时间：{{formData.modifyTime}}</span>
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                  </el-col>
                </el-row>
            </el-form>
    </div>
</template>
<script>
import { time } from 'apec-fe-utils'
export default {
  created () {
    this.mode = this.$route.params.mode
    this.formData = this.$route.params.data
  },
  data () {
    return {
      needRefresh: false, // 是否需要父路由刷新
      mode: '', // 模式
      activeNames: ['1', '2', '3', '4', '5'],
      formData: {},
    }
  },
  watch: {
    'formData.qtyPkUom' (val) {
      this.formData.qtyPkEa = val
    }
  },
  methods: {

    // 确认
    doConfirm () {
      const url = this.$API.stockOut.picking.getPicking
      const param = { taskPkEntitys: JSON.stringify([{ ...this.formData }]) }
      this.$confirm(`是否执行确认操作？`, `确认`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$https.post(url, param).then(res => {
          this.needRefresh = true
          this.$router.go(-1)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: `已取消`
        })
      })
    }
  },
  beforeRouteLeave (to, from, next) {
    this.needRefresh && (to.meta.needRefresh = true)
    next()
  }
}
</script>
 <style lang="scss" scoped>
    .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;
    }
    .form-item{
      width: 380px;
    }
</style>
