<template>
  <!-- <div>
        <el-row>
            <el-button type="primary" plain style="margin-left: 15%;width: 200px;height: 70px" @click="ccc">自主配送
            </el-button>
            <el-button type="primary" plain style="margin-left: 30%;width: 200px;height: 70px" @click="ddd">外协
            </el-button>
        </el-row>
    </div> -->
  <div class="head_top">
    <div @click="ccc" :class="aaa?'buts check':'buts'">
      自主配送
    </div>
    <div @click="ddd" :class="bbb?'buts check':'buts'">
      外协
    </div>
  </div>
  <!-- <div class="minaxbox">
    <div class="tophed">
      <div class="">

      </div>
    </div>
  </div> -->
  <div style="margin: 2%;background-color: #ffffff;padding: 20px;box-sizing: border-box;" v-if="aaa">
    <el-form ref="form" :model="form" label-width="100px" style="margin: 3px">
      <el-row>
        <el-col :span="6">
          <el-form-item   label="车辆信息:" prop="vehicleIds">
            <el-select
              filterable
              multiple
              v-model="vehicleIds"
              placeholder="请选择车辆"
              @change="changeVehicle"
            >
              <el-option
                v-for="item in vehicleData"
                :key="item.id"
                :label="item.vehicleNub"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!--                <el-col :span="8">-->
        <!--                    <el-form-item label="司机负责人:"  prop="goodsShelfId" >-->
        <!--                        <el-select v-model="form.masterDriver"  placeholder="请选择车辆"  @change="changeMasterDriver">-->
        <!--                            <el-option-->
        <!--                                    v-for="item in masterDriverData"-->
        <!--                                    :key="item.id"-->
        <!--                                    :label="item.name"-->
        <!--                                    :value="item.id">-->
        <!--                            </el-option>-->
        <!--                        </el-select>-->
        <!--                    </el-form-item>-->
        <!--                </el-col>-->
        <el-col :span="6">
          <el-form-item label="配送司机信息:" prop="goodsShelfId">
            <!--                        @change="changeSlaveDriver"-->
            <el-select
              v-model="deliveryDriver"
              multiple
              filterable
              @change="changeDriver"

              placeholder="请选择司机"
            >
              <el-option
                v-for="item in driverData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <span>
            <el-form-item label="主司机:" prop="forklift">
              <el-input v-model="form.masterDriverName" :disabled="true"> </el-input>
            </el-form-item>
            <el-form-item label="主车辆:" prop="forklift">
              <el-input v-model="form.masterVehicleNub" :disabled="true"> </el-input>
            </el-form-item>
          </span>

          <!--                    <span >主司机&emsp;:<strong>&emsp;{{this.masterDriverName}}</strong></span><br/>-->
          <!--                    <span >主车辆&emsp;:<strong>&emsp;{{this.masetervehictleName}}</strong></span>-->
        </el-col>
        <el-col :span="6">
          <el-button round @click="viewDriverInfo" style="margin-left: 10%">查看司机配置</el-button>
        </el-col>
      </el-row>
      <!--            <el-row>-->
      <!--                <el-col :span="6">-->
      <!--                    <el-form-item label="叉车司机:" prop="forklift">-->
      <!--                        <el-select v-model="form.forklift" placeholder="请选择叉车司机">-->
      <!--                            <el-option-->
      <!--                                    v-for="item in this.forkliftData"-->
      <!--                                    :key="item.dictKey"-->
      <!--                                    :label="item.dictValue"-->
      <!--                                    :value="item.dictKey">-->
      <!--                            </el-option>-->
      <!--                            &lt;!&ndash;                            {{this.forkliftData}}&ndash;&gt;-->
      <!--                        </el-select>-->
      <!--                    </el-form-item>-->
      <!--                </el-col>-->
      <!--                <el-col :span="6">-->
      <!--                    <el-form-item label="装卸班组:" prop="loader">-->
      <!--                        <el-select v-model="form.loader" placeholder="请选择装卸班组">-->
      <!--                            <el-option-->
      <!--                                    v-for="item in loaderData"-->
      <!--                                    :key="item.dictKey"-->
      <!--                                    :label="item.dictValue"-->
      <!--                                    :value="item.dictKey">-->
      <!--                            </el-option>-->
      <!--                        </el-select>-->
      <!--                    </el-form-item>-->
      <!--                </el-col>-->
      <!--                <el-col :span="3">-->
      <!--                    &lt;!&ndash;                    <el-radio-group v-model="form.loadAndUnload" >&ndash;&gt;-->
      <!--                    &lt;!&ndash;                        <el-radio  v-for="item in this.loadAndUnloadData" :label="item.dictValue" :value="item.dictKey"></el-radio>&ndash;&gt;-->
      <!--                    &lt;!&ndash;                    </el-radio-group>&ndash;&gt;-->
      <!--                    <el-checkbox-group v-model="this.loadAndUnload">-->
      <!--                        <el-checkbox v-for="item in loadAndUnloadData" :label="item.dictKey" :value="item.dictKey">-->
      <!--                            {{item.dictValue}}-->
      <!--                        </el-checkbox>-->
      <!--                    </el-checkbox-group>-->
      <!--                </el-col>-->
      <!--            </el-row>-->
      <!--            <el-row>-->
      <!--                <el-col :span="6">-->
      <!--                    <el-form-item label="备货区域:" prop="goodsAreaId">-->
      <!--                        <el-select v-model="form.goodsAreaId" placeholder="请选择备货区域">-->
      <!--                            <el-option-->
      <!--                                    v-for="item in goodsAreaData"-->
      <!--                                    :key="item.dictKey"-->
      <!--                                    :label="item.dictValue"-->
      <!--                                    :value="item.dictKey">-->
      <!--                            </el-option>-->
      <!--                        </el-select>-->
      <!--                    </el-form-item>-->
      <!--                </el-col>-->
      <!--                <el-col :span="6">-->
      <!--                    <el-form-item label="备货时间:" prop="goodsShelfId">-->
      <!--                        <el-date-picker-->
      <!--                                v-model="form.stockupDate"-->
      <!--                                type="date"-->
      <!--                                placeholder="请选择备货时间">-->
      <!--                        </el-date-picker>-->
      <!--                    </el-form-item>-->
      <!--                </el-col>-->
      <!--            </el-row>-->

      <!--            <el-row>-->
      <!--                <el-col :span="24">-->
      <!--                    <el-form-item label="备注:" prop="remarks">-->
      <!--                        <el-input-->
      <!--                                type="textarea"-->
      <!--                                :rows="2"-->
      <!--                                placeholder="请输入内容"-->
      <!--                                v-model="form.remarks">-->
      <!--                        </el-input>-->
      <!--                    </el-form-item>-->
      <!--                </el-col>-->
      <!--            </el-row>-->
    </el-form>
  </div>

  <div style="margin: 2%;background-color: #ffffff;padding: 20px;box-sizing: border-box;" v-if="bbb">
    <el-form ref="form" :model="form" label-width="100px" style="margin: 3px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="外协来源:" prop="goodsShelfId">
            <el-select filterable v-model="form.tripartiteSource" placeholder="请选择来源">
              <el-option
                v-for="item in tripartiteSourceData"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="司机名称:" prop="goodsShelfId">
            <el-input v-model="form.driverName" placeholder="请输入司机名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="司机电话:" prop="goodsShelfId">
            <el-input v-model="form.driverPhone" placeholder="请输入司机电话"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车辆车牌:" prop="goodsShelfId">
            <el-input v-model="form.vehicleNum" placeholder="请输入本次费用"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="配送费用:" prop="goodsShelfId">
            <el-input v-model="form.deliveryFee" placeholder="请输入本次费用"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--            <el-row>-->
      <!--                <el-col :span="6">-->
      <!--                    <el-form-item label="叉车司机:" prop="forklift">-->
      <!--                        <el-select v-model="form.forklift" placeholder="请选择叉车司机">-->
      <!--                            <el-option-->
      <!--                                    v-for="item in this.forkliftData"-->
      <!--                                    :key="item.dictKey"-->
      <!--                                    :label="item.dictValue"-->
      <!--                                    :value="item.dictKey">-->
      <!--                            </el-option>-->
      <!--                        </el-select>-->
      <!--                    </el-form-item>-->
      <!--                </el-col>-->
      <!--                <el-col :span="6">-->
      <!--                    <el-form-item label="装卸班组:" prop="loader">-->
      <!--                        <el-select v-model="form.loader" placeholder="请选择装卸班组">-->
      <!--                            <el-option-->
      <!--                                    v-for="item in loaderData"-->
      <!--                                    :key="item.dictKey"-->
      <!--                                    :label="item.dictValue"-->
      <!--                                    :value="item.dictKey">-->
      <!--                            </el-option>-->
      <!--                        </el-select>-->
      <!--                    </el-form-item>-->
      <!--                </el-col>-->
      <!--                <el-col :span="3">-->
      <!--                    &lt;!&ndash;                    <el-radio-group v-model="form.loadAndUnload" >&ndash;&gt;-->
      <!--                    &lt;!&ndash;                        <el-radio  v-for="item in this.loadAndUnloadData" :label="item.dictValue" :value="item.dictKey"></el-radio>&ndash;&gt;-->
      <!--                    &lt;!&ndash;                    </el-radio-group>&ndash;&gt;-->
      <!--                    <el-checkbox-group v-model="form.loadAndUnload">-->
      <!--                        <el-checkbox v-for="item in loadAndUnloadData" :label="item.dictKey" :value="item.dictKey">-->
      <!--                            {{item.dictValue}}-->
      <!--                        </el-checkbox>-->
      <!--                    </el-checkbox-group>-->
      <!--                </el-col>-->
      <!--            </el-row>-->
      <!--            <el-row>-->
      <!--                <el-col :span="6">-->
      <!--                    <el-form-item label="备货区域:" prop="goodsAreaId">-->
      <!--                        <el-select v-model="form.goodsAreaId" placeholder="请选择备货区域">-->
      <!--                            <el-option-->
      <!--                                    v-for="item in goodsAreaData"-->
      <!--                                    :key="item.dictKey"-->
      <!--                                    :label="item.dictValue"-->
      <!--                                    :value="item.dictKey">-->
      <!--                            </el-option>-->
      <!--                        </el-select>-->
      <!--                    </el-form-item>-->
      <!--                </el-col>-->
      <!--                <el-col :span="6">-->
      <!--                    <el-form-item label="备货时间:" prop="goodsShelfId">-->
      <!--                        <el-date-picker-->
      <!--                                v-model="form.stockupDate"-->
      <!--                                type="date"-->
      <!--                                placeholder="请选择备货时间">-->
      <!--                        </el-date-picker>-->
      <!--                    </el-form-item>-->
      <!--                </el-col>-->
      <!--            </el-row>-->
      <!--            <el-row>-->
      <!--                <el-col :span="24">-->
      <!--                    <el-form-item label="备注:" prop="remarks">-->
      <!--                        <el-input-->
      <!--                                type="textarea"-->
      <!--                                :rows="2"-->
      <!--                                placeholder="请输入内容"-->
      <!--                                v-model="form.remarks">-->
      <!--                        </el-input>-->
      <!--                    </el-form-item>-->
      <!--                </el-col>-->
      <!--            </el-row>-->
    </el-form>
  </div>
  <div style="margin: 2%;background-color: #ffffff;padding: 20px;box-sizing: border-box;">
    <el-form ref="form" :model="form" label-width="100px" style="margin: 3px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="叉车司机:" prop="forklift">
            <el-select filterable v-model="form.forklift" placeholder="请选择叉车司机">
              <el-option
                v-for="item in this.forkliftData"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
                :disabled="isDisable"
              >
              </el-option>
              <!--                            {{this.forkliftData}}-->
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="装卸班组:" prop="loader">
            <el-select filterable v-model="form.loader" placeholder="请选择装卸班组">
              <el-option
                v-for="item in loaderData"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
                :disabled="isDisable"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!--                    <el-radio-group v-model="form.loadAndUnload" >-->
          <!--                        <el-radio  v-for="item in this.loadAndUnloadData" :label="item.dictValue" :value="item.dictKey"></el-radio>-->
          <!--                    </el-radio-group>-->
          <el-form-item label="班组职能:" prop="goodsAreaId">
            <el-checkbox-group v-model="loadAndUnload">
              <el-checkbox
                v-for="item in loadAndUnloadData"
                :label="item.dictKey"
                :value="item.dictKey"
                :disabled="isDisable"
              >
                <span>{{ item.dictValue }}</span>
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!--                    <el-radio-group v-model="form.loadAndUnload" >-->
          <!--                        <el-radio  v-for="item in this.loadAndUnloadData" :label="item.dictValue" :value="item.dictKey"></el-radio>-->
          <!--                    </el-radio-group>-->
          <el-form-item label="配送类型:" prop="goodsAreaId">
            <el-radio-group v-model="form.deliveryType">
              <el-radio :label="'1'" :value="'1'">商配&emsp; </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="备货区域:" prop="goodsAreaId">
            <el-select filterable v-model="form.goodsAreaId" placeholder="请选择备货区域">
              <el-option
                v-for="item in goodsAreaData"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
                :disabled="isDisable"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="备货时间:" prop="goodsShelfId">
            <el-date-picker v-model="form.stockupDate" type="date" placeholder="请选择备货时间" :disabled="isDisable">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="配送方式:" prop="serveType" label-width="100px">
            <!--              <el-input v-model="form.serveType" clearable placeholder="请选择服务类型"/>-->
            <el-radio-group v-model="form.deliveryWay" v-for="item in this.deliveryWayData">
              <el-radio :label="item.dictKey" :value="item.dictKey"
                >{{ item.dictValue }}&emsp;
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="服务类型:" prop="serveType" label-width="100px">
            <!--              <el-input v-model="form.serveType" clearable placeholder="请选择服务类型"/>-->
            <el-checkbox-group v-model="serveType" v-for="item in this.addvalueServeTypeData">
              <el-checkbox :label="item.dictKey" :value="item.dictKey"
                >{{ item.dictValue }}&emsp;
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="备注:" prop="remarks">
            <el-input type="textarea" :rows="1" placeholder="请输入内容" v-model="form.remarks">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他费用:" prop="collectFee" label-width="100px">
            <el-input v-model="form.otherFee" placeholder="请输入其他费用" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="配车时间:" prop="taskTime" label-width="100px">
