<template>
  <div>
    <el-form ref="form" :model="formData" :rules="rules" inline label-position="top">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="关键信息" name="1">
              <el-form-item label="出库单号" prop="soNo">
                <el-input v-model="formData.soNo" disabled></el-input>
              </el-form-item>
              <el-form-item label="货主" prop="ownerCode">
                <PublicQuery
                  title="货主"
                  :disabled="mode==='edit'"
                  single
                  @change="ownerChange"
                  cfgKey="oubWmsCustomerCode"
                  baseUrl="/oub_web/oubweb"
                  :valueField.sync="formData.ownerCode"
                  :textField.sync="formData.ownerName"
                  queryUrl="/wms/outbound.interactive/outboundShippmentService/queryWmsCustomer.bee"
                  :beforeConfirm="getInventory"
                ></PublicQuery>
              </el-form-item>
              <el-form-item label="状态" prop="status">
                <el-select v-model="formData.status" filterable placeholder="请选择" disabled>
                  <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="30"></el-option>
                  <el-option label="完全分配" value="40"></el-option>
                  <el-option label="部分拣货" value="50"></el-option>
                  <el-option label="完全拣货" value="60"></el-option>
                  <el-option label="部分发运" value="70"></el-option>
                  <el-option label="完全发运" value="80"></el-option>
                  <el-option label="取消订单" value="90"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="调入仓库" prop="allocateInWhName">
                <el-input disabled v-model="formData.allocateInWhName">
                  <i slot="suffix" class="el-icon-search"></i>
                </el-input>
              </el-form-item>
              <el-form-item label="出库单类型" prop="soType">
                <el-select v-model="formData.soType" filterable placeholder="请选择">
                  <el-option label="普通出库" value="PO"></el-option>
                  <el-option label="调拨出库" value="AO"></el-option>
                  <el-option label="退货出库" value="RO"></el-option>
                  <el-option label="换货出库" value="EO"></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="货主名称" prop="ebcuNameCn">
                <el-input v-model="ownerData.ebcuNameCn" disabled></el-input>
              </el-form-item>-->
              <el-form-item label="订单时间" prop="orderTime">
                <el-date-picker
                  v-model="formData.orderTime"
                  type="datetime"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  placeholder="选择日期时间"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="项目名称" prop="businessItemCodes">
                <PublicQuery
                  title="项目名称"
                  single
                  :rowData.sync="businessData"
                  cfgKey="customerBusinessItems"
                  baseUrl="/oub_web/oubweb"
                  :valueField.sync="formData.businessItemCodes"
                  :textField.sync="formData.businessItemName"
                ></PublicQuery>
              </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="fmEtd">
                <el-date-picker
                  v-model="formData.fmEtd"
                  type="datetime"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  placeholder="选择日期时间"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="预计发货时间到" prop="toEta">
                <el-date-picker
                  v-model="formData.toEtd"
                  type="datetime"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  placeholder="选择日期时间"
                ></el-date-picker>
              </el-form-item>
              <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" filterable placeholder="请选择">
                  <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="supplierCode">
                <PublicQuery
                  title="供应商"
                  single
                  :rowData.sync="businessData"
                  cfgKey="OUB_LSP_SERVICE_SUPPLIER"
                  baseUrl="/oub_web/oubweb"
                  :valueField.sync="formData.supplierCode"
                  :textField.sync="formData.supplierName"
                ></PublicQuery>
              </el-form-item>
              <el-form-item label="冻结状态" prop="holdStatus">
                <el-select v-model="formData.holdStatus" filterable placeholder="请选择" disabled>
                  <el-option label="无冻结" value="00"></el-option>
                  <el-option label="冻结" value="99"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="拦截状态">
                <el-select v-model="formData.interceptStatus" filterable placeholder="请选择" disabled>
                  <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-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-row>
                <el-button
                  v-auth="50200020307"
                  type="primary"
                  @click="handleCancelOrder(1)"
                  v-if="mode == 'detail' && flagSeven !== false"
                >取消订单行</el-button>
                <el-button
                  v-auth="50200020304"
                  type="primary"
                  @click="handleCancelOrder(2)"
                  v-if="mode == 'detail' && flagSix !== false"
                >分配</el-button>
                <el-button
                  v-auth="50200020306"
                  type="primary"
                  @click="handleCancelDistribution"
                  v-if="mode == 'detail' && flagFiv !== false"
                >取消分配</el-button>
                <el-button
                  v-auth="50200020204"
                  type="primary"
                  @click="handleAddGoods"
                  v-if="mode !=='detail'"
                >添加</el-button>
                <el-button
                  v-auth="50200020208"
                  type="primary"
                  @click="handleDelGoods"
                  v-if="mode !=='detail'"
                >移除</el-button>
                <!--<el-button v-auth="50300030101" type="primary" @click="handleDelGoods" v-if="mode =='detail' && ~~tabIndex === 0">取消订单行</el-button>-->
              </el-row>
              <el-row>
                <el-table
                  :data="goodsList"
                  @select="handleSelect"
                  @selection-change="handleSelectChange"
                >
                  <table-column type="selection" fixed align="center" width="55"></table-column>
                  <table-column label="行号">
                    <template slot-scope="scope">
                      <p class="blue" @click="doSeelineInfo(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="skuWeight" :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
                          v-auth="50200020336"
                          size="mini"
                          type="primary"
                          icon="el-icon-edit"
                          plain
                          circle
                          @click="handleAllot(scope.row)"
                        ></el-button>
                      </el-tooltip>
                    </template>
                  </table-column>
                  <table-column label="操作" width="100" fixed="right" v-if="mode!=='detail'">
                    <template slot-scope="scope">
                      <el-tooltip content="编辑" placement="top">
                        <el-button
                          v-auth="50200020209"
                          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
                          v-auth="50200020210"
                          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
                          v-auth="50200020211"
                          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 :gutter="40" class="row-mrg-t">
        <el-col :span="24">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="承运商" name="4">
              <el-button
                v-auth="50300030101"
                type="primary"
                @click="doSave"
                v-if="mode == 'detail'"
              >保存</el-button>
                <el-button
                  v-auth="50300030101"
                  type="primary"
                  @click="doAddInfo"
                  v-if="mode == 'detail'"
                >添加</el-button>
                <el-button
                  v-auth="50300030101"
                  type="primary"
                  @click="doRemove"
                  v-if="mode == 'detail'"
                >移除</el-button>
              <el-row class="row-mrg-t">
                <el-table :data="carriersInfo" ref="table" border  @select="handleSelect">
                  <table-column type="selection" fixed  align="center"></table-column>
                  <table-column label="承运商">
                    <template slot-scope="scope">
                      <PublicQuery
                        v-if="scope.row.isSet"
                        title="承运商"
                        single
                        :rowData.sync="supplierData"
                        cfgKey="Inb_TRANSPORT_SUPPLIER"
                        baseUrl="/inb_web/inbweb"
                        :valueField.sync="formData.carrierCode"
                        :textField.sync="formData.carrierName"
                      ></PublicQuery>
                      <span v-else>{{scope.row.carrierName}}</span>
                    </template>
                  </table-column>
                  <table-column label="车牌号">
                    <template slot-scope="scope">
                      <el-input v-if="scope.row.isSet" v-model="scope.row.vehicleNo"></el-input>
                      <span v-else>{{scope.row.vehicleNo}}</span>
                    </template>
                  </table-column>
                  <table-column label="车型">
                    <template slot-scope="scope">
                      <el-input v-if="scope.row.isSet" v-model="scope.row.vehicleType"></el-input>
                      <span v-else>{{scope.row.vehicleType}}</span>
                    </template>
                  </table-column>
                  <table-column label="驾驶员 ">
                    <template slot-scope="scope">
                      <el-input v-if="scope.row.isSet" v-model="scope.row.driver"></el-input>
                      <span v-else>{{scope.row.driver}}</span>
                    </template>
                  </table-column>
                  <table-column label="身份证号 ">
                    <template slot-scope="scope">
                      <el-input v-if="scope.row.isSet" v-model="scope.row.driverIdentity"></el-input>
                      <span v-else>{{scope.row.driverIdentity}}</span>
                    </template>
                  </table-column>
                  <table-column label="联系电话">
                    <template slot-scope="scope">
                      <el-input v-if="scope.row.isSet" v-model="scope.row.driverTel"></el-input>
                      <span v-else>{{scope.row.driverTel}}</span>
                    </template>
                  </table-column>
                  <table-column label="温度要求">
                    <template slot-scope="scope">
                      <el-input v-if="scope.row.isSet" v-model="scope.row.tempRequirement"></el-input>
                      <span v-else>{{scope.row.tempRequirement}}</span>
                    </template>
                  </table-column>
                  <table-column label="车辆温度">
                    <template slot-scope="scope">
                      <el-input v-if="scope.row.isSet" v-model="scope.row.vehicleTemp"></el-input>
                      <span v-else>{{scope.row.vehicleTemp}}</span>
                    </template>
                  </table-column>
                  <table-column label="是否复冻">
                    <template slot-scope="scope">
                      <el-select v-if="scope.row.isSet" v-model="scope.row.isRefreeze">
                        <el-option label="是" value="Y"></el-option>
                        <el-option label="否" value="N"></el-option>
                      </el-select>
                      <span
                        v-else
                      >{{ $utils.keyMatcher(scope.row.isRefreeze, $keys.stockIn.isRefreeze).name }}</span>
                    </template>
                  </table-column>
                  <table-column label="备注" width="230">
                    <template slot-scope="scope">
                      <el-input v-if="scope.row.isSet" v-model="scope.row.remark"></el-input>
                      <span v-else>{{scope.row.remark}}</span>
                    </template>
                  </table-column>
                  <table-column label="开始卸货时间" width="150">
                    <template slot-scope="scope">
                      <el-date-picker
                        v-if="scope.row.isSet"
                        v-model="scope.row.fmEtcd"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd 00:00:00"
                        type="date"
                        placeholder="选择日期"
                      ></el-date-picker>
                      <span v-else>{{scope.row.fmEtcd}}</span>
                    </template>
                  </table-column>
                  <table-column label="结束卸货时间" width="150">
                    <template slot-scope="scope">
                      <el-date-picker
                        v-if="scope.row.isSet"
                        v-model="scope.row.toEtcd"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd 23:59:00"
                        type="date"
                        placeholder="选择日期"
                      ></el-date-picker>
                      <span v-else>{{scope.row.toEtcd}}</span>
                    </template>
                  </table-column>
                  <table-column label="操作" width="100" fixed="right">
                    <template slot-scope="scope">
                      <el-tooltip content="删除" placement="top">
                        <el-button
                          size="mini"
                          type="danger"
                          icon="el-icon-delete"
                          plain
                          circle
                          @click="handleDelete(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">
        <Car :activeNames="activeNames"
        NoKey="soNo"
        :mode="mode"
        businessType='SHIPMENT'
        :No="formData.soNo"
        @getChangeCarList="getChangeCarList"
        :getUrl="this.$API.stockOut.sendOrder.carList"
        :saveUrl="this.$API.stockOut.picking.saveCarrier"></Car>
      </el-row>
      <!--<el-row class="row-mrg-t" v-if="mode==='create'">-->
        <!--<el-col :span="24">-->
          <!--<el-collapse v-model="activeNames">-->
            <!--<el-collapse-item title="车辆信息" name="6">-->
              <!--<el-row>-->
                <!--<el-select-->
                  <!--v-model="selectedVehicle"-->
                  <!--value-key="vehicleNo"-->
                  <!--placeholder="请选择车辆"-->
                  <!--filterable-->
                  <!--@focus="handleSelectFocus"-->
                <!--&gt;-->
                  <!--<el-option-->
                    <!--v-for="item in vehicleList"-->
                    <!--:key="item.vehicleNo"-->
                    <!--:value="item"-->
                    <!--:label="item.vehicleNo + ' - ' + item.driver"-->
                  <!--&gt;</el-option>-->
                <!--</el-select>-->
                <!--<el-button-->
                  <!--style="margin-left: 10px;"-->
                  <!--v-auth="50300030101"-->
                  <!--type="primary"-->
                  <!--@click="handleAddCar"-->
                <!--&gt;添加</el-button>-->
                <!--<el-button v-auth="50300030101" type="primary" @click="handleDelCar">移除</el-button>-->
              <!--</el-row>-->
              <!--<el-row class="row-mrg-t">-->
                <!--<el-table :data="carList" ref="table" border @select="handleCarSelect">-->
                  <!--<table-column type="selection" fixed align="center"></table-column>-->
                  <!--<table-column label="车牌号">-->
                    <!--<template slot-scope="scope">-->
                      <!--<el-input v-if="scope.row.isSet" v-model="scope.row.vehicleNo"></el-input>-->
                      <!--<span v-else>{{scope.row.vehicleNo}}</span>-->
                    <!--</template>-->
                  <!--</table-column>-->
                  <!--<table-column label="车型">-->
                    <!--<template slot-scope="scope">-->
                      <!--<el-input v-if="scope.row.isSet" v-model="scope.row.vehicleType"></el-input>-->
                      <!--<span v-else>{{scope.row.vehicleType}}</span>-->
                    <!--</template>-->
                  <!--</table-column>-->
                  <!--<table-column label="驾驶员 ">-->
                    <!--<template slot-scope="scope">-->
                      <!--<el-input v-if="scope.row.isSet" v-model="scope.row.driver"></el-input>-->
                      <!--<span v-else>{{scope.row.driver}}</span>-->
                    <!--</template>-->
                  <!--</table-column>-->
                  <!--<table-column label="身份证号 ">-->
                    <!--<template slot-scope="scope">-->
                      <!--<el-input v-if="scope.row.isSet" v-model="scope.row.driverIdentity"></el-input>-->
                      <!--<span v-else>{{scope.row.driverIdentity}}</span>-->
                    <!--</template>-->
                  <!--</table-column>-->
                  <!--<table-column label="联系电话">-->
                    <!--<template slot-scope="scope">-->
                      <!--<el-input v-if="scope.row.isSet" v-model="scope.row.driverTel"></el-input>-->
                      <!--<span v-else>{{scope.row.driverTel}}</span>-->
                    <!--</template>-->
                  <!--</table-column>-->
                  <!--<table-column label="温度要求">-->
                    <!--<template slot-scope="scope">-->
                      <!--<el-input v-if="scope.row.isSet" v-model="scope.row.tempRequirement"></el-input>-->
                      <!--<span v-else>{{scope.row.tempRequirement}}</span>-->
                    <!--</template>-->
                  <!--</table-column>-->
                  <!--<table-column label="车辆温度">-->
                    <!--<template slot-scope="scope">-->
                      <!--<el-input v-if="scope.row.isSet" v-model="scope.row.vehicleTemp"></el-input>-->
                      <!--<span v-else>{{scope.row.vehicleTemp}}</span>-->
                    <!--</template>-->
                  <!--</table-column>-->
                  <!--<table-column label="是否复冻">-->
                    <!--<template slot-scope="scope">-->
                      <!--<el-select v-if="scope.row.isSet" v-model="scope.row.isRefreeze">-->
                        <!--<el-option label="是" value="Y"></el-option>-->
                        <!--<el-option label="否" value="N"></el-option>-->
                      <!--</el-select>-->
                      <!--<span-->
                        <!--v-else-->
                      <!--&gt;{{ $utils.keyMatcher(scope.row.isRefreeze, $keys.stockIn.isRefreeze).name }}</span>-->
                    <!--</template>-->
                  <!--</table-column>-->
                  <!--<table-column label="备注" width="230">-->
                    <!--<template slot-scope="scope">-->
                      <!--<el-input v-if="scope.row.isSet" v-model="scope.row.remark"></el-input>-->
                      <!--<span v-else>{{scope.row.remark}}</span>-->
                    <!--</template>-->
                  <!--</table-column>-->
                  <!--<table-column label="开始卸货时间" width="150">-->
                    <!--<template slot-scope="scope">-->
                      <!--<el-date-picker-->
                        <!--v-if="scope.row.isSet"-->
                        <!--v-model="scope.row.fmEtcd"-->
                        <!--format="yyyy-MM-dd HH:mm"-->
                        <!--value-format="yyyy-MM-dd 00:00:00"-->
                        <!--type="date"-->
                        <!--placeholder="选择日期"-->
                      <!--&gt;</el-date-picker>-->
                      <!--<span v-else>{{scope.row.fmEtcd}}</span>-->
                    <!--</template>-->
                  <!--</table-column>-->
                  <!--<table-column label="结束卸货时间" width="150">-->
                    <!--<template slot-scope="scope">-->
                      <!--<el-date-picker-->
                        <!--v-if="scope.row.isSet"-->
                        <!--v-model="scope.row.toEtcd"-->
                        <!--format="yyyy-MM-dd HH:mm"-->
                        <!--value-format="yyyy-MM-dd 23:59:00"-->
                        <!--type="date"-->
                        <!--placeholder="选择日期"-->
                      <!--&gt;</el-date-picker>-->
                      <!--<span v-else>{{scope.row.toEtcd}}</span>-->
                    <!--</template>-->
                  <!--</table-column>-->
                  <!--<table-column label="操作" width="100" fixed="right">-->
                    <!--<template slot-scope="scope">-->
                      <!--<el-tooltip :content="scope.row.isSet?'保存':'编辑'" placement="top">-->
                        <!--<el-button-->
                          <!--size="mini"-->
                          <!--type="primary"-->
                          <!--:icon="scope.row.isSet ?'el-icon-check':'el-icon-edit'"-->
                          <!--plain-->
                          <!--circle-->
                          <!--@click="handleCarEdit(scope.$index, scope.row,true)"-->
                        <!--&gt;</el-button>-->
                      <!--</el-tooltip>-->
                      <!--<el-tooltip content="删除" placement="top">-->
                        <!--<el-button-->
                          <!--size="mini"-->
                          <!--type="danger"-->
                          <!--icon="el-icon-delete"-->
                          <!--plain-->
                          <!--circle-->
                          <!--@click="handleDelOne(scope.$index, scope.row)"-->
                        <!--&gt;</el-button>-->
                      <!--</el-tooltip>-->
                    <!--</template>-->
                  <!--</table-column>-->
                <!--</el-table>-->
                <!--<div class="mrg-t">-->
                  <!--<el-pagination-->
                    <!--@size-change="handleSizeChange"-->
                    <!--@current-change="handleCurrentChange"-->
                    <!--:current-page="currentPage"-->
                    <!--:page-sizes="[10, 20, 50, 100]"-->
                    <!--:page-size="pageSize"-->
                    <!--layout="total, sizes, prev, pager, next, jumper"-->
                    <!--:total="total"-->
                  <!--&gt;</el-pagination>-->
                <!--</div>-->
              <!--</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="7">
              <el-row>
                <el-button
                  v-auth="50200020314"
                  type="primary"
                  @click="handleDistribution"
                  v-if="mode =='detail' && isCancel !== false"
                >取消分配</el-button>
                <el-dropdown class="mrg-l" @command="toPrint">
                  <el-button v-auth="50200020313" type="primary">打印
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="18010060104">打印拣货箱标签</el-dropdown-item>
                    <el-dropdown-item command="18010060105">Print PickingCase Label</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-table
                  ref="multipleTable"
                  :data="distributionInfo"
                  @selection-change="handleDistributionChange"
                >
                  <table-column type="selection" fixed align="center" width="55"></table-column>
                  <table-column label="分配ID">
                    <template slot-scope="scope">
                      <p class="blue" @click="getDistributionInfo(scope.row)">{{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="行号">
                    <template slot-scope="scope">
                      <p>{{scope.row.lineNo}}</p>
                    </template>
                  </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="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="复核状态" prop="checkStatus"></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="50200020337"
                          size="mini"
                          type="primary"
                          icon="el-icon-edit"
                          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">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="结算人" name="8">
              <el-form-item label="结算人编码" prop="settleCode">
                <PublicQuery
                  title="结算人编码"
                  single
                  :rowData.sync="settleData"
                  cfgKey="oubWmsSettleCode"
                  baseUrl="/oub_web/oubweb"
                  :valueField.sync="formData.settleCode"
                  :textField.sync="formData.settleCode"
                ></PublicQuery>
              </el-form-item>
              <el-form-item label="结算人名称" prop="ebcuNameCn">
                <el-input v-model="formData.settleName" disabled></el-input>
              </el-form-item>
              <el-form-item label="电话" prop="ebccTel">
                <el-input v-model="formData.settleTel" disabled></el-input>
              </el-form-item>
              <el-form-item label="传真" prop="ebccFax">
                <el-input v-model="formData.settleFax" disabled></el-input>
              </el-form-item>
              <el-form-item label="行业类型" prop="ebcuIndustryType">
                <el-select v-model="formData.settleIndustryType" disabled>
                  <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-option label="运输" value="6"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="地址" prop="eblcAddress">
                <el-input v-model="formData.settleAddress" disabled></el-input>
              </el-form-item>
            </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-form>
    <div class="row-mrg-t" style="float: right">
      <el-button v-auth="50200020214" type="primary" @click="submitForm" v-if="mode!=='detail'">确 定</el-button>
      <el-button
        v-auth="50200020207"
        type="primary"
        @click="$router.replace({ name: 'sendOrder' })"
        v-if="mode!=='detail'"
      >取 消</el-button>
      <el-button
        v-auth="50200020322"
        type="primary"
        @click="sublimeudit"
        v-if="mode =='detail' && flageO !== false"
      >审核</el-button>
      <el-button
        v-auth="50200020323"
        type="primary"
        @click="sublimedistribution"
        v-if="mode =='detail' && flageT !== false"
      >分配</el-button>
      <el-button
        v-auth="50200020326"
        type="primary"
        v-if="mode =='detail' && flageTr !== false"
        @click="canceldistribution"
      >取消分配</el-button>
      <el-button
        v-auth="50200020325"
        type="primary"
        @click="sublimeCannelAudit"
        v-if="mode =='detail' && flageF !== false"
      >取消审核</el-button>
    </div>

    <goods-form
      :goodsFormVisible="goodsFormVisible"
      :code="this.formData.ownerCode"
      :currentRow="goodsEditRow"
      :rowIndex="rowIndex"
      :editBool="editBool"
      :showBool="showBool"
      @close="close"
      @editOK="editOK"
      @handleConfirm="handleConfirm"
      @handleConfirmAdd="handleConfirmAdd"
    ></goods-form>

    <distribution-form
      :dialogTableVisible="dialogTableVisible"
      ref="child"
      :showStatus="showStatus"
      :variable="variable"
      @dialogClose="dialogClose"
      @doDistribution="doDistribution"
    ></distribution-form>
  </div>
</template>
<script>
import GoodsForm from './childrenForm/goods-form'
import DistributionForm from './childrenForm/distribution-form'
import { time } from 'apec-fe-utils'
export default {
  components: {
    GoodsForm,
    DistributionForm
  },
  created () {
    this.mode = this.$route.params.mode || 'create'
    this.tabIndex = this.$route.params.index
    if (this.mode === 'edit') {
      this.formData = this.$route.params.headData || {}
      this.goodsList = this.$route.params.goodsData || []
      // this.carList = this.$route.params.carData.rows || []
      let carData = this.$route.params.carData.rows || []
      carData.map(item => { return (item['isChecked'] = false) })
      this.carList = carData
      this.pageSize = this.$route.params.carData.limit
      this.currentPage = this.$route.params.carData.currentPage
      this.total = this.$route.params.carData.total
      this.distributionInfo = this.$route.params.queryData || []
    }
    if (this.mode === 'detail') {
      this.formData = this.$route.params[0] || {}
      this.goodsList = this.$route.params[1] || []
      this.distributionInfo = this.$route.params[2] || []
      // this.carList = this.$route.params[3].rows || []
      let carData = this.$route.params[3].rows || []
      carData.map(item => { return (item['isChecked'] = false) })
      this.carList = carData
      this.pageSize = this.$route.params[3].limit
      this.currentPage = this.$route.params[3].currentPage
      this.total = this.$route.params[3].total
    }
  },
  data () {
    return {
      carriersInfo: [],
      flageO: false,
      flageT: false,
      flageTr: false,
      flageF: false,
      flagFiv: false,
      flagSeven: false,
      flagSix: false,
      variable: 1,
      distributionData: {},
      ownerName: '',
      isCancel: false,
      showStatus: 1,
      currentData: {},
      dialogTableVisible: false,
      distributionInfo: [],
      needRefresh: false, // 是否需要父路由刷新
      mode: 'create', // 模式
      activeNames: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
      goodsList: [],
      selectlistRow: [],
      deleteIds: [],
      settleData: {},
      ownerData: {},
      businessData: {},
      supplierData: {},
      carrierData: {},
      consigneeData: {},
      goodsEditRow: {},
      rowIndex: '',
      showBool: true,
      editBool: false,
      formData: {
        status: '00',
        soType: 'PO',
        holdStatus: '00',
        interceptStatus: '00',
        orderTime: time.formatTime(new Date()),
      },
      rules: {
        ownerCode: [
          { required: true, message: '货主必填', trigger: 'change' }
        ],
        soType: [
          { required: true, message: '入库单类型必填', trigger: 'change' }
        ],
        orderTime: [
          { required: true, message: '订单时间必填', trigger: 'change' }
        ]
      },
      goodsFormVisible: false,
      selectedIds: '',
      cacheIds: [],
      tabIndex: '0',
      flag: 0, // 变量
      distribution: '',
      carList: [],
      vehicleList: [], // 所有车辆列表
      selectedVehicle: {}, // 选择的车辆,
      pageSize: 10,
      currentPage: 1,
      total: 0,
      jobId: []
    }
  },
  props: {

  },
  mounted () {
    this.getVarietyButton()
  },
  activated () {
    const data = this.$route.params.queryParams
    this.formData.ownerCode = data.ownerCode
    this.formData.ownerName = data.ownerName
  },
  methods: {

    handleSelectFocus () {
      this.getVehicleList() // 获取车辆列表
    },

    // 获取车辆列表不分页
    getVehicleList () {
      const url = this.$API.warehouseBasic.vehicle.getAllList
      this.$https.post(url, { businessType: 'SHIPMENT' })
        .then(data => {
          this.vehicleList = data.data
        })
    },

    // 车辆信息添加行
    handleAddCar () {
      if (!this.selectedVehicle.vehicleNo) return this.$message.warning('请先选择车辆')
      for (let i of this.carList) {
        if (i.isSet) return this.$message.warning('请先保存当前编辑项')
      }
      const list = {
        vehicleNo: '',
        vehicleType: '',
        driver: '',
        driverIdentity: '',
        driverTel: '',
        tempRequirement: '',
        vehicleTemp: '',
        isRefreeze: '',
        fmEtcd: '',
        toEtcd: '',
        remark: '',
        isSet: false,
        isChecked: false,
        ...this.selectedVehicle,
      }
      this.carList.unshift(list)
    },
    // 删除当前行
    handleDelOne (index, row) {
      this.carList.splice(index, 1)
    },
    // 删除多行
    handleDelCar () {
      this.carList = this.carList.filter((item, index) => {
        if (item.isChecked === false) {
          return item
        }
      })
    },
    handleCarEdit (index, row, bool) {
      if (row.isSet) {
        row.isSet = !row.isSet
        this.selectedVehicle = {} // 保存时清空已选车辆
      } else {
        this.$set(this.carList[index], 'isSet', true)
      }
      // if (this.mode === 'detail') {
      //   if (bool) {
      //     row.isSet = !row.isSet
      //   }
      // } else {
      //   if (bool) {
      //     if (row.isSet) {
      //       this.selectedVehicle = {} // 保存时清空已选车辆
      //     }
      //     row.isSet = !row.isSet
      //   }
      // }
    },
    // 勾选checkbox
    handleCarSelect (selection, row) {
      row.isChecked = !row.isChecked
      this.jobId = selection.map(item => {
        if (item.jobId) return item.jobId
      })
    },
    getCarList () {
      const url = this.$API.stockOut.sendOrder.carList
      const param = { soNo: this.formData.soNo, 'page.currentPage': this.currentPage, 'page.limitCount': this.pageSize }
      this.$https.post(url, param).then(res => {
        this.carList = res.rows || []
        this.currentPage = res.currentPage
        this.total = res.total
      })
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.getCarList()
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      this.getCarList()
    },

    toPrint (command, vmNode) {
      if (!this.distribution) {
        return this.$message.warning('请选择记录')
      }
      let allocId = this.distribution.map(item => {
        return item.allocId
      })
      const param = {
        title: vmNode.$el.innerHTML,
        qs: `_functionCode=${command}&allocId=${allocId.join(';')}&soNo=${this.formData.soNo}`
      }
      this.$print(param)
    },
    doSave () {

    },
    doAddInfo () {
      for (let i of this.carriersInfo) {
        if (i.isSet) return this.$message.warning('请先保存当前编辑项')
      }
      const list = {
        carrierCode: '',
        carrierName: '',
        vehicleNo: '',
        vehicleType: '',
        driver: '',
        driverIdentity: '',
        driverTel: '',
        tempRequirement: '',
        vehicleTemp: '',
        isRefreeze: '',
        fmEtcd: '',
        toEtcd: '',
        remark: '',
        isSet: true,
        isChecked: false,
        ...this.selectedVehicle,
      }
      this.carriersInfo.unshift(list)
    },
    doRemove () {

    },
    getVarietyButton () {
      if (this.formData.auditStatus === '00') {
        this.flageO = true
        this.flageT = false
        this.flageF = false
        this.flageTr = false
        this.flagSix = false
        this.flagFiv = false
        this.flagSeven = true
        this.isCancel = false
      } else if (this.formData.status === '00') { // 已审核/不审核,创建状态
        this.flageO = false
        this.flageT = true
        this.flageF = true
        this.flageTr = false
        this.flagFiv = false
        this.flagSix = true
        this.flagSeven = true
        this.isCancel = false
      } else if (this.formData.status === '00' || this.formData.status === '10' || this.formData.status === '20' || this.formData.status === '30') {
        // 已审核/不审核,部分预配/完全预配/部分分配
        this.flageO = false
        this.flageT = true
        this.flageF = false
        this.flageTr = true
        this.flagSix = true
        this.flagFiv = true
        this.flagSeven = true
        this.isCancel = true
      } else if (this.formData.status === '40') { // 已审核 完全分配
        this.flageO = false
        this.flageT = false
        this.flageF = false
        this.flageTr = true
        this.flagSix = false
        this.flagFiv = false
        this.flagSeven = false
        this.isCancel = true
      } else if (this.formData.status === '50' || this.formData.status === '70') {
        this.flageO = false
        this.flageT = true
        this.flageF = false
        this.flageTr = true
        this.flagSix = true
        this.flagFiv = true
        this.flagSeven = true
        this.isCancel = true
      } else if (this.formData.status === '60' || this.formData.status === '80' || this.formData.status === '90' || this.formData.status === '99') {
        this.flageO = false
        this.flageF = false
        this.flageT = false
        this.flageTr = false
        this.flagSix = false
        this.flagFiv = false
        this.flagSeven = false
        this.isCancel = false
      }
    },
    sublimeCannelAudit () {
      const url = this.$API.stockOut.sendOrder.getAuditCancel
      const param = { soNos: this.formData.soNo }
      this.$https.post(url, param).then(res => {
        this.getCommonMethod()
        this.needRefresh = true
      })
    },
    sublimeudit () {
      const url = this.$API.stockOut.sendOrder.getAuditing
      const param = { soNos: this.formData.soNo }
      this.$https.post(url, param).then(res => {
        this.getCommonMethod()
        this.needRefresh = true
      })
    },
    sublimedistribution () {
      const url = this.$API.stockOut.sendOrder.getAllot
      const param = { soNos: this.formData.soNo }
      this.$https.post(url, param).then(res => {
        this.getCommonMethod()
        this.needRefresh = true
      })
    },
    canceldistribution () {
      const url = this.$API.stockOut.sendOrder.getAllotCancel
      const param = { soNos: this.formData.soNo }
      this.$https.post(url, param).then(res => {
        this.getCommonMethod()
        this.needRefresh = true
      })
    },
    handleDistributionChange (selection) {
      this.distribution = selection
    },
    handleDistribution () {
      if (!this.distribution.length) { return this.$message.warning('请选着记录') }
      const url = this.$API.stockOut.sendOrder.getCancelAlloc
      const param = { soAllocs: JSON.stringify(this.distribution), serialNos: '' }
      this.$https.post(url, param).then(res => {
        this.getCommonMethod()
        this.needRefresh = true
      })
    },
    doDistribution (info, data) {
      let argument = {}
      if (~~this.variable === 1) {
        argument = {
          'ownerName': info.ownerName, // 货主名称
          'ownerCode': info.ownerCode, // 货主编码
          'skuCodeParamAllocEdit': info.skuCode, // 商品编码
          'skuName': info.skuName, // 商品名称
          'skuCode': info.skuCode, // 商品编码
          'lotNum': info.lotNum, // 批次号
          'locCode': info.locCode, // 库位
          'traceId': info.traceId, // 跟踪号
          'packDesc': info.packDesc, // 包装规格
          'packCode': info.packCode, // 包装规格编码
          'uomQty': info.uomQty, // 数量
          'uomDesc': info.uomDesc, // 数量单位
          'uom': info.printUom, // 包装单位
          'qtyUom': info.qtyUom, // 包装数量
          'qtyEa': info.qtyEa, // EA数量
          'skuWeight': null,
          'formatCode': info.formatCode,
          'weight': info.weight, // 重量
          'toLoc': info.toLoc, // 目标库位编码
          'toId': info.toId, // 目标跟踪号
          'serialNo': null,
          'soNo': this.currentData.soNo, // 出库单号
          'lineNo': this.currentData.lineNo, // 行号
          'trackingNo': info.trackingNo // 快递单'
        }
      } else {
        argument = Object.assign({}, this.distributionData, info)
      }
      const url = this.$API.stockOut.sendOrder.getManualAlloc
      const param = { soAllocs: JSON.stringify([argument]), serialNos: '' }
      this.$https.post(url, param).then(res => {
        this.dialogTableVisible = false
        this.getCommonMethod()
        this.needRefresh = true
        this.getVarietyButton()
      })
    },
    // 手工分配
    handleAllot (row) {
      if (this.formData.auditStatus === '00') {
        return this.$message.warning('出单未审核')
      } else if (row.status === '00' || row.status === '10' || row.status === '20' || row.status === '30') {
        this.dialogTableVisible = true
        this.showStatus = 2
        this.variable = 1
        this.currentData = row
        const info = {
          ownerName: row.ownerName,
          lotNum: '',
          locCode: '',
          traceId: '',
          packDesc: '',
          uomDesc: '',
          qtyUom: '',
          qtyEa: '',
          weight: '',
          toLoc: 'SORTATION',
          toId: '',
          serialNo: '',
          skuCodes: row.skuCode,
          ownerCode: row.ownerCode
        }
        this.$refs.child.distributionInformation(info)
      } else {
        return this.$message.warning('商品明细为创建、部分预配、完全预配、部分分配状态时才可以进行手工分配')
      }
    },
    // 取消分配
    handleCancelDistribution () {
      if (!this.selectedIds) {
        return this.$message.warning('请选择记录')
      }
      const soNo = this.formData.soNo
      const param = {
        soNo,
        processByCode: 'BY_SO_LINE',
        lineNos: this.selectedIds
      }
      const url = this.$API.stockOut.sendOrder.getQuerySerial
      this.$https.post(url, param).then(res => {
        this.getCommonMethod()
        this.needRefresh = true
      })
    },
    getData (url, param) {
      return this.$https.post(url, param)
    },
    getCommonMethod () {
      const soNo = this.formData.soNo
      const goodsParam = { soNo: soNo, 'page.currentPage': 1, 'page.limitCount': 10 }
      const queryParam = { soNo: soNo, soNos: soNo, 'page.currentPage': 1, 'page.limitCount': 10 }
      const goodsUrl = this.$API.stockOut.sendOrder.getDetailGoods
      const queryUrl = this.$API.stockOut.sendOrder.getQueryAll
      const headUrl = this.$API.stockOut.sendOrder.headList
      this.$https.all([this.getData(goodsUrl, goodsParam), this.getData(queryUrl, queryParam), this.getData(headUrl, goodsParam)]).then(res => {
        this.goodsList = res[0].rows
        this.distributionInfo = res[1].rows
        this.formData = res[2]
        this.getVarietyButton()
      })
    },
    // 取消订单行 + 分配 (合并)
    handleCancelOrder (a) {
      if (!this.selectedIds) {
        return this.$message.warning('请选择记录')
      }
      const soNo = this.formData.soNo
      const param = {
        soNo,
        processByCode: 'BY_SO_LINE',
        lineNos: this.selectedIds
      }
      let url = ''
      if (~~a === 1) {
        this.flag = 1
        url = this.$API.stockOut.sendOrder.getCancelSoDetail
      } else if (~~a === 2) {
        url = this.$API.stockOut.sendOrder.getAollBySoDetail
      }
      this.$https.post(url, param).then(res => {
        this.getCommonMethod()
      })
    },
    // 分配明细的编辑
    dohandleGood (i, data) {
      this.showStatus = 2
      this.dialogTableVisible = true
      this.$refs.child.doEditDetail(data)
      this.distributionData = data
      this.variable = 2
    },
    // 查看分配详情信息
    getDistributionInfo (data) {
      this.$refs.child.emitEvent(data)
      this.showStatus = 1
      this.dialogTableVisible = true
    },

    // 查看商品详情信息
    doSeelineInfo (data) {
      this.goodsFormVisible = true
      this.goodsEditRow = data
      this.showBool = false
    },

    // 打开商品弹窗
    handleAddGoods () {
      if (!this.formData.ownerCode) {
        this.$message.warning('货主编码不能为空')
        return
      }
      this.goodsEditRow = {}
      this.goodsFormVisible = true
      this.editBool = false
      this.showBool = true
    },

    // 商品checkbox勾选,存储id
    handleSelectChange (selection) {
      this.selectedIds = selection.map(item => item.lineNo).join(',')
    },

    // 商品信息编辑
    handleGoodsEdit (index, row) {
      let data = Object.assign({ isChecked: 'false' }, row)
      this.goodsEditRow = data
      this.rowIndex = index
      this.goodsFormVisible = true
      this.editBool = true
      this.showBool = true
    },

    // 商品信息保存成功
    editOK (row, index) {
      this.$set(this.goodsList, index, row)
      this.goodsFormVisible = false
      this.editBool = false
    },

    // 商品信息删除多行
    handleDelGoods () {
      if (!this.selectedIds) return
      const url = this.$API.stockOut.sendOrder.delGoodsList
      const param = { soNo: this.formData.soNo, lineNos: this.selectedIds }
      if (this.mode === 'edit') {
        this.$https.post(url, param).then(res => {
          if (res.success) {
            this.cacheIds = this.selectedIds.split(',').concat(this.cacheIds)
            this.goodsList = this.goodsList.filter((item, index) => {
              if (!item.isChecked) return item
            })
          }
        })
      } else {
        this.goodsList = this.goodsList.filter((item, index) => {
          if (!item.isChecked) return item
        })
      }
    },

    // 删除商品单行
    handleDelGoodsOne (index, row) {
      const url = this.$API.stockOut.sendOrder.delGoodsList
      this.selectedIds = row.lineNo
      if (this.mode === 'edit') {
        this.cacheIds = this.selectedIds.split(',').concat(this.cacheIds)
        const param = { soNo: row.soNo, lineNos: this.selectedIds }
        this.$https.post(url, param).then(res => {
          if (res.success) {
            this.goodsList.splice(index, 1)
          }
        })
      } else {
        this.goodsList.splice(index, 1)
      }
    },
    handleSelect (selection, row) {
      row.isChecked = !row.isChecked
    },

    // 关闭商品弹窗
    close () {
      this.goodsFormVisible = !this.goodsFormVisible
    },

    dialogClose () {
      this.dialogTableVisible = !this.dialogTableVisible
    },

    // 确认
    handleConfirm (list) {
      this.goodsList.push(list)
      this.goodsFormVisible = false
    },

    // 确认并添加
    handleConfirmAdd (list) {
      this.goodsList.push(list)
    },

    // 复制商品信息
    handlCopy (index, row) {
      if (this.mode !== 'edit') return this.$message.warning('新增状态下不能复制！')
      const url = this.$API.stockOut.sendOrder.copyGoods
      const param = { soNo: row.soNo, lineNo: row.lineNo }
      this.$https.post(url, param).then(res => {
        this.goodsList.push(res.data)
      })
    },

    // 提交表单
    submitForm () {
      if (this.mode === 'edit') {
        this.carList = []
      }
      this.$refs.form.validate((valid) => {
        const url = this.$API.stockOut.sendOrder.addandeditList
        const ids = this.cacheIds.toString()
        console.log(ids)
        const param = {
          header: JSON.stringify(this.formData),
          details: JSON.stringify(this.goodsList || []),
          carriers: JSON.stringify(this.carList || []),
          deleteLineNos: ids
        }
        if (valid) {
          this.$https.post(url, param).then(res => {
            if (res.success) {
              this.needRefresh = true
              this.$refs.form.resetFields()
              this.$router.replace({
                name: 'sendOrder'
              })
            }
          })
        }
      })
    },
    getChangeCarList (val) {
      this.carList = val
    },
    // 获取货主库存
    getInventory (selectedData) {
      const url = this.$API.stockOut.sendOrder.getInventory
      const param = {
        pmCode: selectedData.pmCode
      }
      const config = {
        headers: { 'Content-Type': 'application/json' },
        transformRequest: [],
      }
      return this.$https.post(url, param, config)
        .then(data => {
          if (!data.data) this.$message.error('该货主没有库存, 请选择其他货主')
          return data.data
        })
    },
    // 选择货主变化
    ownerChange (selected) {
      this.formData.ownerName = selected.ebcuNameCn
    },
  },
  // 路由进入前
  beforeRouteEnter (to, from, next) {
    next(vm => {
      const bread = {
        name: '出库管理',
        route: { name: 'stockOut' },
        children: [
          {
            name: '发运订单',
            route: { name: 'sendOrder' },
            originalUrl: 'OutboundSoOrderList',
          },
          {
            name: '拣货',
            route: { name: 'picking' },
            originalUrl: 'OutboundPkTaskList',
          },
          {
            name: '发货',
            route: { name: 'deliverGoods' },
            originalUrl: 'OutboundShippmentList',
          },
          {
            name: '装车单',
            route: { name: 'loadingList' },
            originalUrl: 'OutboundLoadOrderList',
          }
        ],
      }
      // vm.$store.commit('framework/changePageName', '发运订单')
      vm.$store.commit('framework/changeBreadcrumb', [bread, bread.children[0]])
      vm.$store.commit('framework/changeActiveMenu', '2-0')
      vm.$store.commit('framework/changeOpenMenuId', '2')
    })
  },
  beforeRouteLeave (to, from, next) {
    this.needRefresh && (to.meta.needRefresh = true)
    to.meta.tabIndex = this.tabIndex
    next()
  },
  watch: {
    formData: {
      handler (item) {
        // console.log(item)
      },
      deep: true
    },
    settleData: {
      handler (item) {
        this.formData.settleName = item.ebcuNameCn
        this.formData.settleTel = item.ebccTel
        this.formData.settleFax = item.ebccFax
        this.formData.settleAddress = item.ebcuAddressDesc
        this.formData.settleIndustryType = item.ebcuIndustryType
      },
      deep: true
    },
    consigneeData: {
      handler (item) {
        this.formData.consigneeName = item.ebcuNameCn
        this.formData.consigneeTel = item.ebccMobile
        this.formData.consigneeFax = item.ebcuFax
        this.formData.consigneeAddr = item.ebcuAddressDesc
        this.formData.contactName = item.ebccContactName
        this.formData.contactTel = item.ebccTel
        this.formData.contactFax = item.ebccFax
        this.formData.contactEmail = item.ebccEmail
        this.formData.contactAddr = item.eblcAddress
      },
      deep: true
    }
  }
}
</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;
}
.blue {
  cursor: pointer;
  color: #0682ea;
}
.el-table {
  .el-input__inner {
    padding: 0 5px;
  }
}
</style>
