<template>
  <div class="order" v-loading="load">
    <div class="order-left">
      <el-scrollbar class="search-content">
        <el-collapse v-model="activeNames" class="my-collapse">
          <el-collapse-item name="1">
            <template slot="title">
              基本信息<i class="header-icon el-icon-info" title="精确搜索"></i>
            </template>
            <input-select :options="myOptions" @input="parameChange" ref="searchCom01" />
            <input-select :options="outLineOptions" @input="parameChangeBase($event, 'idType', 'idValue')"
              ref="searchCom02" />
            <input-select :options="buyerOptions" @input="parameChangeInfo($event, 'receiverInfo', 'receiverValue')"
              ref="searchCom03" />
          </el-collapse-item>
          <order-checkbox title="订单状态" keyName="statusList" ref="searchCom04" :options="statusOptions" noLimit
            @checkboxChange="onChange($event, 'statusList')">
            <template v-slot:question>
              <div class="ques-box">
                <div class="questtion-top" @click="showQues = !showQues">
                  <div class="quest-title">
                    <span>异常类型</span>
                    <i class="el-icon-setting" @click.stop="showQuestType"></i>
                  </div>
                  <i class="el-icon-arrow-down"></i>
                </div>
                <el-collapse-transition>
                  <div class="ques-list" v-show="showQues">
                    <template v-for="item of questData">
                      <el-checkbox :label="item.id" v-if="item.isShow == 1" :key="item.value">{{ item.type
                      }}</el-checkbox>
                    </template>
                  </div>
                </el-collapse-transition>
              </div>
            </template>
          </order-checkbox>
          <order-radio title="审核状态" keyName="isSubmitted" ref="searchComsubmitStatus" :options="submitOption" noLimit
            @radioChange="onChangeSmt" />
          <order-radio title="买家留言" keyName="buyerMessageFilter" ref="searchCom05" :options="buyerMessageOptions"
            noLimit @radioChange="onChange($event, 'buyerMessageFilter')">
            <template v-slot:buyerMessage>
              <el-input style="width: 140px;" v-model="value.buyerMessageContent" size="mini"
                placeholder="留言内容"></el-input>
            </template>
          </order-radio>
          <order-radio title="卖家备注" keyName="remarkFilter" ref="searchCom06" :options="remarkFilterOptions" noLimit
            @radioChange="onChange($event, 'remarkFilter')">
            <template v-slot:remarkFilter>
              <el-input style="width: 140px;" v-model="value.remarkContent" size="mini" placeholder="备注内容"></el-input>
            </template>
          </order-radio>
          <el-collapse-item title="时间" name="time">
            <div class="orderSelect">
              <el-select v-model="value.dateType" placeholder="请选择时间类型" size="mini">
                <el-option v-for="item in dateTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <i class="el-icon-info" title="附加订单时间限制，许多仅限待发货订单的查询条件将自动取消限制"></i>
            </div>
            <filter-date @change="onChangeTime" ref="searchCom07" />
            <!-- <div>付款后几小时未发货：</div>
            <div class="order-time">
              <vxe-input v-model="value.deliveryHours" class="deliveryHours-input" clearable type="number" size="mini"></vxe-input>
              <i class="el-icon-info" title="单位小时，不支持小数位。如果数值大于0，强制为未发货订单。同时勾选店铺可以实现不同平台的未发货时效查询"></i>
            </div>
            <filterMinMax title="剩余发货时间(小时)" ref="searchCom08" minField="deliveryRemainingMin" maxField="deliveryRemainingMax" @change="parameChange" /> -->
          </el-collapse-item>
          <order-checkbox title="平台订单状态" ref="searchCom09" keyName="shopStatusList" :options="shopStatusListOption"
            noLimit @checkboxChange="onChange($event, 'shopStatusList')" />
          <order-radio title="线下备注" ref="searchCom10" keyName="noteFilter" :options="noteFilterOptions" noLimit
            @radioChange="onChange($event, 'noteFilter')">
            <template v-slot:noteContent>
              <el-input style="width: 140px;" v-model="value.noteContent" size="mini" placeholder="备注内容"></el-input>
            </template>
          </order-radio>
          <order-radio title="操作标记" keyName="operationFlag" ref="searchCom11" :options="sourceFromOptions" noLimit
            @radioChange="onChange($event, 'operationFlag')" />
          <!-- <order-checkbox title="订单类型" keyName="typeList" ref="searchCom12" :options="typeOption" noLimit @checkboxChange="onChange($event,'typeList')" /> -->
          <!-- <order-radio title="售卖类型" keyName="sellType" ref="searchCom15" :options="sellTypeOptions" noLimit @radioChange="onChange($event,'sellType')" /> -->
          <!-- <el-collapse-item title="付款方式 & 是否付款" name="codAndPay">
            <div class="box01">
              <el-radio-group v-model="radio" @input="colChange">
                <el-radio label="0">不限</el-radio>
                <el-radio label="1">在线支付</el-radio>
                <el-radio label="2">货到付款</el-radio>
              </el-radio-group>
            </div>
            <div class="box01">
              <el-radio-group v-model="radio2" @input="payChange">
                <el-radio label="0">不限</el-radio>
                <el-radio label="1">未付款</el-radio>
                <el-radio label="2">已付款</el-radio>
              </el-radio-group>
            </div>
          </el-collapse-item> -->
          <!-- <order-checkbox title="店铺" ref="searchCom13" keyName="shopIdList" :options="shopIdListOptions" @checkboxChange="onChange($event,'shopIdList')" /> -->

          <order-checkbox title="省份" ref="searchCom14" keyName="receiverProvinceCode" :options="provinceOptions"
            @checkboxChange="onChange($event, 'receiverProvinceCodeList')" />
          <!-- 商品条码 -->
          <el-input placeholder="请输入商品条码" v-model="barCode" clearable></el-input>
        </el-collapse>
      </el-scrollbar>
      <div class="searchHandle">
        <el-button size="mini" @click="resert">重置</el-button>
        <el-button type="primary" size="mini" @click="searchTimeOut">查看超时订单</el-button>
        <el-button type="primary" size="mini" @click="search">搜索</el-button>
      </div>
    </div>
    <div class="order-right">
      <div class="tool">
        <order-tool @addOrder="addOrder" @smt="smtOrder" @reSmt="reSmt" @loadOrder="loadOrder"
          @producePurchase="producePurchase" @cancelOrder="cancelOrder" @reCancelOrder="reCancelOrder"
          @updateRmk="updateRmk" @changeQues="changeQues" @changeNormal="changeNormal" @updateSalesman="updateSalesman"
          @updateTag="updateTag" @addGift="addGift" @addProduct="addProduct" @updateFreight="updateFreight"
          @orderFile="orderFile" @batchSendGoods="batchSendGoods" @importOrder="importOrder" @autoMerge="autoMerge"
          @autoSplit="autoSplit" @autoAudit="autoAudit" />
      </div>
      <div class="table">
        <order-table :data="data" ref="orderTable" class="order-table" @detail="detail" @mergeHandle="mergeHandle"
          @splitHandle="splitHandle" @sendGoods="sendGoods" @sendGoodsDetail="sendGoodsDetail" />
        <div class="page">
          <el-pagination v-if="page.total > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="page.pageNo" :page-size="page.pageSize" :layout="'total, sizes, prev, pager, next, jumper'"
            :total="page.total"></el-pagination>
        </div>
      </div>

      <!-- 手工下单 -->
      <add-order ref="addOrder" @handleSuccess="handleSuccess" />
      <!-- 手工下载 -->
      <load-order-modal ref="loadOrder" @handleSuccess="handleSuccess" />
      <!-- 生成采购单 -->
      <purchase-model ref="purchaseModel" @handleSuccess="handleSuccess" />
      <!-- 合并 -->
      <merge-model ref="mergeModel" @handleSuccess="handleSuccess" />
      <!-- 拆分 -->
      <split-model ref="splitModel" @handleSuccess="handleSuccess" />
      <!-- 取消订单 -->
      <cancel-order-model ref="cancelOrderModel" @handleSuccess="handleSuccess" />
      <!-- 异常 -->
      <quest-model ref="questModel" @questHide="getQuestionList" />
      <!-- 转异常 -->
      <set-ques-modal ref="setQuesModal" @handleSuccess="handleSuccess" />
      <!-- 改卖家备注 -->
      <update-rmk-modal ref="updateRmkModal" @handleSuccess="handleSuccess" />
      <!-- 改业务员 -->
      <update-saler-modal ref="updateSalerModal" @handleSuccess="handleSuccess" />
      <!-- 改标签 -->
      <tabModal ref="tabModal" @handleSuccess="handleSuccess" />
      <!-- 添加赠品 -->
      <add-product-modal ref="addProductModal" @handleSuccess="handleSuccess" />
      <!-- 改运费 -->
      <freight-modal ref="freightModal" @handleSuccess="handleSuccess" />
      <!-- 标签 -->
      <labels-modal ref="labelsModal" @onChange="onChangeLabel" />
      <!-- 发货模式 -->
      <send-mode-modal ref="sendModeModal" @modeChange="modeChange" />
      <!-- 批量逐一发货 -->
      <batchbyOneModal ref="batchbyOneModal" @handleSuccess="handleSuccess" />
      <!-- 整车发货 -->
      <carpoolModal ref="carpoolModal" @handleSuccess="handleSuccess" />
      <!-- 发货单详情 -->
      <deliveryDetail ref="deliveryDetail" @handleSuccess="handleSuccess" @showLogistics="showLogistics" />
      <!-- 物流信息 -->
      <logisticsInfo ref="logisticsInfo" />
      <!-- 快递发货 -->
      <express-delivery-modal ref="expressDeliveryModal" @handleSuccess="handleSuccess" />
      <!-- 上传excel -->
      <ImportExcelModel ref="ImportExcelModel" @handleSuccess="handleSuccess" />
      <!-- 自动拆分 -->
      <autoSplit ref="autoSplit" @handleSuccess="handleSuccess" />
      <!-- 智能审核 -->
      <AutoAudit ref="autoAudit" @handleAutoAudit="handleAutoAudit" />
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import filterInput from './components/filterInput.vue'
import OrderCheckbox from "./components/orderCheckbox.vue";
import OrderRadio from './components/orderRadio.vue'
import filterDate from './components/filterDate.vue'
import OrderTool from "./components/orderTool.vue";
import OrderTable from "./components/orderTable.vue";
import AddOrder from "./components/addOrder.vue"; //新增订单
import InputSelect from "./components/inputSelect.vue";
import OrderProduct from "./components/orderProduct.vue";
import filterMinMax from './components/filterMinMax.vue'
import loadOrderModal from './components/loadOrderModal.vue' //手工下载
import PurchaseModel from "./components/purchaseModel.vue"; //生成采购单
import MergeModel from "./components/mergeMedal.vue"; //合并
import SplitModel from "./components/splitModal.vue"; //拆分
import CancelOrderModel from "./components/cancelOrderModel.vue"; //取消订单
import QuestModel from "./components/questModel.vue";
import SetQuesModal from "./components/setQuesModal.vue";
import UpdateRmkModal from "./components/updateRmkModal.vue";
import UpdateSalerModal from "./components/updateSalerModal.vue";
import TabModal from "./components/tabModal.vue";
import AddProductModal from "./components/addProductModal.vue";
import FreightModal from "./components/freightModal.vue";
import LabelsModal from "./components/labelsModal.vue";
import SendModeModal from "./components/sendModeModal.vue";
import batchbyOneModal from './components/batchbyOneModal.vue'
import carpoolModal from './components/carpoolModal.vue'
import DeliveryDetail from "./components/deliveryDetail.vue";
import LogisticsInfo from "./components/logisticsInfo.vue";
import ExpressDeliveryModal from "./components/expressDeliveryModal.vue";
import ImportExcelModel from "./components/importExcelModal.vue";
import autoSplit from './components/autoSplit.vue'
import AutoAudit from './components/autoAudit.vue'
import { query, getProvince, smt, unSmt, purchaseQty, unCancel, resetQuestion, archive, merge, queryTimeOut, queryByBarCode, autoAudit, tipOrderTimeOut } from '@/api/omsOrder'
import { queryAll } from '@/api/question'
import { IOrderTimeConfigItem, IOrderTimeResponse, queryOrderTimeConfig } from "@/api/orderConfig";
@Component({
  components: {
    filterInput, OrderCheckbox, OrderRadio, filterDate, OrderTool, OrderTable, AddOrder, InputSelect, OrderProduct,
    filterMinMax, loadOrderModal, PurchaseModel, MergeModel, SplitModel, CancelOrderModel, QuestModel, SetQuesModal, UpdateRmkModal, UpdateSalerModal,
    TabModal, AddProductModal, FreightModal, LabelsModal, SendModeModal, batchbyOneModal, carpoolModal, DeliveryDetail, LogisticsInfo, ImportExcelModel,
    autoSplit, ExpressDeliveryModal, AutoAudit
  }
})
export default class Order extends Vue {
  activeNames: Array<any> = ['1', 'statusList']
  radio = ''
  radio2 = ''
  data: Array<any> = []
  load = false;
  showQues = false;
  isContainLabel = true;
  barCode: string = '';
  page: any = {
    pageNo: 1, //当前页
    pageSize: 20, //每页条数
    total: 0 //总条数
  }
  questData: Array<any> = []
  value: any = {
    // sourceId:'',  //线上订单号
    // shopBuyerId:'', //买家昵称
    // buyerId:'', //买家ID
    // logisticsId:'', //快递单号
    // logisticsCompany:'', //快递公司
    // internationalLogisticsId:'', //国际物流单号
    // isSubmitte:'', //数据是否已提交
    // drpCoIdFrom:'', //分销商编号
    // drpCoIdTo:'', //供销商编号
    // sourceFrom:'', //订单来源
    // dateType:1,//时间类型
    // deliveryRemainingMin:0, //订单剩余发货时间(小时)-小于等于
    // deliveryRemainingMax:null, //订单剩余发货时间(小时)-大于等于
    // includeSkuType:1, //包含编码类型
    // type:'', //订单类型
    // status:'' , //订单状态
    // excludeSkuType:1, //排除编码类型
  }
  myOptions = [{
    label: '内部订单号',
    value: 'orderId',
    format: /[^0-9,]*/g
  }]
  outLineOptions = [{
    label: '线上订单号',
    value: 'sourceId'
  }, {
    label: '支付单号',
    value: 'outerPayId'
  }]
  buyerOptions = [{
    label: '买家账号',
    value: 'buyerId'
  }, {
    label: '快递单号',
    value: 'logisticsId'
  }, {
    label: '收件人-省',
    value: 'receiverProvince'
  }, {
    label: '收件人-市',
    value: 'receiverCity'
  }, {
    label: '收件人-区',
    value: 'receiverDistrict'
  }, {
    label: '收货地址',
    value: 'receiverAddress'
  }, {
    label: '收件人',
    value: 'receiverName'
  }, {
    label: '手机号',
    value: 'receiverMobile'
  }, {
    label: '固定电话',
    value: 'receiverPhone'
  }]

