<template>
  <div class="mod-config">
    <!-- <el-tabs v-model="tabChange.orderName">
      <el-tab-pane label="全部" name="all"> </el-tab-pane>
      <el-tab-pane label="健康超市" name="0"></el-tab-pane>
      <el-tab-pane label="电子书" name="1"> </el-tab-pane>
      <el-tab-pane label="充值订单" name="2"></el-tab-pane>
    </el-tabs> -->
    <el-radio-group size="mini" v-model="tabChange.tabActiveName" style="margin-bottom: 10px;">
      <el-radio-button label="">全部</el-radio-button>
      <el-radio-button label="0">待付款</el-radio-button>
      <el-radio-button label="1">待发货</el-radio-button>
      <el-radio-button label="2">已发货</el-radio-button>
      <el-radio-button label="3">已完成</el-radio-button>
    </el-radio-group>
    <div style="margin-bottom: 10px;">
      <el-radio-group size="mini" v-model="tabChange.isPrint" v-if="tabChange.tabActiveName == 2">
        <el-radio-button label="0">已发货订单</el-radio-button>
        <el-radio-button label="1">打印面单</el-radio-button>
      </el-radio-group>
      <!-- <el-radio v-model="tabChange.isPrint" label="" border size="mini">全部</el-radio> -->      
      <!-- <el-radio v-model="tabChange.isPrint" label="1" border size="mini">已打印</el-radio>
      <el-radio v-model="tabChange.isPrint" label="2" border size="mini">未打印</el-radio>       -->
      <!-- <el-button style="margin-left: 10px;" size="mini" v-if="isAuth('book:buyorder:delete')" type="primary" @click="printHandle(dataListSelections)"
                :disabled="dataListSelections.length <= 0" >批量打印</el-button> -->
    </div>
    <div style="margin-bottom: 10px; float:left;  margin-right: 15px" v-if="tabChange.isPrint == '1'">
      <el-radio v-model="tabChange.sheetCode" :label="0" border size="mini">全部</el-radio>
      <el-radio v-model="tabChange.sheetCode" :label="2" border size="mini">未打印</el-radio>
      <el-radio v-model="tabChange.sheetCode" :label="1" border size="mini">已打印</el-radio>
    </div>
    <div style="margin-bottom: 10px; float:left;">
      <el-form v-if="tabChange.isPrint == '1'" :inline="true" size="mini" :model="MdDataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
        <div class="block">
          <!-- <el-date-picker size="mini" value-format="timestamp" v-model="" type="datetimerange" :picker-options="timePickerOptions"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="test">
          </el-date-picker> -->
          <el-date-picker
          v-model="MdDataForm.date"
          type="date"   
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"      
          placeholder="选择日期">
        </el-date-picker>
        </div>
      </el-form-item>
      <!-- <el-form-item>
        <el-input style="width:200px" v-model="MdDataForm.key" placeholder="订单编号/运单编号" clearable></el-input>
      </el-form-item>       -->
      <el-form-item>
        <el-button @click="getPrintSheetList()">查询</el-button>
      </el-form-item>
    </el-form>
    </div>
    
    <el-form v-if="tabChange.isPrint != '1'" :inline="true" size="mini" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input style="width:200px" v-model="dataForm.key" placeholder="订单编号/收件人姓名/手机号" clearable></el-input>
      </el-form-item>
      <!-- 按时间筛选 -->
      <el-form-item>
        <div class="block">
          <el-date-picker size="mini" value-format="timestamp" v-model="dataForm.time" type="datetimerange" :picker-options="timePickerOptions"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="test">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="buttonGroup">
      <!-- <el-checkbox :disabled="multipleDisabled" :indeterminate="checkboxGroup.isIndeterminate"
        v-model="checkboxGroup.checkAll" v-if="tabChange.tabActiveName == 1" class="checkAll showLabel"
        @change="handleCheckAllChange">全选</el-checkbox> -->
      <!-- <span v-if="tabChange.tabActiveName == 3">
        <el-button size="mini" v-if="isAuth('book:buyorder:delete')" type="danger" @click="deleteHandle()"
          :disabled="dataListSelections.length <= 0">批量删除</el-button>
      </span> -->
      <span style="" v-if="tabChange.tabActiveName == 1">
        <el-badge :value="mergeList.length" class="item">
        <router-link :to="{ path: 'buyorder-mergeorder', query: {} }">
          <el-button style="" size="mini" v-if="isAuth('book:buyorder')" type="primary" :disabled="mergeList.length > 0 ? false : true">合并发货</el-button>
        </router-link>
      </el-badge>
      </span>
      <!-- <span style="" v-if="tabChange.tabActiveName == 1">
        <el-button style="margin-left: 10px;" size="mini" v-if="isAuth('book:buyorder')" type="primary"
          :disabled="checkedOrders.length <= 0" @click="checkDeliver">批量发货</el-button>
      </span> -->
      <span style="" v-if="tabChange.tabActiveName == 2 && tabChange.isPrint == 1">
        <el-button style="margin-left: 10px;" size="mini" v-if="isAuth('book:buyorder')" type="warning"
          :disabled="SheetSelectionList.length <= 0" @click="printHandle(null,null,'piliang')">批量打印</el-button>
      </span>
    </div>
    <!-- 更新样式 -->
    <!--面单列表  -->
    <div class="order_list_ui paper_list_ui" v-if="tabChange.tabActiveName == 2 && tabChange.isPrint == 1">
      <el-table border v-loading="dataListLoading" :data="PrintSheetList" stripe @selection-change="SheetSelectionChangeHandle"
        style="width: 100%">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="运单号" prop="expressOrderSn"></el-table-column>
        <el-table-column prop="expressCompanyCode" label="快递公司">
        </el-table-column>
        <el-table-column prop="isPrint" label="是否打印">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.templatePrinted == 1" type="success">是</el-tag>
            <el-tag v-else type="success">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="280" label="操作">
          <template slot-scope="scope">
            <!-- <el-button type="text"  size="mini" >查看面单</el-button>   -->
            <el-button size="mini" type="warning" plain @click="showAnyDialog(scope.row)">查看面单</el-button>
            <!-- <router-link :to="{ path: 'buyorder-print', query: { orderId: scope.row.orderId } }">
              <el-button size="mini" type="primary" plain>打印面单</el-button>     跳转到详情页面
            </router-link> -->
            <el-button size="mini" type="primary" plain @click="printHandle(scope.row.expressOrderSn,scope.row)">打印面单</el-button>
            <!-- <el-button size="mini" type="danger" plain @click="deleteVoid">面单作废</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
      :page-sizes="[40, 60, 100, 150]" :page-size="pageSize" :total="MDtotal"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    </div>
    <div class="box" style="display: none;">
      <div>
        <ul id="">
          <li v-for="(item, index) of selectedPrintList" :key="index" v-html="item" :id="'printDiv' + index"
            style="page-break-after:always; position: relative; min-height:600px">

          </li>
        </ul>
      </div>
    </div>
    <!-- 订单列表 -->
    <div class="order_list_ui" v-if="tabChange.tabActiveName == 1" v-loading="dataListLoading">
      <ul>
        <el-checkbox-group v-model="checkedOrders" @change="handleCheckedChange">
          <li v-for="(fitem, index) in dataList" :key="fitem.index">
            <div class="item_head">
              <el-row>
                <el-col :span="18">
                  <el-checkbox size:="mini" :disabled="fitem.isSend == 1" :label="fitem.orderId"></el-checkbox>
                  <span><span class="infoTitle">订单编号：</span>{{ fitem.orderSn }} </span>
                  <span style="margin-left: 20px;">
                    <span class="infoTitle">下单时间：</span>{{ fitem.createTime }}</span>
                    <router-link :to="{ path: 'order-buyorderdetail', query: { orderSn: fitem.orderSn , ordertype: fitem.orderStatus} }" style="margin-left:20px">
                      <el-button type="warning" style="" size="mini" plain>订单详情</el-button>                      
                    </router-link>
                  </el-col>
                <el-col :span="6">
                  <div class="tip">
                    <div v-if="fitem.isSend == 1" class="hasSplit"><span style="color:#999">该订单已被拆分发货</span>
                      <!-- <el-button type="text" @click="showOrderSheet(fitem.orderId)" size="mini">查看面单</el-button>                         -->
                    </div>
                    <!-- <icon-svg name="zhuyi"></icon-svg> 订单存在可合并发货项 -->                    
                    <!-- <router-link :to="{ path: 'order-buyorderdetail', query: { orderId: fitem.orderId , ordertype: fitem.orderStatus} }">
                      <el-button type="primary" style="color: #515a6e;" size="mini">订单详情</el-button>                      
                    </router-link> -->
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="item_body">
              <div class="flexbox" style="justify-content: space-between;">
                <div class="td1 flexbox" style="width:600px; align-items: flex-start; flex-wrap: wrap;">                                  
                  <div v-show="fitem.orderType == 'order'" class="flexbox orderProducts" :class="{ nobottomBorder: fitem.goodsList.length <= 3 }"
                    v-for="(children, index2) in fitem.goodsList" :key="children.id" style="width: 50%;" >                    
                    <el-tooltip class="item" v-if="children.expressInfo && children.expressInfo.expressOrderSn != null" effect="light" :content="`快递信息：${children.expressInfo.expressCompany} ${children.expressInfo.expressOrderSn}`"
                      placement="right">
                      <span class="normal hasDeliver"></span>
                    </el-tooltip>                       
                    <div class=" productItem k4545">
                      <img  :class="children.expressInfo && children.expressInfo.expressOrderSn != null ? 'greeyImg' : 'lightImg'" :src="children.productImage" width="60px" height="60px"> 
                     </div>
                    <div class="price " style="flex:1">
                      <div class="bookName">{{ children.productName }} &nbsp;
                        <i v-if="children.books && children.books.length > 0" @click.stop="seeBooks(children.books)" class="el-icon-view" style="color:#409eff; cursor: pointer;"></i></div>
                      <div><span>￥{{ children.productPrice }}</span> × {{ children.quantity }} </div>
                     
                    </div>
                  </div>
                  <div v-show="fitem.orderType == 'point'" class="flexbox orderProducts"   >                   
                                         
                    <div class=" productItem">
                      <img  src="../../../../static/img/oder_chong.png"  width="60px" height="60px"> 
                    </div>
                    <div class="price ">
                      <div class="bookName">天医币充值</div>
                      <div><span>￥{{ fitem.realMoney }}</span> × 1</div>                    
                    </div>
                  </div>
                  <div v-show="fitem.orderType == 'vip'" class="flexbox orderProducts"  >                   
                                         
                    <div class=" productItem">
                      <img  src="../../../../static/img/oder_vip.png"  width="60px" height="60px"> 
                    </div>
                    <div class="price ">
                      <div class="bookName">VIP充值</div>
                      <div><span>￥{{ fitem.realMoney }}</span> × 1 </div>                     
                    </div>
                  </div>
                  <!-- <img v-if="fitem.orderType == 'vip'" src="../../../../static/img/oder_vip.png"  width="60px" height="60px">  -->
                </div>
                <div class="total td2 xcenter">
                  <div class="tabName">合计：<em>￥{{ fitem.orderPrice }}</em></div>
                  <div class="tabContent">
                    <div></div>
                    <!-- <div>含快递费：10.00，优惠券：{{ fitem.couponName }}，积分抵扣：-10.00</div> -->
                    <div></div>
                    <div v-if="fitem.paymentMethod == 1"><icon-svg name="weixin"></icon-svg> 微信支付</div>
                    <div v-if="fitem.paymentMethod == 2"><icon-svg name="zhifubao"></icon-svg> 支付宝支付</div>
                    <div v-if="fitem.paymentMethod == 4"><img  src="../../../../static/img/oder_chong.png"  width="22px" height="22px">天医币支付</div>
                  </div>
                </div>
                <div class="buier td3 xcenter">
                  <div class="tabName">收货信息：
                    <div style="color: #515a6e;"><span style="color: #515a6e;">{{ fitem.consignee.consigneeName }}</span>&nbsp;&nbsp;&nbsp;<span style="color: #515a6e;">{{ fitem.consignee.consigneeMobile }}</span></div>
                    <div style="color: #515a6e;">{{ fitem.consignee.province }}-{{ fitem.consignee.city }}-{{ fitem.consignee.county }}-{{ fitem.consignee.address }}</div>
                    <div style="margin-bottom:10px">
                      <el-button @click="changeAddressShow(fitem)" type="primary" size="mini" plain>修改收货信息</el-button>
                      <!-- <a href="#"  v-if="fitem.orderStatus <= 1"><i class="el-icon-edit"></i>修改收货信息</a> -->
                      </div>
                  </div>
                  <div class="tabContent">

                    <!-- <div>用户id：{{ fitem.userId }}</div> -->
                    <!-- <div>收货地址：{{ fitem.address }}</div> -->
                    <!-- <div class="buier_tip">买家备注：尽快发货</div> -->
                  </div>
                </div>
                <div class="buier td4 xcenter flexbox" style="align-items: center; justify-content: center;">
                  <div>
                    <div class="orderStatus">待发货</div>
                    <!-- <div class="tabContent">
                          <div class="time">支付时间：2023-02-09 14:16:08</div>                      
                        </div> -->
                    <div><el-button style=" line-height: 6px;" type="primary" size="mini" @click="orderDeliver(fitem)"
                        >发货</el-button>
                    </div>
                  </div>
                </div>
                <div class="td5 flexbox" style="justify-content: center; align-items: center; width: 150px;">
                  <div style="margin-bottom: 15px; text-align: center;">
                    <div class="tabContent">
                      <span class="tabName">备注</span>
                      <!-- <div >备注信息</div> -->
                      <el-button v-if="fitem.remark" size="mini" type="text"
                        @click="openShutManager(this, 'box' + index)">查看</el-button>
                      <span @click="editBeizhu(fitem)">
                        <icon-svg name="beizhu"
                          style="width: 14px; height:14px; margin-left: 10px; cursor: pointer;"></icon-svg>
                      </span>
                    </div>
                    <div class="beizhu tabContent" :id="'box' + index" style="display:none">{{ fitem.remark }}</div>
                  </div>
                </div>
              </div>

            </div>
          </li>
        </el-checkbox-group>
      </ul>

    </div>

    <!-- 某些行不可点击，需要匹配table的selectable 属性值满足就不可选-->
    <el-table v-if="tabChange.tabActiveName != 1 && tabChange.isPrint != 1" :data="dataList" border
      v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
      <el-table-column type="selection" header-align="center" align="center" width="50">
      </el-table-column>
      <!-- <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column> -->
      <el-table-column prop="orderSn" header-align="center" align="center" label="订单编号" width="150">
      </el-table-column>
      <!-- <el-table-column prop="userName" header-align="center" align="center" label="下单人姓名">
      </el-table-column> -->
       <el-table-column
            prop="shippingUser"
            header-align="center"
            align="center"
            label="收货人信息">
            <template slot-scope="scope">
              <span v-if="scope.row.consignee.consigneeName && scope.row.consignee.consigneeName != ''">{{scope.row.consignee.consigneeName}}</span>
              <span v-else>暂无</span>
              -<span>{{scope.row.consignee.consigneeMobile}}</span><br/>
              <span>{{scope.row.consignee.province}}</span>
              <span v-if="scope.row.consignee.city && scope.row.consignee.city != ''">-</span><span>{{scope.row.consignee.city}}</span>
              <span v-if="scope.row.consignee.county && scope.row.consignee.county != ''">-</span><span>{{scope.row.consignee.county}}</span>
              <span v-if="scope.row.consignee.address && scope.row.consignee.address != ''">-</span><span>{{scope.row.consignee.address}}</span>
            </template> 
          </el-table-column>
          <!--<el-table-column
            prop="province"
            header-align="center"
            align="center"
            label="省">
          </el-table-column>
          <el-table-column
            prop="city"
            header-align="center"
            align="center"
            label="市">
          </el-table-column>
          <el-table-column
            prop="district"
            header-align="center"
            align="center"
            label="区">
          </el-table-column>
          <el-table-column
            prop="address"
            header-align="center"
            align="center"
            label="地址">
          </el-table-column> -->
      <el-table-column prop="paymentMethod" header-align="center" align="center" label="支付方式" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.paymentMethod == 1" type="success">微信</el-tag>
          <el-tag v-if="scope.row.paymentMethod == 2" type="primary">支付宝</el-tag>          
          <el-tag v-if="scope.row.paymentMethod == 3" type="warning">ios内购</el-tag>
          <el-tag v-if="scope.row.paymentMethod == 4" type="warnning">天医币支付</el-tag>
        </template>
      </el-table-column>
      <!-- 1 支付宝 2 微信 3 ios内购-->
      <!-- <el-table-column prop="orderMoney" header-align="center" align="center" label="订单金额" width="80">
        <template slot-scope="scope">
          <span>￥{{scope.row.orderMoney}}</span> 
        </template>
      </el-table-column> -->
      <!-- <el-table-column prop="districtMoney" header-align="center" align="center" label="优惠金额">
          </el-table-column> -->
      <el-table-column prop="realMoney" header-align="center" align="center" label="实收金额">
        <template slot-scope="scope">
          <div class="detailsFonts">
          <span>实收：<b style="font-size: 16px; color: #fda328;">￥{{scope.row.orderPrice}}</b></span>
          <span v-if="scope.row.couponId">优惠券：-</span>
          <span v-if="scope.row.shippingMoney">运费：+{{scope.row.shippingMoney}}</span>
          <!-- <span >积分抵扣：-</span> -->
        </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="shippingMoney" header-align="center" align="center" label="运费">
          </el-table-column> -->
      <!-- <el-table-column prop="shippingCompName" header-align="center" align="center" label="物流公司名称">
          </el-table-column> -->
      <!-- <el-table-column prop="shippingSn" header-align="center" align="center" label="物流单号">
      </el-table-column> -->
      <el-table-column prop="createTime" header-align="center" align="center" label="下单时间">
      </el-table-column>
      <el-table-column prop="goodsList" header-align="center" align="center" label="下单商品" width="500">
        <template slot-scope="scope">
          <!-- {{scope.row.goodsList}} -->
          <div v-for="(item, index) in scope.row.goodsList" :key="index">
            <div class="flexbox" style="align-items:center; margin-bottom:10px">
              <div class="img">
                 <img style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;" :src="item.productImage" width="40px" height="40px">
              </div>
              <div>
                <span>{{item.productName}} [ ×{{item.quantity}} ]  
                  <i v-if="item.books && item.books.length > 0" @click.stop="seeBooks(item.books)" class="el-icon-view" style="color:#409eff; cursor: pointer;"></i></span>             
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="shippingTime" header-align="center" align="center" label="发货时间">
      </el-table-column> -->
      <el-table-column prop="orderStatus" header-align="center" align="center" label="订单状态" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.orderStatus == 0" type="success">待付款</el-tag>
          <el-tag v-if="scope.row.orderStatus == 1" type="success">待发货</el-tag>
          <el-tag v-if="scope.row.orderStatus == 2" type="danger">已发货</el-tag>
          <el-tag v-if="scope.row.orderStatus == 3" type="warning">已完成</el-tag>
          <el-tag v-if="scope.row.orderStatus == 4" type="info">交易失败</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="successTime" header-align="center" align="center" label="交易成功时间">
          </el-table-column> -->
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <router-link :to="{ path: 'order-buyorderdetail', query: { orderSn: scope.row.orderSn, ordertype: scope.row.orderStatus} }">
            <el-button type="text" size="small">订单详情</el-button>
          </router-link>
          <!-- <span v-if="scope.row.orderStatus">
            <el-button type="text" size="small" @click="deliverDetail(scope.row)"
              v-if="isAuth('book:buyorderdetail:deliver')">物流详情</el-button>
          </span> -->
          <!-- 新增修改订单按钮显示与隐藏判断 v-if="scope.row.orderStatus != 3" -->
          
          
          <!-- <router-link :to="{ path: 'buyorder-print', query: { orderId: scope.row.orderId } }">
                  <el-button type="text" size="small">打印面单</el-button>
                </router-link> -->
          <!-- <el-button type="text" size="small" @click="showOrderSheet(scope.row)">查看面单</el-button> -->
          <el-dropdown size="mini" v-if="tabChange.tabActiveName === '2'">
            <span class="el-dropdown-link" style="font-size: 12px; color: #17B3A3;">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.orderId)">修改</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button type="text" size="small" @click="deleteHandle(scope.row.orderId)">删除</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>

          </span>

        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="修改收货信息"
      :visible.sync="changeAddVisible"
      width="500"
      v-loading="addressLoad"
      :close="changeAddHandleClose">
      <div>
        <el-form ref="addressFormRef" :model="addressForm" label-width="120px" :rules="addressFormRule">
        <el-form-item label="收货人:" prop="name">
          <el-input v-model="addressForm.name"></el-input>
        </el-form-item>
        <el-form-item label="收货联系电话:" prop="tel">
          <el-input v-model="addressForm.tel"></el-input>
        </el-form-item>
        <el-form-item label="收货地址:" prop="haveValue">
          <!-- <el-input v-model="addressForm.address"></el-input> -->   
            <!-- 省市区-->
            <!-- 省 -->
            <el-select  v-model="addressForm.provinceCode" placeholder="请选择省份" style="width:200px" @change="provinceChange">
              <el-option
                v-for="item in provinceEntity"
                :key="item.regionCode"
                :label="item.provName"
                :value="item.regionCode">
              </el-option>
            </el-select>
            <el-select v-model="addressForm.cityCode" placeholder="请选择市" @change="cityChange">         
              <el-option
                v-for="item in cityEntity.cityList"
                :key="item.regionCode"
                :label="item.cityName"
                :value="item.regionCode">
              </el-option>
            </el-select>
            <el-select v-model="addressForm.countyCode" placeholder="请选择区" @change="countyChange">
              <el-option
                v-for="item in countyEntity.countyList"
                :key="item.regionCode"
                :label="item.countyName"
                :value="item.regionCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详细地址:" prop="addressXX">
            <el-input type="textarea" v-model="addressForm.addressXX"></el-input>        
          </el-form-item>
        </el-form>        
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeAddHandleClose">取 消</el-button>
        <el-button type="primary" @click="changeAddress">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog center
      title="商品包含的书籍信息"
      :visible.sync="booksShow"
      width="500"      
      :close="booksHandleClose">
      <div>  
        <span>该商品共包含了 {{currBookLIst.length}} 个书籍</span>      
        <ul class="booksUl ">
          <li class="flexbox" v-for="item in currBookLIst" :key="item.id">
            <div class="img">
              <img style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;" :src="item.images" width="100px" height="100px">
            </div>
            <div>
              <span>{{item.name}}[{{item.id}}]</span>             
            </div>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">        
        <el-button type="primary" @click="booksHandleClose">确 定</el-button>
      </span>
    </el-dialog>
    <el-pagination v-if="tabChange.isPrint != 1" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
      :page-sizes="[40, 60, 100, 150]" :page-size="pageSize" :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <AddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></AddOrUpdate>
    <!-- 物流详情弹窗 -->
    <deliverDetail ref="deliverDetail" :visible="deliverDetailVisible" :deliverOrder="oprateOrder"
      @closeDeliverDetailDialog="closeDeliverDetailDialog"></deliverDetail>
    <!-- 代发货转为发货 -->
    <setDeliverDialog ref="setDeliverDialog" :visible="setDeliverVisible" :selectData="checkedOrders"
      @closeDeliverDialog='closeDeliverDialog'></setDeliverDialog>
    <!-- 设置备注 -->
    <updateOrderBeiZhu ref="updateOrderBeiZhu" :orderId="oprateOrder.orderId" :orderSn="oprateOrder.orderSn" :visible="editBeizhudialogVisible"
      :editBeizhuform="editBeizhuform" @closeDialog='closeBeizhuDialog' @refreshDataList="getDataList">
    </updateOrderBeiZhu>
    <!-- 单个订单发货 -->
    <splitDeliver  :orderitem="oprateOrder" :visible="splitDeliverVisible" @closeDialog='closeOrder1Dialog'>
    </splitDeliver>
    <!--点合并发货时弹出 可合并订单弹窗 -->
    <mergeDliver v-if="mergeList" :visible="mergeDliverVisible" :mergeList="mergeList"
      @closeDialog='closemergeDliverDialog'>
    </mergeDliver>
    <!-- 查看面单 传订单id-->
    <seeSheet ref="seeSheet" :visible="sheetVisible" @closeDialog='closeSheetDliverDialog' :orderinfo="orderInfo">
    </seeSheet>
    <!-- 引入万能弹窗 直接显示的内容-->
    <anyDialog :visible="anyDialogVisible" @closeDialog='closeanyDialogDialog' :content="anyDialogContent"
      :title="anyDialogTitle">
    </anyDialog>

  </div>
