<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="asnNo">
                <el-input v-model="formData.asnNo" disabled></el-input>
              </el-form-item>
              <el-form-item label="货主" prop="ownerCode">
                <PublicQuery
                  title="货主"
                  :disabled="mode.type==='edit'||mode==='detail'"
                  single
                  @change="ownerChange"
                  cfgKey="inbWmsCustomerCode"
                  baseUrl="/inb_web/inbweb"
                  :valueField.sync="formData.ownerCode"
                  :textField.sync="formData.ownerName"
                ></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="90"></el-option>
                  <el-option label="关闭订单" value="99"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="冻结状态" prop="holdStatus">
                <el-select v-model="formData.holdStatus" 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="调出仓库" prop="allocateOutWhNames">
                <el-input disabled v-model="formData.allocateOutWhNames">
                  <i slot="suffix" class="el-icon-search"></i>
                </el-input>
              </el-form-item>
              <el-form-item label="入库单类型" prop="asnType">
                <el-select v-model="formData.asnType" filterable placeholder="请选择">
                  <el-option label="普通入库" value="PI"></el-option>
                  <el-option label="调拨入库" value="AI"></el-option>
                  <el-option label="退货入库" value="RI"></el-option>
                  <el-option label="换货入库" value="EI"></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="货主名称" prop="ebcuNameCn">
                <el-input v-model="formData.ownerName" disabled></el-input>
              </el-form-item> -->
              <el-form-item label="审核状态" prop="auditStatus">
                <el-select v-model="formData.auditStatus" filterable placeholder="请选择" disabled>
                  <el-option label="未审核" value="00"></el-option>
                  <el-option label="不审核" value="90"></el-option>
                  <el-option label="已审核" value="99"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="质检状态" prop="qcStatus">
                <el-select v-model="formData.qcStatus" 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="99"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="项目名称" prop="businessItemCode">
                <PublicQuery
                  title="项目名称"
                  single
                  :disabled="mode==='detail'"
                  :rowData.sync="businessData"
                  cfgKey="customerBusinessItems"
                  baseUrl="/inb_web/inbweb"
                  :valueField.sync="formData.businessItemCode"
                  :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="fmEta">
                <el-date-picker v-model="formData.fmEta" type="datetime" placeholder="选择日期时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="预计到货时间到" prop="toEta">
                <el-date-picker v-model="formData.toEta" type="datetime" 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="auditTime">
                <el-input v-model="formData.auditTime" disabled></el-input>
              </el-form-item>
              <el-form-item label="调出仓库单号" prop="allocateSoNo">
                <el-input v-model="formData.allocateSoNo" disabled></el-input>
              </el-form-item>
              <el-form-item label="订单时间" prop="orderTime">
                <el-date-picker v-model="formData.orderTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="审核人" prop="auditName">
                <el-input v-model="formData.auditName" disabled></el-input>
              </el-form-item>
              <el-form-item label="是否预约月台" prop="isAppointDock">
                <el-select v-model="formData.isAppointDock" filterable placeholder="请选择" disabled>
                  <el-option label="是" value="Y"></el-option>
                  <el-option label="否" value="N"></el-option>
                </el-select>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
      <el-row :gutter="40" class="row-mrg-t">
        <el-col :span="24">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="供应商" name="3">
              <el-form-item label="供应商名称" prop="supplierCode">
                <PublicQuery
                  title="供应商"
                  single
                  :disabled="mode==='detail'"
                  :rowData.sync="supplierData"
                  cfgKey="LSP_SERVICE_SUPPLIER"
                  baseUrl="/inb_web/inbweb"
                  :valueField.sync="formData.supplierCode"
                  :textField.sync="formData.supplierName"
                ></PublicQuery>
              </el-form-item>
              <el-form-item label="电话" prop="supplierTel">
                <el-input v-model="formData.supplierTel" disabled></el-input>
              </el-form-item>
              <el-form-item label="地址" prop="supplierAddress">
                <el-input v-model="formData.supplierAddress" disabled></el-input>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
      <el-row :gutter="40" class="row-mrg-t" v-if="mode!=='detail'">
        <el-col :span="24" >
          <el-collapse v-model="activeNames">
            <el-collapse-item title="承运商" name="4">
              <el-form-item label="承运商名称" prop="carrierCode">
                <PublicQuery
                  title="承运商"
                  single
                  :disabled="mode==='detail'"
                  :rowData.sync="carrierData"
                  cfgKey="LSP_TRANSPORT_SUPPLIER"
                  baseUrl="/inb_web/inbweb"
                  :valueField.sync="formData.carrierCode"
                  :textField.sync="formData.carrierName"
                ></PublicQuery>
              </el-form-item>
              <el-form-item label="电话" prop="carrierTel">
                <el-input v-model="formData.carrierTel" disabled></el-input>
              </el-form-item>
              <el-form-item label="地址" prop="carrierAddress">
                <el-input v-model="formData.carrierAddress" disabled></el-input>
              </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 v-if="mode!=='detail'">
                <el-button v-auth="50300030101" type="primary" @click="handleAddGoods">添加</el-button>
                <el-button v-auth="50300030101" type="primary" @click="handleDelGoods">删除</el-button>
              </el-row>
              <el-row v-else>
                <el-button
                v-if="!(formData.auditStatus==='00'||formData.status==='90'||formData.status==='99'||formData.holdStatus==='99')"
                v-auth="50300030101" type="primary" @click="toGoodsMore('createPalletize')">码盘</el-button>
                <el-button
                v-if="!(formData.auditStatus==='00'||formData.status==='90'||formData.status==='99'||formData.holdStatus==='99')"
                 v-auth="50300030101" type="primary" @click="toGoodsMore('createQcByAsnLineNo')">生成质检单</el-button>
                <el-button
                v-if="!(formData.auditStatus==='00'||formData.status==='20'||formData.status==='90'||formData.status==='99'||formData.holdStatus==='99')"
                v-auth="50300030101" type="primary" @click="toGoodsMore()">生成序列号</el-button>
                <el-dropdown class="mrg-l"  @command="toGoodsMore">
                    <el-button v-auth="50100020111" type="primary">
                        更多<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                      v-if="!(formData.auditStatus==='00'||formData.status==='90'||formData.status==='99'||formData.holdStatus==='99')"
                       v-auth="50100020112" command="cancelPalletize" >取消码盘</el-dropdown-item>
                        <el-dropdown-item
                        v-if="!(formData.status==='20'||formData.status==='90'||formData.status==='99'||formData.holdStatus==='99')"
                        v-auth="50100020112" command="cancelAsnDetail" >取消订单行</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown class="mrg-l" @command="toGoodsPrint">
                    <el-button v-auth="50100020111" type="primary">
                        打印<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-auth="50100020112" command="18010050102" >打印码盘标签</el-dropdown-item>
                        <el-dropdown-item v-auth="50100020112" command="18010050103" >Print Palletize Label</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
              </el-row>
              <el-row class="row-mrg-t">
                <el-table
                  border
                  :data="goodsList"
                  @select="handleSelect"
                  @selection-change="handleSelectChange"
                >
                  <table-column type="selection" fixed align="center"></table-column>
                  <table-column label="行号" prop="lineNo">
                    <template slot-scope="scope">
                      <p class="blue" @click="handleGoodsLine(scope.row)">{{ scope.row.lineNo}}</p>
                    </template>
                  </table-column>
                  <table-column label="状态">
                    <template
                      slot-scope="scope"
                    >{{ $utils.keyMatcher(scope.row.status, $keys.stockIn.status).name }}</template>
                  </table-column>
                  <table-column label="商品">
                    <template slot-scope="scope">
                      <p>{{scope.row.skuCode}}</p>
                      <p>{{scope.row.skuName}}</p>
                    </template>
                  </table-column>
                  <table-column label="包装规格" prop="packDesc"></table-column>
                  <table-column label="单位" prop="uomDesc"></table-column>
                  <table-column label="预收数" prop="qtyAsnUom"></table-column>
                  <!-- <table-column label="预收数EA" prop="qtyAsnEa"></table-column> -->
                  <table-column label="商品重量(吨)" prop="skuWeight" :formatter="formatColumn"></table-column>
                  <table-column label="预收重量(吨)" prop="asnWeight" :formatter="formatColumn"></table-column>
                  <table-column label="计划收货库位" prop="planToLoc"></table-column>
                  <table-column label="操作" width="130" fixed="right">
                    <template slot-scope="scope" >
                      <div v-if="mode!=='detail'">
                        <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>
                      </div>
                      <div v-else>
                        <el-button size="mini"  type="text"
                          @click="handleSinglePoint('createPalletize', scope.row)">码盘</el-button>
                        <el-button size="mini" type="text"
                         @click="handleSinglePoint('cancelPalletize', scope.row)">取消码盘</el-button>
                        <el-button size="mini" type="text"
                         @click="handleSinglePoint('createQcByAsnLineNo', scope.row)">生成质检单</el-button>
                      </div>
                    </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="mode==='detail'?'承运商':'车辆信息'" name="5">
              <el-row>
                <el-select
                  v-model="selectedVehicle"
                  value-key="vehicleNo"
                  placeholder="请选择车辆"
                  filterable
                  @focus="handleSelectFocus">
                  <el-option
                    v-for="item in vehicleList"
                    :key="item.vehicleNo"
                    :value="item"
                    :label="item.vehicleNo + ' - ' + item.driver"
                  ></el-option>
                </el-select>
                <el-button style="margin-left: 10px;" v-if="mode!=='detail'" v-auth="50300030101" type="primary" @click="handleAddCar">添加</el-button>
                <el-button style="margin-left: 10px;" v-if="mode==='detail'"  type="primary" @click="handleAddCarrier">添加</el-button>
                <el-button v-auth="50300030101" type="primary" @click="handleDelCar">移除</el-button>
              </el-row>
              <!--<el-button v-if="mode==='detail'" v-auth="50300030101" type="primary" @click="handleAddCarrier">添加</el-button>-->
              <!--<el-button v-if="mode==='detail'" v-auth="50300030101" type="primary" @click="handleDelCar">移除</el-button>-->
              <el-row class="row-mrg-t">
                <el-table :data="carList" ref="table" border  @select="handleSelect" @selection-change="handleCar">
                  <table-column type="selection" fixed  align="center"></table-column>
                  <table-column label="承运商" v-if="mode==='detail'">
                    <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="scope.row.isSet?'保存':'编辑'" placement="top">
                        <el-button
                          size="mini"
                          type="primary"
                          :icon="scope.row.isSet ?'el-icon-check':'el-icon-edit'"
                          plain
                          circle
                          @click="handleEdit(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="handleDelete(scope.$index, scope.row)"
                        ></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">
                  </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-form-item label="结算人编码" prop="settleCode">
                <PublicQuery
                  title="结算人编码"
                  single
                  :disabled="mode==='detail'"
                  :rowData.sync="settleData"
                  cfgKey="inbWmsSettleCode"
                  baseUrl="/inb_web/inbweb"
                  :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="8">
              <div class="operation-info">
                <span>创建人登录名(姓名)：{{formData.creatorLoginName}}({{formData.creatorUserName}})</span>
                <span>创建时间：{{formData.createTime}}</span>
                <span>修改人登录名(姓名)：{{formData.modifierLoginName}}({{formData.modifierUserName}})</span>
                <span>修改时间：{{formData.modifyTime}}</span>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
    </el-form>
    <div class="row-mrg-t">
      <div v-if="mode!=='detail'">
        <el-button v-auth="50100020205" type="primary" @click="submitForm" >保存</el-button>
        <!-- <el-button v-auth="50100020207" type="primary"  @click="$router.back()">取 消</el-button> -->
      </div>
      <div v-if="mode==='detail'">
          <el-button
          v-if="!(formData.status==='00'&&(formData.auditStatus==='90'||formData.auditStatus==='99')
          ||(formData.status==='90'||formData.status==='99')||(formData.holdStatus==='99')) "
          v-auth="50100020205" type="primary" @click="groupMore('audit')" >审核</el-button>

          <el-button
          v-if="!(formData.status==='90'||formData.status==='99'||formData.holdStatus==='99')"
          v-auth="50100020205" type="primary" @click="groupMore('createQcByAsnNo')" >生成质检单</el-button>

          <el-dropdown class="mrg-l" @command="groupMore">
            <el-button v-auth="50100020111" type="primary">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                v-if="!((formData.status==='00'&&formData.auditStatus==='90')||formData.status==='90' || formData.status==='99'||formData.holdStatus==='99')"
                v-auth="50100020113" needConfirm command="cancelAudit" >取消审核</el-dropdown-item>
                <el-dropdown-item
                v-if="!(formData.status==='90'||formData.status==='99')"
                v-auth="50100020115" needConfirm command="holdAsn" >冻结订单</el-dropdown-item>
                <el-dropdown-item
                v-if="!(formData.status==='90'||formData.status==='99')"
                v-auth="50100020116" needConfirm command="cancelHoldAsn" >取消冻结</el-dropdown-item>
                <el-dropdown-item
                v-if="!((formData.status==='00'&&formData.auditStatus==='99')||formData.status==='90'||formData.status==='99'||formData.holdStatus==='99')"
                v-auth="50100020116" needConfirm command="cancel" >取消订单</el-dropdown-item>
                <el-dropdown-item
                v-if="!(formData.status==='00'||formData.status==='90'||formData.status==='99'||formData.holdStatus==='99')"
                v-auth="50100020115" needConfirm command="createVoucherNoByAsnNo" >生成凭证号</el-dropdown-item>
                <el-dropdown-item
                v-if="!(formData.status==='00'||formData.status==='90'||formData.status==='99'||formData.holdStatus==='99')"
                v-auth="50100020116" needConfirm command="cancelVoucherNoByAsnNo" >取消凭证号</el-dropdown-item>
                <el-dropdown-item
                 v-if="!(formData.status==='00'||formData.status==='90'||formData.status==='99'||formData.holdStatus==='99')"
                v-auth="50100020116" needConfirm command="generalChargeBoundAgain" >重新计费</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown class="mrg-l" @command="groupPrint">
          <el-button v-auth="50100020111" type="primary">
              打印<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-auth="50100020112" command="18010050101" >打印码盘标签</el-dropdown-item>
              <el-dropdown-item v-auth="50100020112" command="18010050105" >Print Reciving List</el-dropdown-item>
          </el-dropdown-menu>
      </el-dropdown>
       <el-button class="mrg-l" v-auth="50100020207" type="primary"  @click="$router.back()">关闭</el-button>
      </div>
    </div>

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

    <DetailDetail
      :showDetail="showDetailDetail"
      :detailData="detailData"
      @close="showDetailDetail = false"
    ></DetailDetail>
  </div>
