<template>
    <basic-container>
        <div class="avue-crud">

            <el-form ref="form"
                     :model="form"
                     prop="consignee"
                     label-width="80px">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="收货人:" prop="consignee" label-width="100px">
                            <el-input v-model="form.consignee" clearable placeholder="请输入收货人"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="预约时间:" prop="reservationDate" label-width="100px">
                            <el-date-picker
                                    v-model="form.reservationDate"
                                    type="date"
                                    clearable
                                    placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col :span="10">
                        <el-form-item label="收件地址:" prop="deliveryAddress" label-width="100px">
                            <el-input v-model="form.deliveryAddress" clearable placeholder="请输入收件地址"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="时&emsp;&emsp;段:" prop="deliveryAddress" label-width="100px">
                            <el-radio-group v-model="form.periodOfTime" v-for="item in this.periodOfTimeData">
                                <el-radio

                                        :label="item.dictKey"
                                        :value="item.dictKey">{{item.dictValue}}&emsp;
                                </el-radio>
                            </el-radio-group>
                            <!--                            :label="item.dictValue"-->
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-row>
                    <el-col :span="10">
                        <el-form-item label="收件人电话:" prop="deliveryPhone" label-width="100px">
                            <el-input v-model="form.deliveryPhone" placeholder="请输入收件人电话"/>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10">
                        <el-form-item label="配送类型:" prop="serveType" label-width="100px">
<!--                            v-for="item in this.deliveryTypeData"-->
                            <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="10">
                        <el-form-item label="备注:" prop="orderSource" label-width="100px" style="width: 100%">
                            <el-input
                                    type="textarea"
                                    :rows="2"
                                    placeholder="请输入内容"
                                    v-model="form.remarks">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="配送方式:" prop="serveType" label-width="100px">
