<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 style="margin: 2%" 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="goodsShelfId">
                        <el-select v-model="vehicleIds" multiple 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 placeholder="请选择司机" @change="changeDriver">
                            <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%" 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 v-model="form.tripartiteSource" placeholder="请选择来源">
                            <el-option
                                    v-for="item in tripartiteSourceData"
                                    :key="item.dictKey"
                                    :label="item.dictValue"
                                    :value="item.dictValue">
                            </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.deiverPhone" 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%">
        <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 v-model="form.forklift" placeholder="请选择叉车司机">
                                <el-option
                                        v-for="item in this.forkliftData"
                                        :key="item.dictKey"
                                        :label="item.dictValue"
                                        :value="item.dictKey">
                                </el-option>
                                <!--                            {{this.forkliftData}}-->
                            </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="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">
                                    <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="'2'"
                                        :value="'2'">商配&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 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-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="12">
                        <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="10">
                        <el-form-item label="其他费用:" prop="collectFee" label-width="100px">
                            <el-input v-model="form.otherFee" placeholder="请输入其他费用"/>
                        </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="table"
                  v-loading="loading"
                  @selection-change="selectionChange"
                  :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%"
            :model="addvalue"
            :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%"
            :model="addvalue">
        <!-- 列表模块 -->
        <el-table ref="table" 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" width="55"
                             align="center"></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">
                        </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">
                        </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 { getListTeam } 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 { stockUp } from '@/api/basicdata/basicdataGoodsArea';
  import { getVehicleList } from '@/api/basicdata/basicdataVehicle';
  import { getDriverList } from '@/api/basicdata/basicdataDriverArtery';
  import { selectStockArticleList } from '@/api/distribution/distributionStockArticle';
  import { getInventoryList } from '@/api/distribution/distributionStockList';

  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: {},
        driverList: [],
        vehticleList: [],
        //订单数据
        orderData:[],
        //库存品数据
        inventoryData:[],
        //
        selectionList:[],
        addvalue: {},
        //订单弹窗
        orderShow:false,
        //库存品弹窗
        stockListShow:false,
        //在库订单数据
        stockArticleInfo:[],
        //库存品信息列表
        inventoryInfo:[],
        //包件弹窗控制
        isShowPackage:false,
        //包件数据
        packageData:[],
        //班组职能
        loadAndUnload:[],
        //服务类型
        serveType:[],
        //外协数据来源
        tripartiteSourceData:[],


      };
    },
    created() {
      this.getDictionary();
      this.getFork();
      this.getTeam();
      this.getvehicleData();
      this.getMasterDriverData();
    },
    computed: {},

    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 = {
          department: this.deptId
        };
        getListTeam(this.page.currentPage, this.page.pageSize, Object.assign(params, this.query)).then(res => {
          let fo = [];
          res.data.data.records.forEach(i => {
            let a = {
              dictKey: i.id,
              dictValue: i.name + '-' + i.groupName
            };
            fo.push(a);
          });
          this.loaderData = fo;
        });
      },
      //备货区
      async getStorageArea() {
        let params = {
          department: this.deptId
        };
        stockUp(params).then(res => {
          let fo = [];
          res.data.data.forEach(i => {
            let v = {
              dictKey: i.id,
              dictValue: i.name + '-' + i.headline
            };
            fo.push(v);
          });
          this.goodsAreaData = fo;
        });
      },
      //查询司机信息
      getMasterDriverData() {
        getDriverList(1, 10, '').then(res => {
          this.driverData = res.data.data.records;
        });
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      //查询车辆信息
      getvehicleData() {
        getVehicleList(1, 10, '').then(res => {
          this.vehicleData = res.data.data.records;
          console.log(res.data.data);
        });
      },
      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.isShowPackage = true;
        // this.loading = true;
        this.orderData.forEach(item=>{
          if (item.id===row.id){
            item.packageList = [];
          }
        })
        getPackageList('1', '10', { stockArticleId: row.id }).then(res => {
          const packages = res.data.data;
          console.log('>>>>>>>', packages);
          this.packageData = packages.records;
          this.loading = false;
        });
      },
      /**
       * 提交包件信息
       */
      onSubmitPackage(){
        //这里提交包件主要是对包件进行数量的统计
        if (this.selectionList.length === 0 ){
          this.$message.warning('请选择至少一条数据');
          return;
        }
        //这里就需要将具体的包件信息和订单进行关系绑定
        this.orderData.forEach(o=>{
          this.selectionList.forEach(p=>{
            if (p.stockArticleId === o.id){
                o.packageList.push(p);
            }
          })
        });
        this.isShowPackage = false;
        console.log(this.orderData);
      },
      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;
        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;
        })
        console.log("5555555555",serve);
        this.form.serveType = serve.join(",");
        stockup.loadAndUnload = this.loadAndUnload.join(',');
        //判断是否是三方配送
        if (params.tripartiteSource) {
          //三方配送数据构建
          if (params.driverName) {
            tripartite.driverName = params.driverName;
          }
          if (params.deiverPhone) {
            tripartite.deiverPhone = params.deiverPhone;
          }
          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;
              }
            });
          }
        } 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;
          }
        }
        let data = {};
        data.stockup = stockup;
        data.masterDriverName = this.form.masterDriverName;
        data.masterVehicleNub = this.form.masterVehicleNub;
        data.allocationInfo = allocationInfo;
        data.tripartite = tripartite;
        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.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() {
        this.aaa = true;
        this.bbb = false;
        this.form = {};
        this.loadAndUnload = [];
      },
      ddd() {
        this.aaa = false;
        this.bbb = true;
        this.form = {};
        this.loadAndUnload = [];
      },
      handleAddOrder() {
        this.query.typeService=1;
        let page =this.page;
        let params = {};
        selectStockArticleList(page.currentPage,page.pageSize,Object.assign(params,this.query)).then(res=>{
          const data = res.data.data;
          data.records.forEach(item => {
            item.reservationNum = item.handQuantity;
          });
          this.page.total = data.total;
          this.stockArticleInfo = data.records;
          this.loading = false;
          this.selectionClear();
        })
        this.selectionList = [];
        this.orderShow = true;
      },
      handleAddInventory() {
        this.form.deliveryType ='2';
        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.selectionList;
        this.orderShow = false;
      },
      selectionClear() {
        this.selectionList = [];
        // this.$refs.table.clearSelection();
      },
      onLoad(page, params = {}) {


      }
    }
  };
</script>

<style scoped>

</style>

