<template>
    <div>
          <el-form ref="form" :model="formData"  inline>
                <el-row :gutter="40">
                    <el-col :span="12">
                        <el-collapse v-model="activeNames" >
                            <el-collapse-item title="关键信息" name="1">
                                    <el-form-item label="出库单号：" class="form-item">
                                      <span>{{formData.soNo}}</span>
                                    </el-form-item>
                                    <el-form-item label="出库单类型：" class="form-item">
                                      <span>{{ $utils.keyMatcher(formData.soType, $keys.stockOut.soType).name }}</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.ownerName}}</span>
                                    </el-form-item>
                                    <el-form-item label="状态：" class="form-item">
                                      <span>{{ $utils.keyMatcher(formData.status, $keys.stockOut.status).name }}</span>
                                    </el-form-item>
                                    <el-form-item label="审核状态：" class="form-item">
                                      <span>{{ $utils.keyMatcher(formData.auditStatus, $keys.stockOut.auditStatus).name }}</span>
                                    </el-form-item>
                                    <el-form-item label="冻结状态：" class="form-item">
                                      <span>{{ $utils.keyMatcher(formData.holdStatus, $keys.stockOut.holdStatus).name }}</span>
                                    </el-form-item>
                                    <el-form-item label="拦截状态：" class="form-item">
                                      <span>{{ $utils.keyMatcher(formData.interceptStatus, $keys.stockOut.interceptStatus).name }}</span>
                                    </el-form-item>
                                    <el-form-item label="订单时间：" class="form-item">
                                      <span>{{formData.orderTime}}</span>
                                    </el-form-item>
                                    <el-form-item label="调入仓库：" class="form-item">
                                      <span>{{formData.allocateInWh}}</span>
                                    </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="预计装车时间从" 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-form-item label="物流单号：" class="form-item">
                                      <span>{{formData.logisticNo}}</span>
                                    </el-form-item>
                                    <el-form-item label="优先级别：" class="form-item">
                                      <span>{{formData.priority}}</span>
                                    </el-form-item>
                                    <el-form-item label="审核人：" class="form-item">
                                      <span>{{formData.auditOp}}</span>
                                    </el-form-item>
                                    <el-form-item label="审核时间：" class="form-item">
                                      <span>{{formData.auditTime}}</span>
                                    </el-form-item>
                                    <el-form-item label="EDI是否已发送：" class="form-item">
                                      <span>{{formData.isEdiSend}}</span>
                                    </el-form-item>
                                    <el-form-item label="EDI发送时间：" class="form-item">
                                      <span>{{formData.ediSendTime}}</span>
                                    </el-form-item>
                                    <el-form-item label="快递单号：" class="form-item">
                                      <span>{{formData.trackingNo}}</span>
                                    </el-form-item>
                                    <el-form-item label="项目名称：" class="form-item">
                                      <span>{{formData.businessItemName}}</span>
                                    </el-form-item>
                            </el-collapse-item>
                        </el-collapse>
                        </el-col>
                </el-row>
                <el-row :gutter="40" class="row-mrg-t">
                    <el-col :span="12">
                      <el-collapse  v-model="activeNames" >
                        <el-collapse-item title="承运商" name="3">
                          <el-form-item label="承运商名称：" class="form-item">
                            <span>{{formData.carrierName}}</span>
                          </el-form-item>
                          <el-form-item label="承运商电话：" class="form-item">
                              <span>{{formData.carrierTel}}</span>
                          </el-form-item>
                          <el-form-item label="承运商地址：" class="form-item">
                              <span>{{formData.carrierAddr}}</span>
                          </el-form-item>
                          <el-form-item label="装车状态：" class="form-item">
                             <span>{{formData.transType}}</span>
                          </el-form-item>
                          <el-form-item label="路线：" class="form-item">
                            <span>{{formData.lineName}}</span>
                          </el-form-item>
                        </el-collapse-item>
                    </el-collapse>
                    </el-col>
                    <el-col :span="12">
                    <el-collapse v-model="activeNames" >
                        <el-collapse-item title="收货人" name="4">
                          <el-form-item label="收货人编码：" class="form-item">
                           <span>{{formData.consigneeCode}}</span>
                          </el-form-item>
                          <el-form-item label="收货人名称：" class="form-item">
                           <span>{{formData.consigneeName}}</span>
                          </el-form-item>
                          <el-form-item label="收货人电话：" class="form-item">
                            <span>{{formData.consigneeTel}}</span>
                          </el-form-item>
                          <el-form-item label="收货人地址：" class="form-item">
                            <span>{{formData.consigneeAddr}}</span>
                          </el-form-item>
                          <el-form-item label="收货人传真：" class="form-item">
                            <span>{{formData.consigneeEmail}}</span>
                          </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="5">
                                <el-row>
                                    <el-table
                                    :data='goodsList'>
                                        <table-column type="selection" fixed align="center"
                                            width="55">
                                        </table-column>
                                        <table-column
                                            label="行号">
                                          <template slot-scope="scope">
                                            <p class="blue" @click="getlineInfo(scope.row)">{{scope.row.lineNo}}</p>
                                          </template>
                                        </table-column>
                                        <table-column
                                            label="状态">
                                            <template slot-scope="scope">
                                              {{ $utils.keyMatcher(scope.row.status, $keys.stockOut.status).name }}
                                            </template>
                                        </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="订货数"
                                            prop="qtySoUom">
                                        </table-column>
                                        <table-column
                                            label="订货重量(吨)"
                                            prop="soWeight"
                                            :formatter="formatColumn">
                                        </table-column>
                                        <table-column
                                            label="预配数"
                                            prop="qtyPreallocUom">
                                        </table-column>
                                        <table-column
                                            label="分配数"
                                            prop="qtyUom">
                                        </table-column>
                                        <table-column
                                            label="拣货数"
                                            prop="qtyPkUom">
                                        </table-column>
                                        <table-column
                                            label="发货数"
                                            prop="qtyShipUom">
                                        </table-column>
                                        <table-column
                                            label="发货重量(吨)"
                                            prop="shipWeight"
                                            :formatter="formatColumn">
                                        </table-column>
                                        <table-column
                                            label="单位"
                                            prop="uomDesc">
                                        </table-column>
                                        <table-column
                                            label="包装规格"
                                            prop="packDesc">
                                        </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>
                                              <el-tooltip content="复制" placement="top">
                                                <el-button
                                                  size="mini"
                                                  type="danger"
                                                  icon="el-icon-document"
                                                  plain
                                                  circle
                                                  @click="handlCopy(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 class="row-mrg-t">
                  <el-col :span="24">
                    <el-collapse v-model="activeNames" >
                      <el-collapse-item title="分配明细" name="6">
                        <el-button v-auth="50200100309" type="primary" @click="doConfirmDelivery" v-if="formData.status !== '80'">发货确认</el-button>
                        <el-button v-auth="50200100310" type="primary" @click="doCancelDelivery">取消发货</el-button>
                        <el-row>
                          <el-table
                            ref="multipleTable"
                            @selection-change="handleSelectionChange"
                            :data='distributionInfo'>
                            <table-column type="selection" fixed align="center"
                                             width="55">
                            </table-column>
                            <table-column
                              label="分配ID">
                              <template slot-scope="scope">
                                <p @click="getDistributionInfo(scope.row)" class="blue">{{scope.row.allocId}}</p>
                              </template>
                            </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="lineNo">
                            </table-column>
                            <table-column
                              label="货主"
                              prop="ownerName">
                            </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="包装规格"
                              prop="uomDesc">
                            </table-column>
                            <table-column
                              label="单位"
                              prop="uomDesc">
                            </table-column>
                            <table-column
                              label="分配数"
                              prop="qtyUom">
                            </table-column>
                            <table-column
                              label="分配数"
                              prop="qtyEa">
                            </table-column>
                            <table-column
                              label="重量"
                              prop="weight">
                            </table-column>
                            <table-column
                              label="批次号"
                              prop="lotNum">
                            </table-column>
                            <table-column
                              label="库位"
                              prop="locCode">
                            </table-column>
                            <table-column
                              label="跟踪号"
                              prop="traceId">
                            </table-column>
                            <table-column
                              label="目标库位"
                              prop="toLoc">
                            </table-column>
                            <table-column
                              label="目标跟踪号"
                              prop="toId">
                            </table-column>
                            <table-column
                              label="快递单号"
                              prop="trackingNo">
                            </table-column>
                            <table-column
                              label="拣货波次单号"
                              prop="pkNo">
                            </table-column>
                              <table-column
                                label="复核状态">
                                <template slot-scope="scope">
                                  {{ $utils.keyMatcher(scope.row.checkStatus, $keys.stockOut.checkStatus).name }}
                                </template>
                              </table-column>
                              <table-column
                                label="复核人"
                                prop="checkOpName">
                              </table-column>
                              <table-column
                                label="复核时间"
                                prop="checkTime">
                              </table-column>
                              <table-column
                                label="打包人"
                                prop="packOpName">
                              </table-column>
                              <table-column
                                label="打包时间"
                                prop="packTime">
                              </table-column>
                              <table-column
                                label="包裹总重量"
                                prop="packWeight">
                              </table-column>
                              <table-column
                                label="拣货人"
                                prop="pickOpName">
                              </table-column>
                              <table-column
                                label="拣货时间"
                                prop="pickTime">
                              </table-column>
                              <table-column
                                label="发货人"
                                prop="shipOpName">
                              </table-column>
                              <table-column
                                label="发货时间"
                                prop="shipTime">
                              </table-column>
                              <table-column
                                label="预配ID"
                                prop="preallocId">
                              </table-column>
                              <table-column
                                label="库位"
                                prop="packDesc">
                              </table-column>
                              <table-column
                                label="生产日期"
                                prop="lotAtt01">
                              </table-column>
                              <table-column
                                label="失效日期"
                                prop="lotAtt02">
                              </table-column>
                              <table-column
                                label="入库日期"
                                prop="lotAtt03">
                              </table-column>
                              <table-column
                                label="品质">
                                <template slot-scope="scope">
                                  {{ $utils.keyMatcher(scope.row.lotAtt04, $keys.common.lotAtt04).name }}
                                </template>
                              </table-column>
                              <table-column
                                label="是否超量分配">
                                <template slot-scope="scope">
                                  {{ $utils.keyMatcher(scope.row.isOverAlloc, $keys.stockOut.isOverAlloc).name }}
                                </template>
                              </table-column>
                              <table-column
                                label="越库类型"
                                prop="cdType">
                              </table-column>
                              <table-column
                                label="入库单号"
                                prop="asnNo">
                              </table-column>
                              <table-column
                                label="入库单行号"
                                prop="asnLineNo">
                              </table-column>
                              <table-column
                                label="入库收获行号"
                                prop="rcvLineNo">
                              </table-column>
                            <table-column label="操作" width="100" fixed="right">
                              <template slot-scope="scope">
                                <el-tooltip content="发货确认" placement="top">
                                  <el-button
                                    v-auth="50200100313"
                                    size="mini"
                                    type="primary"
                                    icon="el-icon-check"
                                    plain
                                    circle
                                    @click="dohandleGood(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 class="row-mrg-t">
                  <el-col :span="24">
                    <Car :activeNames="activeNames"
                    NoKey="soNo"
                    businessType='SHIPMENT'
                    :No="formData.soNo"
                    :mode="mode"
                    :getUrl="this.$API.stockOut.sendOrder.carList"
                    :saveUrl="this.$API.stockOut.picking.saveCarrier"></Car>
                  </el-col>
                </el-row>
                <el-row class="row-mrg-t">
                  <el-col :span="24">
                    <el-collapse v-model="activeNames" >
                      <el-collapse-item title="结算人" name="8">
                        <div class="operation-info">
                          <span>结算人编码：{{formData.settleCode}}</span>
                          <span>结算人名称：{{formData.settleName}}</span>
                          <span>电话：{{formData.settleTel}}</span>
                          <span>传值：{{formData.settleFax}}</span>
                        </div>
                        <div class="operation-info">
                          <span>行业：{{formData.settleIndustryType}}</span>
                          <span>地址：{{formData.settleAddress}}</span>
                          <span></span>
                          <span></span>
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                  </el-col>
                </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="9">
                        <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-row style="float: right; margin: 20px 0;">
                  <el-col :span="24">
                    <el-button v-auth="50200100315" type="primary" @click="doConclusionConfirm" v-if="formData.status !== '80'">发货确认</el-button>
                    <el-button v-auth="50200100316" type="primary" @click="doConclusionCancel">取消发货</el-button>
                    <el-dropdown class="mrg-l" @command="toPrint">
                      <el-button type="primary">
                          打印<i class="el-icon-arrow-down el-icon--right"></i>
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item v-auth="50200100318" command="18010060129">打印发货确认单</el-dropdown-item>
                          <el-dropdown-item v-auth="50200100320" command="18010060130">Print ShipmentOrder</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
            </el-form>
          <distails-form
            :currDate="currDate"
            :title="title"
            :secondTitle="secondTitle"
            :secondCurrDate="secondCurrDate"
            :dialogTableVisible="dialogTableVisible"
            @dialogClose="dialogClose">
          </distails-form>
    </div>
