<template>
    <basic-container>
        <div class="avue-crud">
            <el-row :gutter="24" class="rows">
                <el-col :xl="7" :lg="7" :md="8" :sm="24">
                    <span style="padding-left: 10%">当前预约单状态>>>>>>>>> {{reservationData.reservationStatus}}</span>
                </el-col>
            </el-row>
            <el-divider>基本信息</el-divider>
            <el-row :gutter="24" class="rows">
                <el-col :xl="5" :lg="7" :md="8" :sm="24">
                    <span>预约单号：{{reservationData.reservationCode}} </span>
                </el-col>
                <el-col :xl="5" :lg="7" :md="8" :sm="24">
                    <span>商场名称：{{reservationData.mallName}} </span>
                </el-col>
                <el-col :xl="5" :lg="7" :md="8" :sm="24">
                    <span>预约时间：{{reservationData.reservationDate}} </span>
                </el-col>
                <el-col :xl="3" :lg="7" :md="8" :sm="24">
                    <span>服务类型：{{reservationData.deliveryType}}</span>
                </el-col>
            </el-row>
            <el-divider>收货人信息</el-divider>
            <el-row :gutter="24" class="rows">
                <el-col :xl="7" :lg="7" :md="10" :sm="24">
                    <span>收货人：{{reservationData.consignee}} </span>
                </el-col>
                <el-col :xl="7" :lg="7" :md="10" :sm="24">
                    <span>手机号码：{{reservationData.deliveryPhone}} </span>
                </el-col>
                <el-col :xl="7" :lg="7" :md="10" :sm="24">
                    <span>收货地址：{{reservationData.deliveryAddress}} </span>
                </el-col>
            </el-row>
            <!--      <el-divider>服务内容</el-divider>-->
            <!--      <div class="topbox">-->
            <!--        <div class="titlxbx">-->
            <!--          <div>-->
            <!--            <div>上楼</div>-->
            <!--            <div>2178501088045989849</div>-->
            <!--          </div>-->
            <!--          <div>-->
            <!--            <div>货物件数：</div>-->
            <!--            <div>预估费用：500.00</div>-->
            <!--          </div>-->
            <!--        </div>-->
            <!--        <div class="titlxbx">-->
            <!--          <div>-->
            <!--            <div>超区</div>-->
            <!--            <div>超区公里：10KM</div>-->
            <!--          </div>-->
            <!--          <div>-->
            <!--            <div></div>-->
            <!--            <div>预估费用：500.00</div>-->
            <!--          </div>-->
            <!--        </div>-->
            <!--        <div class="titlxbx">-->
            <!--          <div>-->
            <!--            <div>拆样</div>-->
            <!--            <div>货物件数：10件</div>-->
            <!--          </div>-->
            <!--          <div>-->
            <!--            <div></div>-->
            <!--            <div>预估费用：500.00</div>-->
            <!--          </div>-->
            <!--        </div>-->
            <!--        <div class="titlxbx">-->
            <!--          <div>-->
            <!--            <div>返货</div>-->
            <!--            <div>货物件数：10件</div>-->
            <!--          </div>-->
            <!--          <div>-->
            <!--            <div></div>-->
            <!--            <div>预估费用：500.00</div>-->
            <!--          </div>-->
            <!--        </div>-->
            <!--        <div class="titlxbx">-->
            <!--          <div>-->
            <!--            <div>搬运</div>-->
            <!--            <div>人员：张三，李四</div>-->
            <!--          </div>-->
            <!--          <div>-->
            <!--            <div></div>-->
            <!--            <div></div>-->
            <!--          </div>-->
            <!--        </div>-->

            <!--        <div class="titlxbx">-->
            <!--          <div>-->
            <!--            <div>返货</div>-->
            <!--            <div>货物件数：10件</div>-->
            <!--          </div>-->
            <!--          <div>-->
            <!--            <div></div>-->
            <!--            <div>预估费用：500.00</div>-->
            <!--          </div>-->
            <!--        </div>-->

            <!--        <div class="titlxbx">-->
            <!--          <div>-->
            <!--            <div>到付运费</div>-->
            <!--            <div></div>-->
            <!--          </div>-->
            <!--          <div>-->
            <!--            <div></div>-->
            <!--            <div>费用：500.00</div>-->
            <!--          </div>-->
            <!--        </div>-->
            <!--        <div class="titlxbx">-->
            <!--          <div>-->
            <!--            <div>代收货款</div>-->
            <!--            <div></div>-->
            <!--          </div>-->
            <!--          <div>-->
            <!--            <div></div>-->
            <!--            <div>费用：500.00</div>-->
            <!--          </div>-->
            <!--        </div>-->

            <!--      </div>-->
            <el-divider>预约详情</el-divider>
            <div>
                <el-tabs type="border-card"
                         @tab-click="handleClick">
                    <el-tab-pane label="订单信息">
                        <tablecmt
                                :columnList="stockArticleColumnList"
                                :tableData="stockArticleData"
                                :loading="loading"
                                @inputTxt="inputsc"
                                @timeCheck="timesc"
                                @btnCheck="btnsc"
                                @selectCheck="selectsc"
                                @selection="selectionsc"
                        >
                            <template #default="slotProps">
                                <el-button size="small" @click="checkPackage(slotProps.scope)">查 看 包 件</el-button>
                                <br/>
                                <el-button size="small" @click="checkAddValue(slotProps.scope)">增 值 服 务</el-button>
                            </template>
                        </tablecmt>

                    </el-tab-pane>
                    <el-tab-pane label="包件信息">
                        <tablecmt
                                :columnList="packageColumnList"
                                :tableData="parcelList"
                                :loading="loading"
                                @inputTxt="inputsc"
                                @timeCheck="timesc"
                                @btnCheck="btnsc"
                                @selectCheck="selectsc"
                                @selection="selectionsc"
                        >
                          <el-button size="small" @click="editsolt(slotProps.scope)">--</el-button>
                          <br/>
                        </tablecmt>
                    </el-tab-pane>
                    <el-tab-pane label="库存品信息">
                      <tablecmt
                              :columnList="stockListColumnList"
                              :tableData="data"
                              :loading="loading"
                              @inputTxt="inputsc"
                              @timeCheck="timesc"
                              @btnCheck="btnsc"
                              @selectCheck="selectsc"
                              @selection="selectionsc"
                      >
                        <el-button size="small" @click="costadd(slotProps.scope)">--</el-button>、
                      </tablecmt>
                    </el-tab-pane>
                </el-tabs>
            </div>
          <el-dialog
                  v-model="isaddvalue"
                  title="包件信息"
                  width="100%"
                  :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%"
                    >