  //买家留言
  buyerMessageOptions = [{
    label: '无留言',
    value: 1
  }, {
    label: '未处理的留言',
    value: 2
  }, {
    slotName: 'buyerMessage',
    label: '有留言',
    value: 3
  }]
  //卖家备注
  remarkFilterOptions = [{
    label: '无备注',
    value: 1,
  }, {
    label: '未处理的备注',
    value: 2,
  }, {
    label: '有备注',
    slotName: 'remarkFilter',
    value: 3,
  }]
  //订单时间类型
  dateTypeOptions = [{
    label: '订单时间',
    value: 1
  }, {
    label: '发货时间',
    value: 2
  }, {
    label: '付款时间',
    value: 3
  }, {
    label: '确认收货时间',
    value: 4
  }, {
    label: '计划发货时间',
    value: 5
  }]
  //包含编码类型
  includeSkuTypeOptions = [{
    label: '包含任意商品编码',
    value: 1
  }, {
    label: '包含任意款式编码',
    value: 2
  }, {
    label: '包含全部商品编码',
    value: 3
  }, {
    label: '包含全部款式编码',
    value: 4
  }, {
    label: '仅包含指定商品编码',
    value: 5
  }, {
    label: '仅包含指定款式编码',
    value: 6
  }, {
    label: '包含任意店铺商品编码',
    value: 7
  }, {
    label: '包含任意店铺款式编码',
    value: 8
  }]
  //排除编码类型
  excludeSkuTypeOptions = [{
    label: '排除任意商品编码',
    value: 1
  }, {
    label: '排除任意款式编码',
    value: 2
  }]
  //平台订单状态
  shopStatusListOption: Array<any> = [{
    label: '没有创建支付宝交易',
    value: 1
  }, {
    label: '等待买家付款',
    value: 2
  }]