<!--            <el-date-picker v-model="form.taskTime"-->
<!--                            type="datetime"-->
<!--                            placeholder="请选择配车时间"-->
<!--                            value-format="YYYY-MM-DD HH:mm:ss"-->
<!--            >-->
<!--            </el-date-picker>-->
            <el-date-picker v-model="form.taskTime"  value-format="YYYY-MM-DD HH:mm:ss"  type="datetime" placeholder="请选择配车时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="订单">
        <el-button type="primary" link @click="handleAddOrder">新 增</el-button>
        <el-table
          ref="table"
          v-loading="loading"
          :data="orderData"
          :height="height"
          style="width: 100%; height: 50%"
          :border="option.border"
        >
          <!--                    <el-table-column type="selection" v-if="option.selection" width="55" align="center"></el-table-column>-->
          <el-table-column
            v-if="option.index"
            label="序号"
            type="index"
            width="80px"
            align="center"
          ></el-table-column>
          <template v-for="(item, index) in option.columnStockArticles">
            <el-table-column
              v-if="item.hide !== true"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :key="index"
            >
            </el-table-column>
          </template>
          <!--                    <el-table-column label="包件数量" type="index" width="100px">-->
          <!--                        <template #="{row}">-->
          <!--                            <el-input v-model="row.reservationNum" type="number" :disabled="true"-->
          <!--                                      placeholder="请输入内容"></el-input>-->
          <!--                        </template>-->
          <!--                    </el-table-column>-->
          <!-- 操作栏模块 -->
          <el-table-column prop="menu" label="操作" :width="220" align="center">
            <template #="{ row }">
              <el-button
                type="primary"
                link
                icon="el-icon-view"
                @click="viewStockArticlePackage(row)"
                >查看包件
              </el-button>
              <el-button type="primary" link icon="el-icon-delete" @click="addvalueServe(row)"
                >增值服务
              </el-button>
              <el-button type="primary" link icon="el-icon-edit" @click="removeStockArticle(row)"
                >移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!--            <el-tab-pane label="库存品">-->
      <!--                <el-button  type="primary" link @click="handleAddInventory">新增</el-button>-->
      <!--                <el-table ref="table"-->
      <!--                          v-loading="loading"-->
      <!--                          :data="inventoryData"-->
      <!--                          :height="height"-->
      <!--                          style="width: 100%;height: 100%"-->
      <!--                          :border="option.border">-->
      <!--                    &lt;!&ndash;                    <el-table-column type="selection" v-if="stockList.selection" width="55" align="center"></el-table-column>&ndash;&gt;-->
      <!--                    <el-table-column v-if="option.index" label="序号" type="index" width="80px"-->
      <!--                                     align="center"></el-table-column>-->
      <!--                    <template v-for="(item,index) in option.columnStockLists">-->
      <!--                        <el-table-column v-if="item.hide!==true"-->
      <!--                                         :prop="item.prop"-->
      <!--                                         :label="item.label"-->
      <!--                                         :width="item.width"-->
      <!--                                         :key="index">-->
      <!--                        </el-table-column>-->
      <!--                    </template>-->
      <!--                    <el-table-column label="预约数量" type="index" width="100px">-->
      <!--                        <template #="{row}">-->
      <!--                            <el-input v-model="row.reservationNum" type="number" :min="0"></el-input>-->
      <!--                        </template>-->
      <!--                    </el-table-column>-->
      <!--                    <el-table-column prop="menu" label="操作" :width="220" align="center">-->
      <!--                        <template #="{row}">-->
      <!--                            <el-button type="primary" link icon="el-icon-edit" @click="removeStockList(row)">移除-->
      <!--                            </el-button>-->
      <!--                        </template>-->
      <!--                    </el-table-column>-->
      <!--                </el-table>-->
      <!--            </el-tab-pane>-->
    </el-tabs>

    <el-form-item style="margin-left: 45%; margin-top: 10px">
      <el-button type="primary" icon="el-icon-circle-close" @click="onSubmitBusiness"
        >提交(商配订单)</el-button
      >
      <el-button icon="el-icon-circle-close" @click="this.$router.go(-1)">返 回</el-button>
    </el-form-item>
  </div>

  <el-dialog v-model="orderShow" title="在库订单信息" width="100%">
    <span v-for="item in this.deliveryTypeData">{{ item }}</span>
    <el-form :inline="true" :model="query">
      <el-form-item label="商场名称:">
        <el-input v-model="query.mallName" placeholder="请输入商场名称"></el-input>
      </el-form-item>
      <el-form-item label="货物名称:">
        <el-input v-model="query.descriptionGoods" placeholder="请输入货物名称"></el-input>
      </el-form-item>
      <el-form-item label="运单号:">
        <el-input v-model="query.customerTelephone" placeholder="请输入运单号"></el-input>
      </el-form-item>
      <el-form-item label="订单自编号:">
        <el-input v-model="query.customerTelephone" placeholder="请输入运单号"></el-input>
      </el-form-item>
      <el-form-item label="服务号:">
        <el-input v-model="query.customerTelephone" placeholder="请输入运单号"></el-input>
      </el-form-item>

      <el-form-item label="顾客姓名:">
        <el-input v-model="query.customerName" placeholder="请输入服务类型"></el-input>
      </el-form-item>
      <!-- 查询按钮 -->
      <!--            <el-form-item>-->
      <!--                <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>-->
      <!--                <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>-->
      <!--            </el-form-item>-->
    </el-form>

    <!--        @selection-change="selectionChange"-->

    <el-table
      ref="stockArticleTable"
      v-loading="loading"
      @selection-change="selectionStockArticleChange"
      :data="stockArticleInfo"
      :height="height"
      style="width: 100%; height: 80%"
      :border="option.border"
    >
      <el-table-column
        type="selection"
        v-if="option.selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column
        v-if="option.index"
        label="序号"
        type="index"
        width="80px"
        align="center"
      ></el-table-column>
      <template v-for="(item, index) in option.columnStockArticles">
        <el-table-column
          v-if="item.hide !== true"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :key="index"
        >
        </el-table-column>
      </template>
    </el-table>
    <el-form-item style="margin-left: 45%; margin-top: 5px">
      <el-button type="primary" icon="el-icon-circle-close" @click="onSubmitOrder"
        >提交(订单)</el-button
      >
      <el-button icon="el-icon-circle-close" @click="orderShow = false">返 回</el-button>
    </el-form-item>
  </el-dialog>

  <el-dialog
    v-model="stockListShow"
    title="库存品信息"
    width="100%"
    :before-close="handleClose"
  >
    <el-form :inline="true" :model="query">
      <el-form-item label="顾客电话:">
        <el-input v-model="query.customerTelephone" placeholder="请输入服务类型"></el-input>
      </el-form-item>
      <el-form-item label="顾客地址:">
        <el-input v-model="query.customerAddress" placeholder="请输入服务类型"></el-input>
      </el-form-item>
      <!-- 查询按钮 -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
        <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="table"
      v-loading="loading"
      @selection-change="selectionChange"
      :data="inventoryInfo"
      :height="height"
      style="width: 90%; height: 80%"
      :border="option.border"
    >
      <el-table-column
        type="selection"
        v-if="option.selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column
        v-if="option.index"
        label="序号"
        type="index"
        width="80px"
        align="center"
      ></el-table-column>
      <template v-for="(item, index) in option.columnStockLists">
        <el-table-column

          v-if="item.hide !== true"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :key="index"
        >
        </el-table-column>
      </template>
      <el-table-column label="预约数量" type="index" width="100px">
        <template #="{ row }">
          <el-input v-model="row.reservationNum" type="number" :min="0"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <el-form-item style="margin-left: 45%; margin-top: 5px">
      <el-button type="primary" icon="el-icon-circle-close" @click="onSubmitInventory"
        >提交(库存品)</el-button
      >
      <el-button icon="el-icon-circle-close" @click="stockListShow = false">返 回</el-button>
    </el-form-item>
  </el-dialog>

  <el-dialog v-model="isShowPackage" title="包件信息" width="100%">
    <!-- 列表模块 -->
    <el-table
      ref="packageList"
      v-loading="loading"
      @selection-change="selectionChange"
      :data="packageData"
      :height="height"
      style="width: 100%; height: 100%"
      :border="option.border"
    >
      <el-table-column
        type="selection"
        v-if="option.selection"
        :selectable="checkPackage"
        width="55"
        align="center"
      >