<!--                            v-for="item in this.deliveryWayData"-->
                            <el-radio-group v-model="form.deliveryWay" >
                                <el-radio :label="'1'"
                                          :value="'1'">送货&emsp;
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>


                </el-row>

                <el-row>
                    <el-col :span="10">
                        <el-form-item label="到付运费:" prop="collectFee" label-width="100px">
                            <el-input type="number" v-model="form.collectFee" :disabled="true"/>
                        </el-form-item>

                    </el-col>
                    <el-col :span="10">
                        <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-col :span="10">
                        <el-form-item label="代收运费:" prop="replaceFee" label-width="100px">
                            <el-input v-model="form.replaceFee" :disabled="true"/>
                        </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>


            <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%"
                              :border="option.border">
                        <el-table-column v-if="option.index" label="序号" type="index" width="80px"
                                         align="center"></el-table-column>
                        <template v-for="(item,index) in option.columnReservations">
                            <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 link @click="handleAddInventory">新 增</el-button>
                    <el-table ref="table"
                              v-loading="loading"
                              :data="inventoryData"
                              :height="height"
                              style="width: 100%"
                              :border="option.border">
                        <!--                    <el-table-column type="selection" v-if="stockList.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.stockListColumn">
                            <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: 5px">
                <el-button type="primary" icon="el-icon-circle-close" @click="onSubmit">提交(配送订单预约)</el-button>
                <el-button icon="el-icon-circle-close" @click="$router.go(-1)">返 回</el-button>
            </el-form-item>


            <el-dialog
                    v-model="orderShow"
                    title="在库订单信息"
                    width="100%"
                    :model="addvalue"
                    :before-close="handleClose">
                <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>


                <el-table ref="table"
                          v-loading="loading"
                          @selection-change="selectionChange"
                          :data="stockArticleInfo"
                          :height="height"
                          style="width: 100%"
                          :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.column">
                        <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.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 label="货物编号:">
                        <el-input v-model="query.customerAddress" 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: 100%"
                          :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.stockListColumn">
                        <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="isaddvalue"
                    title="包件信息"
                    width="100%"
                    :model="addvalue"
                    :before-close="handleClose">
                <!-- 列表模块 -->
                <el-table ref="table" v-loading="loading"
                          @selection-change="selectionChange"
                          :data="packageData"
                          :height="height"
                          style="width: 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.columnParcels">
                        <!-- 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="isaddvalue=false">返 回</el-button>
                </el-form-item>
            </el-dialog>

            <el-dialog
                    v-model="dialogVisible"
                    title="增值服务"
                    width="30%"
                    :model="addvalue"
                    :before-close="handleClose">
                <el-form-item label="增值服务" prop="freightMark">
                    <el-checkbox-group v-model="form.addvalueType" @change="handleCheckedCitiesChange">
                        <el-checkbox style="width: 100%;margin-bottom: 3%;"
                                     v-for="(item,index) in addvalueServeTypeData"
                                     :key="item.dictKey"
                                     :label="item.dictKey"
                        >{{item.dictValue}}
                            <span v-if="index===0||index===6||index===2||index===4">&nbsp;件数:
                         <el-input type="number" v-model="item.f"
                                   :disabled="this.form?.freightMark?.indexOf(item.dictKey) == -1"
                                   @change="textbox($event,index,1)"
                                   style="width: 10%;border:none; border-bottom:2px solid #eee;"/>
                     </span>
                            <span v-if="index===1">公里:
                          <el-input type="primary" v-model="item.a"
                                    :disabled="this.form?.freightMark?.indexOf(item.dictKey) == -1"
                                    @change="textbox($event,index,2)"
                                    style="width: 10%;border:none; border-bottom:2px solid #eee;"/>
                     </span>
                            <span v-if="index===3">距离:
                      <el-input type="number" v-model="item.b"
                                :disabled="this.form?.freightMark?.indexOf(item.dictKey) == -1"
                                @change="textbox($event,index,3)"
                                style="width: 10%;border:none; border-bottom:2px solid #eee;"/>
                     </span>
                            <span v-if="index===5">人数:
                      <el-input type="number" v-model="item.c"
                                :disabled="this.form?.freightMark?.indexOf(item.dictKey) == -1"
                                @change="textbox($event,index,4)"
                                style="width: 10%;border:none; border-bottom:2px solid #eee;"/>
                     </span>
                            <span v-if="index===0">楼层:
                      <el-input type="number" v-model="item.d"
                                :disabled="this.form?.freightMark?.indexOf(item.dictKey) == -1"
                                @change="textbox($event,index,5)"
                                style="width: 10%;border:none; border-bottom:2px solid #eee;"/>
                     </span>
                            <span v-if="item">预计费用:
                        <el-input type="number" v-model="item.e"
                                  :disabled="this.form?.freightMark?.indexOf(item.dictKey) == -1"
                                  @change="textbox($event,index,6)"
                                  style="width: 20%;border:none; border-bottom:2px solid #eee;"/>
                     </span>
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="aaa">
          确定(增值服务)
        </el-button>
      </span>
                </template>
            </el-dialog>
        </div>
    </basic-container>

</template>