  noteFilterOptions: Array<any> = [{
    label: '无备注',
    value: 1,
  }, {
    label: '有备注',
    slotName: 'noteContent',
    value: 2,
  }]

  //订单来源
  sourceFromOptions: Array<any> = [{
    label: '手工下单',
    value: 'OMS'
  }, {
    label: '复制',
    value: 'COPY'
  }, {
    label: '合并',
    value: 'MERGE'
  }, {
    label: '拆分；拆分还原',
    value: 'SPLIT'
  }, {
    label: '手机',
    value: 'MOBILE'
  }, {
    label: '导入',
    value: 'IMPORT'
  }, {
    label: '供销推送',
    value: 'DRP-S'
  }, {
    label: '快手；微商城',
    value: 'KWAISHOP'
  }, {
    label: '拼多多',
    value: 'PINDUODUO'
  }, {
    label: '头条放心购',
    value: 'TOUTIAOFXG'
  }, {
    label: '聚水潭',
    value: 'JUSHUITAN'
  }]
  sellTypeOptions: Array<any> = [{
    value: '1',
    label: '自营'
  }, {
    value: '2',
    label: '代发'
  }, {
    value: '3',
    label: '代销'
  }, {
    value: '4',
    label: '经销'
  }, {
    value: '5',
    label: '线下'
  }]

  //审批状态
  submitOption: Array<any> = [{
    label: '未审核',
    value: 0
  }, {
    label: '已审核',
    value: 1
  }]

  //订单类型
  typeOption: Array<any> = [{
    label: '普通订单',
    value: 'Common'
  }, {
    label: '补发订单',
    value: 'Reissue'
  }, {
    label: '分销Plus',
    value: 'DistributionPlus'
  }, {
    label: '供销Plus',
    value: 'SupplyPlus'
  }, {
    label: '换货订单',
    value: 'Exchange'
  }]

