<template>
  <div>
    <el-form ref="form" :model="formData" inline label-position="top" :disabled="mode==='detail'">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="关键信息" name="1">
              <el-form-item label="入库单号" prop="asnNo">
                <el-input v-model="formData.asnNo"></el-input>
              </el-form-item>
              <el-form-item label="货主编码" prop="ownerCode">
                <el-input v-model="formData.ownerCode"></el-input>
              </el-form-item>
              <el-form-item label="状态" prop="status">
                <el-select v-model="formData.status">
                  <el-option label="创建" value="00"></el-option>
                  <el-option label="部分收货" value="10"></el-option>
                  <el-option label="完全收货" value="20"></el-option>
                  <el-option label="取消订单" value="90"></el-option>
                  <el-option label="关闭订单" value="99"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="冻结状态" prop="holdStatus">
                <el-select v-model="formData.holdStatus">
                  <el-option label="无冻结" value="00"></el-option>
                  <el-option label="冻结" value="99"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="入库单类型" prop="asnType">
                <el-select v-model="formData.asnType">
                  <el-option label="普通入库" value="PI"></el-option>
                  <el-option label="调拨入库" value="AI"></el-option>
                  <el-option label="退货入库" value="RI"></el-option>
                  <el-option label="换货入库" value="EI"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="货主名称" prop="ebcuNameCn">
                <el-input v-model="formData.ownerName"></el-input>
              </el-form-item>
              <el-form-item label="审核状态" prop="auditStatus">
                <el-select v-model="formData.auditStatus">
                  <el-option label="未审核" value="00"></el-option>
                  <el-option label="不审核" value="90"></el-option>
                  <el-option label="已审核" value="99"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="质检状态" prop="qcStatus">
                <el-select v-model="formData.qcStatus">
                  <el-option label="创建" value="00"></el-option>
                  <el-option label="部分质检" value="10"></el-option>
                  <el-option label="完全质检" value="20"></el-option>
                  <el-option label="关闭订单" value="99"></el-option>
                </el-select>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </el-col>
        <el-col :span="12">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="基本信息" name="2">
              <el-form-item label="物流单号" prop="logisticNo">
                <el-input v-model="formData.logisticNo"></el-input>
              </el-form-item>
              <el-form-item label="优先级别">
                <el-select v-model="formData.priority">
                  <el-option label="最高" value="1"></el-option>
                  <el-option label="普通+" value="2"></el-option>
                  <el-option label="普通" value="3"></el-option>
                  <el-option label="普通-" value="4"></el-option>
                  <el-option label="最低" value="5"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="审核时间" prop="auditTime">
                <el-input v-model="formData.auditTime"></el-input>
              </el-form-item>
              <el-form-item label="调出仓库单号" prop="allocateSoNo">
                <el-input v-model="formData.allocateSoNo"></el-input>
              </el-form-item>
              <el-form-item label="订单时间" prop="orderTime">
                <el-date-picker v-model="formData.orderTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="审核人" prop="auditName">
                <el-input v-model="formData.auditName"></el-input>
              </el-form-item>
              <el-form-item label="是否预约月台" prop="isAppointDock">
                <el-select v-model="formData.isAppointDock">
                  <el-option label="是" value="Y"></el-option>
                  <el-option label="否" value="N"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="供应商名称" prop="supplierName">
                <el-input v-model="formData.supplierName"></el-input>
              </el-form-item>
              <el-form-item label="承运商名称" prop="carrierName">
                <el-input v-model="formData.carrierName"></el-input>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
    </el-form>

    <el-row class="row-mrg-t">
      <el-col :span="24">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="商品信息" name="3">
            <el-row>
              <el-button v-auth="50100020205" type="primary" @click="handlePoint('arrangeLoc')">安排库位</el-button>
              <el-button v-auth="50100020205" type="primary" @click="handlePoint('receive')">收货确认</el-button>
              <el-button v-auth="50100020205" type="primary" @click="handlePoint('generatePaTask')">生成上架任务</el-button>
              <!--<el-button v-auth="50100020205" type="primary" @click="handleCarrier">承运商</el-button>-->
              <el-dropdown class="mrg-l" @command="handlePoint">
                <el-button v-auth="50100020111" type="primary">更多
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-auth="50100020113" needConfirm command="cancelArrangeLoc">取消安排库位</el-dropdown-item>
                  <el-dropdown-item v-auth="50100020115" needConfirm command="cancelReceive">取消收货</el-dropdown-item>
                  <el-dropdown-item v-auth="50100020116" needConfirm command="createVoucherNo">生成凭证号</el-dropdown-item>
                  <el-dropdown-item v-auth="50100020116" needConfirm command="cancelVoucherNo">取消凭证号</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown class="mrg-l" @command="toPrint">
                <el-button v-auth="50100020111" type="primary">打印
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-auth="50100020112" command="18010050108">打印带信息码盘标签</el-dropdown-item>
                  <el-dropdown-item v-auth="50100020112" command="18010050109">Print Pallet Label I</el-dropdown-item>
                  <el-dropdown-item v-auth="50100020112" command="18010050110">打印通用码盘标签</el-dropdown-item>
                  <el-dropdown-item v-auth="50100020112" command="18010050111">Print Pallet Label G</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <div class="qty-total row-mrg-t">
                <span>总预收数量：{{qtyTotal}}</span>
              </div>
            </el-row>
            <el-row class="row-mrg-t">
              <el-table :data="goodsList" border @selection-change="handleChange">
                <table-column type="selection" fixed align="center"></table-column>
                <table-column label="行号" prop="lineNo">
                  <template slot-scope="scope">
                    <p class="blue" @click="handleGoodsLine(scope.row)">{{ scope.row.lineNo}}</p>
                  </template>
                </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="lineNo"></table-column>
                <table-column label="商品">
                  <template slot-scope="scope">
                    <p>{{scope.row.skuCode}}</p>
                    <p>{{scope.row.skuName}}</p>
                  </template>
                </table-column>
                <table-column label="货主">
                  <template slot-scope="scope">
                    <p>{{scope.row.ownerCode}}</p>
                    <p>{{scope.row.ownerName}}</p>
                  </template>
                </table-column>
                <table-column label="包装规格" prop="packDesc"></table-column>
                <table-column label="单位" prop="uomDesc"></table-column>
                <table-column label="数量">
                  <template slot-scope="scope">
                    <p>预收：{{scope.row.qtyPlanUom}}</p>
                    <p>已收：{{scope.row.qtyRcvEa}}</p>
                  </template>
                </table-column>
                <!-- <table-column label="数量EA">
                  <template slot-scope="scope">
                    <p>预收：{{scope.row.qtyPlanEa}}</p>
                    <p>已收：{{scope.row.qtyRcvEa}}</p>
                  </template>
                </table-column> -->
                <table-column label="商品重量(吨)" prop="skuWeight" :formatter="formatColumn"></table-column>
                <table-column label="重量(吨)">
                  <template slot-scope="scope">
                    <p>预收：{{(+scope.row.planWeight).toFixed($consts.numFix.TON)}}</p>
                    <p>已收：{{(+scope.row.rcvWeight).toFixed($consts.numFix.TON)}}</p>
                  </template>
                </table-column>
                <table-column label="收货库位" prop="toLoc"></table-column>
                <table-column label="收货跟踪号" prop="toId"></table-column>
                <table-column label="码盘跟踪号" prop="planId"></table-column>
                <table-column label="上架库位指定规则">
                  <template slot-scope="scope">
                    <p>{{ $utils.keyMatcher(scope.row.reserveCode, $keys.stockIn.reserveCode).name }}</p>
                  </template>
                </table-column>
                <table-column label="上架规则" prop="paRuleName"></table-column>
                <table-column label="单价" prop="price"></table-column>
                <table-column label="收货时间" prop="rcvTime"></table-column>
                <table-column label="物流单行号" prop="logisticLineNo"></table-column>
                <table-column label="采购单号" prop="poNo"></table-column>
                <table-column label="采购单行号" prop="poLineNo"></table-column>
                <table-column label="批次号" prop="lotNum"></table-column>
                <table-column label="凭证号" prop="voucherNo"></table-column>
                <table-column label="是否质检管理">
                  <template slot-scope="scope">
                    <p>{{ $utils.keyMatcher(scope.row.isQc, $keys.stockIn.isQc).name }}</p>
                  </template>
                </table-column>
                <table-column label="质检状态" prop="qcStatus">
                  <template slot-scope="scope">
                    <p>{{ $utils.keyMatcher(scope.row.qcStatus, $keys.stockIn.qcStatus).name }}</p>
                  </template>
                </table-column>
                <table-column label="质检阶段" prop="qcPhase">
                  <template slot-scope="scope">
                    <p>{{ $utils.keyMatcher(scope.row.qcPhase, $keys.stockIn.qcPhase).name }}</p>
                  </template>
                </table-column>
                <table-column label="质检规则" prop="qcRuleName"></table-column>
                <table-column label="质检项" prop="itemGroupName"></table-column>
                <table-column label="质检收货明细号" prop="qcRcvId"></table-column>
                <table-column label="越库收货明细号" prop="cdRcvId"></table-column>
                <table-column label="越库类型" prop="cdType"></table-column>
                <table-column label="出库单号" prop="soNo"></table-column>
                <table-column label="出库单行号" prop="soLineNo"></table-column>
                <table-column label="操作" width="100" fixed="right">
                  <template slot-scope="scope">
                    <el-badge style="margin-right: 20px;" :value="scope.row.fileNumber">
                      <el-button
                        title="查看附件"
                        size="mini"
                        type="primary"
                        icon="el-icon-tickets"
                        plain
                        circle
                        :disabled="false"
                        @click.stop="toFile(scope.row)"
                      ></el-button>
                    </el-badge>
                    <el-tooltip content="编辑" placement="top">
                      <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-edit"
                        plain
                        circle
                        @click="handleEdit(scope.$index, scope.row)" v-auth="50100020127"></el-button></el-tooltip>
                  </template>
                </table-column>
              </el-table>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-col>
    </el-row>
    <el-row class="row-mrg-t">
          <Car :activeNames="activeNames"
           NoKey="asnNo"
           :mode="mode"
           businessType='RECEIVE'
           :No="formData.asnNo"
           :getUrl="this.$API.stockIn.preReceiving.getDetailCar"
           :saveUrl="this.$API.stockIn.collectGoods.saveCarrier"
           ></Car>
      </el-row>
    <el-row class="row-mrg-t" v-if="mode==='detail'">
      <el-col :span="24">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="操作信息" name="4">
            <div class="operation-info">
              <span>创建人登录名(姓名)：{{formData.creatorLoginName}}({{formData.creatorUserNameCn}})</span>
              <span>创建时间：{{formData.createTime}}</span>
              <span>修改人登录名(姓名)：{{formData.modifierLoginName}}({{formData.modifierUserNameCn}})</span>
              <span>修改时间：{{formData.modifyTime}}</span>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-col>
    </el-row>

    <goods-form
    :goodsFormVisible="goodsFormVisible"
    :currentRow="currentRow"
    @close="goodsFormVisible=false"
    @handleConfirm="handleConfirm">
    </goods-form>

    <DetailDetail
      :showDetail="showDetailDetail"
      :detailData="detailData"
      @close="showDetailDetail = false"
    ></DetailDetail>
    <Carrier
    :carrierFormVisible="carrierFormVisible"
    @close="carrierFormVisible=false"></Carrier>
  </div>