<!--                :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%;"
                                     :disabled="true"
                                     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  v-model="item.f"
                                   :disabled="true"
                                   style="width: 10%;border:none; border-bottom:2px solid #eee;"/>
                     </span>
                            <span v-if="index===1">公里:
                          <el-input  v-model="item.a"
                                    :disabled="true"
                                    style="width: 10%;border:none; border-bottom:2px solid #eee;"/>
                     </span>
                            <span v-if="index===3">距离:
                      <el-input  v-model="item.b"
                                :disabled="true"
                                style="width: 10%;border:none; border-bottom:2px solid #eee;"/>
                     </span>
                            <span v-if="index===5">人数:
                      <el-input  v-model="item.c"
                                :disabled="true"
                                style="width: 10%;border:none; border-bottom:2px solid #eee;"/>
                     </span>
                            <span v-if="index===0">楼层:
                      <el-input  v-model="item.d"
                                :disabled="true"
                                style="width: 10%;border:none; border-bottom:2px solid #eee;"/>
                     </span>
                            <span v-if="item">预计费用:
                        <el-input  v-model="item.e"
                                  :disabled="true"
                                  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="dialogVisible = false">-->
<!--          确定(增值服务)-->
<!--        </el-button>-->
      </span>
                </template>
            </el-dialog>
        </div>
        <el-form-item style="margin-left: 45%;margin-top: 5px">
            <el-button icon="el-icon-circle-close" @click="$router.go(-1)">返 回</el-button>
        </el-form-item>
    </basic-container>