  //订单状态 
  statusOptions: Array<any> = [{
    label: '待付款',
    value: 'WaitPay'
  }, {
    label: '被合并',
    value: 'Merged'
  }, {
    label: '被拆分',
    value: 'Split'
  },
  // {
  //   label:'等供销商|外仓发货',
  //   value:'WaitOuterSent'
  // },
  {
    label: '已付款待审核',
    value: 'WaitConfirm'
  },
  // {
  //   label:'已客审待财审',
  //   value:'WaitFConfirm'
  // },
  {
    label: '发货中',
    value: 'Delivering'
  }, {
    label: '已发货',
    value: 'Sent'
  }, {
    label: '取消',
    value: 'Cancelled'
  }, {
    label: '异常',
    value: 'Question',
    slot: true,
    slotName: 'question'
  }]
  shopIdListOptions: Array<any> = []

  //省份
  provinceOptions: Array<any> = []

  //订单超时配置
  orderTimeConfigOptions: IOrderTimeConfigItem[] = []

  mounted() {
    //this.getList();
    this.getProvince();
    this.getQuestionList(() => {
      this.getList();
    });
    this.getQuesttion();
    this.getOrderTimeOutList();
    this.tipOrderTimeOut();
  }
  //自动拆分
  autoSplit() {
    let newData: Array<any> = [];
    let s = ['WaitConfirm', 'Question', 'Split']
    for (const item of this.data) {
      if (item.isSubmitted == 1 && item.pays && item.pays.length > 0 && (!item.operationFlag || item.operationFlag.indexOf('MERGE') == -1 && item.operationFlag.indexOf('SPLIT') == -1 && item.operationFlag.indexOf('JUSHUITAN') == -1) && s.indexOf(item.status) >= 0) {
        newData.push(item)
      }
    }
    if (newData.length == 0) {
      this.$message('拆分操作未找到符合条件的订单！');
      return
    }
    (this.$refs.autoSplit as any).setShow(true);
    (this.$refs.autoSplit as any).setData(newData)
  }
  // 自动合并
  autoMerge() {
    let data: Array<any> = (this.$refs.orderTable as any).getSelectData();
    if (data.length == 0) {
      this.$message('请选择一个主订单！');
      return
    }
    if (data.length > 1) {
      this.$message('合并操作只能选择一个主订单！');
      return
    }
    let r = false;
    if (data[0].isSubmitted == 1 && data[0].pays && data[0].pays.length > 0 && (!data[0].operationFlag || data[0].operationFlag.indexOf('MERGE') == -1 && data[0].operationFlag.indexOf('SPLIT') == -1 && data[0].operationFlag.indexOf('JUSHUITAN') == -1) && (data[0].status == 'WaitConfirm' || data[0].status == 'Question')) {
      r = true;
    }
    if (!r) {
      this.$message('选择的主订单不符合合并条件！');
      return
    }

    let row = data[0]
    let newData: Array<any> = [];
    row.isMain = 1;
    newData.push(row);
    for (const item of this.data) {
      if (row.id != item.id && item.isSubmitted == 1 && row.shopId == item.shopId && row.shopName == item.shopName && row.buyerId == item.buyerId &&
        row.receiverMobile == item.receiverMobile && row.receiverProvince == item.receiverProvince && row.receiverCity == item.receiverCity
        && row.receiverDistrict == item.receiverDistrict && row.receiverTown == item.receiverTown && row.receiverAddress == item.receiverAddress
        && item.pays && item.pays.length > 0 && item.operationFlag.indexOf('SPLIT') == -1 && item.operationFlag.indexOf('MERGE') == -1 && (item.status == 'WaitConfirm'
          || item.status == 'Question')) {
        newData.push(item);
      }
    }
    if (newData.length == 1) {
      this.$message('合并操作未找到符合条件的订单!')
      return
    }
    this.$confirm('你确定将买家/分销商为“' + row.buyerNickname + '”的订单进行合并?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      let params: any = {};
      params.idList = [];
      for (const item of newData) {
        if (item.isMain == 1) {
          params.id = item.id;
        } else {
          params.idList.push(item.id);
        }
      }
      this.load = true;
      merge(params).then((res: any) => {
        this.load = false;
        this.$message({
          message: '自动合并成功！',
          type: 'success'
        })
        this.load = false;
        this.getList();
      }).catch((err: any) => {
        this.load = false;
      })
    }).catch(() => { });
  }
  //上传excel
  importOrder() {
    if (this.$refs.ImportExcelModel) {
      (this.$refs.ImportExcelModel as any).setShow(true)
    }
  }
  //查看物流
  showLogistics(code: string) {
    if (this.$refs.logisticsInfo) {
      (this.$refs.logisticsInfo as any).setShow(true);
      (this.$refs.logisticsInfo as any).loadData(code);
    }
  }
  //发货详情
  sendGoodsDetail(row: any) {
    if (this.$refs.deliveryDetail) {
      (this.$refs.deliveryDetail as any).setShow(true);
      (this.$refs.deliveryDetail as any).setData(row);
    }
  }
  //批量发货
  batchSendGoods() {
    let data: Array<any> = (this.$refs.orderTable as any).getSelectData();
    if (data.length == 0) {
      this.$message('请选择订单！');
      return
    }
    let ids: string = '';
    let noStatus = ['Delivering', 'Merged', 'Split', 'Question', 'Sent', 'Cancelled'];
    for (const item of data) {
      if (!(item.isSubmitted == 1 && noStatus.indexOf(item.status) == -1)) {
        ids = ids ? ids + ',' + item.id : item.id;
      }
    }
    if (ids) {
      this.$message('订单“ ' + ids + ' ”不符合发货条件！');
      return
    }
    // if(data.length == 1){

    //   (this.$refs.deliveryModal as any).setShow(true);
    // }else{
    if (this.$refs.sendModeModal) {
      (this.$refs.sendModeModal as any).setShow(true);
    }
    // }

  }
  //发货模式
  modeChange(v: string) {
    let data: Array<any> = (this.$refs.orderTable as any).getSelectData();
    switch (v) {
      case '0': // 逐一发货
        if (this.$refs.batchbyOneModal) {
          (this.$refs.batchbyOneModal as any).setShow(true);
          (this.$refs.batchbyOneModal as any).setValue(data);
        }
        break;
      case '1': // 整车发货
        let isShow = true
        for (const item of data) {
          if (!(data[0].buyerId === item.buyerId && data[0].receiverName === item.receiverName && data[0].receiverTownCode === item.receiverTownCode && data[0].receiverAddress === item.receiverAddress && data[0].receiverMobile === item.receiverMobile)) {
            isShow = false;
            break
          }
        }
        if (!isShow) {
          this.$message({
            message: '整车发货必须是同一买家！',
            type: 'warning'
          })
        }
        if (this.$refs.carpoolModal && isShow) {
          (this.$refs.carpoolModal as any).setShow(true);
          (this.$refs.carpoolModal as any).setValue(data);
        }
        break;
      case '2': // 快递发货
        if (this.$refs.expressDeliveryModal) {
          (this.$refs.expressDeliveryModal as any).setShow(true);
          (this.$refs.expressDeliveryModal as any).setValue(data);
        }
    }
  }
  //整车发货
  sendGoods(item: any) {
    (this.$refs.batchbyOneModal as any).setShow(true);
    (this.$refs.batchbyOneModal as any).setValue([item]);
    // (this.$refs.deliveryModal as any).setShow(true);
  }
  //显示标签弹窗
  showLabels() {
    this.isContainLabel = true;
    if (this.$refs.labelsModal) {
      (this.$refs.labelsModal as any).setShow(true);
    }
  }
  showLabels2() {
    this.isContainLabel = false;
    if (this.$refs.labelsModal) {
      (this.$refs.labelsModal as any).setShow(true);
    }
  }
  //标签弹窗返回信息
  onChangeLabel(v: string) {
    if (this.isContainLabel) {
      if (this.value.includeLabels) {
        Vue.set(this.value, 'includeLabels', v);
      } else {
        this.value.includeLabels = v;
      }

    } else {
      if (this.value.excludeLabels) {
        Vue.set(this.value, 'excludeLabels', v);
      } else {
        this.value.excludeLabels = v;
      }
    }
    this.$forceUpdate()
  }
  labelsClear(v?: boolean) {
    if (v) {
      delete this.value.includeLabels;
    } else {
      delete this.value.excludeLabels;
    }
    this.$forceUpdate()
  }
  //归档
  orderFile() {
    let data: Array<any> = (this.$refs.orderTable as any).getSelectData();
    if (data.length == 0) {
      this.$message('请选择订单！');
      return
    }
    let ids = '';
    let idsArr: Array<any> = [];
    for (const item of data) {
      ids = ids ? ids + ',' + item.id : item.id;
      idsArr.push(item.id)
    }
    this.$confirm('归档后数据无法恢复，您确定将所选订单归档?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.load = true;
      archive({ idList: idsArr }).then((res: any) => {
        this.$message({
          message: res.msg ? res.msg : '归档成功！',
          type: 'success'
        });
        this.load = false;
        this.getList();
      }).catch(() => {
        this.load = false;
      })
    }).catch(() => { });
  }
  //改运费
  updateFreight() {
    this.updateHandleModal('freightModal');
  }
  //添加商品
  addProduct() {
    this.updateHandleModal('addProductModal');
  }
  //添加赠品
  addGift() {
    this.updateHandleModal('addProductModal');
    (this.$refs.addProductModal as any).setGift(true);
  }

  //改标签
  updateTag() {
    this.updateHandleModal('tabModal')
  }
  //改业务员
  updateSalesman() {
    this.updateHandleModal('updateSalerModal')
  }
  //改备注
  updateRmk() {
    this.updateHandleModal('updateRmkModal')
  }
  updateHandleModal(n: string) {
    let data = (this.$refs.orderTable as any).getSelectData();
    if (data.length == 0) {
      this.$message('请选择订单！');
      return
    }
    let billData: Array<any> = []
    for (const item of data) {
      billData.push(item.id);
    }
    (this.$refs[n] as any).setBillValue(billData);
    (this.$refs[n] as any).setShow(true);
  }
  //转异常
  changeQues() {
    let data: Array<any> = (this.$refs.orderTable as any).getSelectData();
    if (data.length == 0) {
      this.$message('请选择订单！');
      return
    }
    let msg = '';
    let billData: Array<any> = []
    for (const item of data) {
      billData.push(item.id);
      if (item.status == 'Question') {
        if (msg) {
          msg = msg + ',' + item.id
        } else {
          msg = item.id
        }
      }
    }
    if (msg) {
      this.$message({
        message: '订单“' + msg + '”状态异常，不能执行此操作！'
      })
      return
    }
    (this.$refs.setQuesModal as any).setBillValue(billData);
    (this.$refs.setQuesModal as any).setQuestTypeData(this.questData);
    (this.$refs.setQuesModal as any).setShow(true);
  }
  //转正常
  changeNormal() {
    let data: Array<any> = (this.$refs.orderTable as any).getSelectData();
    if (data.length == 0) {
      this.$message('请选择订单！');
      return
    }
    let msg = '';
    let billData: Array<any> = []
    for (const item of data) {
      billData.push(item.id);
      if (item.status != 'Question') {
        if (msg) {
          msg = msg + ',' + item.id
        } else {
          msg = item.id
        }
      }
    }
    if (msg) {
      this.$message({
        message: '订单“' + msg + '”状态正常，不能执行此操作！'
      })
      return
    }
    this.load = true
    resetQuestion({ idList: billData }).then((res: any) => {
      this.load = false;
      (this.$message({
        message: res.msg ? res.msg : '操作成功！',
        type: 'success'
      }));
      this.getList();
    }).catch(() => {
      this.load = false;
    })
  }
  //异常数据弹窗
  showQuestType() {
    (this.$refs.questModel as any).setShow(true);
  }
  //获取异常数据
  getQuestionList(callBack) {
    queryAll().then((res: any) => {
      this.questData = res.data;
      callBack();
    }).catch(() => { })
  }

  updateQuestion() {
    if (this.questData.length === 0 || this.data.length === 0) return;
    //遍历this.data，获取this.data.questionType的值对应到this.questData中的this.questData，取this.questData.type
    for (const item of this.data) {
      for (const _item of this.questData) {
        if (item.errorType == _item.id) {
          item.errorType = _item.type;
        }
      }
    }
  }

  //生成采购单
  producePurchase() {
    let data: Array<any> = (this.$refs.orderTable as any).getSelectData();
    if (data.length == 0) {
      this.$message('请选择订单！');
      return
    }
    let msg: string = '';
    let ids: Array<any> = [];
    for (const item of data) {
      if (item.isSubmitted != 1) {
        if (msg) {
          msg = msg + ',' + item.id
        } else {
          msg = item.id
        }
      }
      ids.push(item.id)
    }
    if (msg) {
      this.$message({
        message: '订单“' + msg + '”未审核，不能生成采购单！'
      })
      return
    }
    purchaseQty({
      ids: ids
    }).then((res: any) => {
      let productData: Array<any> = [];
      for (const item of data) {
        for (const childItem of item.items) {
          childItem.orderId = item.id;
          childItem.residueQty = childItem.qty;
          productData.push(childItem)
        }
      }
      if (res.data.length) {
        for (const item of productData) {
          for (const _item of res.data) {
            if (item.id == _item.itemId) {
              item.residueQty = _item.residueQty >= 0 ? _item.residueQty : item.qty
            }
          }
        }
      }
      for (let i = productData.length - 1; i >= 0; i--) {
        if (productData[i] && productData[i].residueQty == 0) {
          productData.splice(i, 1)
        }
      }
      (this.$refs.purchaseModel as any).setShow(true);
      (this.$refs.purchaseModel as any).setTableData(productData);
    })
  }
  //重置搜索数据
  clearSearchValue() {
    this.value = {};
    for (const key in this.$refs) {
      if (key.indexOf('searchCom') >= 0 && (this.$refs[key] as any).clear) {
        (this.$refs[key] as any).clear()
      }
    }
    this.value.dateType = 1;
    this.value.includeSkuType = 1;
  }
  resert() {
    this.clearSearchValue();
    this.radio = ''
    this.radio2 = ''
    this.page.pageNo = 1;
    this.getList();
  }
  //搜索
  search() {
    this.page.pageNo = 1;
    if (this.barCode) {
      this.getListByBarCode();
    } else {
      this.getList();
    }
  }
  //查看超时订单
  searchTimeOut() {
    this.page.pageNo = 1;
    this.getTimeOutList();
  }
  //合并操作
  mergeHandle(data: Array<any>) {
    if (this.$refs.mergeModel) {
      (this.$refs.mergeModel as any).setShow(true);
      (this.$refs.mergeModel as any).setData(data);
    }
  }
  //拆单
  splitHandle(row: any) {
    if (this.$refs.splitModel) {
      (this.$refs.splitModel as any).setShow(true);
      (this.$refs.splitModel as any).setData((this as any).$lodash.cloneDeep(row));
    }
  }
  addOrder() {
    (this.$refs.addOrder as any).setShow(true)
  }
  smtOrder() {
    let data: Array<any> = (this.$refs.orderTable as any).getSelectData();
    if (data.length == 0) {
      this.$message('请选择订单！');
      return
    }
    let ids: Array<any> = [];
    let msg = '';
    let smtMst = '';
    for (const item of data) {
      if (item.isSubmitted == 1) {
        if (smtMst) {
          smtMst = smtMst + ',' + item.id
        } else {
          smtMst = item.id
        }
      }
      if (!item.pays && item.pays.length == 0) {
        if (msg) {
          msg = msg + ',' + item.id
        } else {
          msg = item.id
        }
      }
      ids.push(item.id)
    }
    if (smtMst) {
      this.$message({
        message: '订单“' + smtMst + '”已审核，不能重复操作！'
      })
      return
    }
    if (msg) {
      this.$message({
        message: '订单“' + msg + '”未付款，不能审核！'
      })
      return
    }
    this.load = true;
    smt({
      ids: ids
    }).then((res: any) => {
      this.load = false;
      (this as any).$message({
        message: res.msg ? res.msg : '订单审核成功！',
        type: 'success'
      });
      this.getList();
    })
  }

  //智能审核
  autoAudit() {
    (this.$refs as any).autoAudit.setShow(true);
  }
  //提交智能审核
  handleAutoAudit(v) {
    autoAudit(v).then((res: any) => {
      (this as any).$message({
        message: '提交成功',
        type: 'success'
      });
      //本地缓存
      localStorage.setItem('autoAudit', JSON.stringify(v));
    })
  }


  reSmt() {
    let data: Array<any> = (this.$refs.orderTable as any).getSelectData();
    if (data.length == 0) {
      this.$message('请选择订单！');
      return
    }
    let ids: Array<any> = [];
    let smtMst: string = '';
    for (const item of data) {
      if (item.isSubmitted == 0) {
        if (smtMst) {
          smtMst = smtMst + ',' + item.id
        } else {
          smtMst = item.id
        }
      }
      ids.push(item.id)
    }
    if (smtMst) {
      this.$message({
        message: '订单“' + smtMst + '”未审核，不能进行此操作！'
      })
      return
    }
    this.load = true;
    unSmt({
      ids: ids
    }).then((res: any) => {
      this.load = false;
      (this as any).$message({
        message: res.msg ? res.msg : '订单取消审核成功！',
        type: 'success'
      });
      this.getList();
    })
  }
  getProvince() {
    this.provinceOptions = [];
    getProvince({
      pid: '0'
    }).then((res: any) => {
      if (res.data) {
        for (const item of res.data) {
          this.provinceOptions.push({
            label: item.extName,
            value: item.id
          })
        }
      }
    })
  }

  //组件返回事件
  onChange(v: any, code: string) {
    this.value[code] = v;
  }
  parameChange(parames: any) {
    for (const key in parames) {
      if (parames[key]) {
        if (this.value[key]) {
          this.value[key] = parames[key].split(',')
        } else {
          Vue.set(this.value, key, parames[key].split(','));
        }
      } else {
        delete this.value[key]
      }
    }
  }
  parameChangeBase(parames: any, n1: string, n2: string) {
    for (const key in parames) {
      if (parames[key]) {
        this.value[n1] = key;
        this.value[n2] = parames[key].split(',');
      } else {
        this.value[n1] = '';
        this.value[n2] = [];
      }
    }
  }
  parameChangeInfo(parames: any, n1: string, n2: string) {
    for (const key in parames) {
      if (parames[key]) {
        this.value[n1] = key;
        this.value[n2] = parames[key];
      } else {
        this.value[n1] = '';
        this.value[n2] = '';
      }
    }
  }
  onChangeSmt(v: any) {
    if (v == 1) {
      this.value.submitStatus = true
    } else if (v == 0) {
      this.value.submitStatus = false
    }
  }
  colChange(v: any) {
    if (v == 1) {
      this.value.isCod = false
    } else if (v == 2) {
      this.value.isCod = true
    } else {
      this.value.isCod = null
    }
  }
  payChange(v: any) {
    if (v == 1) {
      this.value.isPay = false
    } else if (v == 2) {
      this.value.isPay = true
    } else {
      this.value.isPay = null
    }
  }
  onChangeTime(v: Array<any>) {
    this.value.dateBegin = v[0];
    this.value.dateEnd = v[1];
  }
  //获取订单列表数据
  getList() {
    let data: any = (this as any).$lodash.cloneDeep(this.value);
    let params: any = {};
    if (data.includeLabels) {
      data.includeLabels = data.includeLabels.split(',');
    }
    if (data.excludeLabels) {
      data.excludeLabels = data.excludeLabels.split(',');
    }
    data.businessType = 'B2B'
    params.pageNo = this.page.pageNo;
    params.pageSize = this.page.pageSize;
    this.load = true;
    query(params, data).then((res: any) => {
      this.data = res.data.records;
      this.updateQuestion();//更新异常记录的说明信息
      this.page.pageNo = res.data.current;
      this.page.total = res.data.total;
      this.load = false;
      this.handleTimeOutData();
      this.$forceUpdate();
    }).catch((err: any) => {
      this.load = false;
    })
  }
  //按条码搜索
  async getListByBarCode() {
    if (!this.barCode) return;
    this.load = true;
    const res = await queryByBarCode({ businessType: 'B2B', barCode: this.barCode, pageNo: 1, pageSize: 10 })
    this.load = false;
    this.data = res.data.records;
    this.updateQuestion();//更新异常记录的说明信息
    this.page.pageNo = res.data.current;
    this.page.total = res.data.total;
  }

  //获得超时订单
  getTimeOutList() {
    let data: any = {};
    let params: any = {};
    //data.businessType = 'B2B'
    params.state = 1;
    params.pageNo = this.page.pageNo;
    params.pageSize = this.page.pageSize;
    this.load = true;
    queryTimeOut(params, data).then((res: any) => {
      if (res.data === undefined)
        this.data = [];//res.data.records;
      else
        this.data = res.data.records;
      this.updateQuestion();//更新异常记录的说明信息
      this.page.pageNo = res.data.current;
      this.page.total = res.data.total;
      this.load = false;
      this.handleTimeOutData();
      this.$forceUpdate();
    }).catch((err: any) => {
      this.load = false;
    })
  }
  //获取订单异常并提示
  getQuesttion() {
    let params: any = {};
    params.pageNo = 1;
    params.pageSize = 200;
    let data = {
      statusList: ["Question"],
      businessType: "B2B"
    }
    this.load = true;
    query(params, data).then((res: any) => {
      if (res.data.total > 0) {
        this.$notify.error({
          title: '提示',
          message: '有' + res.data.total + '条订单出现异常，请及时查看！',
          position: 'bottom-right'
        });
      }
    }).catch((err: any) => {
      this.load = false;
    })
  }
  //订单操作成功刷新页面
  handleSuccess() {
    this.page.pageNo = 1;
    this.clearSearchValue();
    this.getList();
  }
  //订单详情
  detail(row: any) {
    let data = (this as any).$lodash.cloneDeep(row);
    (this.$refs.addOrder as any).setDetail(data);
    (this.$refs.addOrder as any).setShow(true);
  }

  handleSizeChange(v: number) {
    this.page.pageSize = v;
    this.getList();
  }
  handleCurrentChange(v: number) {
    this.page.pageNo = v;
    this.getList();
  }
  //取消订单
  cancelOrder() {
    let condi = ['WaitPay', 'Delivering', 'Question', 'WaitOuterSent', 'WaitConfirm', 'WaitFConfirm'];
    let data: Array<any> = (this.$refs.orderTable as any).getSelectData();
    if (data.length == 0) {
      this.$message('请选择订单！');
      return
    }
    let ids: Array<any> = [];
    let msgIds = '';
    for (const item of data) {
      if (condi.indexOf(item.status) >= 0) {
        ids.push(item.id)
      } else {
        if (msgIds) {
          msgIds = msgIds + ',' + item.id
        } else {
          msgIds = item.id
        }
      }
    }
    if (msgIds) {
      this.$message({
        message: '订单“' + msgIds + '”不满足取消条件！'
      })
      return
    }
    (this.$refs.cancelOrderModel as any).setShow(true);
    (this.$refs.cancelOrderModel as any).setData(ids);
  }
  //反取消订单
  reCancelOrder() {
    let data: Array<any> = (this.$refs.orderTable as any).getSelectData();
    if (data.length == 0) {
      this.$message('请选择订单！');
      return
    }
    let ids: Array<any> = [];
    let msgIds = '';
    for (const item of data) {
      if (item.status == 'Cancelled') {
        ids.push(item.id)
      } else {
        if (msgIds) {
          msgIds = msgIds + ',' + item.id
        } else {
          msgIds = item.id
        }
      }
    }
    if (msgIds) {
      this.$message({
        message: '订单“' + msgIds + '”订单未取消，不能执行此操作！'
      })
      return
    }
    this.load = true;
    unCancel({ idList: ids }).then((res: any) => {
      this.load = false;
      this.$message({
        message: res.msg ? res.msg : '订单反取消成功！',
        type: 'success'
      })
      this.handleSuccess();
    }).catch(() => {
      this.load = false
    })
  }

  //同步店铺订单
  loadOrder() {
    (this.$refs.loadOrder as any).setShow(true);
  }

  //获得订单超时设置
  getOrderTimeOutList() {
    this.load = true;
    queryOrderTimeConfig({ pageSize: 20, pageNum: 1 }).then(res => {
      if (res.code === 200) {
        this.orderTimeConfigOptions = res.rows

        const tv = Number(this.orderTimeConfigOptions[0].timeout as number);
        (this.$refs.orderTable as any).setOrderTimeoutVal(tv);
      }
    })
  }

  //处理超时数据
  handleTimeOutData() {
    if (this.orderTimeConfigOptions.length == 0) return;
    //遍历this.data
    for (let i = 0; i < this.data.length; i++) {
      //if (!this.data[i].orderTimeout) continue;
      if (this.data[i].isSubmitted === 1) {
        this.data[i].orderTimeout = '';
        continue;
      }

      const to = this.data[i].orderTimeout;
      const cr = this.data[i].createTime;

      //this.orderTimeConfigOptions[0].timeout的小时数值换成秒钟
      let timeout: number = Number(this.orderTimeConfigOptions[0].timeout as number);
      let timeoutSec = timeout * 60;

      //orderTimeout属性YYYY-MM-DD HH:mm:ss和当前时间比较，返回相差多少小时多少分钟，如：超时2小时23分
      let time = this.data[i].orderTimeout.split(' ');
      let createTime = this.data[i].createTime;
      let date = time[0];
      let time1 = time[1];
      let date1 = date.split('-');
      let time2 = time1.split(':');
      let date2 = new Date();
      date2.setFullYear(parseInt(date1[0]));
      date2.setMonth(parseInt(date1[1]) - 1);
      date2.setDate(parseInt(date1[2]));
      date2.setHours(parseInt(time2[0]));
      date2.setMinutes(parseInt(time2[1]));
      date2.setSeconds(parseInt(time2[2]));
      let diff = date2.getTime() - new Date().getTime(); //new Date(createTime).getTime();

      //计算秒
      let diffSec = Math.floor(Math.abs((diff / 1000)));
      //计算分钟
      let diffMin = Math.floor(Math.abs((diff / 1000 / 60)));
      //计算小时
      let diffHour = Math.floor(Math.abs((diff / 1000 / 60 / 60)));
      //this.data[i].orderTimeout = `${diffSec},${timeoutSec}`;
      if (diffSec > timeoutSec) {
        this.data[i].isOrderTimeout = true;
      } else {
        this.data[i].orderTimeout = "未超时";// + ',' + to + ',' + cr + ',' + diffSec + ',' + timeoutSec;
        continue;
      }
      console.info(diffSec, diffMin, diffHour, this.data[i].createTime, this.data[i].orderTimeout, timeoutSec, timeout);
      if (diffSec < 60 && diffSec > 0) {
        this.data[i].orderTimeout = "超时" + Math.abs(Math.round(diffSec)) + "秒";
        continue;
      }
      if (diffMin < 60) {
        this.data[i].orderTimeout = "超时" + Math.abs(Math.round(diffMin)) + "分";// + ',' + to + ',' + cr + ',' + diffSec + ',' + timeoutSec;
        continue;
      }
      if (diffHour > 0) {
        //diffHour保留两位小数
        let out = Math.abs(Math.round(diffHour * 100)) / 100;
        //计算分钟，取整
        let outMin = Math.abs(Math.round(diff / 1000 / 60)) % 60;
        //out取整
        out = Math.floor(out);

        this.data[i].orderTimeout = "超时" + out + "小时" + outMin + "分";
        continue;
      }
    }
    this.$forceUpdate();
  }

  //提示超时订单
  tipOrderTimeOut() {
    tipOrderTimeOut({ pageSize: 20, pageNum: 1 }).then(res => {
      if (res.code === 200) {
        if (res.total === 0) return;
        this.$notify.error({
          title: '提示',
          message: '有' + res.total + '条订单处理超时，请及时查看！',
          position: 'bottom-right'
        });
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.order {
  width: 100%;
  height: 100%;
  display: flex;
  overflow-y: hidden;

  .order-left {
    width: 260px;
    height: 100%;
    flex-shrink: 0;
    background-color: #f0f0f0;
    border-right: solid 1px #CCC;
    box-sizing: border-box;
    padding: 4px 4px 0;
    position: relative;

    .my-collapse {
      padding: 0 4px;
      background: #FFF;
    }

    .searchHandle {
      display: flex;
      justify-content: center;
      width: 100%;
      box-sizing: border-box;
      padding: 8px;
      background-color: #f0f0f0;
    }

    .box01 {
      width: 100%;
      padding-bottom: 8px;
    }
  }

  .filter-box {
    width: calc(100% - 8px);
    background-color: #FFF;
    box-sizing: border-box;
    padding: 8px;
    border: solid 1px #EEE;

    .filter-row:last-child {
      padding: 0;
    }
  }

  .order-right {
    width: calc(100% - 260px);
    box-sizing: border-box;
    padding-left: 8px;
    height: 100%;
    min-width: 900px;
    overflow-x: auto;

    .tool {
      width: 100%;
    }

    .table {
      width: 100%;
      height: calc(100% - 40px);

      .order-table {
        width: 100%;
        height: calc(100% - 48px);
      }

      .page {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        padding: 8px;
        box-sizing: border-box;
      }
    }
  }

  .el-icon-info {
    font-size: 16px;
    margin-left: 4px;
  }
}

// .order-label{
//   font-size: 12px;
// }
.orderSelect {
  width: 100%;
  margin-bottom: 4px;
}

.order-time {
  width: 100%;
  display: flex;
  align-items: center;
  padding-bottom: 4px;
}

.ques-box {
  .questtion-top {
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    background-color: #EEE;
    cursor: pointer;

    .quest-title {
      height: 30px;
      font-size: 12px;
      display: flex;
      align-items: center;
    }

    .el-icon-setting {
      padding-right: 8px;
      color: #2d99f7;
      margin-left: 4px;
    }

    i {
      font-size: 16px;
      cursor: pointer;
    }
  }

  .ques-list {
    overflow: hidden;
    padding-left: 16px;
  }
}
</style>

<style lang="scss">
.order-left {
  .el-collapse-item__content {
    padding-bottom: 0;
  }

  .el-collapse-item__header {
    font-weight: 700 !important;
  }
}

.deliveryHours-input {
  width: 80px;
  flex-shrink: 0;
  padding: 0;

  .el-input__inner {
    padding: 0 !important;
    text-align: center;
  }
}

.search-content {
  height: calc(100% - 44px);

  div.el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__bar {
    right: 0px;
  }
}

.labels-width-btn {
  margin-bottom: 8px;

  .el-input-group__append {
    background-color: #fff !important;
    width: 30px !important;
    padding: 0 10px;

    .el-icon-more {
      font-size: 16px;
    }
  }
}
</style>