</template>
<script>
import { time } from 'apec-fe-utils'
import GoodsForm from './childrenForm/goods-form'
import DetailDetail from './childrenForm/DetailDetail'
import Carrier from './childrenForm/Carrier'
export default {
  components: {
    GoodsForm,
    DetailDetail,
    Carrier
  },
  created () {
    this.mode = this.$route.params.mode
    if (this.mode === 'edit') {
      this.formData = this.$route.params[0]
      this.goodsList = this.$route.params[1]
      this.id = this.$route.params[2]
      // this.carList = this.$route.params[3] || []
    }
    let sum = 0
    this.goodsList.forEach(item => {
      sum += Number(item.qtyPlanUom)
    })
    this.qtyTotal = sum
  },
  data () {
    return {
      needRefresh: false, // 是否需要父路由刷新
      mode: '', // 模式
      activeNames: ['1', '2', '3', '4', '5'],
      goodsList: [],
      formData: {},
      detailData: {}, // 详情数据
      showDetailDetail: false, // 任务详情
      goodsFormVisible: false,
      carrierFormVisible: false,
      rows: [],
      selectedIds: [],
      currentRow: {},
      qtyTotal: '',
      // carList: [],
    }
  },
  methods: {
    // 附件管理
    toFile (row) {
      const config = {
        orderNo: row.asnNo + row.asnLineNo, // 组件需要的当前选择的业务单号, 因为是详情中的列表, 需要外部列表单号 + 行号
      }
      this.$upload(config)
    },
    // 获取商品详情, 主要用于在上传附件后重新请求列表, 勿修改 getList 方法名, 因全局混入使用了这个方法名来执行请求
    getList () {
      const url = this.$API.stockIn.collectGoods.queryAsnRcvDetails
      const param = {
        asnNo: this.id,
        'page.currentPage': 1,
        'page.limitCount': 10
      }
      this.$https.post(url, param)
        .then(data => {
          this.goodsList = data.rows
        })
    },
    // 点击行号详情
    handleGoodsLine (row) {
      this.detailData = row
      this.showDetailDetail = true
    },
    handleChange (selection) {
      this.rows = selection
      this.selectedIds = selection.map(item => item.lineNo)
      console.log(this.selectedIds)
    },
    // 打印
    toPrint (command, vmNode) {
      if (!this.selectedIds) return this.$message.warning('请选择记录')
      const param = {
        title: vmNode.$el.innerHTML,
        qs: `_functionCode=${command}&lineNo=${this.selectedIds.split(',').join(';')}`
      }
      this.$print(param)
    },

    getData (url, param) {
      return this.$https.post(url, param)
    },

    reGetList () {
      const headUrl = this.$API.stockIn.collectGoods.queryRcv
      const goodsUrl = this.$API.stockIn.collectGoods.queryAsnRcvDetails
      // const infoUrl = this.$API.stockIn.collectGoods.getUserName
      const param = { asnNo: this.formData.asnNo, 'page.currentPage': 1, 'page.limitCount': 10 }
      this.$https.all([this.getData(headUrl, param), this.getData(goodsUrl, param)]).then(res => {
        this.formData = res[0].rows[0]
        this.goodsList = res[1].rows
      })
    },

    // 商品列表单点操作
    handlePoint (urlKey) {
      const url = this.$API.stockIn.collectGoods[urlKey]
      let param = {}
      if (urlKey === 'createVoucherNo' || urlKey === 'cancelVoucherNo') {
        param = { asnNo: this.formData.asnNo, lineNos: JSON.stringify(this.selectedIds) }
      } else {
        param = { asnDetailReceives: JSON.stringify(this.rows) }
      }
      this.$https.post(url, param).then(res => {
        this.reGetList()
      })
    },

    // 承运商
    handleCarrier () {
      if (this.rows.length > 1) return this.$message.warning('只能选择一条数据')
      if (this.rows[0].status !== '20') return this.$message.warning('商品未收货，不支持维护承运商信息')
      this.carrierFormVisible = true
    },
    // 商品编辑
    handleEdit (index, row) {
      this.goodsFormVisible = true
      this.currentRow = row
    },
    handleConfirm (data) {
      const url = this.$API.stockIn.collectGoods.receiveOnlyone
      const param = { asnDetailReceive: JSON.stringify(data), isCheck: 'Y' }
      this.$https.post(url, param).then(res => {
        this.reGetList()
      })
    },

  },
  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;
}
.operation-info {
  display: flex;
  justify-content: space-between;
}
.qty-total{
  // display: inline-block;

}
</style>