</template>
<script>
import GoodsForm from './childrenForm/goods-form'
import DetailDetail from './childrenForm/DetailDetail'
export default {
  components: {
    GoodsForm,
    DetailDetail
  },
  created () {
    this.mode = this.$route.params.mode || 'create'
    if (this.mode === 'edit') {
      this.formData = this.$route.params.headData || {}
      this.carList = this.$route.params.carData || []
      this.goodsList = this.$route.params.goodsData || []
      this.currentPage = this.$route.params.page
      this.total = this.$route.params.total
    }
    if (this.mode === 'detail') {
      this.formData = this.$route.params[0] || {}
      this.carList = this.$route.params[1] || []
      this.goodsList = this.$route.params[2] || []
      this.currentPage = this.$route.params[3]
      this.total = this.$route.params[5]
    }
  },
  data () {
    return {
      needRefresh: false, // 是否需要父路由刷新
      mode: 'create', // 模式
      activeNames: ['1', '2', '3', '4', '5', '6', '7', '8'],
      carList: [],
      goodsList: [],
      selectlistRow: [],
      deleteIds: [],
      settleData: {},
      ownerData: {},
      businessData: {},
      supplierData: {},
      carrierData: {},
      goodsEditRow: {},
      rowIndex: '',
      editBool: false,
      formData: {
        status: '00',
        holdStatus: '00',
        asnType: 'PI',
        auditStatus: '00',
        orderTime: this.$utils.time.formatTime(new Date()),
        isAppointDock: 'N'
      },
      rules: {
        ownerCode: [
          { required: true, message: '货主编码必填', trigger: 'change' }
        ],
        asnType: [
          { required: true, message: '入库单类型必填', trigger: 'change' }
        ],
        orderTime: [
          { required: true, message: '订单时间必填', trigger: 'change' }
        ]
      },
      goodsFormVisible: false,
      selectedIds: '',
      cacheIds: [],
      vehicleList: [], // 所有车辆列表
      selectedVehicle: {}, // 选择的车辆,
      detailData: {}, // 详情数据
      showDetailDetail: false, // 任务详情
      pageSize: 10,
      currentPage: 1,
      total: 0,
      jobIds: []
    }
  },
  props: {
  },
  mounted () {

  },
  methods: {
    handleSelectFocus () {
      this.getVehicleList() // 获取车辆列表
    },
    // 打开商品弹窗
    handleAddGoods () {
      if (!this.formData.ownerCode) {
        this.$message.warning('货主编码不能为空')
        return
      }
      this.goodsEditRow = {}
      this.goodsFormVisible = true
      this.editBool = false
    },
    goodsclose () {
      this.goodsFormVisible = !this.goodsFormVisible
    },

    // 车辆信息添加行
    handleAddCar () {
      if (!this.selectedVehicle.vehicleNo) return this.$message.warning('请先选择车辆')
      const isAddConditions = [...this.carList].some(item => {
        return item.vehicleNo === this.selectedVehicle.vehicleNo
      })
      if (isAddConditions) {
        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,
      }
      if (this.mode === 'edit' || this.mode === 'detail') {
        this.handleAllSave(this.selectedVehicle)
        return false
      }
      this.carList.unshift(list)
    },
    // 承运商
    handleAddCarrier () {
      if (!this.selectedVehicle.vehicleNo) return this.$message.warning('请先选择车辆')
      const isAddConditions = [...this.carList].some(item => {
        return item.vehicleNo === this.selectedVehicle.vehicleNo
      })
      if (isAddConditions) {
        return this.$message.warning('不能添加相同车牌号')
      }
      for (let i of this.carList) {
        if (i.isSet) return this.$message.warning('请先保存当前编辑项')
      }
      const list = {
        carrierCode: '',
        carrierName: '',
        vehicleNo: '',
        vehicleType: '',
        driver: '',
        driverIdentity: '',
        driverTel: '',
        tempRequirement: '',
        vehicleTemp: '',
        isRefreeze: '',
        fmEtcd: '',
        toEtcd: '',
        remark: '',
        isSet: false,
        isChecked: false,
        ...this.selectedVehicle,
      }
      // this.carList.unshift(list)
      this.handleAllSave(this.selectedVehicle)
    },

    // 保存车辆信息
    handleAllSave (row) {
      // let newArr = this.carList.filter(item => {
      //   return !item.jobId
      // })
      const url = this.$API.stockIn.preReceiving.saveCarrier
      const param = { asnNo: this.formData.asnNo, carriers: JSON.stringify([row]) }
      this.$https.post(url, param).then(res => {
        this.getCar()
      })
    },
    getCar () {
      // if (this.total > this.pageSize) this.pageSize += this.pageSize
      const url = this.$API.stockIn.preReceiving.carList
      const param = { asnNo: this.formData.asnNo, 'page.currentPage': this.currentPage, 'page.limitCount': this.pageSize }
      this.$https.post(url, param).then(res => {
        let carList = res.rows || []
        // carList.map(item => {
        //   return (item['isSet'] = false)
        // })
        // console.log(carList)
        this.carList = carList
        this.currentPage = res.currentPage
        this.total = res.total
      })
    },
    handleCar (selection) {
      this.jobIds = selection.map(item => item.jobId)
    },

    // 删除多行
    handleDelCar () {
      if (this.mode === 'edit' || this.mode === 'detail') {
        const url = '/inb_web/inbweb/inboundAsnController/removeCarrier.shtml'
        const param = { jobIds: JSON.stringify(this.jobIds) }
        this.$https.post(url, param).then(res => {
          this.getCar()
        })
      } else {
        this.carList = this.carList.filter((item, index) => {
          if (item.isChecked === false) {
            return item
          }
        })
      }
    },

    // 删除当前行
    handleDelete (index, row) {
      if (this.mode === 'edit' || this.mode === 'detail') {
        const url = '/inb_web/inbweb/inboundAsnController/removeCarrier.shtml'
        const param = { jobIds: JSON.stringify([row.jobId]) }
        this.$https.post(url, param).then(res => {
          this.getCar()
        })
      } else {
        this.carList.splice(index, 1)
      }
    },

    //  车辆信息编辑当前行
    handleEdit (index, row, bool) {
      console.log(row)
      // row.isSet = true
      if (row.isSet) {
        row.isSet = !row.isSet
        this.$set(this.carList[index], 'isSet', false)
        if (this.mode === 'edit' || this.mode === 'detail') {
          const url = '/inb_web/inbweb/inboundAsnController/saveCarrier.shtml'
          const param = { asnNo: this.formData.asnNo, carriers: JSON.stringify([row]) }
          this.$https.post(url, param).then(res => {
            this.getCar()
          })
        }
      } else {
        this.$set(this.carList[index], 'isSet', true)
      }
    },

    // 勾选checkbox
    handleSelect (selection, row) {
      row.isChecked = !row.isChecked
    },

    // 商品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
    },

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

    // 商品信息删除多行
    handleDelGoods () {
      if (!this.selectedIds) return
      const url = this.$API.stockIn.preReceiving.delGoodsList
      const param = { asnNo: this.formData.asnNo, 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.stockIn.preReceiving.delGoodsList
      if (this.mode === 'edit') {
        this.selectedIds = row.lineNo
        this.cacheIds = this.selectedIds.split(',').concat(this.cacheIds)
        const param = { asnNo: row.asnNo, lineNos: this.selectedIds }
        this.$https.post(url, param).then(res => {
          if (res.success) {
            this.goodsList.splice(index, 1)
          }
        })
      } else {
        this.goodsList.splice(index, 1)
      }
    },

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

    // 重新请求商品列表和头部信息
    reGetList (currentPage = 1, pageSize = 10) {
      const url = this.$API.stockIn.preReceiving.getDetailGoods
      const headUrl = this.$API.stockIn.preReceiving.headList
      const car = this.$API.stockIn.preReceiving.carList
      const param = { asnNo: this.formData.asnNo, 'page.currentPage': currentPage, 'page.limitCount': pageSize }
      this.$https.all([this.getData(headUrl, param), this.getData(url, param), this.getData(car, param)]).then(res => {
        this.formData = res[0]
        this.goodsList = res[1].rows
        this.total = res[1].total
        this.carList = res[2].rows || []
        this.currentPage = res[2].currentPage
        this.total = res[2].total
        this.pageSize = res[2].limit
      })
    },
    handleSizeChange (pageSize) {
      this.reGetList(pageSize)
    },
    handleCurrentChange (currentPage) {
      this.reGetList(currentPage)
    },

    // 点击行号详情
    handleGoodsLine (row) {
      this.detailData = row
      console.log(row)
      this.showDetailDetail = true
    },

    // 确认
    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.stockIn.preReceiving.copyGoods
      const param = { asnNo: row.asnNo, lineNo: row.lineNo }
      this.$https.post(url, param).then(res => {
        this.goodsList.push(res.data)
      })
    },
    // 商品打印
    toGoodsPrint (command, vmNode) {
      if (!this.selectedIds) return this.$message.warning('请选择记录')
      const param = {
        title: vmNode.$el.innerHTML,
        qs: `_functionCode=${command}&asnLineNo=${this.selectedIds.split(',').join(';')}&asnNo=${this.formData.asnNo}`
      }
      this.$print(param)
    },
    // 商品列表头部单点操作
    toGoodsMore (command, vmNode) {
      if (!this.selectedIds) return this.$message.warning('请选择记录')
      const url = this.$API.stockIn.preReceiving.cancelAsnDetail
      const param = { asnNo: this.formData.asnNo, lineNos: this.selectedIds }
      this.$https.post(url, param).then(res => {
        this.reGetList()
      })
    },

    // 商品表格操作
    handleSinglePoint (urlKey, row) {
      const url = this.$API.stockIn.preReceiving[urlKey]
      const param = { asnNo: row.asnNo, lineNos: row.lineNo }
      this.$https.post(url, param).then(res => {
        this.reGetList()
      })
    },

    groupMore (urlkey) {
      const url = this.$API.stockIn.preReceiving[urlkey]
      const param = { asnNos: this.formData.asnNo }
      this.$https.post(url, param).then(res => {
        this.reGetList()
      })
    },

    groupPrint (command, vmNode) {
      const param = {
        title: vmNode.$el.innerHTML,
        qs: `_functionCode=${command}&asnNo=${this.formData.asnNo}`
      }
      this.$print(param)
    },

    // 提交表单
    submitForm () {
      if (this.mode === 'edit') {
        this.carList = []
      }
      this.$refs.form.validate((valid) => {
        const url = this.$API.stockIn.preReceiving.addandeditList
        const param = {
          header: JSON.stringify(this.formData || []),
          details: JSON.stringify(this.goodsList || []),
          carriers: JSON.stringify(this.carList || []),
          deleteLineNos: JSON.stringify(this.cacheIds || [])
        }
        if (valid) {
          this.$https.post(url, param).then(res => {
            if (res.success) {
              this.needRefresh = true
              this.$refs.form.resetFields()
              this.$router.back()
            }
          })
        }
      })
    },
    // 获取车辆列表不分页
    getVehicleList () {
      const url = this.$API.warehouseBasic.vehicle.getAllList
      this.$https.post(url, { businessType: 'RECEIVE' })
        .then(data => {
          this.vehicleList = data.data
        })
    },
    // 选择货主变化
    ownerChange (selected) {
      this.formData.ownerName = selected.ebcuNameCn
    },
  },

  beforeRouteLeave (to, from, next) {
    this.needRefresh && (to.meta.needRefresh = true)
    next()
  },

  watch: {
    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
    }
  }
}
</script>
 <style lang="scss">
.el-collapse {
  border: 1px solid #ebeef5;
  .el-collapse-item__header {
    padding-left: 10px;
    font-weight: bold;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ebeef5 !important;
  }
  .el-collapse-item__content {
    padding-top: 25px;
    padding-left: 15px;
  }
}
.row-mrg-t {
  margin-top: 20px;
}
.operation-info {
  display: flex;
  justify-content: space-between;
}
.mrg-l {
    margin-left: 10px !important
}
.blue {
  cursor: pointer;
  color: #0682ea;
}
.el-table {
  .el-input__inner {
    padding: 0 5px;
  }
}
</style>
