<template>
    <basic-container>
        <div class="avue-crud">
            <el-row v-if="!search" style="padding: 6px 18px">
                <!-- 查询模块 -->
                <el-form :inline="true" :model="query">
                    <el-form-item label="预约单编号:">
                        <el-input v-model="query.reservationCode" placeholder="请输入预约单编号"></el-input>
                    </el-form-item>
                    <el-form-item label="订单自编号:">
                        <el-input v-model="query.stockArticleId" placeholder="请输入订单自编号"></el-input>
                    </el-form-item>
                    <el-form-item label="收货人:">
                        <el-input v-model="query.consignee" placeholder="请输入收货人"></el-input>
                    </el-form-item>
                    <el-form-item label="收货地址:">
                        <el-input v-model="query.deliveryAddress" placeholder="请输入收货地址"></el-input>
                    </el-form-item>
                    <el-form-item label="收件人电话:">
                        <el-input v-model="query.deliveryPhone" 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-row>
            <el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="待确认" name="nocheck">
                    <el-row>
                        <el-button-group>
                            <!--                    <el-button type="primary" icon="el-icon-view" @click="ccc">全部</el-button>-->
                        </el-button-group>
                        <div class="avue-crud__header">
                            <!-- 头部左侧按钮模块 -->
                            <div class="avue-crud__left">
                                <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
                                >添加预约
                                </el-button
                                >
                                <el-button
                                        v-if="this.query.reservationStatus === '1'"
                                        type="danger"
                                        icon="el-icon-delete"
                                        @click="handleConfirmReservations"
                                        plain
                                >批量确认
                                </el-button>
                                <el-button
                                        v-if="this.query.reservationStatus === '2'"
                                        type="danger"
                                        icon="el-icon-delete"
                                        @click="handleStockUp()"
                                        plain
                                >批量转备货
                                </el-button>
                                <el-button
                                        v-if="this.query.reservationStatus === '2'"
                                        type="danger"
                                        icon="el-icon-delete"
                                        @click="handleDeliverys"
                                        plain
                                >批量转配送
                                </el-button>
                            </div>
                            <!-- 头部右侧按钮模块 -->
                            <div class="avue-crud__right">
                                <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
                                <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
                                <el-button icon="el-icon-search" @click="searchHide" circle></el-button>
                            </div>
                        </div>
                    </el-row>
                    <el-row>
                        <!-- 列表模块 -->
                        <tablecmt
                                :columnList="columnList"
                                :tableData="data"
                                :loading="loading"
                                @inputTxt="inputsc"
                                @timeCheck="timesc"
                                @btnCheck="btnsc"
                                @selectCheck="selectsc"
                                @selection="selectionChange"
                        >
                            <template #default="slotProps">
                                <el-text
                                        size="small"
                                        type="primary"
                                        link
                                        icon="el-icon-view"
                                        @click="viewReservation(slotProps.scope)"
                                >查看
                                </el-text
                                >
                                <el-text
                                        size="small"
                                        type="primary"
                                        link
                                        icon="el-icon-view"
                                        @click="editsolt(slotProps.scope)"
                                >编辑
                                </el-text
                                >
                                <el-text
                                        size="small"
                                        type="primary"
                                        link
                                        icon="el-icon-view"
                                        @click="cancelReservation(slotProps.scope)"
                                >取消预约
                                </el-text
                                >
                                <el-text
                                        v-if="this.query.reservationStatus === '1' ? true : false"
                                        size="small"
                                        @click="confirmReservation(slotProps.scope)"
                                >确认预约
                                </el-text
                                >
                            </template>
                        </tablecmt>
                        <!--        <el-popover :visible="visible" placement="top-start" :width="160">-->
                        <!--          <p>Are you sure to delete this?</p>-->
                        <!--          <el-input v-model= 'this.message'-->
                        <!--                    type="textarea"-->
                        <!--                    :rows="1"-->
                        <!--                    placeholder="请输入取消原因"></el-input>-->
                        <!--          <div style="text-align: right; margin: 10%">-->
                        <!--            <el-button size="small" text @click="this.message='',visible = false">取消</el-button>-->
                        <!--            <el-button size="small" type="primary" @click="confirmReservation(slotProps.scope)"-->
                        <!--            >确认</el-button-->
                        <!--            >-->
                        <!--          </div>-->
                        <!--&lt;!&ndash;          <template #reference>&ndash;&gt;-->
                        <!--&lt;!&ndash;          </template>&ndash;&gt;-->
                        <!--        </el-popover>-->
                        <!-- <el-table ref="table" v-loading="loading"
                                              @selection-change="selectionChange"
                                              :data="data"
                                              :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="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-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-row>
                </el-tab-pane>
                <el-tab-pane label="已确认" name="yescheck">
                    <el-row>
                        <el-button-group>
                            <!--                    <el-button type="primary" icon="el-icon-view" @click="ccc">全部</el-button>-->
                        </el-button-group>
                        <div class="avue-crud__header">
                            <!-- 头部左侧按钮模块 -->
                            <div class="avue-crud__left">
                                <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
                                >添加预约
                                </el-button
                                >
                                <el-button
                                        v-if="this.query.reservationStatus === '1'"
                                        type="danger"
                                        icon="el-icon-delete"
                                        @click="handleConfirmReservations"
                                        plain
                                >批量确认
                                </el-button>
                                <el-button
                                        v-if="this.query.reservationStatus === '2'"
                                        type="danger"
                                        icon="el-icon-delete"
                                        @click="handleStockUp()"
                                        plain
                                >批量转备货
                                </el-button>
                                <el-button
                                        v-if="this.query.reservationStatus === '2'"
                                        type="danger"
                                        icon="el-icon-delete"
                                        @click="handleDeliverys"
                                        plain
                                >批量转配送
                                </el-button>
                            </div>
                            <!-- 头部右侧按钮模块 -->
                            <div class="avue-crud__right">
                                <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
                                <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
                                <el-button icon="el-icon-search" @click="searchHide" circle></el-button>
                            </div>
                        </div>
                    </el-row>
                    <el-row>
                        <!-- 列表模块 -->
                        <tablecmt
                                :columnList="columnList"
                                :tableData="data"
                                :loading="loading"
                                @inputTxt="inputsc"
                                @timeCheck="timesc"
                                @btnCheck="btnsc"
                                @selectCheck="selectsc"
                                @selection="selectionChange"
                        >
                            <template #default="slotProps">
                                <el-text
                                        size="small"
                                        type="primary"
                                        link
                                        icon="el-icon-view"
                                        @click="viewReservation(slotProps.scope)"
                                >查看
                                </el-text
                                >
                                <el-text
                                        size="small"
                                        type="primary"
                                        link
                                        icon="el-icon-view"
                                        @click="editsolt(slotProps.scope)"
                                >编辑
                                </el-text
                                >
                                <el-text
                                        size="small"
                                        type="primary"
                                        link
                                        icon="el-icon-view"
                                        @click="cancelReservation(slotProps.scope)"
                                >取消预约
                                </el-text
                                >
                                <el-text
                                        v-if="this.query.reservationStatus === '1' ? true : false"
                                        size="small"
                                        @click="confirmReservation(slotProps.scope)"
                                >确认预约
                                </el-text
                                >
                            </template>
                        </tablecmt>
                        <!--        <el-popover :visible="visible" placement="top-start" :width="160">-->
                        <!--          <p>Are you sure to delete this?</p>-->
                        <!--          <el-input v-model= 'this.message'-->
                        <!--                    type="textarea"-->
                        <!--                    :rows="1"-->
                        <!--                    placeholder="请输入取消原因"></el-input>-->
                        <!--          <div style="text-align: right; margin: 10%">-->
                        <!--            <el-button size="small" text @click="this.message='',visible = false">取消</el-button>-->
                        <!--            <el-button size="small" type="primary" @click="confirmReservation(slotProps.scope)"-->
                        <!--            >确认</el-button-->
                        <!--            >-->
                        <!--          </div>-->
                        <!--&lt;!&ndash;          <template #reference>&ndash;&gt;-->
                        <!--&lt;!&ndash;          </template>&ndash;&gt;-->
                        <!--        </el-popover>-->
                        <!-- <el-table ref="table" v-loading="loading"
                                              @selection-change="selectionChange"
                                              :data="data"
                                              :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="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-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-row>
                </el-tab-pane>
            </el-tabs>

            <el-row>
                <div class="avue-crud__pagination" style="width: 100%">
                    <!-- 分页模块 -->
                    <el-pagination
                            align="right"
                            background
                            @size-change="sizeChange"
                            @current-change="currentChange"
                            :current-page="page.currentPage"
                            :page-sizes="[30, 50, 80, 120]"
                            :page-size="page.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page.total"
                    >
                    </el-pagination>
                </div>
            </el-row>
        </div>
    </basic-container>
    <edittablehead
            @setcolum="setnewcolum"
            @closce="showdrawer"
            :drawerShow="drawerShow"
            :columnList="columnList"
    ></edittablehead>
    <el-dialog v-model="dialogFormCustomer" title="指派叉车">
        <el-form :model="info">
            <el-form-item label="备货时间:">
                <el-date-picker v-model="info.stockupDate" type="date" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <!--      <el-form-item label="装卸班组" :label-width="formLabelWidth">-->
            <!--        <el-select v-model="form.loader" clearable 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-form-item label="备货区域:">
                <el-select v-model="info.stockupArea" clearable placeholder="请选择备货区编号">
                    <el-option
                            v-for="item in goodsAreaIdData"
                            :key="item.dictKey"
                            :label="item.dictValue"
                            :value="item.dictKey"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormCustomer = false">取消</el-button>
          <!--        <el-button type="primary" @click="dialogFormVisible = false"> 确定 </el-button>-->
        <el-button type="primary" @click="callFordelivery('3')"> 确定 </el-button>
      </span>
        </template>
    </el-dialog>

    <el-dialog title="预约取消" v-model="dialogCancelReservation" style="width: 30%; height: 40%">
        <el-form :model="cancel">
            <el-form-item label="原因:">
                <el-input v-model="cancel.message" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogCancelReservation = false">取 消</el-button>
            <el-button type="primary" @click="cancelReservationConfirm(row)">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
  import {
    getList,
    getDetail,
    add,
    update,
    remove,
    confirms,
    addReservations,
    cancelReservation
  } from '@/api/distribution/distributionReservation';
  import option from '@/option/distribution/distributionReservation';
  import { mapGetters } from 'vuex';
  import { getDictionaryBiz } from '@/api/system/dict';
  import { addAssign, getListUser } from '@/api/distribution/distributionStockup';
  import { getPostList } from '@/api/system/post';
  import { getListOwn } from '@/api/system/user';
  import { getListTeam } from '@/api/basicdata/basicdataTeamGroup';
  import { stockUp } from '@/api/basicdata/basicdataGoodsArea';
  import dayjs from 'dayjs';

  export default {
    data() {
      return {
        columnList: [
          {
            prop: '',
            label: '序号',
            type: 0,
            values: '',
            width: 55,
            checkarr: [],
            fixed: true
          },
          {
            prop: 'reservationCode',
            label: '预约单编号',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false
          },
          {
            prop: 'stockArticleId',
            label: '订单自编号',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false
          },
          {
            prop: 'serviceNumber',
            label: '服务号',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          {
            prop: 'warehouseName',
            label: '仓库',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          {
            prop: 'mallName',
            label: '商城',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          {
            prop: 'storeName',
            label: '门店',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          {
            prop: 'consignee',
            label: '收货人',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          {
            prop: 'deliveryAddress',
            label: '收货地址',
            type: 2,
            values: '',
            width: '180',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          {
            prop: 'deliveryPhone',
            label: '收件人电话',
            type: 2,
            values: '',
            width: '180',
            fixed: false,
            sortable: true
          },
          {
            prop: 'reservationDate',
            label: '预约时间',
            type: 4,
            values: '',
            width: '220',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          // {
          //   prop: 'periodOfTime',
          //   label: '时段1',
          //   type: 3,
          //   values: '',
          //   width: '180',
          //   checkarr: [
          //     {
          //       label: '上午',
          //       value: '1'
          //     },
          //     {
          //       label: '下午',
          //       value: '2'
          //     },
          //     {
          //       label: '全天',
          //       value: '3'
          //     },
          //   ],
          //   fixed: false,
          //   sortable: true,
          //   head:true,
          // },
          {
            prop: 'periodOfTimeName',
            label: '时段',
            type: 3,
            values: '',
            width: '180',
            checkarr: [
              {
                label: '上午',
                value: '1'
              },
              {
                label: '下午',
                value: '2'
              },
              {
                label: '全天',
                value: '3'
              }
            ],
            fixed: false,
            sortable: true
          },
          {
            prop: 'deliveryWay',
            label: '配送方式',
            type: 3,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: true
          },
          // {
          //   prop: 'deliveryType',
          //   label: '配送类型',
          //   type: 3,
          //   values: '',
          //   width: '150',
          //   checkarr: [
          //     {
          //       label: '商配',
          //       value: '1',
          //     },
          //     {
          //       label: '市配',
          //       value: '2'
          //     },
          //   ],
          //   fixed: false,
          //   sortable: true
          // },
          // {
          //   prop: 'serveType',
          //   label: '服务类型1',
          //   type: 2,
          //   values: '',
          //   width: '150',
          //   checkarr: [],
          //   fixed: false,
          //   sortable: true,
          //   hide:true,
          // },
          {
            prop: 'serveTypeName',
            label: '服务类型',
            type: 3,
            values: '',
            width: '150',
            checkarr: [
              {
                label: '上楼',
                value: '1'
              },
              {
                label: '超区',
                value: '2'
              },
              {
                label: '拆样',
                value: '3'
              },
              {
                label: '返货',
                value: '4'
              },
              {
                label: '平移',
                value: '5'
              },
              {
                label: '分拣',
                value: '6'
              },
              {
                label: '专车',
                value: '7'
              }
            ],
            fixed: false,
            sortable: true
          },
          {
            prop: 'reservationNum',
            label: '预约包件数',
            type: 1,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          {
            prop: 'reservationStockListNum',
            label: '预约库存品数',
            type: 1,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          {
            prop: 'collectionFee',
            label: '待收货款',
            type: 1,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          {
            prop: 'otherFee',
            label: '其他费用',
            type: 1,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          {
            prop: 'replaceFee',
            label: '代收运费',
            type: 1,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          // {
          //   prop: 'fee',
          //   label: '总费用',
          //   type: 2,
          //   values: '',
          //   width: '150',
          //   checkarr: [],
          //   fixed: false,
          //   sortable: true
          // },
          // {
          //   prop: 'reservationStatus',
          //   label: '预约信息状态1',
          //   type: 4,
          //   values: '',
          //   width: '180',
          //   checkarr: [],
          //   fixed: false,
          //   sortable: true,
          //   hide: true,
          //
          // },
          {
            prop: 'reservationStatusName',
            label: '预约信息状态',
            type: 1,
            values: '',
            width: '180',
            checkarr: [
              //   {
              //   label: '待确认',
              //   value: '1'
              // },
              //   {
              //     label: '已确认',
              //     value: '2'
              //   },
            ],
            fixed: false,
            sortable: true
          },
          // {
          //   prop: 'orderSource',
          //   label: '订单来源',
          //   type: 4,
          //   values: '',
          //   width: '180',
          //   checkarr: [],
          //   fixed: false,
          //   sortable: true
          // },
          // {
          //   prop: 'stockupStatus',
          //   label: '备货状态',
          //   type: 3,
          //   values: '',
          //   width: '150',
          //   checkarr: [
          //         {
          //           label: '待备货',
          //           value: '1',
          //         },{
          //           label: '已备货',
          //           value: '2',
          //         },
          //         {
          //           label: '部分备货',
          //           value: '3'
          //         },
          //   ],
          //   fixed: false,
          //   sortable: true
          // },
          {
            prop: 'stockupStatusName',
            label: '备货状态',
            type: 3,
            values: '',
            width: '150',
            checkarr: [
              {
                label: '待备货',
                value: '10'
              },
              {
                label: '部分备货',
                value: '20'
              },
              {
                label: '已备货',
                value: '30'
              }
            ],
            fixed: false,
            sortable: true
          },

          // {
          //   prop: 'goodsAreaName',
          //   label: '备货区',
          //   type: 2,
          //   values: '',
          //   width: '150',
          //   checkarr: [],
          //   fixed: false,
          //   sortable: true
          // },
          // {
          //   prop: 'goodsAreaId',
          //   label: '备货区编号',
          //   type: 2,
          //   values: '',
          //   width: '150',
          //   checkarr: [],
          //   fixed: false,
          //   sortable: true,
          //   hide:true,
          // },
          // {
          //   prop: 'signingType',
          //   label: '签收类型',
          //   type: 2,
          //   values: '',
          //   width: '150',
          //   checkarr: [],
          //   fixed: false,
          //   sortable: true,
          // },

          // {
          //   prop: 'notes',
          //   label: '备注',
          //   type: 1,
          //   values: '',
          //   width: '150',
          //   checkarr: [],
          //   fixed: false,
          //   sortable: false,
          // },
          {
            prop: '',
            label: '操作',
            type: 6,
            values: '',
            width: '150',
            checkarr: [],
            fixed: 'right',
            hide: true
          }
          // 更多列的配置...
        ],
        drawerShow: false,
        dialogFormCustomer: false,
        height: 0,
        // 弹框标题
        title: '',
        // 是否展示弹框
        box: false,
        // 是否显示查询
        search: true,
        // 加载中
        loading: true,
        // 是否为查看模式
        view: false,
        // 查询信息
        query: {},
        // 分页信息
        page: {
          currentPage: 1,
          pageSize: 30,
          total: 40
        },
        // 表单数据
        form: {},
        info: {},
        cancel: {},
        // 选择行
        selectionList: [],
        // 表单配置
        option: option,
        // 表单列表
        data: [],
        dialogCancelReservation: false,
        //配送方式字典列表
        deliveryTypeData: [],
        //配送类型字典列表
        resvervationStatusData: [],
        stockupStatusData: [],
        orderSourceData: [],
        periodOfTimeData: [],
        deliveryWayData: [],
        //控制编辑弹窗是否可编辑
        isUpdate: false,
        addvalueServeTypeData: [],
        forkliftData: [],
        loaderData: [],
        goodsAreaIdData: [],
        deptId: '',
        cancelReservationRow: {},
        activeName: 'nocheck'
      };
    },
    watch: {
      // '$route.query.reservationId': {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
        // this.fetchData();
        this.onLoad(this.page);
      },
      deep: false,
      immediate: true
      // }
    },
    mounted() {
      this.init();
      this.onLoad(this.page);
      this.getDictionary();

      /**
       * 初始化获取本地缓存的编辑隐藏的列表
       *  固定搭配，不能更改
       */
      let checkListnewarr = this.$functions.getStorage(window.location.pathname + 'checkList');
      let flexListnewarr = this.$functions.getStorage(window.location.pathname + 'flexList');
      let sortlistnewarr = this.$functions.getStorage(window.location.pathname + 'sortlist');
      if (checkListnewarr) {
        this.columnList.map(item => {
          item.head = false;
        });
        checkListnewarr.map(ite => {
          this.columnList.map(item => {
            if (ite == item.label) {
              item.head = true;
            }
          });
        });
      } else {
        let arr = [];
        this.columnList.map(item => {
          if (item.head) {
            arr.push(item.label);
          }
        });
        this.$functions.setStorage(window.location.pathname + 'checkList', arr);
      }
      if (flexListnewarr) {
        this.columnList.map(item => {
          item.fixed = false;
        });
        flexListnewarr.map(ite => {
          this.columnList.map(item => {
            if (ite == item.label) {
              if (item.type == 6) {
                item.fixed = 'right';
              } else {
                item.fixed = true;
              }
            }
          });
        });
      } else {
        let arr = [];
        this.columnList.map(item => {
          if (item.fixed) {
            arr.push(item.label);
          }
        });
        this.$functions.setStorage(window.location.pathname + 'flexList', arr);
      }
      if (sortlistnewarr) {
        this.columnList.map(item => {
          item.sortable = false;
        });
        sortlistnewarr.map(ite => {
          this.columnList.map(item => {
            if (ite == item.label) {
              item.sortable = true;
            }
          });
        });
      } else {
        let arr = [];
        this.columnList.map(item => {
          if (item.sortable) {
            arr.push(item.label);
          }
        });
        this.$functions.setStorage(window.location.pathname + 'sortlist', arr);
      }
    },
    computed: {
      ...mapGetters(['permission']),
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(',');
      }
    },
    methods: {
      showdrawer(value) {
        this.drawerShow = value;
      },
      /**
       * 弹窗的勾选回调，用于更改头部数组
       * 固定搭配，只需要更换   columnList
       */
      setnewcolum(newarr, headarr, type) {
        // console.log(newarr,'+++++++++++')
        if (type == 1) {
          this.columnList = newarr;
          this.$functions.setStorage(window.location.pathname + 'checkList', headarr);
        } else if (type == 2) {
          this.columnList = newarr;
          this.$functions.setStorage(window.location.pathname + 'flexList', headarr);
        } else if (type == 3) {
          this.columnList = newarr;
          this.$functions.setStorage(window.location.pathname + 'sortlist', headarr);
        }
      },
      selectionsc(value) {
        console.log(value);
      },
      delectsolt(scope) {
        const { row } = scope;
        console.log(row);
      },
      cancelReservation(scope) {
        const { row } = scope;
        this.dialogCancelReservation = true;
        this.cancelReservationRow = row;
        console.log(row);
      },
      editsolt(scope) {
        const { row } = scope;
        this.$router.push({
          path: '/distribution/reservation/reservationAddFrom',
          query: {
            reservationId: row.id,
            name: '编辑预约单'
          }
        });
        console.log(row);
      },
      viewReservation(scope) {
        const { row } = scope;
        this.$router.push({
          path: '/distribution/reservation/reservationDetails',
          query: {
            id: row.id
          }
        });
        console.log(row);
      },
      btnsc(index, row) {
        console.log(index, row);
      },
      selectsc(index, row) {
        console.log(index, row);
        if (row.prop === 'periodOfTimeName') {
          this.query['periodOfTime'] = index;
        } else if (row.prop === 'stockupStatusName') {
          this.query['stockupStatus'] = index;
        }else if (row.prop === 'serveTypeName') {
          this.query['serveType'] = index;
          console.log(this.query, '----------->');
        }

        else {
          this.query[row.prop] = index;
        }
        this.onLoad(this.page);
      },
      timesc(index, row) {
        console.log(index, row);
        console.log(index, row);
        if (!!index) {
          index = dayjs(index).format('YYYY-MM-DD');
        }
        this.query[row.prop] = index;
        if (!index) {
          delete this.query[row.prop];
        }
        this.onLoad(this.page);
      },
      inputsc(index, row) {
        console.log(index, row);
        this.query[row.prop] = index;
        this.onLoad(this.page);
      },
      init() {
        this.height = this.setPx(document.body.clientHeight - 340);
      },
      handleClick() {
        if (this.activeName == 'yescheck') {
          this.activeName = 'nocheck';
        } else if (this.activeName == 'nocheck') {
          this.activeName = 'yescheck';
        }
        if (this.activeName == 'yescheck') {
          this.bbb();
        } else if (this.activeName == 'nocheck') {
          this.aaa();
        }
      },
      cancelReservationConfirm() {
        if (!this.cancel.message) {
          this.$message.warning('请输入取消原因!!');
          return;
        }
        let data = {};
        if (this.cancelReservationRow) {
          data = this.cancelReservationRow;
          data.cancelReason = this.cancel.message;
        } else {
          this.$message.error('请稍后再试!!');
          return;
        }
        cancelReservation(data).then(res => {
          this.onLoad(this.page);
          this.cancelReservationRow = {};
          this.dialogCancelReservation = false;
        });
      },
      ddd() {
        this.form.deliveryType === '';
        console.log(' this.form.deliveryType===', this.form.deliveryType);
      },
      //数据字典数据获取
      getDictionary() {
        //服务内容
        getDictionaryBiz('addvalue_serve_type').then(res => {
          this.addvalueServeTypeData = res.data.data;
        });
        getDictionaryBiz('distribution_type').then(res => {
          this.deliveryTypeData = res.data.data;
        });
        //订单来源
        getDictionaryBiz('order_source').then(res => {
          this.orderSourceData = res.data.data;
        });
        //预约状态
        getDictionaryBiz('resvervation_status').then(res => {
          this.resvervationStatusData = res.data.data;
        });
        //备货状态
        getDictionaryBiz('stockup_status').then(res => {
          this.stockupStatusData = res.data.data;
        });
        //时段
        getDictionaryBiz('period_of_time').then(res => {
          this.periodOfTimeData = res.data.data;
        });
        getDictionaryBiz('delivery_way').then(res => {
          this.deliveryWayData = res.data.data;
        });
      },
      //查询叉车人员
      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);
          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 => {
          // console.log(">><><",res.data.data.records);
          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 => {
          // console.log("res>>>",res.data.data);
          let fo = [];
          res.data.data.forEach(i => {
            let v = {
              dictKey: i.id,
              dictValue: i.name + '-' + i.headline
            };
            fo.push(v);
          });
          this.goodsAreaIdData = fo;
        });
      },
      searchHide() {
        this.search = !this.search;
      },
      searchChange() {
        this.onLoad(this.page);
      },
      searchReset() {
        this.query = {};
        this.page.currentPage = 1;
        this.onLoad(this.page);
      },
      handleConfirmReservations() {
        if (this.selectionList.length === 0) {
          this.$message.warning('请选择至少一条数据');
          return;
        }
        let param = {};
        param.ids = this.ids.toString();
        addReservations(param).then(res => {
          this.selectionClear();
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        });
      },
      confirmReservation(scope) {
        const { row } = scope;
        let param = {};
        param.ids = row.id;
        addReservations(param).then(res => {
          this.selectionClear();
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        });
      },
      handleSubmit() {
        this.form.serveType = this.form.serveType.join(',');
        update(this.form).then(() => {
          this.box = false;
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        });
      },
      handleAdd() {
        this.$router.push({
          path: '/distribution/reservation/reservationAddFrom'
        });
      },
      handleEdit(row) {
        console.log(row);
        this.$router.push({
          path: '/distribution/reservation/reservationAddFrom',
          query: {
            reservationId: row.id
          }
        });
      },
      aaa() {
        this.query.reservationStatus = '1';
        this.onLoad(this.page);
      },
      bbb() {
        this.query.reservationStatus = '2';
        this.onLoad(this.page);
      },
      handleView(row) {
        this.title = '查看';
        this.view = true;
        this.box = true;
        getDetail(row.id).then(res => {
          this.form = res.data.data;
        });
      },
      /**
       * 批量转配送
       */
      handleDeliverys() {
        if (this.selectionList.length === 0) {
          this.$message.warning('请选择至少一条数据');
          return;
        }
        let ids = [];
        this.selectionList.forEach(item => {
          if (item.id) {
            ids.push(item.id);
          }
        });
        ids = ids.join(',');
        this.$router.push({
          path: '/distribution/reservation/atlas',
          query: {
            id: ids,
            type: '1'
          }
        });
        // console.log(">>>>>>>>>>",ids);
      },
      //批量转备货
      handleStockUp() {
        this.info = {};
        if (this.selectionList.length === 0) {
          this.$message.warning('请选择至少一条数据');
          return;
        }
        let data = this.selectionList;
        let a = [];
        let b = [];
        console.log('>>>>>>>>>>>>>', data);
        data.forEach(d => {
          if (d.stockupStatus === '20' || d.stockupStatusName === '待备货') {
            a.push(d.reservationCode);
          }
          if (d.stockupStatus === '30' || d.stockupStatusName === '已备货') {
            b.push(d.reservationCode);
          }
        });
        if (a.length >= 1) {
          this.$message.warning(a.join(',') + '预约单存在备货任务,请勿重复添加');
          return;
        }
        if (b.length >= 1) {
          this.$message.warning(a.join(',') + '预约单备货任务已完成,请勿重复添加');
          return;
        }
        this.dialogFormCustomer = true;
        this.info.stockupDate = dayjs().format('YYYY-MM-DD HH:mm:ss');

        this.getFork();
        this.getTeam();
      },
      //确定指派
      callFordelivery() {
        this.info.ids = this.ids;
        this.goodsAreaIdData.forEach(item => {
          console.log(item);
          if (this.info.stockupArea === item.dictKey) {
            this.info.goodsAreaName = item.dictValue;
          }
        });
        confirms(this.info).then(res => {
          this.$message({
            type: 'success',
            message: '操作成功！'
          });
          this.onLoad(this.page);
          this.dialogFormCustomer = false;
        });
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning('请选择至少一条数据');
          return;
        }
        this.$confirm('确定将选择数据删除?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.selectionClear();
            this.onLoad(this.page);
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
          });
      },
      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;
      },
      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;
        if (!this.query.reservationStatus) {
          this.query.reservationStatus = '1';
        }
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          console.log('>>>>>>>', data);
          data.records.forEach(item => {
            this.orderSourceData.forEach(a => {
              if (item.orderSource === a.dictKey) {
                item.orderSource = a.dictValue;
              }
            });
            // this.stockupStatusData.forEach(b => {
            //   if (item.stockupStatus === b.dictKey) {
            //     item.stockupStatus = b.dictValue;
            //   }
            // });
            this.resvervationStatusData.forEach(e => {
              if (item.reservationStatus === e.dictKey) {
                item.reservationStatus = e.dictValue;
              }
            });
            this.deliveryTypeData.forEach(c => {
              if (item.deliveryType === c.dictKey) {
                item.deliveryType = c.dictValue;
              }
            });

            this.deliveryWayData.forEach(c => {
              if (item.deliveryWay === c.dictKey) {
                item.deliveryWay = c.dictValue;
              }
            });
            this.periodOfTimeData.forEach(d => {
              console.log('11111111111');
              if (item.periodOfTime === d.dictKey) {
                item.periodOfTime = d.dictValue;
              }
            });
            let pa = [];
            if (item.serveType.length > 1) {
              pa = item.serveType.split(',');
            } else {
              pa.push(item.serveType);
            }
            this.addvalueServeTypeData.forEach(f => {
              pa.forEach((p, index) => {
                if (p === f.dictKey) {
                  pa[index] = f.dictValue;
                }
              });
            });
            item.serveType = pa.join(',');
          });
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }
    }
  };
</script>
<style lang="scss">
    // .el-tab-pane{
    //   margin-top: -20px;
    // }
</style>