<template>
  <div>
    <el-form ref="form" :model="formData" inline label-position="top">
      <el-row :gutter="40">
        <el-col :span="24">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="基础信息" name="1">
              <el-form-item label="越库收货状态：" class="form-item">
                <span>{{formData.status}}</span>
              </el-form-item>
              <el-form-item label="货主编码：" class="form-item">
                <span>{{formData.ownerCode}}</span>
              </el-form-item>
              <el-form-item label="商品名称：" class="form-item">
                <span>{{formData.skuName}}</span>
              </el-form-item>
              <el-form-item label="入库单号：" class="form-item">
                <span>{{formData.asnNo }}</span>
              </el-form-item>
              <el-form-item label="入库单收货行号：" class="form-item">
                <span>{{formData.rcvLineNo}}</span>
              </el-form-item>
              <el-form-item label="入库包装规格：" class="form-item">
                <span>{{formData.asnPackDesc}}</span>
              </el-form-item>
              <el-form-item label="入库包装单位：" class="form-item">
                <span>{{formData.asnUomDesc}}</span>
              </el-form-item>
              <el-form-item label="收货库位" class="form-item">
                <span>{{formData.toLoc}}</span>
              </el-form-item>
              <el-form-item label="越库数：" class="form-item">
                <span>{{formData.qtyPlanUom}}</span>
              </el-form-item>
              <el-form-item label="越库数EA：" class="form-item">
                <span>{{formData.qtyPlanEa}}</span>
              </el-form-item>
              <el-form-item label="收货跟踪号：" class="form-item">
                <span>{{formData.toId}}</span>
              </el-form-item>
              <el-form-item label="码盘跟踪号：" class="form-item">
                <span>{{formData.planId}}</span>
              </el-form-item>
              <el-form-item label="批次号：" class="form-item">
                <span>{{formData.lotNum}}</span>
              </el-form-item>
              <el-form-item label="出库单号：" class="form-item">
                <span>{{formData.soNo}}</span>
              </el-form-item>
              <el-form-item label="出库单行号：" class="form-item">
                <span>{{formData.soLineNo}}</span>
              </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="2">
              <el-row>
                <el-table border :data="AsnList" @selection-change="handleAsn">
                  <table-column type="selection" width="55"></table-column>
                  <table-column label="入库单号" prop="asnNo"></table-column>
                  <table-column label="状态">
                    <template
                      slot-scope="scope"
                    >{{ $utils.keyMatcher(scope.row.status, $keys.stockIn.status).name }}</template>
                  </table-column>
                  <table-column label="入库单类型" prop="asnType">
                    <template
                      slot-scope="scope"
                    >{{ $utils.keyMatcher(scope.row.asnType, $keys.stockIn.asnType).name }}</template>
                  </table-column>
                  <table-column label="行号" prop="lineNo"></table-column>
                  <table-column label="商品" prop="skuName"></table-column>
                  <table-column label="预收数" prop="qtyPlanUom"></table-column>
                  <table-column label="预收数EA" prop="qtyPlanEa"></table-column>
                  <table-column label="包装单位" prop="uomDesc"></table-column>
                  <table-column label="包装规格" prop="packDesc"></table-column>
                </el-table>
              </el-row>
            </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="3">
              <el-row>
                <el-table border :data="SonList" @selection-change="handleSon">
                  <table-column type="selection" width="55"></table-column>
                  <table-column label="出库单号" prop="soNo"></table-column>
                  <table-column label="状态">
                    <template
                      slot-scope="scope"
                    >{{ $utils.keyMatcher(scope.row.status, $keys.stockOut.status).name }}</template>
                  </table-column>
                  <table-column label="出库单类型" prop="soType">
                    <template
                      slot-scope="scope"
                    >{{ $utils.keyMatcher(scope.row.soType, $keys.stockOut.soType).name }}</template>
                  </table-column>
                  <table-column label="行号" prop="lineNo"></table-column>
                  <table-column label="商品" prop="skuName"></table-column>
                  <table-column label="预收数" prop="qtySoUom"></table-column>
                  <table-column label="预收数EA" prop="qtySoEa"></table-column>
                  <table-column label="包装单位" prop="uomDesc"></table-column>
                  <table-column label="包装规格" prop="packDesc"></table-column>
                </el-table>
              </el-row>
            </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="4">
              <el-row>
                <el-table border :data="AllotList">
                  <table-column type="selection" width="55"></table-column>
                  <table-column label="分配ID" prop="allocId"></table-column>
                  <table-column label="出库单号" prop="soNo"></table-column>
                  <table-column label="状态" prop="status">
                    <template
                      slot-scope="scope"
                    >{{ $utils.keyMatcher(scope.row.status, $keys.stockOut.status).name }}</template>
                  </table-column>
                  <table-column label="出库单行号" prop="lineNo"></table-column>
                  <table-column label="货主编码" prop="ownerCode"></table-column>
                  <table-column label="批次号" prop="lotNum"></table-column>
                  <table-column label="库位(源/目标)" prop="loc"></table-column>
                  <table-column label="跟踪号(源/目标)" prop="uomDesc"></table-column>
                  <table-column label="数量" prop="qtyUom"></table-column>
                  <table-column label="数量EA" prop="qtyEa"></table-column>
                </el-table>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
    </el-form>
    <div class="row-mrg-t">
      <el-button v-auth="50800020207" type="primary" @click="handleCreate">执行越库</el-button>
      <el-button
        v-if="formData.cdType==='INDIRECT'"
        v-auth="50800020208"
        type="primary"
        @click="handleCancelCross"
      >取消越库标记(分拨)</el-button>
    </div>
  </div>
</template>
<script>
export default {
  created () {
    this.mode = this.$route.params.mode || 'create'
    if (this.mode === 'edit') {
      this.AsnList = this.$route.params[0]
      this.SonList = this.$route.params[1]
      this.AllotList = this.$route.params[2]
      this.formData = this.$route.params[3]
    }
  },
  data () {
    return {
      needRefresh: false, // 是否需要父路由刷新
      mode: 'create', // 模式
      activeNames: ['1', '2', '3', '4'],
      formData: {},
      AsnList: [],
      SonList: [],
      asnRows: [],
      sonRows: [],
      AllotList: [],
    }
  },
  props: {

  },
  mounted () {
  },
  methods: {

    // 执行越库
    handleCreate () {
      if (!this.asnRows.length || !this.sonRows.length) return this.$message.warning('入库记录与出库记录都必须选择')
      const url = this.$API.CrossDock.CrossDockTaskExcuteList.getCreateCrossDock
      const param = {
        asnDetailRows: JSON.stringify(this.asnRows),
        soDetailRows: JSON.stringify(this.sonRows),
      }

      this.$https.post(url, param).then(res => {
        if (res.success) {
          this.$router.back()
        }
      })
    },
    // 取消越库分拨
    handleCancelCross () {
      const url = this.$API.CrossDock.CrossDockTaskExcuteList.cancelCrossDock
      const param = {
        asnDetailRows: JSON.stringify(this.asnRows),
        soDetailRows: JSON.stringify(this.sonRows),
      }

      this.$https.post(url, param).then(res => {
        if (res.success) {
          this.$router.back()
        }
      })
    },

    handleAsn (selection) {
      this.asnRows = selection
    },
    handleSon (selection) {
      this.sonRows = selection
    }

  },
  beforeRouteLeave (to, from, next) {
    this.needRefresh && (to.meta.needRefresh = true)
    next()
  },
  watch: {
  }
}
</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: 260px;
}
</style>
