<template>
  <div class="SecondPick" data-key="TWO_SCAN">
    <!-- loading -->
    <Spin
      v-show="isLoading"
      id="second-pick-loading"
      fix
      size="large"
    >
      <div class="loading-wrap">
        <Icon
          type="ios-loading"
          size="24"
          class="demo-spin-icon-load"
        />
        <span class="loading-text">{{ loadMsg }}</span>
      </div>
    </Spin>
    <!-- 未分拣的拣货单管理 -->
    <!-- 打印报错信息 -->
    <printHtml ref="printInfo" />
    <navbar
      ref="navbar"
      :input-config="inputConfig"
      :button-config="buttonConfig"
      :print-type="printType"
      :default-config="defaultConfig"
      :enable-config="enableConfig"
      :unpicked-orders="unpickedOrders"
      :doc-url="docUrl"
      @on-common-handle="propsHandle"
      @on-enter="inputEnter"
      @on-button-click="onButtonClick"
    >
      <p
        v-if="lastSaveTime"
        slot="middle"
        class="save-time"
      >
        <Icon
          style="font-size: 12px;"
          type="md-checkmark-circle-outline"
        /><span>最新保存: {{ lastSaveTime }}</span>
      </p>
    </navbar>

    <layout v-if="basketBox.length > 0">
      <!-- 左侧订单信息 -->
      <div
        slot="left"
        class="overflow left-panel"
      >
        <LeftPanel
          :sku-info="currentSku"
          :pick-info="pickInfo"
        />
      </div>
      <!-- 右侧篮子 -->
      <div
        slot="right"
        class="overflow right-panel"
        style="overflow-x:hidden"
      >
        <div
          class="Circle-basket-content"
          :style="circlegetBoxStyle"
        >
          <OrderBox
            v-for="(basketNo,index) in basketBox"
            :key="basketNo"
            :index="index"
            :size="percentSize"
            :is-all-picked="isAllPicked"
            :chuku="defaultConfig.chuku"
            :is-current="currentSku.basketNo == basketNo"
            :order-info="basketBoxData[basketNo]"
          />
        </div>
      </div>
    </layout>

    <CommonModal
      v-model="showPickedModal"
      title="已分拣汇总"
      :footer-hide="true"
      closable
      width="1000"
    >
      <PickedTable :rows="pickedTable" />
    </CommonModal>

    <!-- 专门播放蓝号 -->
    <video
      id="basket"
      style="display: none;"
    />
    <!-- 扫描声音播放 -->
    <video
      id="audio"
      style="display: none;"
    />
  </div>
