<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.ownerCode}}</span>
              </el-form-item>
              <el-form-item label="货主名称：" class="form-item">
                <span>{{formData.ownerName}}</span>
              </el-form-item>
              <el-form-item label="商品编码：" class="form-item">
                <span>{{formData.skuCode}}</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.qty}}</span>
              </el-form-item>
              <el-form-item label="入库单数：" class="form-item">
                <span>{{formData.asnNum }}</span>
              </el-form-item>
              <el-form-item label="计划收货数：" class="form-item">
                <span>{{formData.qtyPlanEa}}</span>
              </el-form-item>
              <el-form-item label="最早预计到货时间：" class="form-item">
                <span>{{formData.fmEta}}</span>
              </el-form-item>
              <el-form-item label="最晚预计到货时间：" class="form-item">
                <span>{{formData.toEta}}</span>
              </el-form-item>
              <el-form-item label="出库单数：" class="form-item">
                <span>{{formData.soNum}}</span>
              </el-form-item>
              <el-form-item label="计划发货数：" class="form-item">
                <span>{{formData.qtySoEa}}</span>
              </el-form-item>
              <el-form-item label="最早预计发货时间：" class="form-item">
                <span>{{formData.fmEtd}}</span>
              </el-form-item>
              <el-form-item label="最晚预计发货时间：" class="form-item">
                <span>{{formData.toEtd}}</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>
                <span>总行数：{{AsnList.length}}</span>
                <span class="item-num">预收总数：{{sumAsnUom}}</span>
                <span class="item-num">预计总EA数：{{sumAsnUomEa}}</span>
              </el-row>
              <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>
                <span>总行数：{{SonList.length}}</span>
                <span class="item-num">订货总数：{{sumSoUom}}</span>
                <span class="item-num">订货总EA数：{{sumSoUomEa}}</span>
              </el-row>
              <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-form>
    <div class="row-mrg-t">
      <el-button v-auth="50300030101" type="primary" @click="handleCreate">生成越库任务(直接)</el-button>
      <el-button v-auth="50300030101" type="primary" @click="handleMark">标记越库(分拨)</el-button>
      <el-button v-auth="50300030101" type="primary" @click="$router.back()">关闭</el-button>
    </div>
  </div>
</template>
<script>
export default {
  created () {
    this.mode = this.$route.params.mode || 'create'
    if (this.mode === 'edit') {
      this.formData = this.$route.params[0]
      this.AsnList = this.$route.params[1]
      this.SonList = this.$route.params[2]
      this.currentRow = this.$route.params[3]
    }
    this.AsnList.forEach(item => {
      this.sumAsnUom += parseFloat(item.qtyPlanUom)
      this.sumAsnUomEa += parseFloat(item.qtyPlanEa)
    })
    this.SonList.forEach(item => {
      this.sumSoUom += parseFloat(item.qtySoUom)
      this.sumSoUomEa += parseFloat(item.qtySoEa)
    })
  },
  data () {
    return {
      needRefresh: false, // 是否需要父路由刷新
      mode: 'create', // 模式
      activeNames: ['1', '2', '3'],
      formData: {},
      AsnList: [],
      SonList: [],
      asnRows: [],
      sonRows: [],
      currentRow: {},
      sumAsnUom: 0,
      sumAsnUomEa: 0,
      sumSoUom: 0,
      sumSoUomEa: 0
    }
  },
  props: {

  },
  mounted () {
  },
  methods: {
    getData (url, param) {
      return this.$https.post(url, param)
    },
    reList () {
      const headUrl = this.$API.CrossDock.CrossDockTaskGenerateList.getHead
      const asnUrl = this.$API.CrossDock.CrossDockTaskGenerateList.getAsn
      const sonUrl = this.$API.CrossDock.CrossDockTaskGenerateList.getSon
      const param = {
        wmCrossDockEntity: JSON.stringify(this.currentRow),
        wmCrossDockEntityBean: JSON.stringify(this.currentRow),
        queryMoreCondition: JSON.stringify({}) }
      this.$https.all([this.getData(headUrl, param), this.getData(asnUrl, param), this.getData(sonUrl, param)]).then(res => {
        this.formData = res[0].data
        this.AsnList = res[1].rows
        this.SonList = res[2].rows
      })
    },

    // 生成越库
    handleCreate () {
      if (!this.asnRows.length || !this.sonRows.length) return this.$message.warning('入库记录与出库记录都必须选择')
      const url = this.$API.CrossDock.CrossDockTaskGenerateList.getMarkTask
      const param = {
        asnCrossDock: JSON.stringify(this.asnRows),
        soCrossDock: JSON.stringify(this.sonRows),
      }

      this.$https.post(url, param).then(res => {
        if (res.success) {
          this.reList()
        }
      })
    },
    // 标记越库
    handleMark () {
      const url = this.$API.CrossDock.CrossDockTaskGenerateList.getCreateTaskByInDirect
      const param = {
        asnCrossDock: JSON.stringify(this.asnRows),
        soCrossDock: JSON.stringify(this.sonRows),
      }

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

    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;
}
.item-num {
  display: inline-block;
  margin-left: 20px;
}
</style>