<!--        <el-checkbox v-model="checked"></el-checkbox>-->
      </el-table-column>
      <el-table-column type="expand" v-if="option.expand" align="center"></el-table-column>
      <el-table-column v-if="option.index"  label="序号" type="index" width="60" align="center">
      </el-table-column>
      <template v-for="(item, index) in option.columnPackage">
        <!-- table字段 -->
        <el-table-column
          v-if="item.hide !== true"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :key="index"
        >
        </el-table-column>
      </template>
      <!-- 操作栏模块 -->
      <el-table-column prop="menu" label="操作" :width="220" align="center">
        <template #="{ row }">
          <!--              <el-button type="primary" text icon="el-icon-view" @click="handleView(row)">查看</el-button>-->
          <!--              <el-button type="primary" text icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>-->
          <!--              <el-button type="primary" text icon="el-icon-delete" @click="rowDel(row)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-form-item style="margin-left: 45%; margin-top: 5px">
      <el-button type="primary" icon="el-icon-circle-close" @click="onSubmitPackage"
        >提交(包件)</el-button
      >
      <el-button icon="el-icon-circle-close" @click="isShowPackage = false">返 回</el-button>
    </el-form-item>
  </el-dialog>

  <el-dialog title="司机配置" v-model="isDriverShow" width="50%">
    <div style="display: flex">
      <div style="flex: 1">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="driverInfo"
          style="width: 100%"
          :border="option.border"
          @select-all="handleSelect"
          @select="handleSelect"
        >
          <el-table-column
            type="selection"
            v-if="option.selection"
            width="55"
            align="center"

          ></el-table-column>
          <template v-for="(item, index) in option.columnDriverInfo">
            <!-- table字段 -->
            <el-table-column
              v-if="item.hide !== true"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :key="index"
              style="height: 50px"

            >
            </el-table-column>
          </template>
          <!-- 操作栏模块 -->
        </el-table>
      </div>
      <div style="flex: 1">
        <el-table
          ref="table"
          v-loading="loading"
          :data="vehticleInfo"
          style="width: 100%"
          :border="option.border"
        >
          <el-table-column type="expand" v-if="option.expand" align="center"></el-table-column>
          <template v-for="(item, index) in option.columnVehicleInfo">
            <!-- table字段 -->
            <el-table-column
              v-if="item.hide !== true"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :key="index"
              style="height: 50px"
            >
            </el-table-column>
          </template>
          <!-- 操作栏模块 -->
          <el-table-column label="预约数量" type="index" width="200px">
            <template #="{ row }">
              <span>
                <el-button type="primary" text size="small" @click="moveUpVehictle(row)"
                  >上移
                </el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-form-item style="margin-left: 45%; margin-top: 10px">
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmDriver">确 定</el-button>
        <el-button @click="isDriverShow = false">取 消</el-button>
      </span>
    </el-form-item>
  </el-dialog>