</template>

<script>
  import { getList, getDetail, add, update, remove, getDetailById } from '@/api/distribution/distributionSignfor';
  import { getReservationDetail,getReservationPackage,getReservationPackageList } from '@/api/distribution/distributionReservation';
  import { getStockAddValue } from '@/api/distribution/distributionStockArticle';
  import option from '@/option/distribution/distributionReservationDetails';

  import { mapGetters } from 'vuex';
  import { getDictionaryBiz } from '@/api/system/dict';

  export default {
    data() {
      return {
        height: 300,
        // 弹框标题
        title: '',
        // 是否展示弹框
        box: false,
        dataForm: {},
        // 是否显示查询
        search: true,
        // 是否显示新增
        isadd: false,
        reservationData: {},
        // 加载中
        loading: true,
        // 查看按钮
        edt: false,
        // 查看pda
        padview: false,
        // 是否为查看模式。。
        view: false,
        // 查询信息
        query: {},
        inputTypeData: [],
        option: option,
        orderData: [],
        stockArticleData: [],
        packageData:[],
        parcelList:[],
        addvalueServeTypeData:[],
        dialogVisible:false,
        packageColumnList: [
          {
            prop: 'orderSelfNumbering',
            label: '订单自编号',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false
            // head: true,
          },
          {
            label: '仓库',
            prop: 'warehouse',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: true,
            sortable: true,
          },
          {
            label: '包条码',
            prop: 'packetBarCode',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
          },
          {
            label: '一级品',
            prop: 'firsts',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
          },
          {
            label: '二级品',
            prop: 'second',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
          },
          {
            label: '三级品',
            prop: 'thirdProduct',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
          },
          {
            label: '货位信息',
            prop: 'goodsAllocation',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
          },
          {
            label: '所在托盘',
            prop: 'pallet',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
          },
          {
            label: '物料名称',
            prop: 'materialName',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
          },
          {
            label: '数量',
            prop: 'quantity',
            type: 1,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
          },
          {
            label: '车次号',
            prop: 'trainNumber',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
          },
          {
            prop: '',
            label: '操作',
            type: 6,
            values: '',
            width: '150',
            checkarr: [],
            fixed: 'right',
            sortable: false
          }
        ],
        stockArticleColumnList: [
          {
            prop: 'orderSelfNumbering',
            label: '订单自编号',
            type: 2,
            values: '',
            width: '160',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false
          },
          {
            prop: 'waybillNumber',
            label: '运单号',
            type: 2,
            values: '',
            width: '160',
            checkarr: [],
            fixed: true,
            sortable: true
          },
          {
            label: '货物名称',
            prop: 'descriptionGoods',
            type: 2,
            values: '',
            width: '160',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          {
            label: '品牌',
            prop: 'brand',
            type: 2,
            values: '',
            width: '160',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          {
            label: '收货单位',
            prop: 'consigneeUnit',
            type: 2,
            values: '',
            width: '160',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          {
            label: '订单来源',
            prop: 'resource',
            type: 2,
            values: '',
            width: '160',
            checkarr: [],
            fixed: false,
            sortable: true
          },

          {
            label: '服务类型',
            prop: 'typeService',
            type: 2,
            values: '',
            width: '160',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          {
            label: '商场名称',
            prop: 'mallName',
            type: 2,
            values: '',
            width: '160',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          {
            label: '门店名称',
            prop: 'storeName',
            type: 2,
            values: '',
            width: '160',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          {
            label: '包件数量',
            prop: 'reservationNum',
            type: 1,
            values: '',
            width: '160',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          {
            label: '增值服务费',
            prop: 'fee',
            type: 1,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true
          },
          {
            prop: '',
            label: '操作',
            type: 6,
            values: '',
            width: '150',
            checkarr: [],
            fixed: 'right',
            sortable: false
          }
        ],
        stockListColumnList:[
          {
            prop: 'orderSelfNumbering',
            label: '订单自编号',
            type: 2,
            values: '',
            width: '160',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false
          },
          {
            prop: 'orderSelfNumbering',
            label: 'SKU码',
            type: 2,
            values: '',
            width: '160',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false
          },
          {
            prop: 'orderSelfNumbering',
            label: '物料名称',
            type: 2,
            values: '',
            width: '160',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false
          },
          {
            prop: 'orderSelfNumbering',
            label: '单位',
            type: 2,
            values: '',
            width: '160',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false
          },
          {
            prop: 'orderSelfNumbering',
            label: '备货件数',
            type: 2,
            values: '',
            width: '160',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false
          },
          {
            prop: 'orderSelfNumbering',
            label: '已备件数',
            type: 2,
            values: '',
            width: '160',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false
          },
          {
            prop: 'orderSelfNumbering',
            label: '备货时间',
            type: 2,
            values: '',
            width: '160',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false
          },
          {
            prop: 'orderSelfNumbering',
            label: '托盘码',
            type: 2,
            values: '',
            width: '160',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false
          },
          {
            prop: 'orderSelfNumbering',
            label: '库位信息',
            type: 2,
            values: '',
            width: '160',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false
          },
          {
            prop: 'orderSelfNumbering',
            label: '备货区',
            type: 2,
            values: '',
            width: '160',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false
          },
          {
            prop: '',
            label: '操作',
            type: 0,
            values: '',
            width: '160',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false
          },
        ],
        // 分页信息
        page: {
          currentPage: 1,
          pageSize: 10,
          total: 40
        },
        // 表单数据
        form: {},
        // 选择行
        selectionList: [],
        isLiabilityData: [],
        //状态列表
        stateData: [],
        // 表单配置
        wrapoption: {
          expand: false,
          index: true,
          border: true,
          selection: true,
          column: []
        },
        // 表单列表
        data: [],
        // 基本信息表单列表
        basicdata: {},
        //
        wrapdata: [],
        //预约单ID
        reservationId: '',
        deliveryTypeData: [],
        isaddvalue:false,
      };
    },
    watch: {
      // eslint-disable-next-line no-unused-vars
      '$route'(to, from) {
        // this.isadd =false;
        // this.query.masterId = null;
        // this.masterId = null;
        if (!!this.$route.query.data) {
          //   //做一些路由变化的响应
          //   //   this.isadd =true;
          //   this.query.masterId = this.$route.query.data;
          //   this.masterId = this.$route.query.data;
          //重新获取数据
          this.onLoad(this.page);
        } else {
        }
      }
    },
    mounted() {
      this.init();
      this.onLoad();
      this.queryDictionary();

    },
    created() {
      this.$watch(
        () => this.$route.params,
        () => {
          this.fetchData();
        },
        // 组件创建完后获取数据，
        // 此时 data 已经被 observed 了
        { immediate: true }
      );

    },
    computed: {
      ...mapGetters(['permission']),
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(',');
      }
    },
    methods: {
      //修改
      rowUpdate() {

      },
      handleClick(tab, event){
        console.log("$$$$$$$$$",tab,event);
      },
      fetchData() {
        this.error = this.post = null;
        this.loading = true;
        if (this.$route.query.id) {
          this.reservationId = this.$route.query.id;
        }
      },
      queryDictionary() {
        getDictionaryBiz('yes_no').then(res => {
          this.isLiabilityData = res.data.data;
        });
        getDictionaryBiz('basic_in_type').then(res => {
          this.inputTypeData = res.data.data;
        });
        getDictionaryBiz('distribution_type').then(res => {
          this.deliveryTypeData = res.data.data;
        });
        getDictionaryBiz('addvalue_serve_type').then(res => {
          this.addvalueServeTypeData = res.data.data;
        });
      },
      //返回
      handleViewpda() {

      },
      init() {
        this.height = this.setPx(document.body.clientHeight - 340);
      },
      searchHide() {
        this.search = !this.search;
      },

      searchChange() {
        this.onLoad(this.page);
      },
      searchReset() {
        this.query = {};
        this.page.currentPage = 1;
        this.onLoad(this.page);
      },
      checkAddValue(scope) {
        const { row } = scope;
        this.dialogVisible =true;
        let id = row.id
        getStockAddValue(id).then(res=>{
          let data= res.data.data.data;
            //存在多种增值服务项
          let a=[];
          data.forEach((item,index)=>{
                if (item.addvalueId === "1" ){
                  this.addvalueServeTypeData[0].f = item.number;
                  this.addvalueServeTypeData[0].e = item.fee;
                  this.addvalueServeTypeData[0].d = item.floor;
                }

                if (item.addvalueId === "2"){
                  this.addvalueServeTypeData[1].a = item.kilometer;
                  this.addvalueServeTypeData[1].e = item.fee;
                }
              if (item.addvalueId === "3"){
                this.addvalueServeTypeData[2].f = item.number;
                this.addvalueServeTypeData[2].e = item.fee;
              }
              if (item.addvalueId === "4"){
                this.addvalueServeTypeData[3].b = item.distance;
                this.addvalueServeTypeData[3].e = item.fee;
              }
              if (item.addvalueId === "5"){
                this.addvalueServeTypeData[4].f = item.number;
                this.addvalueServeTypeData[4].e = item.fee;
              }
              if (item.addvalueId === "6"){
                this.addvalueServeTypeData[5].c = item.peopleNum;
                this.addvalueServeTypeData[5].e = item.fee;
              }
              if (item.addvalueId === "7"){
                this.addvalueServeTypeData[6].f = item.number;
                this.addvalueServeTypeData[6].e = item.fee;
              }
              a.push(item.addvalueId);
              console.log("<<<<<<<<<<",a);

            })
            this.form.addvalueType=a;

          console.log(">>>>>>>>>>>>>>>>>>>>>>>>>",res);
        })
      },
      selectionsc(value) {
        console.log('进来了>>>>>>>>>>>>>', value);
      },
      delectsolt(scope) {
        const { row } = scope;
        console.log(row);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
      checkPackage(scope) {
        const { row } = scope;
        console.log(row);
        getReservationPackage(this.reservationId,row.id).then(res=>{
          this.packageData = res.data.data;
          console.log("@@@@@@@",res);
        });
        this.isaddvalue = true;
        //
      },
      btnsc(index, row) {
        console.log(index, row);
      },
      selectsc(index, row) {
        this.query[row.prop] = index;
        if (!index) {
          delete this.query[row.prop];
        }
        this.onLoad(this.page);
      },
      timesc(index, row) {
        console.log(index, row);
      },
      inputsc(index, row) {
        this.query[row.prop] = index;
        if (!index) {
          delete this.query[row.prop];
        }
        this.onLoad(this.page);
      },
      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;
          }
        });

      },
      handleSubmit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.form.stringValue = jsonString;
            if (!this.form.id) {
              this.form.masterId = this.propertyformdata.id;
              add(this.form).then(() => {
                this.box = false;
                this.onLoad(this.page);
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                let str = {
                  val: false
                };
                this.$emit('returnproperty', str);
              });
            } else {
              update(this.form).then(() => {
                this.box = false;
                this.onLoad(this.page);
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                let str = {
                  val: false
                };
                this.$emit('returnproperty', str);
              });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleAdd() {
        this.title = '新增';
        this.form = {};
        this.box = true;
      },
      handleEdit(row) {
        this.title = '编辑';
        this.box = true;
        getDetail(row.id).then(res => {
          this.form = res.data.data;
        });
      },
      handleView(row) {
        console.log('查看>>>>>>>>>>', row);
        this.title = '查看';
        this.view = true;
        this.box = true;
        getWrapdetail(row.id).then(res => {
          console.log('查看>>>>>>>', res.data.data);
        });
      },
      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) {
        //查询详情
        let id = this.reservationId;
        getReservationDetail(id).then( async res => {
          let data = res.data.data.data;
          if (data.stockArticleList) {
            let stockArticleList = data.stockArticleList;
          await  stockArticleList.forEach(s=>{
              this.deliveryTypeData.forEach(item=>{
                if (s.typeService.toString()===item.dictKey){
                  s.typeService = item.dictValue
                }
              })
            })
            this.stockArticleData = data.stockArticleList;
          }
         await this.deliveryTypeData.forEach(item => {
            if (data.deliveryType === item.dictKey) {
              data.typeService = item.dictValue;
            }
          });
          this.reservationData = data;
        });
        getReservationPackageList(id).then(res=>{
          this.parcelList = res.data.data;
        })
        this.loading = false;
      }
    }
  };
</script>

<style lang="scss">
    .btsbx {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;

        > button {
            width: 120px;
            height: 40px;
        }
    }

    .maxitembxlist {
        display: flex;
        flex-direction: column;
        // padding: 10px;
        box-sizing: border-box;
        margin-top: 20px;

        > .items {
            display: flex;
            flex-direction: column;
            width: 100%;
            background-color: #fcfcfc;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #e2e0e0;
            border-radius: 2px;
            margin-bottom: 20px;

            &:nth-last-child(1) {
                margin-bottom: 0;
            }

            > .contbx {
                display: flex;
                flex-direction: column;
                width: 100%;
                margin-top: 10px;

                > .tabitem {
                    display: flex;
                    align-items: center;

                    > div {
                        flex: 1;
                        height: 45px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: #f3f3f3;
                        border: 1px solid #e2e0e0;
                        margin-bottom: -2px;
                        margin-right: -2px;
                    }
                }

                > .contentitem {
                    display: flex;
                    align-items: center;

                    > div {
                        flex: 1;
                        height: 45px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: #ffffff;
                        border: 1px solid #e2e0e0;
                        margin-bottom: -2px;
                        margin-right: -2px;
                    }
                }
            }

            > .titltophead {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .icons {
                    font-size: 27px;

                    &:nth-of-type(1) {
                        margin-right: 8px;
                    }
                }
            }

            > .editinput {
                display: flex;
                flex-direction: column;
                padding: 20px 0;

                > .inputitem {
                    display: flex;
                    align-items: flex-start;
                    justify-content: space-between;
                    margin-bottom: 10px;

                    &:nth-last-child(1) {
                        margin-bottom: 0;
                    }

                    .inpts {
                        display: flex;
                        align-items: flex-start;

                        flex: 1;
                        padding-right: 10px;

                        > span {
                            width: 90px;
                        }

                        > div:nth-of-type(1) {
                            flex: 1;
                        }
                    }
                }
            }
        }
    }

    .topbox {
        display: flex;
        flex-direction: column;

        > .titlxbx {
            font-size: 16px;
            display: flex;
            align-items: center;

            > div {
                flex: 1;
                display: flex;
                align-items: center;

                > div {
                    flex: 1;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 1px solid #e2e0e0;
                    margin-bottom: -1px;
                    margin-right: -1px;
                    word-break: break-all;

                    &:nth-of-type(1) {
                        background-color: #f3f3f3;
                    }
                }

            }
        }
    }
</style>