</template>

<script>


import updateOrderBeiZhu from './orderbeizhu-add-or-update'
import anyDialog from './anyDialog'
import splitDeliver from './orderdeliver-split'
import mergeDliver from './orderdeliver-merge'
import AddOrUpdate from './buyorder-add-or-update'
import deliverDetail from './deliver-detail'
import setDeliverDialog from './set-deliver-dialog'
import seeSheet from './orderSheet-see'
export default {
  data() {
    return {
      //万能弹窗
      anyDialogTitle: '',
      anyDialogVisible: false,
      anyDialogContent: '',
      // 操作的订单id
      oprateOrder: {},
      orderInfo: {},
      dataForm: {
        key: '',
        time: ''
      },
      PrintSheetList: [],//打印列表
      selectedPrintList: [],   // 选中的面单列表
      mergeList: [], // 检查订单可合并项数组
      checkboxGroup: {
        isIndeterminate: true,
        checkAll: false
      },
      multipleDisabled: false,     // 待发货多选是否可用
      //childrenChecked:[],
      checkedOrders: [],  // 新的筛选
      fullscreenLoading: false,
      deliverDetailVisible: false,
      splitDeliverVisible: false,
      mergeDliverVisible: false,
      sheetVisible: false,
      dataList: [],
      tabChange: {
        tabActiveName: '1',  // tab筛选默认all全部 0：待付款  1：待发货 2：已发货 3：已完成
        isPrint: 0,   // 已发货列表筛选 0：显示订单 1：显示可打印列表,
        orderName: '0',   //订单名称筛选 all:全部  0:健康超市 1:电子书   2:充值订单
        sheetCode: 0,  // 面单状态2 未打印，1 已打印 0全部
      },
      editBeizhudialogVisible: false,  // 修改备注按钮
      editBeizhuform: {
        text: '',
        orderId: ''
      },
      pageIndex: 1,
      pageSize: 40,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      MDtotal:0,
      // 时间段设置项
      timePickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      setDeliverVisible: false,
      addressForm:{
        provinceCode:null,  //省份串码
        provinceName:null,
        cityCode:null,  //市区串码
        cityName:null,
        countyCode:null, //省份串码
        countyName:null,
        name:'',
        tel:'',
        addressXX:'',
        haveValue:false,
        orderSn:null,
      },
      MdDataForm:{
        date:''  // 时间
      },
      provinceEntity:[], // 城市列表
      cityEntity:[], // 市
      countyEntity:[], // 区
      changeAddVisible: false,
      addressFormRule:{
        name: [
            { required: true, message: '请输入收货人信息', trigger: 'blur' }           
          ],
          tel: [
            { required: true, message: '请输入收货联系电话信息', trigger: 'blur' }           
          ],
          county: [
            { required: true, message: '请选择收货地址', trigger: 'blur' }           
          ],
          addressXX: [
            { required: true, message: '请输入详细地址信息', trigger: 'blur' }           
          ],   
          haveValue:[
            { required: true, message: '请选择要修改的省市区', trigger: 'blur' } 
          ]      
      },
      SheetSelectionList:[],
      addressLoad:false,    // 省份加载动画
      booksShow: false, // 展示包含书籍信息
      currBookLIst:[]
    }
  },
  components: {
    AddOrUpdate
  },
  activated() {
    this.getDataList()
  },
  created() {
    if (this.selectOptions && this.selectOptions.length > 0) {
      this.isMultipleDisabled()
    }
  },
  methods: {
    seeBooks(arr){
      this.currBookLIst = arr
      this.booksShow = true
    },
    booksHandleClose(){
      this.currBookLIst = []
      this.booksShow = false
    },
    changeAddress(){
      console.log(this.addressForm.orderSn,'this.addressForm')     
      if(this.addressForm.provinceCode && this.addressForm.cityCode && this.addressForm.countyCode){
        this.addressForm.haveValue = true
      }
      this.$refs['addressFormRef'].validate((valid) => {
          if (valid) {
            console.log('修改收货地址')
            this.$http({
              url: this.$http.adornUrl('/book/buyOrder/modifyConsigneeAddress'),
              method: 'post',
              data: this.$http.adornData({ 
                'orderSn': this.addressForm.orderSn,
               // 'province': this.addressForm.provinceName,
               // 'city':  this.addressForm.cityName,
              //  'county':  this.addressForm.countyName,
                'address':  this.addressForm.addressXX,
                'consigneeName':  this.addressForm.name,
                'consigneeMobile':  this.addressForm.tel,
                "provinceCode": this.addressForm.provinceCode,
                "cityCode": this.addressForm.cityCode,
                "countyCode": this.addressForm.countyCode,
                //'orderId': this.addressForm.orderId  
              })
              }).then(({ data }) => {
                console.log('修改地址返回值', data)
                this.$message.success('修改地址成功！')
                this.changeAddHandleClose()
                this.getDataList()
                
              }).catch( e => {
                console.log(e,'e')
              })
          } else {           
            return false;
          }
        });      
    },
    countyChange(e){   
      console.log(e,'countyName')   
      this.countyEntity.countyList.find((val,index,arr)=>{ 
        this.addressForm.countyName = val.countyName        
          return val.regionCode == e
        })
        console.log('this.addressForm.countyName', this.addressForm)
    }, 
    cityChange(e){
      this.addressForm.countyCode = null  
      this.countyEntity = this.cityEntity.cityList.find((val,index,arr)=>{    
        this.addressForm.cityName = val.cityName     
          return val.regionCode == e
        })
      console.log(' this.addressForm.cityName',  this.addressForm.cityName)
    },
    provinceChange(e){
      this.addressForm.cityCode = null;
      this.addressForm.countyCode = null   
      this.cityEntity = this.provinceEntity.find((val,index,arr)=>{
          this.addressForm.provinceName = val.provName
          return val.regionCode == e
        })
        console.log('this.addressForm.provinceName',this.addressForm.provinceName)   
    },
    changeAddHandleClose(){
      this.changeAddVisible = false
      this.addressForm.provinceCode = null
      this.addressForm.cityCode = null;
      this.addressForm.countyCode = null
      this.addressForm.provinceName = null
      this.addressForm.cityName = null;
      this.addressForm.countyName = null
      this.addressForm.orderSn = null
      this.provinceEntity = []
      this.cityEntity = []
      this.countyEntity = []
      this.$refs['addressFormRef'].clearValidate()
      this.$nextTick(() => {
        this.addressForm.name = ''
        this.addressForm.tel = ''
        this.addressForm.addressXX = ''
      // this.$refs['addressFormRef'].resetFields();
      })
      // $refs[formName].resetFields()
      console.log('关闭了', this.addressForm)
    },
    changeAddressShow(val){  
      console.log(val,'val')   
      this.addressLoad = true 
      this.$http({
        url: this.$http.adornUrl('/api/province/getProvince'),
        method: 'post',
        // params: this.$http.adornParams({ 
        //   'orderId': this.query.orderId         
        // })
      }).then(({ data }) => {
        console.log('获取地址三级列表', data)
        if(data.code == 0){
          this.addressForm.orderSn = val.orderSn
          this.provinceEntity = data.provinceEntity
          this.addressForm.addressXX = val.consignee.address
          this.addressForm.provinceCode = val.consignee.provinceCode
          this.addressForm.cityCode = val.consignee.cityCode
          this.addressForm.countyCode = val.consignee.countyCode
          this.addressForm.provinceName = val.consignee.provinceCode
          this.addressForm.cityName = val.consignee.city
          this.addressForm.countyName = val.consignee.county
          this.addressForm.name = val.consignee.consigneeName
          this.addressForm.tel = val.consignee.consigneeMobile
          this.cityEntity = this.provinceEntity.find((val,index,arr)=>{
          return val.regionCode == this.addressForm.provinceCode
        })
        this.countyEntity = this.cityEntity.cityList.find((val,index,arr)=>{         
          return val.regionCode == this.addressForm.cityCode
        })
          console.log(this.provinceEntity,this.addressForm,'this.provinceEntity')
        }
        this.addressLoad = false
      }).catch((err) => {
        console.log(err,'e')
        this.$message.error('初始化地址信息失败！')
        this.addressLoad = false
      })
      
      this.changeAddVisible = true
      console.log('显示修改收货地址')
    },
    // 混合发货    
    showAnyDialog(item) {
      if (!item.printString || item.printString == '') return this.$message.error('暂无面单数据')
      this.anyDialogContent = item.printString
      console.log('面单',item)      
      this.anyDialogVisible = true
      this.anyDialogTitle = '查看面单'
    },
    // 查询印面单列表
    getPrintSheetList() {
      // let dateString = ''
      // if(this.MdDataForm.date != ''){
      //    dateString = this.MdDataForm.date.toString()
      // }
      this.dataListLoading = true
      this.$http({        
        url: this.$http.adornUrl('/express/getExpressPrints'),
        method: 'post',
        data: this.$http.adornData({         
          "limit": this.pageSize,
          "page": this.pageIndex,
          "type": this.tabChange.sheetCode,  //类型，0不限1已打印2未打印
          "date": this.MdDataForm.date,//string类型,非必传字段2023-10-30
          "expressOrderSn":"" //string类型，非必传字段
        })
      }).then(({ data }) => {
        console.log(data.page.records,'面单列表')
        if (data && data.code === 0 && data.page.records.length > 0) {
          this.PrintSheetList = data.page.records
          this.MDtotal = data.page.total
        } else {
          this.PrintSheetList = []
          this.MDtotal = 0
        }
        this.dataListLoading = false
      }).catch(({e}) => {
        console.log(e,'e')
        this.dataListLoading = false
      })
    },
    // 检查待发货单选按钮是否可用
    isMultipleDisabled() {
      this.dataList.forEach(item => {
        if (item.isSend === '1') {
          return this.multipleDisabled = true
        }

      });

    },
    // 全选/全不选
    handleCheckAllChange(val) {
      // console.log(this.selectOptions)------------
      let newidList = this.dataList.map(item => item.orderId);
      this.checkedOrders = newidList
      this.checkboxGroup.isIndeterminate = !this.checkboxGroup.isIndeterminate;
      if (this.checkboxGroup.isIndeterminate) {
        this.checkedOrders = []
      }
    },
    // 添加-更新-订单备注
    editBeizhu(val) {
      // console.log(val)
      this.oprateOrder = val
      this.editBeizhudialogVisible = true
      this.$nextTick(() => {
        this.$refs.updateOrderBeiZhu.init(val.orderSn, val.orderId)
      })

    },
    closeBeizhuDialog(val) {
      this.editBeizhudialogVisible = false
      this.oprateOrder = {}
      // 刷新本页
    },
    // 获取物流详情
    deliverDetail(para) {
      // if (para == '') return this.$message.error('请选择要查询的订单')
      this.oprateOrder = para
      this.$refs.deliverDetail.getDeliverList(para)
      this.deliverDetailVisible = true
     // console.log(this.oprateOrder,'oprateOrder')
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      this.$http({
        // url: this.$http.adornUrl('/book/buyOrder/list'),
        url: this.$http.adornUrl('/book/buyOrder/orderList'),
        method: 'post',
        // params: this.$http.adornParams({
        //   'page': this.pageIndex,
        //   'limit': this.pageSize,
        //   'key': this.dataForm.key,
        //   'startTime': this.dataForm.time[0],
        //   'endTime': this.dataForm.time[1],
        //   'orderStatus': this.tabChange.tabActiveName,   // 订单状态参数
        //   'isPrint': this.tabChange.isPrint,
        //   'orderorderType': this.tabChange.orderName,
        // }),
        data:this.$http.adornData({
          "searchKeyWord": this.dataForm.key,
          "startTime": this.dataForm.time[0],
          "endTime": this.dataForm.time[1],
          "orderStatus": this.tabChange.tabActiveName,
          "pageIndex": this.pageIndex,
          "pageSize": this.pageSize,
        })
      }).then(({ data }) => {
        console.log(data,'列表数据')
        if (data && data.code === 0) {
          this.dataList = data.result.data
          this.totalPage = data.result.totalDataSize
          if (this.tabChange.tabActiveName === '1') {     // 判断可选按钮是否可用      
            this.isMultipleDisabled()
          }
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 作废面单
    // deleteVoid(sheetId) {
    //   console.log('作废面单：传值：面单号+快递订单号+快递公司编码')
    // },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 面单批量选择
    SheetSelectionChangeHandle(val){
      this.SheetSelectionList = val
      console.log(this.SheetSelectionList,'选中的打印列表')
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle(id) {
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.orderId
      })
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/book/buyOrder/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    // 点击展示备注信息
    openShutManager(oSourceObj, oTargetObj, shutAble, oOpenTip, oShutTip) {
      var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;
      var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;
      var openTip = oOpenTip || "";
      var shutTip = oShutTip || "";
      if (targetObj.style.display != "none") {
        if (shutAble) return;
        targetObj.style.display = "none";
        if (openTip && shutTip) {
          sourceObj.innerHTML = shutTip;
        }
      } else {
        targetObj.style.display = "block";
        if (openTip && shutTip) {
          sourceObj.innerHTML = openTip;
        }
      }
    },
    // 批量/单个打印面单
    printHandle(id, row) {  
      console.log(id, row)      
      // 如果是传了id
       if(id){
       // console.log(id, '传了')
      this.$confirm(`确定进行打印操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.SheetSelectionList = [row]
          let SheetList = this.SheetSelectionList.map(item => item.printString)
          this.selectedPrintList = SheetList
          console.log(this.selectedPrintList, 'this.selectedPrintList')         
          //遍历数组列表
          // this.PrintSheetList.map(item => {
          //   if(item.expressOrderSn == id){ return this.selectedPrintList = [item.printTemplate]}
          //   console.log(this.selectedPrintList,'this.selectedPrintList待打印列表')
            setTimeout(() => {
            this.handlePrintSheet()
          }, 1000);
          setTimeout(() => {
            this.confirmPrint()
          }, 1000);
          // })
        }).catch((e)=>{
          console.log('打印报错了')
        })
      }else{
        console.log('批量打印')        
        this.printDialogVisible = true      
        this.$confirm(`确定对选中的 ${this.SheetSelectionList.length} 个面单进行批量打印操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          
          // 计算出选中了多少条面单
          let SheetList = this.SheetSelectionList.map(item => item.printString)
          this.selectedPrintList = SheetList
          console.log(this.selectedPrintList,'即将打印的面单数组')
          setTimeout(() => {
            this.handlePrintSheet()
          }, 1000);
          setTimeout(() => {
            this.confirmPrint()
          }, 1000);
        }).catch(() => { })
      }
    },
    // 执行打印
    handlePrintSheet() {
      var newWin = window.open(""); //新打开一个空窗口
      for (var i = 0; i < this.selectedPrintList.length; i++) {
        var imageToPrint = document.getElementById("printDiv" + i); //获取需要打印的内容
        newWin.document.write(imageToPrint.outerHTML); //将需要打印的内容添加进新的窗口
      }
      const styleSheet = `<style>li{list-style:none;}</style>`;
      newWin.document.head.innerHTML = styleSheet; //给打印的内容加上样式
      newWin.document.close(); //在IE浏览器中使用必须添加这一句
      newWin.focus(); //在IE浏览器中使用必须添加这一句
      setTimeout(function () {
        newWin.print(); //打印
        newWin.close(); //关闭窗口
      }, 100);
    },
    // 弹出打印结果确认内容
    confirmPrint(){      
        this.$confirm('是否已完成此次打印任务？', '提示', {
          confirmButtonText: '已完成打印',
          cancelButtonText: '打印出错',
          type: 'warning'
        }).then(() => {
          // 开始请求批量打印接口（改变打印状态）
          let loading = this.$loading({
                lock: true,
                text: '正在更新面单数据',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            }); 
      var printids = this.SheetSelectionList.map( item => item.id)
      console.log(printids,'printids打印的isd',)     
      this.$http({
        url: this.$http.adornUrl('/express/printTemplate'),
        method: 'post',
        data: 
          printids
       
      }).then(({ data }) => {
        if(data.code == 0){         
          console.log(data,'data')
          this.selectedPrintList = []
            this.SheetSelectionList = []
          this.getPrintSheetList()
          loading.close()  }        
      }).catch(({e}) => {
        this.selectedPrintList = []
            this.SheetSelectionList = []
            console.log(e,'e')
            loading.close()
      })

          // setTimeout(() => {
          //   this.selectedPrintList = []
          //   this.SheetSelectionList = []
          // }, 1000);
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        }).catch(() => {
          console.log('打印出错了')        
        });
    },
    closePrintDialog(val) {
      this.printDialogVisible = val
    },
    closeDeliverDetailDialog(val) {
      this.deliverDetailVisible = false
    },
    closeDeliverDialog(val) {
      this.setDeliverVisible = false
      this.getDataList()
      this.checkedOrders = []
      this.isIndeterminate = true
    },
    // 关闭面单预览
    closeSheetDliverDialog(val) {
      this.sheetVisible = val
    },
    // 批量发货   
    setDeliver() {
      this.setDeliverVisible = true
    },
    // 发货前检查是否有可合并项(废除)
    checkDeliver() {
      // 确认
      this.$confirm(`正在批量发货,共选中了${this.checkedOrders.length}条数据, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '点错了',
        type: 'warning'
      }).then(() => {
        // 点确定时
        this.mergeList = this.checkedOrders
        this.setDeliverVisible = true
      }).catch(() => {
      });

    },
    // 单个订单发货
    orderDeliver(item) {
      console.log(item)
      this.oprateOrder = item
      console.log(this.oprateOrder)
      this.splitDeliverVisible = true
    },
    // 查看面单
    showOrderSheet(order) {
      if (this.getOrderData(order)) {
        console.log(this.orderInfo)
        this.sheetVisible = true
      }
    },
    // 获取订单详情
    getOrderData(order) {
      let orderid = order.orderId
      let orderType = order.orderStatus
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/book/buyOrder/appGetOrderInfo/'+orderType),
        method: 'get',
        params: this.$http.adornParams({
          'orderId': orderid,
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.orderInfo = data.buyOrder
        } else {

        }
        this.dataListLoading = false
      })
      return true
    },
    // 关闭单个订单发货弹窗
    closeOrder1Dialog(val) {
      this.splitDeliverVisible = val
      // this.oprateOrder = {}
      this.getDataList()
    },
    test(e){
      console.log(e)
    },
    // 关闭万能弹窗
    closeanyDialogDialog() {
      this.anyDialogVisible = false
    },
    // 关闭合批量发货合并项弹窗
    closemergeDliverDialog(val) {
      console.log(val)
      this.mergeDliverVisible = false
      this.mergeList = val.data // 获得处理后的合并数组
      // 显示物流配置弹窗
      this.setDeliverVisible = true
    },
    handleCheckedChange(val) {
      console.log(val)
      this.checkedOrders = val
    }
  },
  components: {
    anyDialog,
    deliverDetail,
    AddOrUpdate,
    setDeliverDialog,
    updateOrderBeiZhu,
    splitDeliver,
    mergeDliver,
    seeSheet
  },
  watch: {
    tabChange: {
      handler(val, oldVal) {
        //console.log(val)
        this.getDataList()
        if (this.tabChange.tabActiveName === '0' || this.tabChange.tabActiveName === '1' || this.tabChange.tabActiveName === '3') {
          this.tabChange.isPrint = '0'
        }
        if (this.tabChange.isPrint === '1') { this.getPrintSheetList() }

      },
      deep: true
    },
    //  'dataForm.time':function(e){
    //   console.log(e)
    //  }
  }
}
</script>
<style>
.infoTitle {
  color: #999;
  display: inline-block;
  width: 62px;
  text-align: right;
}


.el-dialog__header {
  text-align: left;
  border-bottom: 1px solid #f1f1f1;
}
</style>
<style lang="less" scoped>
.booksUl{ overflow: hidden; margin-top: 15px; padding-left: 0;
  li{list-style: none; width: 50%; float: left; align-items: center; margin-bottom: 15px;}
}
.flexbox {
  display: flex;
}

.order_list_ui {
  * {
    font-size: 12px;
    //color: #777;
  }

  ul {
    color: #515a6e;
    padding: 0;

    li {
      list-style: none;
      margin-bottom: 10px;

      .item_head {
        width: 100%;
        padding: 3px;
        border: 1px solid #ddf6f3;
        background-color: #edf9f8;



        .tip {
          text-align: right;

          .el-button {
            padding: 0;
          }
        }

        .el-checkbox {
          margin-right: 10px;

        }
      }

      .item_body {
        border: 1px solid #ddf6f3;
        border-top: none;

      }

    }
  }
}

.orderProducts {
  padding: 8px;
  // border-right: 1px solid #f1f1f1;
  // border-bottom: 1px solid #f1f1f1;

  .price {
    // width: 40px;
    line-height: 14px; 
    span{color: #E6A23C; font-size: 14px;}
    .bookName{margin-bottom: 5px;}
  }

  .num {
    width: 40px;
    line-height: 20px;
  }

  .productItem {
    overflow: hidden; 

    .flexbox {
      align-items: center;
    }

    .el-checkbox {
      line-height: 54px;
    }
  }
}

.item_head {
  /deep/ .el-checkbox__label {
    display: none !important;
  }
}

.showLabel {
  .el-checkbox__label {
    visibility: visible;
  }
}

.xcenter {
  text-align: center;
}

.borderright {
  padding-left: 10px;
  border-right: 1px solid #f1f1f1;
}

.normal {
  display: none;
}
.detailsFonts{font-size: 12px;
  span{display: block;}
}
.hasDeliver {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  background-image: url(../../../../static/img/hasDeliver_icon.png);
}

.td1 {

  // width: 400px;
  .orderProducts {
    overflow: hidden;
    position: relative;

    .el-checkbox {
      margin-right: 10px;
    }

    img {
      margin-right: 10px;
      padding: 2px;
      border: 1px solid #f1f1f1;
    }

    .bookName {
      //margin-right: 10px;
      font-size: 12px;
      line-height: 22px;
      // margin-left: -6px;
      // -webkit-transform: scale(0.8);
      letter-spacing: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; // 控制多行的行数
    }

    .author {
      color: #999;
    }
  }
}

.td2 {
  width: 150px;
  line-height: 26px;
  padding: 5px;

  em {
    font-size: 14px;
    font-style: normal;
    color: #48C9B0;
  }
}

.tabName {
  color: #999;
  margin-bottom: -3px;
}

.tabContent {
  line-height: 26px;
  -webkit-transform: scale(0.9);
}

.td3 {
  padding: 5px;
  line-height: 24px;
  width: 200px;

  .buier_tip {
    color: #666;
  }
}

.td4 {
  padding: 5px;
  width: 200px;
  line-height: 24px;

  .time {
    color: #999
  }

  .orderStatus {
    color: #E6A23C;
  }

  .el-button {
    // margin-top: 15px;
  }
}
.greeyImg{filter: grayscale(100%);}
.td5 {
  padding: 5px;
  line-height: 24px;
}

.orderProducts:nth-child(3n) {
  border-right: none;
}

.nobottomBorder {
  border-bottom: none;
  ;
}

.hasSplit {
  display: inline;
  padding: 0 5px;
  background-color: #fffae8;
  // border: 1px solid #ffedd6;

  .el-button {
    margin-top: 0;
  }
}

.buttonGroup {
  .el-checkbox {
    margin-right: 10px;
  }
}

.deliverName {
  margin-bottom: px;
}

.paper_list_ui {
  margin-top: 15px;
}

.fengbi {
  margin-left: 0 !important;
}
</style>