</template>

<script>
  import { getDictionaryBiz } from '@/api/system/dict';
  import option from '@/option/distribution/distributionReservation';
  import { getListTeamInfo } from '@/api/basicdata/basicdataTeamGroup';
  import { deliveryBusinessTask } from '@/api/distribution/distributionReservation';
  import { getListUser } from '@/api/distribution/distributionStockup';
  import { getPostList } from '@/api/system/post';
  import { getListOwn } from '@/api/system/user';
  import { getPackageList } from '@/api/distribution/distributionParcelList';
  import { stockUpInfo } from '@/api/basicdata/basicdataGoodsArea';
  import { getVehicleList } from '@/api/basicdata/basicdataVehicle';
  import { getDriverList } from '@/api/basicdata/basicdataDriverArtery';
  import { selectStockArticleAndParcel } from '@/api/distribution/distributionStockArticle';
  import { getInventoryList } from '@/api/distribution/distributionStockList';
  import { getDeliveryList ,updateDeliveryList} from '@/api/distribution/distributionDeliveryList';
  import { mapGetters } from 'vuex';
  import dayjs from 'dayjs';

  export default {
    data() {
      return {
        height: 0,
        loading: false,
        error: null,
        form: {},
        data: [],
        // 分页信息
        page: {
          currentPage: 1,
          pageSize: 10,
          total: 40
        },

        query:{},
        aaa: true,
        bbb: false,
        option: option,
        deliveryTypeData: [],
        //配送类型字典列表
        resvervationStatusData: [],
        //备货状态
        stockupStatusData: [],
        //订单来源
        orderSourceData: [],
        //预约时段
        periodOfTimeData: [],
        //配送方式
        deliveryWayData: [],
        //服务内容
        addvalueServeTypeData: [],
        //基础车辆信息
        vehicleData: [],
        //叉车信息
        forkliftData: [],
        //班组信息
        loaderData: [],
        //备货区信息
        goodsAreaData: [],
        //部门信息
        deptId: '',
        //司机信息
        driverData: [],
        //装卸班组
        loadAndUnloadData: [],
        //装卸
        tripartiteSourceData: [],
        //装卸只能
        loadAndUnload: [],
        //车辆信息
        vehicleIds: [],
        //配送司机信息
        deliveryDriver: [],
        //司机配置
        isDriverShow: false,
        //车辆表格信息
        driverInfo: [],
        //司机表格信息
        vehticleInfo: [],
        //主司机
        masterDriverName: '',
        //主车辆
        masterVehictleName: '',
        //司机配置选中行信息
        multipleSelection: [],
        //
        multipleTable: {},
        stockArticleTable: [],
        stockArticleList:[],
        driverList: [],
        vehticleList: [],
        packageList:[],
        //订单数据
        orderData:[],
        //库存品数据
        inventoryData:[],
        //
        selectionList:[],
        addvalue: {},
        //订单弹窗
        orderShow:false,
        //库存品弹窗
        stockListShow:false,
        //在库订单数据
        stockArticleInfo:[],
        //库存品信息列表
        inventoryInfo:[],
        //包件弹窗控制
        isShowPackage:false,
        //包件数据
        packageData:[],
        //班组职能
        loadAndUnload:[],
        //服务类型
        serveType:[],
        //外协数据来源
        tripartiteSourceData:[],
        deliveryListId:'',
        isDisable:false,
        checked:true,
        obj:{
          type:Object,
          default:()=>({})
        },
        isInitialized:false,
        isUpdate:false,
      };
    },
   watch:{
     // obj:{
     //   deep:true,
     //   handler(newVal,oldVal){
     //     if (this.isInitialized){
     //       console.log('输入框的值'+JSON.stringify(oldVal)+'从变成了'+JSON.stringify(newVal));
     //       //这里就需要返回一个false;
     //        this.isUpdate = true;
     //      }else {
     //        this.isInitialized=true;
     //     }
     //   }
     // }
   },
    created() {
      this.$watch(
        () => this.$route.params,
        () => {
          this.fetchData();
        },
        // 组件创建完后获取数据，
        // 此时 data 已经被 observed 了
        { immediate: true }
      );
      this.getDictionary();
      this.getFork();
      this.getTeam();
      this.getvehicleData();
      this.getMasterDriverData();
    },
    computed: {
      ...mapGetters(['permission']),
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(',');
      }
    },

    mounted() {
      this.onLoad(this.page);
    },
    methods: {
      //查询叉车人员
      async getFork() {
        let ides = '';
        let ide = {};
        await getListUser().then(res => {
          console.log('res>>>', res.data.data);
          ides = res.data.data.tenantId;
          this.deptId = res.data.data.deptId;
        });
        await getPostList(ides).then(res => {
          console.log('>>>>', res.data.data);
          // this.forkliftData = res.data.data;
          res.data.data.forEach(i => {
            if (i.postName == '叉车') {
              ide = i;
            }
          });
        });
        // console.log("ied>>>>>",ide);
        let params = {
          postId: ide.id, //岗位
          deptId: this.deptId //部门
          // roleId: '', //角色
        };
        getListOwn(Object.assign(params, this.query)).then(res => {
          // console.log(".............",res.data.data);
          let fo = [];
          res.data.data.forEach(i => {
            let a = {
              dictKey: i.id,
              dictValue: i.name
            };
            fo.push(a);
          });
          this.forkliftData = fo;
        });
        await this.getStorageArea();
        await this.getTeam();
      },
      //查询班组
      async getTeam() {
        let params = this.deptId;
        console.log("%%%%%%%%%",params);
        getListTeamInfo(params).then(res => {
          console.log("aaaaaaaaa",res.data.data);
          let fo = [];
          res.data.data.forEach(i => {
            let a = {
              dictKey: i.id,
              dictValue: i.groupName
            };
            fo.push(a);
          });
          this.loaderData = fo;
        });
      },
      //备货区
      async getStorageArea() {
        let params = this.deptId ;
        console.log("^^^^^^^^^^^^^",params);
        stockUpInfo(params).then(res => {
          console.log("=========================》",res);
          let fo = [];
          res.data.data.forEach(i => {
            let v = {
              dictKey: i.id,
              dictValue: i.headline
            };
            fo.push(v);
          });
          this.goodsAreaData = fo;
        });
      },
      //查询司机信息
      getMasterDriverData() {
        return new Promise((rv,rev)=>{
          getDriverList(1, 10, '').then(res => {
            this.driverData = res.data.data.records;
            console.log("===============>",res.data.data);
            rv(res.data.data.records)
          });
        })
      },
      selectionChange(list) {
        //只要这个触发就认定为该包件进行了重新勾选，不论数据是否发生变化
        this.selectionList = list;
        console.log(" this.selectionList = list", this.selectionList);
        this.orderData.forEach(item=>{
          if (item.id===this.obj.id){
            item.isUpdate = true;
          }
        })
        console.log("?????????????????",this.orderData);
        //这里就为当前选择的订单进行包件信息的添加
        // this.obj.
      },
      selectionStockArticleChange(list) {
        console.log("selectionStockArticleChange",list);
        this.stockArticleList = list;
      },


      //查询车辆信息
      getvehicleData() {
        return new Promise((rv,rev)=>{
          getVehicleList(1, 10, '').then(res => {
            this.vehicleData = res.data.data.records;
            console.log("^^^^^^^^^^^^^^^^",res.data.data);
            rv(res.data.data.records)
          });
        })
      },
      fetchData() {
        this.error = this.post = null;
        this.loading = true;
        if (this.$route.query.id) {
          this.deliveryListId = this.$route.query.id;
        }
      },
      checkPackage(row,index){

        console.log(">>>>>>>>>>>>",row,index);
        // return false;
      },
      viewDriverInfo() {
        console.log(this.driverInfo.length);
        console.log(this.vehticleInfo.length);
        if (this.driverList.length !== this.vehticleList.length) {
          this.$message({
            message: '司机车辆数量有误!!!',
            type: 'warning'
          });
          return;
        }
        this.isDriverShow = true;
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
      /**
       * 查看包件
       */
      viewStockArticlePackage(row){
        //这里应该先对订单下的所有包件信息进行获取，然后结合查询出预约单下以选择的包件信息进行勾选状态的回显
        //查询该订单下所有的包件信息
        this.loading = true;
        if (this.deliveryListId){
          //编辑
          let params={};
          console.log("^^^^^^^^",row);
          this.query.stockArticleId = row.id;
          //TODO 这里还需要对包件的状态进行过滤 this.query.id = 1;
          // this.query.typeService = 1;
          // this.query.genre = '1';
          this.obj = row;
          getPackageList(Object.assign(params,this.query)).then(res=>{
            console.log(res.data.data);
            let data =res.data.data;
            this.packageData =data.records;
            let packageInfo =row.parcelListVOS
            console.log("packageInfo",packageInfo);
            this.packageData.forEach((item,index)=>{
              packageInfo.forEach(p=>{
                if (item.id===p.id){
                  this.selectionList.push(item);
                  this.$nextTick( ()=> {
                    this.$refs.packageList.toggleRowSelection(this.packageData[index],true);
                  })
                }
              })
            })
            this.selectionClear();
          })
        }else {
          //新增
          //默认打开包件信息，包件列表处于全选状态
          let params={};
          console.log("^^^^^^^^",row);
          this.query.stockArticleId = row.id;
          getPackageList(Object.assign(params,this.query)).then(res=>{
            console.log(res.data.data);
            let data =res.data.data;
            this.packageData =data.records;
            this.packageData.forEach((item,index)=>{
              this.$nextTick( ()=> {
                this.$refs.packageList.toggleRowSelection(this.packageData[index],true);
              })
            })
            this.selectionClear();
          })
        }

        this.loading = false;
        this.isShowPackage = true;


      },
      /**
       * 提交包件信息
       */
      onSubmitPackage(){
        //包件处于默认全选的状态这里不需要要求进行包件选择
        //如果这里用户进行全部包件的取消，那么这里会对订单下的所有包件进行添加，由后台完成

        //这里就需要对原来包件是否发生变化进行处理
        //如果发生变化该订单下的某一字段就会发生改变，后台根据该字段进行判断是否发生包件选择的变化
        console.log(this.obj.parcelListVOS);
        console.log(this.selectionList);
        this.orderData.forEach(o=>{
          this.selectionList.forEach(p=>{
            if (p.stockArticleId === o.id){
              o.packageList.push(p);
            }
          })
        });
        console.log(this.obj.parcelListVOS);
        // if (this.selectionList.length ===this.obj.parcelListVOS.length){
        //   //这里就需要考虑，如果选中包件的数组长度和原来不同，那么包件信息必定发生变化
        //   //当包件长度一致需要判断包件数组的内容是否一致，然后进行字段的改变和赋值
        //
        //   console.log(this.obj);

        // }
        //这里就需要将具体的包件信息和订单进行关系绑定
        console.log("this.selectionList",this.selectionList);
        this.isShowPackage = false;
      },
      removeStockArticle(row) {
        this.orderData.forEach((item, index) => {
          if (item.id === row.id) {
            this.orderData.splice(index, 1);
          }
          console.log(item);
        });
        console.log('>>>>>>>>>>>>>>>row', row);
      },
      onSubmitInventory(){
        if (this.selectionList.length === 0) {
          this.$message.warning('请选择至少一条数据');
          return;
        }
        if (this.orderData.length) {
          this.selectionList.some(i => {
            let a = this.inventoryData.filter((ele) => ele.id == i.id).length >= 1;
            if (!a) {
              this.inventoryData.push(i);
            }
          });
        } else {
          this.inventoryData = this.selectionList;
        }

      this.stockListShow = false;
    },
    onSubmitOrder() {
      console.log('>>>>>>>>>>>>', this.selectionList);
      this.orderData.forEach(item => {
        item.reservationNum = 0;
        this.selectionList.forEach((list, index) => {
          if (item.id === list.stockArticleId) {
            item.reservationNum += list.quantity;
          }
        });
        item.packageList = this.selectionList;
      });
      console.log('+++++++++++++++', this.orderData);
      this.isaddvalue = false;
    },
    /**
     * 订单提交
     */
    onSubmitBusiness() {
      // if (this.orderData){
      //   this.form.orderInfo = this.orderData;
      // }
      const params = this.form;
      console.log("--------------->params",params);
      if (this.deliveryListId){
        let data = {};
        let tripartite = {};
        let allocationInfo = [];
        //将服务类型转为数组
        let serve = Object.values(this.serveType);
        serve = serve.sort((a, b) => {
          return a - b;
        });
        this.form.serveType = serve.join(',');
        // stockup.loadAndUnload = this.loadAndUnload.join(',');
        //判断是否是三方配送
        if (params.tripartiteSource) {
          //三方配送数据构建
          if (params.driverName) {
            tripartite.driverName = params.driverName;
          }
          if (params.driverPhone) {
            tripartite.driverPhone = params.driverPhone;
          }
          if (params.vehicleNum) {
            tripartite.vehicleNum = params.vehicleNum;
          }
          if (params.deliveryFee) {
            tripartite.deliveryFee = params.deliveryFee;
          }
          if (params.tripartiteSource) {
            this.tripartiteSourceData.forEach(item => {
              if (params.tripartiteSource === item.dictKey) {
                tripartite.distributionCompanyId = item.dictKey;
                tripartite.distributionCompany = item.dictValue;
              }
            });
            data.tripartite = tripartite;
          }
        } else {
          //自主配送数据构建
          if (this.driverList.length !== this.vehticleList.length) {
            this.$message({
              message: '司机车辆数量有误!!!',
              type: 'warning'
            });
            return;
          } else {
            let info = [];
            for (let i = 0; i < this.driverInfo.length; i++) {
              let obj = {};
              obj.driverName = this.driverInfo[i].name;
              obj.driverPhone = this.driverInfo[i].phone;
              obj.driverId = this.driverInfo[i].id;
              obj.vehicleNub = this.vehticleInfo[i].vehicleNub;
              obj.vehicleId = this.vehticleInfo[i].id;
              info.push(obj);
              this.driverInfo[i].name;
            }
            allocationInfo = info;
          }
          console.log(allocationInfo);
          data.allocationInfo = allocationInfo;
        }
        data.masterDriverName = this.form.masterDriverName;
        data.masterVehicleNub = this.form.masterVehicleNub;
        data.stockArticle = this.orderData;
        let reservation = {};
        reservation.deliveryType = this.form.deliveryType;
        reservation.deliveryWay = this.form.deliveryWay;
        reservation.serveType = this.form.serveType;
        reservation.otherFee = this.form.otherFee;
        data.taskTime = this.form.taskTime;
        data.reservation = reservation;
        data.id = this.deliveryListId;
        console.log('data>>>>>>>>>>>', data);
        updateDeliveryList(data).then(res=>{
          this.$router.push({
            path: '/distribution/deliverylist/distributionDeliveryListdis'
          });
        })
      }else {
        let data = {};
        let stockup = {};
        let tripartite = {};
        let allocationInfo = [];
        //备货区数据构建
        if (params.loader) {
          this.loaderData.forEach(a => {
            if (params.loader === a.dictKey) {
              stockup.loaderName = a.dictValue;
              stockup.loaderId = a.dictKey;
            }
          });
        }
        this.forkliftData.forEach(b => {
          if (params.forklift === b.dictKey) {
            stockup.forkliftName = b.dictValue;
            stockup.forkliftId = b.dictKey;
          }
        });
        this.goodsAreaData.forEach(c => {
          if (params.goodsAreaId === c.dictKey) {
            stockup.goodsAreaId = c.dictKey;
            stockup.goodsAreaName = c.dictValue;
          }
        });
        if (params.stockupDate) {
          stockup.stockupDate = params.stockupDate;
        }
        if (params.remarks) {
          stockup.remarks = params.remarks;
        }
        //将服务类型转为数组
        let serve = Object.values(this.serveType);
        serve = serve.sort((a, b) => {
          return a - b;
        });
        this.form.serveType = serve.join(',');
        stockup.loadAndUnload = this.loadAndUnload.join(',');
        //判断是否是三方配送
        if (params.tripartiteSource) {
          //三方配送数据构建
          if (params.driverName) {
            tripartite.driverName = params.driverName;
          }
          if (params.deiverPhone) {
            tripartite.driverPhone = params.driverPhone;
          }
          if (params.vehicleNum) {
            tripartite.vehicleNum = params.vehicleNum;
          }
          if (params.deliveryFee) {
            tripartite.deliveryFee = params.deliveryFee;
          }
          if (params.tripartiteSource) {
            this.tripartiteSourceData.forEach(item => {
              if (params.tripartiteSource === item.dictValue) {
                tripartite.distributionCompanyId = item.dictKey;
                tripartite.distributionCompany = item.dictValue;
              }
            });
            data.tripartite = tripartite;
          }
        } else {
          //自主配送数据构建
          if (this.driverList.length !== this.vehticleList.length) {
            this.$message({
              message: '司机车辆数量有误!!!',
              type: 'warning'
            });
            return;
          } else {
            let info = [];
            for (let i = 0; i < this.driverInfo.length; i++) {
              let obj = {};
              obj.driverName = this.driverInfo[i].name;
              obj.driverPhone = this.driverInfo[i].phone;
              obj.driverId = this.driverInfo[i].id;
              obj.vehicleNub = this.vehticleInfo[i].vehicleNub;
              obj.vehicleId = this.vehticleInfo[i].id;
              info.push(obj);
              this.driverInfo[i].name;
            }
            allocationInfo = info;
          }
        }
        data.stockup = stockup;
        data.masterDriverName = this.form.masterDriverName;
        data.masterVehicleNub = this.form.masterVehicleNub;
        data.allocationInfo = allocationInfo;
        data.stockArticle = this.orderData;
        let reservation = {};
        reservation.deliveryType = this.form.deliveryType;
        reservation.deliveryWay = this.form.deliveryWay;
        reservation.serveType = this.form.serveType;
        reservation.otherFee = this.form.otherFee;
        data.taskTime = this.form.taskTime;
        data.reservation = reservation;
          //编辑
          // data.reservationIds = this.ids;
          console.log('data>>>>>>>>>>>', data);
          //新增
          deliveryBusinessTask(data).then((res) => {
            this.$router.push({
              path: '/distribution/deliverylist/distributionDeliveryListdis'
            });
          });
      }
    },
    changeVehicle(params) {
      console.log(params);
      this.vehticleList = params;
      let b = [];
      if (params) {
        this.vehicleData.forEach(item => {
          this.vehticleList.forEach(p => {
            if (p == item.id) {
              b.push(item);
              console.log(this.driverInfo);
            }
          });
          if (params[0] === item.id) {
            this.form.masterVehicleNub = item.vehicleNub;
          }
        });
        this.vehticleInfo = b;
      }
    },
    changeDriver(params) {
      this.driverList = params;
      let a = [];
      if (params) {
        this.driverData.forEach(item => {
          this.driverList.forEach(p => {
            if (p == item.id) {
              a.push(item);
              console.log(this.driverInfo);
            }
          });
          if (params[0] === item.id) {
            this.form.masterDriverName = item.name;
          }
        });
        this.driverInfo = a;
      }
    },
    //上移
    moveUpVehictle(row) {
      let i = 0;
      this.vehticleInfo.forEach((item, index) => {
        if (item.id === row.id) {
          i = index;
        }
      });
      //获取当当前选中的下标，如果下标为第一个则不能上移
      if (i > 0) {
        let a = this.vehticleInfo[i - 1];
        this.vehticleInfo.splice(i - 1, 1);
        this.vehticleInfo.splice(i, 0, a);
      } else {
        this.$message({
          message: '已经是第一条，上移失败',
          type: 'warning',
        });
      }
      console.log(this.vehticleInfo);
    },
    handleSelect(selection, row) {
      // 阻止全选框原有逻辑
      this.$refs.multipleTable.clearSelection();
      if (row) {
        if (selection.length === 1) {
          this.multipleSelection = row;
          this.$refs.multipleTable.toggleRowSelection(row, true);
        } else if (selection.length > 1) {
          let a = {};
          selection.forEach((s, index) => {
            if (s.id === row.id) {
              selection.splice(index, 1);
              a = s;
            }
          });
          this.multipleSelection = selection;
          this.$refs.multipleTable.toggleRowSelection(a, true);
        }
      }
    },
    confirmDriver() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      console.log('this.adada', this.multipleSelection);
      this.isDriverShow = false;
      //获取到表格的行坐标
      let a = 0;
      this.driverInfo.forEach((item, index) => {
        if (item.id === this.multipleSelection.id) {
          a = index;
        }
      });
      this.form.masterDriverName = this.driverInfo[a].name;
      this.form.masterVehicleNub = this.vehticleInfo[a].vehicleNub;
    },
    // //数据字典数据获取
    getDictionary() {
      getDictionaryBiz('addvalue_serve_type').then(res => {
        this.addvalueServeTypeData = res.data.data;
      });
      getDictionaryBiz('load_and_unload').then(res => {
        this.loadAndUnloadData = res.data.data;
      });
      getDictionaryBiz('delivery_way').then(res => {
        this.deliveryWayData = res.data.data;
      });
      //三方外协来源
      getDictionaryBiz('tripartite_source').then(res => {
        this.tripartiteSourceData = res.data.data;
      });
    },

      ccc() {
      if (this.deliveryListId){
        //清空司机、车辆信息

        this.form.tripartiteSource = '';
        this.form.driverName = '';
        this.form.driverPhone = '';
        this.form.vehicleNum = '';
        this.form.deliveryFee = '';

      }else {
        this.loadAndUnload = [];
        this.serveType=[];
        this.form = {};
      }
        this.aaa = true;
        this.bbb = false;
        this.form.deliveryType="1";
        this.form.deliveryWay="1";
        this.form.stockupDate = new Date()
        this.form.taskTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
      },
      ddd() {
      if (this.deliveryListId){
        this.vehicleIds=[];
        this.deliveryDriver=[];
        this.form.masterDriverName = '';
        this.form.masterVehicleNub = '';
      }else {
        this.loadAndUnload = [];
        this.serveType=[];
        this.form={};
      }
        this.aaa = false;
        this.bbb = true;
        this.form.deliveryType="1";
        this.form.deliveryWay="1";
        this.form.stockupDate = new Date()
        this.form.taskTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
      },
       handleAddOrder() {
      //TODO 这里还缺少对于订单状态的筛选条件
        this.query.typeService=1;
        this.query.genre = "1";
        let params = {};
         selectStockArticleAndParcel(Object.assign(params,this.query)).then(res=>{
          console.log(res.data.data);
          const data = res.data.data;
          data.forEach(item => {
            item.reservationNum = item.handQuantity;
          });
          this.page.total = data.total;
          this.stockArticleInfo = data;
          this.loading = false;
          this.query={};
          // this.selectionClear();
          if (this.deliveryListId) {
            //编辑
            console.log("---->", this.stockArticleInfo);
            this.stockArticleInfo.forEach((item, index) => {
              console.log("aaa", item, index);
              this.orderData.forEach(o => {
                console.log("bbb", o);
                if (item.id === o.id) {
                  this.$nextTick(() => {
                    this.$refs.stockArticleTable.toggleRowSelection(this.stockArticleInfo[index], true);
                  })
                }
              })
            })
          }
        })

          //新增

        this.orderShow = true;
      },
      handleAddInventory() {
        this.form.deliveryType ='1';
        let params = {};
        let page = this.page;
        getInventoryList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const inventoryList = res.data.data;
          console.log(">>>>>>>>>>",inventoryList);
          inventoryList.records.forEach(item => {
            item.reservationNum = '0';
          });
          this.page.total = inventoryList.total;
          this.inventoryInfo = inventoryList.records;
          this.loading = false;
          this.selectionClear();
        });
        this.selectionList = [];
        this.stockListShow = true;
      },
      onSubmitOrder() {
        this.orderData=this.stockArticleList;
        this.orderShow = false;
      },
      selectionClear() {
        this.selectionList = [];
        this.query={};
        // this.$refs.table.clearSelection();
      },
     async onLoad(page, params = {}) {
        console.log("》》》》》》》》》》》》》》》",this.deliveryListId);
        if (this.deliveryListId){
            getDeliveryList(this.deliveryListId).then( async res=>{
              let data = res.data.data;
              Object.assign(this.form,data.reservationInfo)
              Object.assign(this.form,data.stockupInfo)
              this.form.deliveryType = '1';
              this.form.deliveryWay = data.reservationInfo.deliveryWay;
              this.serveType = data.reservationInfo.serveType.split(",");
              if (data.stockupInfo){
                this.loadAndUnload = data.stockupInfo.teamResponsibility.split(",");
              }
              this.form.loader = data.stockupInfo.loaderName;
              this.form.forklift = data.stockupInfo.forkliftName;
              this.form.remarks = data.stockupInfo.remarks;
              this.form.taskTime = data.taskTime;
              this.orderData = data.stockArticleList;
              if (data.teamResponsibility){
                this.loadAndUnload =data.teamResponsibility.split(",");
              }
              console.log("data.kind",data.kind);
              if (data.kind === "1"){
                //自主配送
                let self = data.deliverySelfVO;
                let vehicle =await this.getvehicleData();
                console.log("___________________-->",vehicle);
                let driver =await this.getMasterDriverData();
                let a = [];
                let b = [];
                let vehicleInfo = [];
                vehicle.forEach(item => {
                  self.forEach(s => {
                    if (item.id === s.vehicleId) {
                      a.push(s.vehicleId);
                      vehicleInfo.push(item);
                    }
                    if (s.isMaster === 2) {
                      this.form.masterVehicleNub = s.vehicleNub;

                    }
                  });
                })
                this.vehicleIds = a;
                console.log(" this.vehicleIds", this.vehicleIds);
                this.vehticleInfo = vehicleInfo;
                let driverInfo = [];
                driver.forEach(item => {
                  self.forEach(s => {
                    if (item.id === s.driverId) {
                      b.push(s.driverId);
                      driverInfo.push(item);
                    }
                    if (s.isMaster === 2) {
                      this.form.masterDriverName = s.driverName;
                    }
                  });
                });
                this.deliveryDriver = b;
                this.driverInfo = driverInfo;
              }else {
                let deliveryTripartiteVO = data.deliveryTripartiteVO;
                this.aaa = false;
                this.bbb = true;
                // this.form.tripartiteSource = deliveryTripartiteVO.distributionCompanyId;
                this.form.tripartiteSource = "1";
                this.form.driverName = deliveryTripartiteVO.driverName ;
                this.form.vehicleNum = deliveryTripartiteVO.vehicleNum ;
                this.form.driverPhone = deliveryTripartiteVO.driverPhone ;
                this.form.deliveryFee = deliveryTripartiteVO.deliveryFee ;
                //外协配送
              }
              console.log(">>>>>>>>this.form",this.form);
              console.log(res.data.data);
            })
          this.isDisable=true;
        }else {
          this.form.deliveryType="1";
          this.form.deliveryWay="1";
          this.form.stockupDate = new Date()
          this.form.taskTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
        }
        this.loading = false;

        //   Object.assign(this.form, data.reservationInfo);
        //   Object.assign(this.form, data.stockupInfo);
        //   this.form.deliveryType = '2';
        //   this.serveType = data.reservationInfo.serveType.split(',');
        //   if (data.stockupInfo) {
        //     this.loadAndUnload = data.stockupInfo.teamResponsibility.split(',');
        //   }
        //   this.form.loader = data.stockupInfo.loaderName;
        //   this.form.forklift = data.stockupInfo.forkliftName;
        //   this.form.remarks = data.stockupInfo.remarks;

        //   if (data.kind === '1') {
        //     //自主配送
        //     let self = data.deliverySelfVO;
        //     let vehicle = this.vehicleData;
        //     console.log('___________________vahicle', vahicle);

        //     vehicle.forEach(item => {
        //       console.log('___________________', item);
        //       self.forEach(s => {});
        //     });
        //   } else {
        //     this.aaa = false;
        //     this.bbb = true;
        //     //外协配送
        //   }
        //   this.vehicleData.forEach(item => {});

        //   console.log('>>>>>>>>this.form', this.form);
        //   console.log(res.data.data);
        //   this.orderData = data.stockArticleList;
        // });
      // }
      // this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.head_top {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  // border-bottom: 1px solid rgb(228, 228, 228);
  padding-left: 10px;
  
  >.buts{
    padding: 10px 20px;
    cursor: pointer;
    margin-right: 10px;
    font-size: 18px;
    border-bottom: 4px solid #ffffff;
    // background-color: #ffffff;
  }
  .check{
    color: #D3832A;
    border-bottom: 4px solid #D3832A;
  }
}
.minaxbox{
  display: flex;
  flex-direction: column;
  .tophed{
    display: flex;
    flex-wrap: wrap;

  }
}
</style>