</template>
<script>
import { time } from 'apec-fe-utils'
import DistailsForm from './childrenForm/details-form'
import { getlineData, getDistributionData, getBatchAttribute, getsecondData } from './childrenForm/processData'
export default {
  components: {
    DistailsForm
  },
  created () {
    this.mode = this.$route.params.mode
    if (this.mode === 'edit') {
      console.log(this.$route.params)
      this.formData = this.$route.params[0] || []
      this.goodsList = this.$route.params[1] || []
      this.distributionInfo = this.$route.params[2] || []
    }
  },
  data () {
    return {
      currDate: [],
      title: '',
      dialogTableVisible: false,
      needRefresh: false, // 是否需要父路由刷新
      mode: '', // 模式
      activeNames: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
      formData: {},
      goodsList: [],
      distributionInfo: [],
      multipleSelection: [],
      secondTitle: '',
      secondCurrDate: []
    }
  },
  methods: {
    async doConfirmDelivery () {
      if (!this.multipleSelection.length) {
        this.$message('请选着一条记录')
        return false
      }
      this.multipleSelection.every((item) => {
        if (~~item.status !== '80') {
          return this.$message(`${item.allocId}不是完全发运状态，不能操作`)
        }
      })
      const url = this.$API.stockOut.deliverGoods.getShipmentByAll
      const params = { allocDetails: JSON.stringify(this.multipleSelection), allocateInWh: '' }
      await this.$https.post(url, params).then(res => {
        if (!res) return this.$message('操作失败')
        this.$message('操作成功~~')
      })
      const soNo = this.multipleSelection[0]
      this.getNewDate(soNo)
    },
    // 商品信息
    getlineInfo (data) {
      this.title = '商品信息'
      this.dialogTableVisible = true
      data.status = this.$utils.keyMatcher(data.status, this.$keys.stockOut.status).name
      this.currDate = getlineData(data)
      this.secondTitle = '批次属性'
      this.secondCurrDate = getBatchAttribute(data)
    },
    // 打印
    toPrint (command, vmNode) {
      const param = {
        title: vmNode.$el.innerHTML,
        qs: `_functionCode=${command}&soNo=${this.formData.soNo}`
      }
      this.$print(param)
    },
    // 关闭弹框
    dialogClose () {
      this.dialogTableVisible = !this.dialogTableVisible
    },
    doConclusionConfirm () {
      const url = this.$API.stockOut.deliverGoods.getShipmentBySo
      const params = { soNos: this.formData.soNo, allocateInWh: '' }
      this.$https.post(url, params).then(res => {
        if (!res) return this.$message('操作失败')
        this.$message('操作成功~~')
      })
      const soNo = {
        soNo: this.formData.soNo
      }
      this.getNewDate(soNo)
    },
    doConclusionCancel () {
      const url = this.$API.stockOut.deliverGoods.getCancelShipmentBySo
      const params = { soNos: this.formData.soNo }
      this.$https.post(url, params).then(res => {
        if (!res) return this.$message('操作失败')
        this.$message('操作成功~~')
      })
      const soNo = {
        soNo: this.formData.soNo
      }
      this.getNewDate(soNo)
    },
    // 分配明细
    getDistributionInfo (data) {
      this.title = '分配明细'
      data.status = this.$utils.keyMatcher(data.status, this.$keys.stockOut.status).name
      data.checkStatus = this.$utils.keyMatcher(data.checkStatus, this.$keys.stockOut.checkStatus).name
      this.dialogTableVisible = true
      this.currDate = getDistributionData(data)
      this.secondTitle = ''
      this.secondCurrDate = getsecondData(data)
    },

    // 取消发货
    async doCancelDelivery () {
      if (!this.multipleSelection.length) {
        this.$message('请选着一条记录')
        return false
      }
      this.multipleSelection.every((item) => {
        if (~~item.status !== 80) {
          return this.$message(`${item.allocId}不是完全发运状态，不能操作`)
        }
      })

      const url = this.$API.stockOut.deliverGoods.getCancelDelivery
      const params = { allocDetails: JSON.stringify(this.multipleSelection) }
      const soNo = this.multipleSelection[0]
      await this.$https.post(url, params).then(res => {
        if (!res) return this.$message('操作失败')
        this.$message('操作成功~~')
      })
      this.getNewDate(soNo)
    },

    // 选着触发
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    async dohandleGood (row, data) {
      if (~~data.status === 80) return this.$message('该出库单已完全发运, 不能操作')
      const upData = this.$API.stockOut.deliverGoods.getShipment
      const params = { allocDetails: JSON.stringify([data]), allocateInWh: '' }
      await this.$https.post(upData, params).then(res => {
        this.$message('操作成功')
      })
      this.getNewDate(data)
    },
    getData (url, param) {
      return this.$https.post(url, param)
    },
    getNewDate (data) {
      const headUrl = this.$API.stockOut.deliverGoods.getDetailHead
      const goodsUrl = this.$API.stockOut.deliverGoods.getDetailgoods
      const listUrl = this.$API.stockOut.deliverGoods.getDetailList
      const param = { soNo: data.soNo, 'page.currentPage': 1, 'page.limitCount': 10 }
      this.$https.all([this.getData(headUrl, param), this.getData(goodsUrl, param), this.getData(listUrl, param)]).then(res => {
        this.formData = res[0]
        this.goodsList = res[1].rows
        this.distributionInfo = res[2].rows
      })
    }
  },
  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 {
  min-width: 260px;
}
.blue {
  cursor: pointer;
  color: #0682ea;
}
</style>