<script>
  import { add, update, remove, getReservationInfo } from '@/api/distribution/distributionReservation';
  import { getList, getStockArticleList, selectStockArticleList } from '@/api/distribution/distributionStockArticle';
  import { getDetailDelivery, addDelivery } from '@/api/distribution/distributionDelivery';
  import { addIncrement } from '@/api/distribution/distributionStockArticle';
  import { getInventoryList } from '@/api/distribution/distributionStockList';
  import { getListOwn } from '@/api/distribution/distributionParcelList';

  // import option from "@/option/distribution/distributionDelivery";
  import option from '@/option/distribution/distributionStockArticle';
  import StockList from '@/option/distribution/distributionStockList';
  import { mapGetters } from 'vuex';
  import { getDictionaryBiz } from '@/api/system/dict';

  export default {
    data() {
      return {
        height: 0,
        // 弹框标题
        title: '',
        // 是否展示弹框
        box: false,
        // 是否显示查询
        search: true,
        // 加载中
        loading: true,
        // 是否为查看模式
        view: false,
        // 查询信息
        query: {},
        // 分页信息
        page: {
          currentPage: 1,
          pageSize: 10,
          total: 40
        },
        // 表单数据
        form: {},
        // 选择行
        selectionList: [],
        // 表单配置
        option: option,
        // 表单列表
        data: [],
        //增值服务弹窗
        dialogVisible: false,
        textarea: '',
        //增值服务字典列表
        addvalueServeTypeData: [],
        //配送方式字典列表
        deliveryWayData: [],
        //配送类型字典列表
        deliveryTypeData: [],
        //增值服务列表
        addvalueServeType: [],
        //增值表单输入框对象
        addvalue: {},
        costList: [], //字典
        //增值服务对象
        addvalueObj: {},
        //费用列表
        feeList: [],
        //楼层
        floorList: [],
        //订单行数据
        orderInfo: {},
        //服务类型
        serveType: [],
        //增加订单弹窗
        orderShow: false,
        //在库订单信息
        stockArticleInfo: [],
        //库存品信息
        inventoryInfo: {},
        //时段
        periodOfTimeData: [],
        //路由订单编号
        orderIds: '',
        //预约编号
        reservationId: '',
        inventoryData: [],
        orderData: [],
        stockListShow: false,
        isaddvalue: false,
        packageData: [],
        packageList: []
      };
    },
    created() {
      this.$watch(
        () => this.$route.params,
        () => {
          this.fetchData();
        },
        // 组件创建完后获取数据，
        // 此时 data 已经被 observed 了
        { immediate: true }
      );
    },
    mounted() {
      this.init();
      this.onLoad(this.page);
      this.getDictionary();
    },
    computed: {
      ...mapGetters(['permission']),
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(',');
      }
    },
    methods: {
      fetchData() {
        this.error = this.post = null;
        this.loading = true;
        if (this.$route.query.id) {
          this.orderIds = this.$route.query.id;
        }
        if (this.$route.query.reservationId) {
          this.reservationId = this.$route.query.reservationId;
        }
      },
      init() {
        this.height = this.setPx(document.body.clientHeight - 340);
      },
      aaa() {
        let addvalueInfos = [];
        this.form.addvalueType.forEach((item, index) => {
          let addvalueInfo = {};
          addvalueInfo.addvalueId = item;
          if (item == 1 || item == 3 || item == 5 || item == 7) {
            addvalueInfo.number = this.costList[item];
          }
          if (item == 2) {
            addvalueInfo.kilometer = this.costList[item];
          }
          if (item == 4) {
            addvalueInfo.distance = this.costList[item];
          }
          if (item == 6) {
            addvalueInfo.peopleNum = this.costList[item];
          }
          if (this.floorList.length > 1) {
            addvalueInfo.floor = this.floorList[1];
            this.floorList = [];
          }
          addvalueInfo.fee = this.feeList[item];
          addvalueInfos.push(addvalueInfo);
        });
        let params = {};
        params.id = this.orderInfo.id;
        params.addvalue = addvalueInfos;
        addIncrement(params).then(res => {
          this.dialogVisible = false;
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        });
        this.onLoad(this.page);
      },
      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;


        console.log("?????????????",params);
      },
      handleAddInventory() {
        let page =this.page;
        let params = {};
        getInventoryList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const inventoryList = res.data.data;
          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;
      },
      handleCheckedCitiesChange(value) {
        if (value) {
          this.form.addvalueType = value;
        }
        console.log('>>>>>', this.form);
        if (value.length < 1) {
          this.costList = [];
          this.costListName = [];
        }
        this.deliveryWayData.forEach(i => {
          if (value.includes(i.dictKey)) {
            console.log(i);
            i.pitch = true;
            this.costListName = value;
          }
        });

      },
      textbox(e, index, a) {
        console.log('e,index', e, index, a);
        if (a === 6) {
          this.feeList[index + 1] = e;
          return;
        }
        if (a === 5)
          if (index === 0 && a === 5) {
            this.floorList[index + 1] = e;
            return;
          }
        this.costList[index + 1] = e;

        //费用列表
      },
      //数据字典数据获取
      getDictionary() {
        getDictionaryBiz('addvalue_serve_type').then(res => {
          this.addvalueServeTypeData = res.data.data;
        });
        getDictionaryBiz('delivery_way').then(res => {
          this.deliveryWayData = res.data.data;
        });
        getDictionaryBiz('distribution_type').then(res => {
          this.deliveryTypeData = res.data.data;
        });
        getDictionaryBiz('period_of_time').then(res => {
          this.periodOfTimeData = res.data.data;
        });
      },
      addvalueServe(row) {
        //查询订单的增值服务，
        this.addvalueServeType = [];
        this.addvalue = {};
        this.dialogVisible = true;
        this.costList = [];
        this.feeList = [];
        this.floorList = [];
        this.orderInfo = row;
      },
      searchHide() {
        this.search = !this.search;
      },
      searchChange() {
        this.onLoad(this.page);
      },
      searchReset() {
        this.query = {};
        this.page.currentPage = 1;
        this.onLoad(this.page);
      },
      viewStockArticlePackage(row) {
        this.loading = true;
        console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>', row);
        this.isaddvalue = true;
        getListOwn('1', '10', { stockArticleId: row.id }).then(res => {
          const packages = res.data.data;
          console.log('>>>>>>>', packages);
          this.packageData = packages.records;
          this.loading = false;
        });
      },
      onSubmitPackage() {
        console.log('>>>>>>>>>>>>', this.selectionList);
        this.orderData.forEach(item => {
          item.reservationNum = 0;
          this.selectionList.forEach(list => {
            if (item.id === list.stockArticleId) {
              item.reservationNum += list.quantity;
            }
          });
          item.packageList = this.selectionList;
        });
        console.log("+++++++++++++++",this.orderData);
        this.isaddvalue = false;
      },
      onSubmit() {
        //新增预约单
        let orderIds = [];
        let inventoryIds = [];
        let inventoryList = [];
        let stockArticleList = [];
        let operation = true;
        this.orderData.forEach(item => {
          if (item.reservationNum === '0') {
            this.$message({
              type: 'warning',
              message: '请选择' + item.orderSelfNumbering + '包件数量!'
            });
            operation = false;
          }
          orderIds.push(item.id);
          item.reservationNum = item.reservationNum;
          stockArticleList.push(item);
        });
        this.inventoryData.forEach(item => {
          if (item.reservationNum === '0' || item.reservationNum > item.quantityStock) {
            this.$message({
              type: 'warning',
              message: '请输入' + item.orderSelfNumbering + '正确数量!'
            });
            operation = false;
          }
          item.reservationNum = item.reservationNum;
          inventoryIds.push(item.id);
          inventoryList.push(item);
        });
        orderIds.join(',');
        inventoryIds.join(',');
        this.form.stockArticleIds = orderIds.toString();
        this.form.inventoryIds = inventoryIds.toString();
        this.form.inventoryList = inventoryList;
        this.form.stockArticleList = stockArticleList;
        this.deliveryWayData.forEach(item => {
          if (this.form.deliveryWay === item.dictValue) {
            this.form.deliveryWay = item.dictKey;
          }
        });
        this.deliveryTypeData.forEach(item => {
          if (this.form.deliveryType === item.dictValue) {
            this.form.deliveryType = item.dictKey;
          }
        });
        this.periodOfTimeData.forEach(item => {
          if (this.form.periodOfTime === item.dictValue) {
            this.form.periodOfTime = item.dictKey;
          }
        });
        this.form.serveType = this.serveType.join(',');
        //服务号

        // this.form.packageList = this.packageList;
        console.log(">>>>>>>>",this.form);
        if (operation){
          if (this.reservationId){
            update(this.form).then(()=>{
              this.$router.go(-1);
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
            })
          }else {
            add(this.form).then(() => {
              this.$router.go(-1);
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
            });
          }
        }
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
      removeStockArticle(row) {
        this.orderData.forEach((item, index) => {
          if (item.id === row.id) {
            this.orderData.splice(index, 1);
          }
          console.log(item);
        });
        console.log('>>>>>>>>>>>>>>>row', row);
      },
      removeStockList(row) {
        this.inventoryData.forEach((item, index) => {
          if (item.id === row.id) {
            this.inventoryData.splice(index, 1);
          }
          console.log(item);
        });
        console.log('>>>>>>>>>>>>>>>row', row);
      },
      handleView(row) {
        this.title = '查看';
        this.view = true;
        this.box = true;
        getDetailDelivery(row.id).then(res => {
          this.form = res.data.data;
        });
      },
      rowDel(row) {
        this.$confirm('确定将选择数据删除?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
          });
      },
      beforeClose(done) {
        done();
        this.form = {};
        this.view = false;
      },
      selectionChange(list) {
        this.selectionList = list;
      },

      // 增加库存品
      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() {
        if (this.selectionList.length === 0) {
          this.$message.warning('请选择至少一条数据');
          return;
        }
        let a = [];
        a = this.selectionList;
        let b = false;
        this.selectionList.forEach(item => {
          a.forEach(a => {
            if (item.customerName !== a.customerName || item.customerTelephone !== a.customerTelephone || item.customerAddress !== a.customerAddress) {
              b = true;
            }
          });
        });
        if (b) {
          this.$message({
            type: 'warning',
            message: '请选择同一顾客订单!'
          });
          return;
        }
        if (this.orderData.length >= 1) {
          let flag = false;
          this.selectionList.some(i => {
            //过滤选择数据中不是同一用户的数据
            let b = this.orderData.filter(a => {
              return i.customerName !== a.customerName && i.customerTelephone !== a.customerTelephone && i.customerAddress !== a.customerAddress;
            }).length >= 1;
            console.log('>>>>>>>>>>>>>>>', b);
            //控制选择记录是否插入订单列表中
            let a = this.orderData.filter((ele) => ele.id == i.id).length >= 1;

            if (!b) {
              if (!a) {
                this.orderData.push(i);
              } else {
                flag = true;
              }
            }
          });
          if (flag) {
            this.$message({
              type: 'warning',
              message: '请选择同一顾客订单!'
            });
          }
        } else {
          this.orderData = this.selectionList;
          let a = 0;
          this.orderData.forEach(item => {
            if (item.collectFee) {
              a += parseInt(item.collectFee);
            }
          });
          this.form.collectFee = a;
        }
        this.orderShow = false;
      },
      selectionClear() {
        this.selectionList = [];
        // this.$refs.table.clearSelection();
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
        this.onLoad(this.page);
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
        this.onLoad(this.page);
      },
      onLoad(page, params = {}) {
        this.loading = true;
        this.form.deliveryType = "1";
        this.form.deliveryWay = "1";
        if (this.orderIds) {
          getStockArticleList(this.orderIds).then(res => {
            console.log(res.data.data);
            const data = res.data.data;
            let name = '';
            let phone = '';
            let address = '';
            let typeService = '';
            console.log('>>>>>>>>>>>>>', data);
            for (let i = 0; i < data.length; i++) {
              if (i === 0) {
                name = data[0].customerName;
                phone = data[0].customerTelephone;
                address = data[0].customerAddress;
                typeService = data[0].typeService.toString();
                // typeName = data[0].typeName;
              }
            }
            this.form.consignee = name;
            this.form.deliveryPhone = phone;
            this.form.deliveryType = typeService;
            this.form.deliveryAddress = address;

            this.orderData = data;
          });
        }
        if (this.reservationId) {
          getReservationInfo(this.reservationId).then(res => {
            const reservation = res.data.data;
            this.orderData = reservation.stockArticleList;
            this.inventoryData = reservation.inventoryList;
            this.form.deliveryType = reservation.deliveryType;
            this.form.periodOfTime = reservation.periodOfTime;
            this.form.periodOfTime = reservation.periodOfTime;
            if (reservation.serveType) {
              //过滤字符串中的','
              this.serveType = Array.from(reservation.serveType).filter(s => {
                return s !== ',';
              });
            }
            this.form = reservation;
          });
        }
        this.loading = false;


      }
    }

  };
</script>
<style>

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
</style>