</template>
<script>
  import qs from 'qs';
  import dayjs from 'dayjs';
  import CommonModal from '@yunque/component/modal/commonModal/index.vue';
  import PickedTable from '@yunque/component/customizedPage/components/secondPick/pickedTable';
  import navbar from './components/navbar.vue';
  import printHtml from './components/printHtml.vue';
  import layout from './components/layout.vue';
  import LeftPanel from './components/secondPick/leftPanel.vue';
  import OrderBox from './components/secondPick/orderBox.vue';

  const R3 = window.R3;
  const { network } = R3;
  export default {
    data() {
      return {
        inputConfig: [
          {
            label: '扫描单号',
            placeholder: '拣货单号',
            icon: 'ios-clock-outline-saoma',
            colname: 'pick_no',
            value: '',
            'element-id': 'pick-input'
          },
          {
            label: '扫描商品',
            placeholder: '商品sku/国标码/唯一码',
            icon: 'ios-clock-outline-saoma',
            colname: 'inputValue',
            value: '',
            'element-id': 'sku-input'
          }
        ],
        buttonConfig: [

          {
            description: '未分拣汇总',
            type: '1',
            displayType: 'fcdefault',
            show: true,
          },
          {
            description: '已分拣汇总',
            type: '2',
            displayType: 'fcdefault',
            show: true,
          },
          {
            description: '清空拣货记录',
            type: '3',
            displayType: 'fcdefault',
            show: true,
          }
        ],
        printType: 'jianhuodanconfing', // 支持多个菜单的打印配置（拣货单）
        defaultConfig: { // 打印设置的配置，用于回显的
          wuliudan: '', // 回显类型（物流单？ value 是选择类型）
          fahuo: '',
          chuku: undefined,
          clear: false,
          columns: '5'
        },
        columnsSize: 5, // 列数
        rowSize: 4, // 行数
        basketBox: [], // 蓝号
        basketBoxStyle: '', // 篮筐样式
        basketBoxData: {}, // 存储每个篮子的sku表格
        currentSku: {}, // 当前商品信息
        isLoading: false, // 是否显示loading
        percentSize: undefined, // 圆形进度条大小
        pickInfo: {}, // 拣货单信息
        collectTable: [], // 汇总数据
        lastSaveTime: undefined, // 最新保存时间
        currentInputDom: undefined, // 当前触发回车的输入框dom
        focusInputId: null,// 当前enter得输入框ID
        loadMsg: null,
        showPickedModal: false, // 是否显示已分拣弹框
        pickedTable: [], // 已分拣表格数据
        logisticsIds: [], // 所有的物流单号
        orderIds: [], // 所有的订单号
        pickedLogisticsIds: [], // 已分拣订单的物流单号
        pickedOrderIds: [], // 已分拣订单的订单号
        unpickedList: [], // 初始的未分拣订单列表
        unDeliveryList: [], // 未出库订单列表
        pickNoCache: '', // 缓存最后一次输入的扫描单号
        unpickedOrders: [], // 实时的未分拣订单id
        scanError: '', // 扫描失败声音
        scanOrder: '', // 扫描商品声音
        scanOk: '', // 扫描成功声音
        docUrl: 'https://burgeon.yuque.com/cgmq7t/gndrvn/sbgdfvv50ynlk11h?singleDoc#', // 文档
      // isAllPicked: false, // 是否全部分拣完成
      };
    },
    components: {
      navbar, layout, LeftPanel, OrderBox, printHtml, CommonModal, PickedTable
    },
    computed: {
      circlegetBoxStyle() {
        return this.basketBoxStyle;
      },

      // 是否允许用户设置配置
      enableConfig() {
        return this.basketBox.length === 0;
      },

      // 是否全部拣货完成
      isAllPicked() {
        return this.pickInfo.order_picking_progress === this.pickInfo.total_order_picking_progress;
      }
    },
    created() {
      this.getSystemConfig();
      this.getPrintSound();
    },
    methods: {
      // 子组件得回调方法
      propsHandle(param) {
        // const { handleType } = param || {};
        // console.log(param, 'propsHandle_001')
        this.hideLoading();
        this.inputFocus(this.focusInputId);
      },
      // 触发打印
      // 打印是走物流还是发货，是根据对应数据有木有传相应的key来判断的。所以这里要按需塞打印数据
      print(option) {
        const { isScanPickOrder, isOrderPicked, fromType = "" } = option;
        const data = {
          wuliu: {
            ids: [],
            callback: (orders) => {
              this.wuliuCallback(orders);
            }
          },
          fahuo: {
            ids: []
          },
          chuku: {
            callback: (errors, orders) => {
              this.outStockCallback(errors, orders);
            },
            ids: []
          },
        };

        // 物流单扫描单号直接打印
        if (this.defaultConfig.wuliudan === '1' && isScanPickOrder) {
          data.wuliu.ids = this.logisticsIds;
        }
        //  物流单全部扫描完成打印
        if (this.defaultConfig.wuliudan === '2' && this.isAllPicked) {
          data.wuliu.ids = this.logisticsIds;
        }
        // 物流单一单一打印
        if (this.defaultConfig.wuliudan === '3' && isOrderPicked) {
          this.pickedLogisticsIds = [this.currentSku.order_id];// 一单一打印，只打印当前匹配的订单
          data.wuliu.ids = this.pickedLogisticsIds;
        }

        // 发货单扫描单号直接打印
        if (this.defaultConfig.fahuo === '1' && isScanPickOrder) {
          data.fahuo.ids = this.orderIds;
        }
        // 发货单全部扫描完成打印
        if (this.defaultConfig.fahuo === '2' && this.isAllPicked) {
          data.fahuo.ids = this.orderIds;
        }
        // 发货单一单一打印
        if (this.defaultConfig.fahuo === '3' && isOrderPicked) {
          this.pickedOrderIds = [this.currentSku.order_id];// 一单一打印，只打印当前匹配的订单
          data.fahuo.ids = this.pickedOrderIds;
        }

        // 一单一出库
        if (isOrderPicked && this.defaultConfig.chuku === '2' && this.unDeliveryList.length > 0) {
          // this.unDeliveryList = [this.currentSku.order_id];// 一单一打印，只出库当前匹配的订单
          this.unDeliveryList.forEach(item => {
            if (item.orderId == this.currentSku.order_id) {
              data.chuku.ids = [item];
            }
          })
          // data.chuku.ids = this.unDeliveryList;
        }
        // 所有商品扫描完成自动出库
        if (this.isAllPicked && this.defaultConfig.chuku === '1' && this.unDeliveryList.length > 0) {
          data.chuku.ids = this.unDeliveryList;
        }
        // 日志
        const logObj = {
          LOG_ID: 2,
          LOG_OPERATOR: `PRINT_FROM_${fromType}`,
          LOG_INFO: {
            F_defaultConfig: this.defaultConfig,
            F_printData: data,
            F_option: option,
          },
        }
        this.$comUtils.globalSaveOperateLogFn(logObj);
        console.log('🚀 打印数据', data);
        /**
         * 如果是出库单得等到打印结束调用库存接口后，更新界面后再关闭loading
         * 不然会出现出库单打印流程未结束，继续扫描下一个商品，会异常
         * 打印重复或者部分没有更新出库状态
         * 问题工单：31045744
         */
        if (data.chuku.ids.length) {
          this.inputBlur(this.focusInputId);
          this.loadMsg = "打印出库中,请稍等...";
          this.isLoading = true;// 打印成功回调->更新库存接口成功后->更新当前界面状态后再关闭该loading
        }
        this.$refs.navbar.$refs.config.print(data);
        // 一单一打印需要清空之前的打印数据
        if (this.defaultConfig.wuliudan === '3') {
          this.pickedLogisticsIds = [];
        }
        if (this.defaultConfig.fahuo === '3') {
          this.pickedOrderIds = [];
        }
      },

      // 物流回调
      wuliuCallback(orders) {
        console.log('物流回调', orders);
        // 更新物流单号
        const idMap = {};
        const ids = orders.map(order => {
          // 记录订单号与订单信息的映射
          idMap[order.orderId] = order;
          return order.orderId;
        });

        Object.keys(this.basketBoxData).forEach(key => {
          const order = this.basketBoxData[key];
          if (ids.includes(order.order_id)) {
            this.basketBoxData[key] = {
              ...this.basketBoxData[key],
              logistics_number: idMap[order.order_id].logisticsNumber // 物流单号
            };
          }
        });
      },

      // 出库单回调
      async outStockCallback(errors = [], orders = []) {
        // 重新请求接口更新订单状态和sku表格信息
        const params = {
          pick_no: this.pickNoCache,
        };
        let logType = 'NORMAL';// 日志标记类型
        const res = await network.get(`/p/cs/secondary_sorting?${qs.stringify(params)}&hash=${new Date().getTime()}`);
        const resData = res.data || {};
        const { code, data } = resData || {};
        if (code === 0) {
          logType = 'SUCCESS';
          const orderList = data.every_order_of_pick_list; // 捡货单下所属的订单详细信息
          const unpickedList = data.summary_of_un_discounted_good_list; // 未捡货汇总
          const pickedList = data.summary_of_discounted_good_list.map(item => ({
            ...item,
            basketAndNum: `${item.basket_no}(${item.num})`
          })); // 已捡货汇总
          // 设置篮子信息
          this.setBasketBoxData(orderList, unpickedList, pickedList);
          // 获取分拣完且未出库的订单
          this.getUnOutOrder();
          // 提示弹框
          if (this.defaultConfig.chuku && this.isAllPicked) {
            // const pickedOrders = this.getNormalPickedOrder()
            const pickedOrders = []; // 分拣完成的单子
            const outStockOrders = []; // 出库完成的单子
            const errorOrders = []; // 出库失败的单子
            Object.keys(this.basketBoxData).forEach(basketNo => {
              const order = this.basketBoxData[basketNo];
              // 分拣完成的单子
              if (order.pickedNum === order.totalPick) {
                if (order.order_status !== 7 && order.order_status !== 8) {
                  pickedOrders.push(basketNo);
                }
              }
              // 出库失败的单子
              if (this.isUnusualOrder(order)) {
                let msg = '';
                if (order.order_status === 7) {
                  msg = '订单已取消';
                } else if (order.order_status === 8) {
                  msg = '订单已作废';
                } else if (order.is_intercept === 1) {
                  msg = '订单在拦截中';
                }
                errorOrders.push({
                  id: order.order_id,
                  message: msg
                });
              }
              if (order.order_status === 6 || order.order_status === 5) {
                outStockOrders.push(basketNo);
              }
            });
            console.log('🚀 ~ 统计订单', pickedOrders, outStockOrders, errorOrders);
            const baseTip = `分拣成功${pickedOrders.length}单，出库成功${outStockOrders.length}，出库失败${errorOrders.length}单`;
            if (errorOrders.length === 0) {
              this.$Modal.fcSuccess({
                title: '成功',
                content: baseTip,
                mask: true,
              });
              this.playAudio(this.scanOk);
            } else {
              const errorMap = {};
              errorOrders.forEach(item => {
                if (errorMap[item.message]) {
                  errorMap[item.message].push(item.id);
                } else {
                  errorMap[item.message] = [item.id];
                }
              });
              const errorTip = Object.keys(errorMap).reduce((arr, msg) => {
                arr.push(`失败原因：${msg}，失败单号：${errorMap[msg].join('，')}`);
                return arr;
              }, []).join('；');

              this.$Modal.fcError({
                title: '错误',
                content: `${baseTip}，${errorTip}`,
                mask: true,
              });
              this.playAudio(this.scanError);
            }
          }
          // 判断是否清空界面
          if (this.defaultConfig.chuku && this.defaultConfig.clear && this.isAllPicked) {
            this.inputConfig[0].value = '';
            this.clearOrderCache();
          }
        } else {
          logType = 'ERROR';
        }
        this.propsHandle({ handleType: 'UPDATE_END' });
        // 日志
        try {
          const logObj = {
            LOG_ID: 7,
            LOG_OPERATOR: `UPDATE_${logType}_${this.pickNoCache}`,
            LOG_INFO: {
              F_end_basketBoxData: this.basketBoxData,
              F_updateData: data,
            },
          }
          this.$comUtils.globalSaveOperateLogFn(logObj);
        } catch (error) {
          console.log(`log_error`, error);
        }
      },
      // 打开loading
      showLoading() {
        this.isLoading = true;
      },
      // 关闭loading
      hideLoading(type) {
        console.log(type, 'hideLoading_00001')
        this.isLoading = false;
      },
      // 点击顶部按钮
      onButtonClick(e) {
        if (e.type === '2') {
          // 打开已分拣汇总
          this.openPickedModal();
        } else if (e.type === '3') {
          // 清空拣货记录
          this.clearPickedRecord();
        }
      },
      // 清空拣货记录
      clearPickedRecord() {
        const params = {
          pick_no: this.pickNoCache,
          secondary_sorting_auto_ship: this.defaultConfig.chuku
        };

        // 清空已分拣汇总
        network.get(`/p/cs/secondary_sorting/clear?${qs.stringify(params)}`).then(res => {
          if (res.data.code === 0) {
            this.showLoading();
            this.clearOrderCache();
            this.scanPickOrder(this.pickNoCache).then(() => {
              this.$Message.success('清空成功');
            }).finally(() => {
              this.hideLoading();
            });
          }
        });
      },

      // 打开已分拣汇总
      openPickedModal() {
        this.showPickedModal = true;
      },

      // 请求系统参数配置
      getSystemConfig() {
        network.post('/p/cs/getSysParams').then(res => {
          if (res.data.code === 0) {
            let allParamsList = []
            res.data.data.forEach(item => {
              allParamsList=[...allParamsList,...item.sysParam]
            })
            // const data = res.data.data[1].sysParam.filter(item => ['secondary_sorting_auto_print_logistic', 'secondary_sorting_auto_print_delivery', 'secondary_sorting_auto_ship', 'auto_clear_when_submit', 'secondary_sorting_column_of_basket'].includes(item.paraName));
            allParamsList.forEach(item => {
              switch (item.paraName) {
              // 自动打印物流单
              case 'secondary_sorting_auto_print_logistic':
                this.defaultConfig.wuliudan = item.paraValue === '0' ? '' : item.paraValue;
                break;
              // 自动打印发货单
              case 'secondary_sorting_auto_print_delivery':
                this.defaultConfig.fahuo = item.paraValue === '0' ? '' : item.paraValue;
                break;
              // 自动出库
              case 'secondary_sorting_auto_ship':
                this.defaultConfig.chuku = item.paraValue === '0' ? '' : item.paraValue;
                break;
              // 提交后页面清空
              case 'auto_clear_when_submit':
                this.defaultConfig.clear = item.paraValue === 'False' ? false : true;
                break;
              // 二次分拣篮号展示列数
              case 'secondary_sorting_column_of_basket':
                this.defaultConfig.columns = item.paraValue;
                this.columnsSize = item.paraValue;
                break;
              }
            });
            console.log('🚀 ~  系统参数', this.defaultConfig);
          }
        });
      },

      // 设置圆形进度条大小
      setPercentSize(columnWidth) {
        this.percentSize = columnWidth * 0.77;
      },

      // 设置篮子大小
      setBoxSize() {
        const rightPanelDom = document.querySelector('.sider-right');
        const rowSize = Math.ceil(this.basketBox.length / this.columnsSize);
        if (rightPanelDom && rightPanelDom.offsetWidth > 0) {
          let width = rightPanelDom.offsetWidth;
          let height = rightPanelDom.offsetHeight;

          (width / height).toFixed(2);

          let columnsWidth = (width - (this.columnsSize * 20)) / this.columnsSize;
          this.size = columnsWidth * 0.7;
          let style = `
            grid-template-columns: repeat(${this.columnsSize}, ${columnsWidth}px);
            grid-template-rows: repeat(${rowSize},${columnsWidth}px);
            `;
          this.basketBoxStyle = style;
          this.setPercentSize(columnsWidth);
        } else {
          let style = `
            grid-template-columns: repeat(${this.columnsSize}, ${100 / (this.columnsSize * 2)}vw);
            grid-template-rows: repeat(${rowSize},${100 / (this.columnsSize * 2)}vw);
            `;
          this.basketBoxStyle = style;
        }
      },

      setStyle() {
        const rightPanelDom = document.querySelector('.sider-right');
        if (rightPanelDom && rightPanelDom.offsetWidth > 0) {
          this.setBoxSize();
        } else {
          setTimeout(() => {
            this.setBoxSize();
          }, 500);
        }
      },

      // 清除上一个拣货单的缓存
      clearOrderCache() {
        this.inputConfig[1].value = '';
        this.pickedLogisticsIds = [];
        this.pickedOrderIds = [];
        this.pickInfo = {};
        this.pickedTable = [];
        this.currentSku = {};
        this.basketBox = [];
        this.basketBoxData = {};
        this.collectTable = [];
        this.unpickedList = [];
        this.unpickedOrders = [];
        this.logisticsIds = [];
        this.orderIds = [];
        // this.interceptedOrders = []
        this.lastSaveTime = undefined;
        console.log('清空拣货单缓存');
      },

      inputEnter(e, colname) {
        const value = e.target.value;
        this.currentInputDom = e.target;
        this.focusInputId = e.target.id || null;
        this.loadMsg = null;
        // 输入框的回车事件
        if (colname === 'pick_no') {
          // 标记当前操作的是扫描单号输入框
          const dom = this.$refs.printInfo.$refs.input; // 因为未分拣汇总是从这个input拿值
          if (dom) {
            dom.value = value;
          }
          if (value) {
            this.pickNoCache = value;
          }
          this.currentInputDom.classList.add('is-using-input');

          // 清空上一单的缓存
          this.clearOrderCache();

          this.showLoading();
          // 扫描单号回车
          this.scanPickOrder();
        } else if (colname === 'inputValue') {
          // 移除标记
          const dom = document.querySelector('.is-using-input');
          if (dom) {
            dom.classList.remove('is-using-input');
          }
          if (this.basketBox.length === 0) {
            this.$Message.warning('请先扫描单号');
            return;
          }
          this.showLoading();
          // 扫描商品回车
          this.scanGood();
        }
      },

      initBox(list) {
        // 初始化模版
        this.basketBox = [];
        for (let i = 0; i < list.length; i++) {
          // 将蓝号添加到数组中
          const order = list[i];
          this.basketBox.push(order.basket_no);
        }
        this.setStyle();
      },

      // 绑定事件
      attachEvent(eventName, handler) {
        window.addEventListener(eventName, handler);
        this.$once('hook:beforeDestroy', () => {
          window.removeEventListener(eventName, handler);
        });
      },

      // 找到订单所在蓝号
      getBasketNo(orderId) {
        const basketNo = Object.keys(this.basketBoxData).find(key => this.basketBoxData[key].order_id === orderId);
        return basketNo;
      },

      // 更新当前捡货单信息
      updatePickInfo(data) {
        if (!data) {
          data = {};
        }
        this.pickInfo.order_picking_progress = data.order_picking_progress || 0; // 订单已拣货进度
        this.pickInfo.total_order_picking_progress = data.total_order_picking_progress || 0; // 总拣货进度
        this.pickInfo.product_picking_progress = data.product_picking_progress || 0; // 商品已分拣进度
        this.pickInfo.total_product_picking_progress = data.total_product_picking_progress || 0; // 总分拣进度
        this.pickInfo = { ...this.pickInfo };
      },

      // 扫描商品
      scanGood() {
        const reqPickNo = this.inputConfig[0].value;
        const params = {
          pick_no: reqPickNo,
          input_value: this.inputConfig[1].value
        };
        network.get(`/p/cs/secondary_sorting/scan?${qs.stringify(params)}`).then(res => {
          this.inputConfig[1].value = '';
          if (res.data.code === -1) {
            this.playAudio(this.scanError);
            this.hideLoading();
            return;
          }
          if (res.data.code === 0) {
            const data = res.data.data;
            // // 为了让取消订单和正常订单走相同逻辑，需要造一个取消状态的结果(因为后端给的值不全)
            // if (res.data.code == 150003) {
            //   const result = res.data.message.match(/\[(\d+)\]/)
            //   if (result) {
            //     const orderId = result[1]
            //     // 查找当前订单所在蓝号
            //     const no = this.getBasketNo(Number(orderId))
            //     const cancelOrder = this.basketBoxData[no]
            //     const cancelSku = data.sku
            //     // 找到当前sku在被取消订单里的数据
            //     const sku = cancelOrder.rows.find(item => item.sku === cancelSku)
            //     if (sku) {
            //       const pickedNum = Math.min(cancelOrder.pickedNum + 1, cancelOrder.totalPick)
            //       // 因为接口里返的数据很多是null，需要用老数据还原下信息
            //       data = {
            //         basket_no: Number(no), // 篮号
            //         order_id: Number(orderId), // 订单号
            //         product_name: sku.product_name, // 商品名称
            //         product_code: res.data.data.product_code, // 款号
            //         normsdetailnames: res.data.data.normsdetailnames, // 规格
            //         pictureurl: res.data.data.pictureurl, // 图片
            //         gbcode: res.data.data.gbcode, // 国标码
            //         qrcode: res.data.data.qrcode, // 唯一码
            //         sku: sku.sku, // sku
            //         sellermemo: '', // 卖家备注
            //         insideremark: '', // 内部备注
            //         buyermessage: '', // 买家备注
            //         is_intercept: 0,
            //         order_status: 7,
            //         is_gif: sku.is_gif === '否' ? 0 : 1,
            //         already_pick_num: sku.already_pick_num, // sku的已分拣数量
            //         already_pick_num_of_current_order: pickedNum, // 订单的已拣货数量
            //         num: sku.num,
            //         order_item_id: sku.order_item_id,
            //         refundstatus: sku.refundstatus,
            //         order_picking_progress: res.data.data.order_picking_progress,
            //         total_order_picking_progress: res.data.data.total_order_picking_progress,
            //         product_picking_progress: res.data.data.product_picking_progress,
            //         total_product_picking_progress: res.data.data.total_product_picking_progress,
            //         cancel_order_list: res.data.data.cancel_order_list,
            //         void_order_list: res.data.data.void_order_list,
            //       }
            //       console.log("🚀 ~ 取消的数据", data)
            //     }
            //   }
            // }
            const basketNo = data.basket_no;
            this.currentSku = {
              basketNo, // 篮号
              order_id: data.order_id, // 订单号
              product_name: data.product_name, // 商品名称
              product_code: data.product_code, // 款号
              normsdetailnames: data.normsdetailnames, // 规格
              pictureurl: data.pictureurl, // 图片
              gbcode: data.gbcode, // 国标码
              qrcode: data.qrcode, // 唯一码
              sku: data.sku, // sku
              sellermemo: data.sellermemo, // 卖家备注
              insideremark: data.insideremark, // 内部备注
              buyermessage: data.buyermessage, // 买家备注
            };

            // 更新篮子拣货进度
            // 这样写为了更新视图
            this.basketBoxData[basketNo] = {
              ...this.basketBoxData[basketNo],
              pickedNum: data.already_pick_num_of_current_order,
              is_intercept: data.is_intercept
            };

            // 更新订单进度
            this.updatePickInfo(data);

            // 如果存在取消和作废的订单，更新订单状态
            this.updateException(data);

            // 更新已分拣汇总表格
            this.updateTotalTable(data);
            // 更新篮子悬停表格
            this.updateSkuTable(this.basketBoxData[basketNo].rows, basketNo, data);
            // 更新未分拣订单id列表
            this.updateUnpickedIds();
            // 先播放蓝号音效
            const realBasketNo = this.basketBox.findIndex(item => item === basketNo);
            this.playAudio(`/static/0-100-sound-mp3/${realBasketNo + 1}.mp3`, '#basket');
            // if (res.data.code == 150003) {
            //   this.playAudio(this.scanError)
            //   this.$Message.error(res.data.message);
            // }
            // 检测订单是否被拦截
            this.checkIntercept(data);

            // 订单如果完成拣货，就更新打印需要的数据
            if (data.already_pick_num_of_current_order === this.basketBoxData[basketNo].totalPick) {
              if (!this.isUnusualOrder(data)) {
                this.pickedLogisticsIds.push(this.basketBoxData[basketNo].order_id);
                this.pickedOrderIds.push(this.basketBoxData[basketNo].order_id);
              }

              // 获取分拣完且未出库的订单
              this.getUnOutOrder();
            }
            console.log('🚀 已拣货物流单', this.pickedLogisticsIds);
            console.log('🚀 已拣货订单id', this.pickedOrderIds);

            // 更新保存时间
            this.lastSaveTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
            const isNeedPrint = data.already_pick_num_of_current_order === this.basketBoxData[basketNo].totalPick;
            // 滚动到指定篮子
            this.scrollIntoView(basketNo);
            // 判断是否要打印
            this.shouldPrint({
              isScanPickOrder: false,
              isOrderPicked: isNeedPrint,
              fromType: `SCAN_GOOD${reqPickNo}`,
              goodsResData: data,// 接口返回的数据
            });
            // 如果需要打印
            if (!isNeedPrint) {
              this.hideLoading();
            }
            // 清空拣货单号输入框
            this.clearPickInput();
            // 提示弹框
            // 不出库，且全部分拣完时
            if (this.defaultConfig.chuku === undefined && this.pickInfo.total_order_picking_progress !== 0 && this.isAllPicked) {
              const tip = `分拣成功${this.pickInfo.total_order_picking_progress}单`;
              this.$Message.success(tip);
              this.playAudio(this.scanOk);
            }

            // 没配置自动出库，不走提交页面清空配置逻辑。只清楚拣货单
            if (this.defaultConfig.clear && this.defaultConfig.chuku === undefined && this.pickInfo.total_order_picking_progress !== 0 && this.isAllPicked) {
              this.inputConfig[0].value = '';
            }
          } else if (res.data.code == 150003 && res.data.message.includes('已被取消')) {
            this.playAudio(this.scanError);
            this.$Message.error(res.data.message);
            // 取消的订单只需要改篮子状态
            const result = res.data.message.match(/\[(.*?)\]/); // 匹配中括号里的内容
            console.log('匹配到取消订单号', result);
            if (result) {
              const orderIds = result[1].split(',');
              orderIds.forEach(orderId => {
                // 查找当前订单所在蓝号
                const no = this.getBasketNo(Number(orderId));
                const cancelOrder = this.basketBoxData[no];
                console.log('被取消的订单信息', orderId, no);
                if (cancelOrder) {
                  cancelOrder.order_status = 7; // 修改篮子状态
                  // 滚动到指定篮子
                  this.scrollIntoView(no);
                }
              });
              // 更新保存时间
              this.lastSaveTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
              this.hideLoading();
            }
          } else if (res.data.code == 150003) {
            const data = res.data.data;
            this.updateException(data);
            this.updatePickInfo(data);
            this.playAudio(this.scanError);
            this.$Message.error(res.data.message);

            // 更新未分拣订单id列表
            this.updateUnpickedIds();
            this.hideLoading();
          }
        }).catch((e) => {
          this.hideLoading();
          console.error(e);
        }).finally(() => {
          // this.hideLoading();
        });
      },

      // 检出拦截订单
      // 拦截的灰色文字，能正常扫，每扫一单都加提示音效（非成功音效），吐司提示“订单在拦截中！”，进度之类的正常带上拦截订单算。
      // 一单一出库，拦截单扫完时弹窗提示“订单在拦截中，不可出库！”注意需要支持敲击回车键让弹窗消失
      // 所有商品扫描完出库，弹窗提示
      // 二次分拣不出库，商品全部分拣完成时弹窗提示哪些订单在拦截
      checkIntercept(currentOrder) {
        if (currentOrder.is_intercept !== 1) {
          return;
        }

        // // 收集所有拦截的订单
        // this.interceptedOrders.push(order.order_id)
        // 更新当前订单的拦截状态
        const basketNo = currentOrder.basket_no;
        this.basketBoxData[basketNo] = {
          ...this.basketBoxData[basketNo],
          is_intercept: currentOrder.is_intercept
        };

        // 一单一出库，拦截单扫完时弹窗提示
        const isPicked = currentOrder.already_pick_num_of_current_order === this.basketBoxData[basketNo].totalPick;
        if (this.defaultConfig.chuku === '2' && isPicked) {
          this.$Modal.fcWarning({
            title: '警告',
            content: '订单在拦截中，不可出库！',
            className: 'chuku-error',
            mask: true,
          });
        } else {
          this.$Message.warning('订单在拦截中！');
        }
        this.playAudio(this.scanError);
      },


      // 清空拣货单号输入框
      clearPickInput() {
        // 满足条件: 1.总进度不能是0(例如正好一个订单，且只有一个已出库的商品) 2.全部拣货完
        if (this.pickInfo.total_order_picking_progress !== 0 && this.isAllPicked) {
          this.inputConfig[0].value = '';
          this.inputFocus("pick-input");
        }
      },
      //输入框获取焦点
      inputFocus(id) {
        try {
          this.$nextTick(()=> {
            const elem = document.getElementById(id);
            if (elem) elem.focus();
          })
        } catch (error) {
          console.log(`focus-error`, error)
        }
      },
      inputBlur(id) {
        try {
          this.$nextTick(()=> {
            const elem = document.getElementById(id);
            if (elem) elem.blur();
          })
        } catch (error) {
          console.log(`blur-error`, error)
        }
      },
      // 更新已分拣汇总表格
      updateTotalTable(data, pickedList) {
        // pickedList 有值说明是在扫拣货单
        // 排除取消，作废的
        if (pickedList) {
          // 扫拣货单时
          const item = this.basketBoxData[data.basket_no];
          if (item.order_status === 7 || item.order_status === 8) {
            return;
          }
        } else {
          // 扫商品时
          // eslint-disable-next-line no-lonely-if
          if (data.order_status === 7 || data.order_status === 8) {
            return;
          }
        }
        const sku = this.pickedTable.find(row => row.sku === data.sku);
        if (sku) {
          // 更新数量
          sku.num += data.num ? data.num : 1;
          sku.qrcode += data.qrcode ? `,${data.qrcode}`:'';
          if (sku.baskets[data.basket_no]) {
            sku.baskets[data.basket_no] += data.num ? data.num : 1;
          } else {
            sku.baskets[data.basket_no] = data.num ? data.num : 1;
          }
          if (!sku.orderIds.includes(data.order_id)) {
            sku.orderIds.push(data.order_id);
          }
          // 更新蓝号（数量）
          sku.basketAndNum = Object.keys(sku.baskets).map(basketNo => `${sku.baskets[basketNo]}(${basketNo})`).join(',');
          // 更新订单
          sku.order_id = sku.orderIds.join(',');
          this.pickedTable = [...this.pickedTable]; // 强制更新视图
        } else {
          let order;
          if (pickedList) {
            // 扫拣货单时
            order = pickedList.find(row => row.sku === data.sku);
            this.pickedTable.push({
              ...data,
              num: order.num ? Number(order.num) : 1,
              storesite: order.storesite,
              basketAndNum: order.num ? `${Number(order.num)}(${data.basket_no})` : `1(${data.basket_no})`,
              orderIds: [data.order_id], // 记录关联订单
              baskets: {
                [data.basket_no]: Number(order.num) ? Number(order.num) : 1 // 记录关联蓝号和数量
              }
            });
          } else {
            // 扫商品时
            order = this.unpickedList.find(row => row.sku === data.sku);
            this.pickedTable.push({
              ...data,
              num: 1,
              storesite: order.storesite,
              basketAndNum: `1(${data.basket_no})`,
              orderIds: [data.order_id], // 记录关联订单
              baskets: {
                [data.basket_no]: 1 // 记录关联蓝号和数量
              }
            });
          }
        }
      },

      // 更新未分拣的订单id
      updateUnpickedIds() {
        const ids = [];
        Object.keys(this.basketBoxData).forEach(key => {
          const currentOrder = this.basketBoxData[key];
          if (currentOrder.pickedNum !== currentOrder.totalPick) {
            ids.push(currentOrder.order_id);
          }
        });
        this.unpickedOrders = ids;
      },

      // 更新异常订单状态
      updateException(data) {
        // code === -1是会出现data空
        if (!data) {
          return;
        }
        if (data.cancel_order_list && data.cancel_order_list.length > 0) {
          Object.keys(this.basketBoxData).forEach(key => {
            const currentOrder = this.basketBoxData[key];
            if (data.cancel_order_list.includes(currentOrder.order_id)) {
              // 更新明细
              this.basketBoxData[key].rows = this.basketBoxData[key].rows.map(row => ({
                ...row,
                order_status: '已取消'
              }));
              this.basketBoxData[key] = {
                ...currentOrder,
                order_status: 7 // 被取消
              };
            }
          });
        }
        if (data.void_order_list && data.void_order_list.length > 0) {
          Object.keys(this.basketBoxData).forEach(key => {
            const currentOrder = this.basketBoxData[key];
            if (data.void_order_list.includes(currentOrder.order_id)) {
              // 更新明细
              this.basketBoxData[key].rows = this.basketBoxData[key].rows.map(row => ({
                ...row,
                order_status: '已作废'
              }));
              this.basketBoxData[key] = {
                ...currentOrder,
                order_status: 8 // 被作废
              };
              console.log('作废--');
            }
          });
        }
        // 扫码单号时默认带出取消、作废、出库的，再次扫码商品时也要更新这几个状态
        if (data.already_ship_list && data.already_ship_list.length > 0) {
          Object.keys(this.basketBoxData).forEach(key => {
            const currentOrder = this.basketBoxData[key];
            if (data.already_ship_list.includes(currentOrder.order_id)) {
              // 更新明细
              this.basketBoxData[key].rows = this.basketBoxData[key].rows.map(row => ({
                ...row,
                order_status: '出库'
              }));
              this.basketBoxData[key] = {
                ...currentOrder,
                order_status: 5 // 出库
              };
              console.log('出库--');
            }
          });
        }
      },

      // 更新篮子里的商品表格
      updateSkuTable(rows, basketNo, data) {
        const row = rows.find(row => row.order_item_id === data.order_item_id);
        if (row.already_pick_num <= row.num) {
          row.already_pick_num++;
        }
        if(data.qrcode){
          if(row.qrcode){
            row.qrcode += `,${data.qrcode}`
          }else {
            row.qrcode += data.qrcode
          }
        }
        // eslint-disable-next-line no-unused-expressions
        row.is_intercept = data.is_intercept === 1 ? '是' : '否';
        row.order_status = this.getOrderStatus(this.basketBoxData[basketNo].order_status) || row.order_status;

        // 如果出现拦截，则整个明细都拦截
        if (data.is_intercept === 1) {
          rows.forEach(row => {
            row.is_intercept = '是';
          });
        }
        // 如果出现取消、作废，则整个明细都是取消、作废
        if (data.order_status === 7 || data.order_status === 8) {
          rows.forEach(item => {
            item.order_status = row.order_status;
          });
        }

        this.basketBoxData[basketNo].rows = [...this.basketBoxData[basketNo].rows]; // 强制绘制表格
      },

      // 篮子滚动到界面可视区
      scrollIntoView(basketNo) {
        const element = document.querySelector(`.box-${basketNo}`);
        element.scrollIntoView();
      },
      // 播放语音
      playAudio(url, id = '#audio') {
        const audio = document.querySelector(id);
        audio.src = url;
        audio.play();
      },

      // 获取打印音效
      getPrintSound() {
        const params = {
          range: 100,
          startindex: 0,
          table: 'T_OMSSOUNDSET',
          fkdrplist: {
            searchcols: ['TYPE_NAME', 'ID', 'SOUND_ID', 'URL']
          },
          isdroplistsearch: true,
        };
        network.post('/p/cs/list/query', params).then((res) => {
          res.data.rows.forEach(row => {
            if (row.TYPE_NAME.val == '扫描商品') {
              this.scanOrder = row.URL.val;
            } else if (row.TYPE_NAME.val == '失败') {
              this.scanError = row.URL.val;
            } else if (row.TYPE_NAME.val == '成功') {
              this.scanOk = row.URL.val;
            }
          });
        });
      },

      // 扫描拣货单
      scanPickOrder(pickNo) {
        // pickNo用来解决清空拣货记录会丢失拣货单号的问题
        const reqPickNo = this.inputConfig[0].value || pickNo || '';
        const params = {
          pick_no: reqPickNo,
        };
        return network.get(`/p/cs/secondary_sorting?${qs.stringify(params)}`).then(res => {
          if (res.data.code === 0) {
            this.playAudio(this.scanOrder);
            const data = res.data.data;
            const orderList = data.every_order_of_pick_list; // 捡货单下所属的订单详细信息
            const unpickedList = data.summary_of_un_discounted_good_list; // 未捡货汇总
            const pickedList = data.summary_of_discounted_good_list.map(item => ({
              ...item,
              basketAndNum: `${item.basket_no}(${item.num})`
            })); // 已捡货汇总
            this.unpickedList = unpickedList; // 未分拣

            this.lastSaveTime = data.last_scan_time;

            // 更新当前捡货单信息
            this.updatePickInfo(data);

            // 如果存在篮子
            if (orderList.length > 0) {
              this.initBox(orderList);

              // 设置篮子信息
              this.setBasketBoxData(orderList, unpickedList, pickedList);

              // 获取所有订单的物流单号和所有的订单号
              orderList.forEach(order => {
                if (this.isUnusualOrder(order)) {
                  return;
                }
                this.logisticsIds.push(order.order_id);
                this.orderIds.push(order.order_id);
                // 记录分拣完成的订单和物流
                if (order.total_need_pick_num === order.total_already_pick_num) {
                  this.pickedLogisticsIds.push(order.order_id);
                  this.pickedOrderIds.push(order.order_id);
                }
              });

              // 获取分拣完且未出库的订单
              this.getUnOutOrder();

              // 更新已拣货商品
              pickedList.forEach(sku => {
                this.updateTotalTable(sku, pickedList);
              });

              // 清空拣货单输入框
              this.clearPickInput();
              // 判断是否要打印
              this.shouldPrint({ isScanPickOrder: true, fromType: `SCAN_PICKNO_${reqPickNo}` });
            }

            // 更新未分拣订单id列表
            this.updateUnpickedIds();
            const logObj = {
              LOG_ID: 1,
              LOG_OPERATOR: `scanPickOrder_END${reqPickNo}`,
              LOG_INFO: {
                RESULT_DATA: data,
                F_orderList: orderList || [],
                F_pickInfo: this.pickInfo || {},
                F_basketBox: this.basketBox || [],
                F_basketBoxData: this.basketBoxData || {},
                F_logisticsIds: this.logisticsIds || [],
                F_orderIds: this.orderIds || [],
                F_pickedLogisticsIds: this.pickedLogisticsIds || [],
                F_pickedOrderIds: this.pickedOrderIds || [],
                F_unDeliveryList: this.unDeliveryList || [],
                F_unpickedOrders: this.unpickedOrders || [],
                F_pickedTable: this.pickedTable || [],// 已拣货商品
              },
            }
            this.$comUtils.globalSaveOperateLogFn(logObj);
            console.log('🚀 ~拣货单', data);
            console.log('🚀 所有物流单', this.logisticsIds);
            console.log('🚀 所有订单id', this.orderIds);
          } else {
            this.playAudio(this.scanError);
            // 更新未分拣订单id列表
            this.updateUnpickedIds();
            this.hideLoading();
          }
        }).catch((e) => {
          this.hideLoading();
          console.error(e);
        }).finally(() => {
          this.hideLoading();
        });
      },

      // // 获取所有正常的已分拣完成的订单
      // getNormalPickedOrder() {
      //   const list = []
      //   Object.keys(this.basketBoxData).forEach(basketNo => {
      //     const order = this.basketBoxData[basketNo]
      //     if (order.pickedNum === order.totalPick) {
      //       if (this.isUnusualOrder(order)) {
      //         return
      //       }
      //       list.push(basketNo)
      //     }
      //   })
      //   return list
      // },

      // // 获取所有正常的订单
      // getNormalOrders() {
      //   const list = []
      //   Object.keys(this.basketBoxData).forEach(basketNo => {
      //     const order = this.basketBoxData[basketNo]
      //     if (this.isUnusualOrder(order)) {
      //       return
      //     }
      //     list.push(basketNo)
      //   })
      //   return list
      // },

      // 判断是否是异常订单
      isUnusualOrder(order) {
        if (order.is_intercept === 1) { // 拦截
          return true;
        }
        if (order.order_status === 7) { // 取消
          return true;
        }
        if (order.order_status === 8) { // 作废
          return true;
        }
        return false;
      },

      // 清空进度
      shouldClearProgress() {
        // 清空拣货单输入框
        // 满足条件: 1.拣货单已出库 2.总进度不能是0(例如正好一个订单，且只有一个已出库的商品) 3.全部拣货完
        if (this.unDeliveryList.length === 0 && this.pickInfo.total_order_picking_progress !== 0 && this.isAllPicked) {
          this.inputConfig[0].value = '';
        }
      },

      // 获取分拣完且未出库的订单
      getUnOutOrder() {
        const data = [];
        Object.keys(this.basketBoxData).forEach(key => {
          const order = this.basketBoxData[key];
          // 状态6和5是已出库
          // order.pickedNum === order.totalPick说明是已拣货
          console.log(333,order)
          if (!(order.order_status === 6 || order.order_status === 5) && order.pickedNum === order.totalPick && !this.isUnusualOrder(order)) {
            // const skus = order.rows.map(item => ({
            //   for(let i = 0;i < item.num;i++){
            //     let obj = {

            //     }
            //   }
            //   itemId: item.order_item_id,
            //   sku: item.sku,
            //   qrcode: item.qrcode
            // }));
            let skus = [];
            order.rows.forEach(item => {
              for(let i = 0; i < item.num; i++){
                let obj = {
                  itemId: item.order_item_id,
                  sku: item.sku,
                  qrcode: item.qrcode.split(',')[i]?item.qrcode.split(',')[i]:''
                }
                skus.push(obj)
              }
            })
            console.log(99999,skus)

            const param = {
              orderId: order.order_id,
              shipperId: order.ship_id,
              shipperName: order.ship_name,
              logisticsNumber: order.logistics_number,
              operateType: 2,
              scanOutOfStockItemDTOList: skus
            };
            data.push(param);
          }
        });
        console.log('🚀 所有未出库数据', data);
        this.unDeliveryList = data;
      },

      // 判断是否要打印
      // isOrderPicked代表当前订单是否拣货完成
      shouldPrint(option = {}) {
        let needPrint = false;
        const { isScanPickOrder, isOrderPicked, fromType } = option || {};
        // 如果配置里有"扫描单后直接打印"的情况。就触发打印
        if (isScanPickOrder && (this.defaultConfig.wuliudan === '1' || this.defaultConfig.fahuo === '1')) {
          needPrint = true;
          console.log('满足扫描单后直接打印');
        }

        // 一单一打印
        if (isOrderPicked && this.defaultConfig.wuliudan === '3' && this.pickedLogisticsIds.length > 0) {
          needPrint = true;
          console.log('满足物流一单一打印');
        }
        if (isOrderPicked && this.defaultConfig.fahuo === '3' && this.pickedOrderIds.length > 0) {
          needPrint = true;
          console.log('满足发货一单一打印');
        }

        // 全部扫描完打印
        if (this.defaultConfig.wuliudan === '2' || this.defaultConfig.fahuo === '2') {
          if (this.isAllPicked) {
            needPrint = true;
            console.log('满足全部扫描完打印');
          }
        }


        // 一单一出库
        if (isOrderPicked && this.defaultConfig.chuku === '2' && this.unDeliveryList.length > 0) {
          needPrint = true;
          console.log('满足一单一出库');
        }
        // 所有商品扫描完成自动出库
        if (this.defaultConfig.chuku === '1' && this.unDeliveryList.length > 0) {
          if (this.isAllPicked) {
            needPrint = true;
            console.log('满足全部扫描完出库');
          }
        }
        
        if (needPrint) {
          this.print(option);
        } else {
          console.log('不需要打印');
          // 触发打印时是打印逻辑负责获取焦点。不触发打印时，需要手动获取焦点
          if (isScanPickOrder) {
            this.inputFocus("sku-input");
          }
          this.hideLoading();
        }
      },

      // 获取订单状态。这里状态是在订单管理扒接口找的，有的状态可能用不到
      getOrderStatus(code) {
        switch (code) {
        case 50:
          return '待分配';
        case 1:
          return '未确认';
        case 2:
          return '缺货';
        case 3:
          return '已审核';
        case 21:
          return '传wms中';
        case 4:
          return '配货中';
        case 5:
          return '仓库发货';
        case 6:
          return '平台发货';
        case 7:
          return '已取消';
        case 8:
          return '系统作废';
        default:
          return '';
        }
      },

      // 格式化表格数据
      formatTable(rows, orderStatus) {
        const data = rows.map(row => ({
          ...row,
          is_gif: row.is_gif === 1 ? '是' : '否',
          is_intercept: row.is_intercept === 1 ? '是' : '否',
          order_status: this.getOrderStatus(orderStatus)
        }));
        return data;
      },

      // 判断订单是否被拦截
      isInterceptOrder(rows) {
        const res = rows.some(row => row.is_intercept === 1);
        return res ? 1 : 0;
      },

      // 初始化每个篮子的数据
      setBasketBoxData(orderList) {
        orderList.forEach((order, index) => {
          const basketNo = order.basket_no;
          // 格式化表格数据
          order.every_order_item_of_pick_order_list.forEach(itemOne => {
            itemOne.qrcode = itemOne.qrcode?itemOne.qrcode:''
          })
          const tableData = this.formatTable(order.every_order_item_of_pick_order_list, order.order_status);
          const isIntercepted = this.isInterceptOrder(order.every_order_item_of_pick_order_list); // 订单是否被拦截
          // 设置篮子数据
          const data = {
            pickedNum: order.total_already_pick_num, // 篮子拣货进度
            totalPick: order.total_need_pick_num, // 篮子总进度
            order_id: order.order_id, // 订单号
            tid: order.tid, // 平台单号
            buyermessage: order.buyermessage, // 买家备注
            sellermemo: order.sellermemo, // 卖家备注
            logistics_number: order.logistics_number, // 物流单号
            ship_name: order.ship_name, // 物流公司
            order_status: order.order_status, // 订单状态
            rows: tableData, // 表格数据
            is_intercept: isIntercepted,
            basket_no: basketNo,
          };
          this.$set(this.basketBoxData, basketNo, data);
          order.is_intercept = isIntercepted;
        });
        console.log('🚀 ~ 篮子数据', this.basketBoxData, this.basketBox);
      },

      // 按回车关闭出库拦截订单报错
      closeChukuModal(e) {
        if (e.keyCode === 13) {
          const dom = document.querySelector('.chuku-error .ark-btn');
          if (dom) {
            dom.click();
          }
        }
      }
    },
    mounted() {
      this.inputFocus("pick-input");
      // 窗口大小改变时，实时更新订单篮子大小
      this.attachEvent('resize', this.setStyle);
      // 按回车关闭出库拦截订单报错
      this.attachEvent('keydown', this.closeChukuModal);
    }
  };
</script>
<style lang="less" scoped>
.SecondPick {
  height: calc(100% - 80px);
  // height: 100%;
  margin: 0 -15px;

  .Circle-basket-content {
    display: grid;
    /*  声明列的宽度  */
    justify-items: center;
    /*  声明行间距和列间距  */
    grid-gap: 20px;
  }
  .overflow {
    height: 100%;
    overflow: auto;
  }

  .save-time {
    display: flex;
    align-items: center;
    color: #666666;
    span {
      margin-left: 5px;
    }
  }
}

// loadingd动画
.loading-wrap {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#PICK_NO {
  display: none;
}
</style>
