<template>
  <el-container>
    <el-main class="nopadding">
      <!-- <input class="input" id="inputsmq" ref="inputRef" type="password" /> -->
      <input class="input" id="inputsmq" ref="scannerInput" type="text" @input="handleScannerInput" @focus="onFocus" @blur="blurfun" />
      <div class="pos">
          <el-row>
            <el-col :span='9' class="pos_order" id="order_list">
              <el-tabs style="padding-left:10px;">
                  <el-tab-pane label="购物单">
                    

                    <div class="card" v-for="(item, index) in listdata" :key="index">
                      <div class="top">
                        <div class="shop_name">{{ item.title }}</div>
                      </div>
                      <div class="main">
                        <div class="card_wrap" v-for="(cc, inner) in item.content" :key="inner">
                          <div class="card_item" right-width="65">
                            <div class="card_item_wrap">
                              <div class="select_box" @click="goodsSelectedHandle(cc.goods_id, cc.goods_sku_id)">
                               
                              </div>
                              <div class="img_wrap">
                                <img :src="cc.goods.cover" mode="aspectFill" />
                              </div>
                              <div class="info">
                                <div class="it">
                                  <div class="goods_title">
                                    {{ cc.goods.title }}
                                  </div>

                                  <div class="deleteicon">
                                    <div  class="delete" @click="goodsDeleteHandle(cc.goods_id, cc.goods_sku_id)">删除</div>
                                  </div>

                                  <!-- @click="skuChangeHandle(cc)" -->
                                  <div class="sku" v-if="cc.sku" >
                                    <div class="text">{{ cc.sku.sku }}</div>
                                  </div>
                                </div>
                                <div class="ib">
                                  <div class="pricebox">
                                    <div class="price">
                                      <div class="price_icon">¥</div>
                                      <div class="price_main din">
                                        {{ cc.formatBig }}
                                        <text class="mini">{{ cc.formatMini }}</text>
                                      </div>
                                    </div>

                                    <div class="price jfprice">
                                      <div class="price_icon">积分:</div>
                                      <div class="price_main din">
                                        {{ cc.goods.integral }}
                                      </div>
                                    </div>

                                  </div>
                                  <div class="num">
                                      <el-input-number :data-gid="cc.goods_id" :data-sid="cc.goods_sku_id"
                                      :data-cid="cc.cart_id" :min="1" @change="(e)=>stepMinusHandle(e, cc)" size="small" v-model="cc.num"></el-input-number>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>


                    <div class="total">
                      <small>数量:</small>{{ totalCount }}<small>金额:</small>￥{{ totalMoney }}
                      <small>所需积分:</small>{{ totaljifen }}
                      
                    </div>
                    <div class="total">
                      <small>需付:</small>￥{{Userprice }}
                      
                    </div>
                    <div class="pos_btn">
                      
                      <!-- <el-button size="large" type="primary" @click="chooseSerial" >连接扫码枪</el-button> -->

                      <el-button size="large" type="primary" @click="focusfun" >监听扫码枪识别</el-button>
                      <el-button size="large" type="danger" @click="delAllGoods()">清空购物单</el-button>
                      <el-button size="large" type="success" @click="checkOut()">结算</el-button>
                    </div>
                  </el-tab-pane> 
              </el-tabs>
            </el-col>
            <el-col :span="15">
                <el-header>
                  <div class="left-panel">
                    <el-input v-model="search.keyword" placeholder="关键词" style="width:150px; margin-right: 10px;" clearable />
                    <sc-select-tree v-model="search.category_id" :apiObj="$API.goods.category.list" :props="{label: 'title', value: 'id'}" style="width: 240px; margin-right: 10px;" />
                    <el-select v-model="search.status" placeholder="状态" clearable style="width: 100px;">
                      <el-option v-for="item in [{value: 0, title: '下架'}, {value: 1, title: '上架'}]" :key="item.value" :label="item.title" :value="item.value" />
                    </el-select>
                    <el-button-group style="margin-left: 10px;">
                      <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>

                      <el-button type="danger" icon="el-icon-plus" @click="add">添加产品</el-button>
                    </el-button-group>
                  </div>
                </el-header>
                
                <scTable tableName="member" ref="table" :apiObj="list.apiObj" :column="list.column" row-key="id" @selection-change="selectionChange" border stripe>
                  <el-table-column type="selection" width="50"></el-table-column>
                  <template #cover="scope">
                    <img :src="scope.row.cover" width="40" height="40" v-if="scope.row.cover" />
                  </template>
                  <template #status="scope">
                    <el-tag :type="scope.row.status == 1 ? 'success' : 'danger'">{{scope.row.status == 1 ? '上架' : '下架'}}</el-tag>
                  </template>
                  <el-table-column label="操作" fixed="right" align="center" width="140">
                    <template #default="scope">
                      <el-button-group>
                        <el-button type="primary" @click="addOrderList(scope.row, scope.$index)">加购</el-button>

                        <el-button type="primary" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                      </el-button-group>
                    </template>
                  </el-table-column>
                </scTable>

              </el-col>
          </el-row>
        </div>

        <!-- 弹窗选择规格 -->
        <el-dialog
          v-model="dialogVisible"
          title="选择规格"
          width="500"
          :before-close="handleClose"
        >
          <div>
            <div class="sku_card" v-for="(item, outer) in childgoods.spec_list" :key="outer">
              <div class="sku_card_title">{{ item.name }}</div>
              <div class="sku_card_main">
                <div :class="{
                    sku_card_item: true,
                    sku_card_item_active: item.value[inner] === item.selected,
                  }" v-for="(cc, inner) in item.value" :key="inner" @click="skuTapHandle(item, outer, cc)">
                  {{ cc }}
                </div>
              </div>
            </div>
          </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="addCartHandle()">
                确定
              </el-button>
            </div>
          </template>
        </el-dialog>


        <el-dialog
          v-model="dialogVisibletwo"
          title="支付订单"
          width="500"
          :before-close="handleClosetwo"
        >
          <div class="qrcodepup">
            <!-- v-model="qrcodeurl"  :value="qrcodeurl"  -->
            <qrcode ref="qrcodecomp" :value="qrcodeurl" v-model="qrcodeurl" ></qrcode>
            <div class="qrcodepup_foot">
              <svg data-v-5c5419a9="" width="137" height="21" viewBox="0 0 137 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path data-v-5c5419a9="" d="M17.9988 0H2.5712C1.15701 0 0 1.15701 0 2.5712V17.9988C0 19.413 1.15701 20.57 2.5712 20.57H17.9988C19.413 20.57 20.57 19.413 20.57 17.9988V2.5712C20.57 1.15701 19.413 0 17.9988 0ZM10.2851 15.8133C9.38512 15.8133 8.61368 15.6847 7.84232 15.4275C7.32807 15.6847 6.5567 16.3274 6.29954 16.456C5.78526 16.7132 5.91387 16.1989 5.91387 16.1989L6.17103 14.6562C4.62823 13.6276 3.72829 11.9563 3.72829 10.1565C3.72829 6.9424 6.68518 4.37109 10.285 4.37109C12.4706 4.37109 14.5275 5.39962 15.6847 6.81381L9.25654 9.77079C9.25654 9.77079 8.74226 10.0279 8.22801 9.64221L7.19948 8.87084C7.19948 8.87084 6.42812 8.22801 6.81379 9.25654L7.84232 11.5707C7.84232 11.5707 7.9709 12.2134 8.74226 11.8278C9.38512 11.5707 14.1419 8.6137 16.1989 7.45667C16.5846 8.22804 16.8417 9.12796 16.8417 10.0279C16.8417 13.1134 13.8848 15.8133 10.2851 15.8133Z" fill="#09BB07"></path><path data-v-5c5419a9="" d="M34.648 2.88H36.104V3.808H39.944V5.04H36.104V5.824H39.384V7.024H36.104V7.824H40.344V9.088H30.456V7.824H34.648V7.024H31.576V5.824H34.648V5.04H30.904V3.808H34.648V2.88ZM33.032 13.12V14.016H37.784V13.12H33.032ZM37.784 11.968V11.056H33.032V11.968H37.784ZM33.032 15.168V17.648H31.592V9.824H39.24V16.064C39.24 17.056 38.7333 17.552 37.72 17.552H36.392L36.04 16.208L37.288 16.288C37.6187 16.288 37.784 16.112 37.784 15.76V15.168H33.032ZM27.784 3.008C28.84 3.81867 29.7093 4.60267 30.392 5.36L29.352 6.416C28.7013 5.648 27.8213 4.85867 26.712 4.048L27.784 3.008ZM25.608 7.648H29.24V14.336C29.5067 14.08 29.9333 13.648 30.52 13.04L30.92 14.64C30.0027 15.5893 29.016 16.4373 27.96 17.184L27.384 15.808C27.6507 15.5733 27.784 15.2907 27.784 14.96V9.104H25.608V7.648ZM46.472 4.384H50.488V2.88H52.008V4.384H56.312V5.84H52.008V7.104H55.704V11.856H51.944C51.816 13.1893 51.5707 14.224 51.208 14.96C52.7333 15.7387 54.4773 16.176 56.44 16.272L56.072 17.728C53.896 17.5787 51.9867 17.0453 50.344 16.128C49.4907 16.9387 48.1467 17.472 46.312 17.728L45.656 16.352C47.16 16.224 48.2747 15.8613 49 15.264C48.1467 14.624 47.3573 13.8613 46.632 12.976L47.8 12.176C48.4187 12.944 49.1067 13.5947 49.864 14.128C50.1307 13.488 50.312 12.7307 50.408 11.856H46.92V7.104H50.488V5.84H46.472V4.384ZM54.28 10.496V8.448H52.008V10.496H54.28ZM50.488 10.496V8.448H48.344V10.496H50.488ZM43.336 9.264C42.9093 9.808 42.4507 10.3467 41.96 10.88L41.464 9.248C43.032 7.392 44.184 5.22667 44.92 2.752L46.36 3.424C45.9867 4.61867 45.4907 5.78133 44.872 6.912V17.68H43.336V9.264ZM60.616 8.688V11.136H64.296V8.688H60.616ZM60.536 12.544C60.344 14.56 59.752 16.224 58.76 17.536L57.592 16.496C58.552 15.12 59.048 13.376 59.08 11.264V3.424H71.352V15.472C71.352 16.6773 70.7387 17.28 69.512 17.28H67.672L67.272 15.792C67.9653 15.8453 68.5467 15.872 69.016 15.872C69.5387 15.872 69.8 15.5573 69.8 14.928V12.544H65.832V17.104H64.296V12.544H60.536ZM69.8 11.136V8.688H65.832V11.136H69.8ZM69.8 7.296V4.896H65.832V7.296H69.8ZM64.296 4.896H60.616V7.296H64.296V4.896ZM85.144 6.704L84.872 7.808C85.096 9.184 85.3947 10.448 85.768 11.6C86.1627 10.1493 86.3813 8.51733 86.424 6.704H85.144ZM85.176 13.28C84.792 12.224 84.472 11.056 84.216 9.776C83.9707 10.384 83.7147 10.9227 83.448 11.392L82.616 10.336L82.696 10.16H77.72V8.816H82.808V9.904C83.5973 8.08 84.136 5.728 84.424 2.848L85.752 3.072C85.6347 4.032 85.528 4.768 85.432 5.28H88.264V6.704H87.704C87.64 9.33867 87.2453 11.6 86.52 13.488C87.0747 14.6613 87.736 15.584 88.504 16.256L87.64 17.552C86.968 16.88 86.376 16.0053 85.864 14.928C85.2987 15.9733 84.5947 16.8747 83.752 17.632L82.952 16.352C83.8693 15.5733 84.6107 14.5493 85.176 13.28ZM80.616 15.488C80.808 15.3813 80.9253 15.216 80.968 14.992V12.48H79.592V13.2C79.56 15.152 79.064 16.608 78.104 17.568L76.984 16.592C77.7627 15.8133 78.1627 14.6827 78.184 13.2V11.104H82.296V14.432C82.808 13.9627 83.2027 13.584 83.48 13.296L83.784 14.56C82.9627 15.4453 82.1147 16.1707 81.24 16.736L80.616 15.488ZM79.736 2.88H81V6.416H81.784V3.744H83.016V7.696H77.688V3.744H78.936V6.416H79.736V2.88ZM77.32 3.504C76.648 5.22133 75.528 6.768 73.96 8.144L73.496 6.672C74.648 5.57333 75.4907 4.31467 76.024 2.896L77.32 3.504ZM77.384 7.792C77.192 8.32533 76.9413 8.86933 76.632 9.424V17.68H75.208V11.424C74.8667 11.808 74.4667 12.2133 74.008 12.64L73.56 11.184C74.712 10.032 75.56 8.69867 76.104 7.184L77.384 7.792ZM91.288 9.216C90.808 9.84533 90.3653 10.3893 89.96 10.848L89.464 9.216C90.936 7.36 92.0347 5.19467 92.76 2.72L94.184 3.392C93.8 4.61867 93.3307 5.76533 92.776 6.832V17.68H91.288V9.216ZM93.896 4.816H98.584C98.3813 4.272 98.1413 3.744 97.864 3.232L99.32 2.832C99.6613 3.55733 99.9173 4.21867 100.088 4.816H104.408V6.24H93.896V4.816ZM95.352 7.216H103.048V8.576H95.352V7.216ZM95.352 9.472H103.048V10.848H95.352V9.472ZM103.384 11.856V17.648H101.912V16.816H96.472V17.648H95V11.856H103.384ZM96.472 15.392H101.912V13.264H96.472V15.392ZM112.2 2.88H113.768V4.848H119.896V6.32H113.768V8.416H118.024V9.76C117.181 11.4773 115.955 12.9547 114.344 14.192C115.133 14.608 115.917 14.9653 116.696 15.264C117.944 15.712 119.155 16.0693 120.328 16.336L119.448 17.68C118.072 17.3173 116.755 16.8693 115.496 16.336C114.621 15.952 113.805 15.536 113.048 15.088C111.288 16.176 109.149 17.0613 106.632 17.744L105.752 16.384C108.077 15.8613 110.072 15.1307 111.736 14.192C110.936 13.5627 110.237 12.864 109.64 12.096C109.085 11.392 108.685 10.64 108.44 9.84H107.32V8.416H112.2V6.32H106.104V4.848H112.2V2.88ZM113.016 13.392C114.445 12.368 115.539 11.184 116.296 9.84H109.944C110.232 10.5867 110.648 11.248 111.192 11.824C111.747 12.4107 112.355 12.9333 113.016 13.392ZM126.52 3.408C126.179 4.464 125.725 5.51467 125.16 6.56V17.68H123.64V8.912C123.128 9.584 122.568 10.24 121.96 10.88L121.48 9.296C123.123 7.408 124.328 5.22133 125.096 2.736L126.52 3.408ZM126.696 6.224H132.552V2.944H134.072V6.224H136.28V7.696H134.072V15.824C134.072 16.9867 133.512 17.568 132.392 17.568H130.008L129.672 16.08C130.429 16.144 131.16 16.176 131.864 16.176C132.323 16.176 132.552 15.9307 132.552 15.44V7.696H126.696V6.224ZM128.344 9.2C129.539 10.608 130.451 11.8293 131.08 12.864L129.784 13.76C129.112 12.6187 128.216 11.3547 127.096 9.968L128.344 9.2Z" fill="#232323"></path></svg>
            </div>
          </div>
          <template #footer>
            <div class="dialog-footer">
              <!-- <el-button @click="dialogVisibletwo = false">取消</el-button> -->
              <el-button type="primary" @click="cleardialog">
                关闭
              </el-button>
            </div>
          </template>
        </el-dialog>


        <save v-if="dialog.save" ref="saveBox" @success="upsearch" @closed="dialog.save=false" />
    </el-main>
  </el-container>
</template>
<script >

import { ElLoading, ElMessage } from "element-plus";
import { ElMessageBox } from 'element-plus'
import qrcode from "@/components/qrcode/qrcode.vue";
import save from '../goods/lists/save.vue';

export default {
  name: "ucenter.cashierhome",
  components: {
    qrcode,
    save
  },
  data() {
    return {
        childgoods:{spec_list:[]},
        dialogVisible:false,

        dialogVisibletwo:false,

        dialog: {search: false, import: false, print: false},
        list: {
          apiObj: this.$API.goods.lists.list,
          column: [
            {prop: 'id', label: 'ID', width: 80},
            {prop: 'goods_sn', label: '商品编号'},
            {prop: 'title', label: '商品名称'},
            {prop: 'cover', label: '封面图', width: 120},
            {prop: 'price', label: '售价', width: 120},
            {prop: 'original_price', label: '原价', width: 120},
            // {prop: 'status', label: '状态', width: 80},
          ],
        },
        selection: [],
        search: {},

        totalMoney: 0,
        totalCount: 0,


        loading:null,
        scannedCode: '', // 存储扫码后的结果  结果
        isTyping: false, // 用户是否正在手动输入
        typingTimeout: null, // 用于判断输入间隔的定时器


        port:null,

        // 原始数据 购物车
				odata: [],
				listdata: [],
				mirror: [],
				total: 0,
        totaljifen:0,//总共所需积分
        Userprice:0,//不使用积分的价格

        qrcodeurl:"",
      
    };
  },
  mounted(){
    var orderHeight = document.body.clientHeight;
    document.getElementById("order_list").style.height = orderHeight + "px";

  },
  created: function() {
    this.getCartList();//获取购物清单
  },
  watch:{
    listdata:{
      handler(newValue) {
					let total = 0;
          let totalCount = 0;
          let totaljifen = 0;
					newValue.forEach((item) => {
						item.content.forEach((cc) => {
							
							total += parseFloat(cc.readyPrice) * Number(cc.num);
							totalCount = totalCount + cc.num;

              totaljifen += Number(cc.ready_integral) * Number(cc.num)
						});
					});
					total = total.toFixed(2);
					const priceParts = total.split(".");
					const formatBig = priceParts[0];
					const formatMini = priceParts.length > 1 ? `.${priceParts[1]}` : ".00";
					this.totalMoney = total;
          this.totalCount = totalCount;
          this.totaljifen = totaljifen;//积分

          this.Userprice = parseFloat(parseFloat(total) + parseInt(this.totaljifen)).toFixed(2);

				},
				deep: true,
    }
  },
  methods: {
    add(){
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveBox.open().setData({})
			})
		},
    table_edit(row){
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveBox.open('edit').setData(row)
			})
		},
    //---规格加入购物车-------------------------------------------------------------------------
    popCloseHandle() {
      this.$emit("close");
    },
    //规格提交
    addCartHandle() {
      this.dialogVisible = false;
      let skuId = this.childgoods.skuId;
      let number = this.childgoods.popNumber;
      // this.$emit("popAddCart", skuId, number);
      this.addCart("multiple", skuId, number);

      
    },
    //提交加入购物车
    addCart(type, skuId, number) {
      let that = this;
      let req = {};
      if (type === "single") {//没有规格
        req = {
          goods_sn:that.childgoods.goods_sn,//商品编号
          goods_id: that.childgoods.id,
          goods_sku_id: 0,
          num: 1,
          store_id: that.childgoods.store_id,
        };
      } else {//有规格
        req = {
          goods_sn:that.childgoods.popSkuGoods_sn,//商品编号
          goods_id: that.childgoods.id,
          goods_sku_id: skuId,
          num: number,
          store_id: that.childgoods.store_id,
        };
      }
      console.info('req',req);
      this.$API.cashier.cart.add.post(req).then(res=>{
        if (res.code == 1) {
          this.$message({
            message: "添加成功~",
            type: "success"
          });
          // getApp().getMyCarList();
          // this.show = false;
          // this.$forceUpdate();

          this.getCartList();//获取购物清单
        }else{
          this.$message.error(res.message);
        }
      }).catch((err) => {
        console.log("🚀 ~ cart ~ err:", err);
      });
    },
    //购物车产品数量加减
    stepMinusHandle(num,cc) {
      console.info('stepMinusHandle',num,cc);
      let that = this;
      
      let goods_id = cc.goods_id;
      let goods_sku_id = cc.goods_sku_id;
      let cart_id = cc.cart_id;
      let obj = that.odata.find((v) => v.id == cart_id);
      console.log("🚀 ~ stepMinusHandle ~ obj:", obj);
      // let num = obj.num - 1;
      if (num != 0) {
        let req = {
          id: cart_id,
          goods_id: goods_id,
          goods_sku_id: goods_sku_id,
          num: num,
        };
        this.$API.cashier.cart.edit.post(req)
          .then((res) => {
            console.log("🚀 ~ editCart ~ res:", res);
            if (res.code == 1) {
              that.getCartList();
            }else{
              this.$message.error(res.message);
            }
          })
          .catch((err) => {
            console.log("🚀 ~ editCart ~ err:", err);
          });
      } else {
        //删除
        let req = {
          id: cart_id,
        };
        this.$API.cashier.cart.delete.post(req)
          .then((res) => {
            console.log("🚀 ~ delCart ~ res:", res);
            if (res.code == 1) {
              that.getCartList();
            }else{
              this.$message.error(res.message);
            }
          })
          .catch((err) => {
            console.log("🚀 ~ delCart ~ err:", err);
          });
      }
    },
    //数量加减
    numberChangeHandle(e) {
      console.log(e.detail);
      console.log(this.childgoods.popStock.match(/\d+/)[0]);
      if (Number(e.detail) > Number(this.childgoods.popStock.match(/\d+/)[0])) {
        this.$message.error("库存不足~");
        
      } else {
        this.childgoods.popNumber = e.detail;
      }
    },
    //规格被选择
    skuTapHandle(item, outer, cc) {
      // this.$set(this.childgoods.spec_list[outer], "selected", cc);
      this.childgoods.spec_list[outer]["selected"] = cc;
      this.changeSku();
    },

    // 更新 detail 的方法
    updateDetail(newContent) {
      this.childgoods = {
        ...newContent
      };
    },
    //修改规格
    changeSku() {
      let arr = this.childgoods.spec_list;
      if (arr.every((item) => item.selected)) {
        console.log("所有规格已选择");
        // 取出item的name和selected，组成{name:selected}格式
        let sku = arr.reduce((acc, cur) => {
          acc[cur.name] = cur.selected;
          return acc;
        }, {});
        let skuObj = this.childgoods.sku.find(
          (item) => JSON.stringify(item.sku_value) === JSON.stringify(sku)
        );
        console.log("🚀 ~ changeSku ~ skuObj:", skuObj);
        let parts = skuObj.price.split(".");
        this.childgoods.popFormatBig = parts[0];
        this.childgoods.popFormatMini = parts[1] ? "." + parts[1] : ".00";
        this.childgoods.popStock = "库存 " + skuObj.stock;
        this.childgoods.popNumber = 1;
        this.childgoods.popSkuGoods_sn = skuObj.goods_sn;
        this.childgoods["skuId"] = skuObj.id;
      } else {
        console.log("还有规格未选择");
      }
    },
    //删除产品
    goodsDeleteHandle(gid, sid) {

				let that = this;
				
				let cid = that.odata
					.filter((v) => v.goods_id == gid && v.goods_sku_id == sid)
					.map((v) => v.id);

				let req = {
					ids: cid,
				};
				this.$API.cashier.cart.delete.post(req)
					.then((res) => {
						console.log("🚀 ~ delCart ~ res:", res);
						if (res.code == 1) {
							that.getCartList();
						}else{
              this.$message.error(res.message);
            }
					})
					.catch((err) => {
						console.log("🚀 ~ delCart ~ err:", err);
					});
    },
    //获取购物车列表
    getCartList(){
      let that = this;
      this.$API.cashier.cart.list.get({page:1,limit:100}).then((res) => {
          console.log("🚀 ~ getCartList ~ res:", res);
          if (res.code == 1) {
            let data = res.data;
            that.odata = data;
            const groupedData = data.reduce((acc, item) => {
              const storeId = item.store_id;
              if (!acc[storeId]) {
                acc[storeId] = {
                  id: storeId,
                  title: item.store.title,
                  cover: item.store.cover,
                  content: [],
                  selected: 0,
                };
              }
              acc[storeId].content.push({
                cart_id: item.id,
                member_id: item.member_id,
                goods_id: item.goods_id,
                goods_sku_id: item.goods_sku_id,
                num: item.num,
                created_at: item.created_at,
                updated_at: item.updated_at,
                goods: item.goods,
                sku: item.sku,
              });
              return acc;
            }, {});
            const result = Object.values(groupedData);

            result.forEach((store) => {
              store.content.forEach((item) => {
                if (item.sku && item.sku.price) {
                  const priceParts = item.sku.price.split(".");
                  const formatBig = priceParts[0];
                  const formatMini =
                    priceParts.length > 1 ? `.${priceParts[1]}` : ".00";
                  item.formatBig = formatBig;
                  item.formatMini = formatMini;
                  item.readyPrice = item.sku.price;
                  item.selected = 0;

                  item.ready_integral = item.sku.integral;//积分
                } else {
                  const priceParts = item.goods.price.split(".");
                  const formatBig = priceParts[0];
                  const formatMini =
                    priceParts.length > 1 ? `.${priceParts[1]}` : ".00";
                  item.formatBig = formatBig;
                  item.formatMini = formatMini;
                  item.readyPrice = item.goods.price;
                  item.selected = 0;

                  item.ready_integral = item.goods.integral;////积分
                }
              });
              const mergedData = Object.values(
                that.mergeObjects(store.content)
              );
              console.log("🚀 ~ result.forEach ~ mergedData:", mergedData);
              store.content = mergedData;
            });
            console.log("🚀 ~ result.forEach ~ result:", result);

            that.listdata = result;
            
          }else{
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log("🚀 ~ getCartList ~ err:", err);
        });

    },
    // 合并购物车相同规格的商品
    mergeObjects(arr) {
      return arr.reduce((acc, curr) => {
        const key = curr.sku ?
          `${curr.goods.id}-${curr.sku.id}` :
          `${curr.goods.id}`;
        if (acc[key]) {
          acc[key].num += curr.num;
        } else {
          acc[key] = {
            ...curr,
            goods: {
              ...curr.goods
            },
            sku: curr.sku ? {
              ...curr.sku
            } : null,
          };
          delete acc[key].id;
        }
        return acc;
      }, {});
    },
    cleardialog(){
      this.dialogVisibletwo = false;
      this.getCartList();
    },
    handleClosetwo(done) {
      ElMessageBox.confirm('确定要关闭弹窗吗?')
        .then(() => {
          done()
          this.getCartList();
        })
        .catch(() => {
          // catch error
        })
    },
    //---规格加入购物车-------------------------------------------------------------------------
    //关闭
    handleClose(done) {
      ElMessageBox.confirm('确定要关闭弹窗吗?')
        .then(() => {
          done()
        })
        .catch(() => {
          // catch error
        })
    },
    
    focusfun(){
      // 自动聚焦到输入框，方便直接扫描
        this.loading = ElLoading.service({
          lock: true,
          text: "请开始扫码识别",
          background: "rgba(255, 255, 255, 0.7)",
        });
        this.$nextTick(() => {
          this.$refs.scannerInput.focus();
        });
        // this.loading.close();
    },
    handleScannerInput(event) {
      const input = event.target;
      clearTimeout(this.typingTimeout);

      // 如果用户手动输入，则设置一个短暂的延迟
      if (this.isTyping) {
        this.typingTimeout = setTimeout(() => {
          this.isTyping = false;


          // 扫描完成后的处理逻辑
          this.scannedCode = input.value;
          console.log('Scanned code:', this.scannedCode);

          console.log('input.value:', input.value );


          if(input.value && input.value.length>5){
            this.childgoods.goods_sn = input.value;
            this.childgoods.store_id = 0;
            this.addCart("single", "", 1);
          }

          // 清空输入框以便下一次扫描
          input.value = '';
          // 处理扫码后的业务逻辑...

          this.blurfun();

        }, 500); // 假设用户不会连续输入超过500ms
      } else {
        clearTimeout(this.typingTimeout);
        // 扫描完成后的处理逻辑
        this.scannedCode = input.value;
        console.log('Scanned code:', this.scannedCode);

        if(input.value && input.value.length>5){
          this.childgoods.goods_sn = input.value;
          this.childgoods.store_id = 0;
          this.addCart("single", "", 1);
        }

        console.log('input.value:', input.value );
        // 清空输入框以便下一次扫描
        input.value = '';
        this.blurfun();
        // 处理扫码后的业务逻辑...
      }
    },
    onFocus() {
      // 当输入框获得焦点时，认为用户可能开始手动输入
      this.isTyping = true;
    },
    //失去焦点
    blurfun(){
      this.isTyping = false;
      this.loading.close();
    },
    // 添加和计算商品价格
    addOrderList(goods,index) {
      // 商品是否已经存在于订单列表中
      if(goods.sku.length){
        //规格
        this.dialogVisible = true;
        this.childgoods = goods;
        return false;
      }else{
        //非规格
        this.childgoods = goods;
        this.addCart("single", 0, 1);
        return false;
      }
    },
    
    
    // 全部删除商品  清空购物车
    delAllGoods() {
      // this.odata = [];
			this.listdata =  [];
      this.totalMoney = 0;
      this.totalCount = 0;
      this.totaljifen = 0;
      this.childgoods = {spec_list:[]};


      let req = {
        ids: this.odata.map(product => product.id),
      };
      this.$API.cashier.cart.delete.post(req)
        .then((res) => {
          console.log("🚀 ~ delCart ~ res:", res);
          if (res.code == 1) {
            that.getCartList();
          }else{
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log("🚀 ~ delCart ~ err:", err);
        });
      
    },
    
    // 模拟结账
    checkOut() {
      // this.$message.error("程序猿小哥正在开发中~");
      if(this.odata.length){

        this.$API.cashier.cart.simple.post({
          carts:this.odata.map(item=>{return item.id}),
        })
        .then((res) => {
          console.log("🚀 ~ simple ~ res:", res);
          if(res.code==1){
            this.$API.cashier.cart.nativepc.post({order_id:res.data.id}).then(restwo=>{
              console.log("🚀 ~ simple ~ restwo:", restwo);
              if(restwo.code==1){
                let packagestr = restwo.data.package;
                let match = packagestr.match(/prepay_id=([^&]+)/);
                if (match) {
                    let qrcodeurl = match[1];
                    console.log(qrcodeurl); // 输出: weixin://wxpay/bizpayurl?pr=g5bMCytz3
                    this.qrcodeurl = qrcodeurl;

                    this.dialogVisibletwo = true;
                    this.$nextTick(()=>{
                      setTimeout(()=>{
                        this.$refs.qrcodecomp.updateQRCode(this.qrcodeurl);
                      },100)
                    })
                }

              }else{
                this.$message.error(restwo.message);
              }
            })
            
          }else{
            this.$message.error(res.message);
          }

        })
        .catch((err) => {
          console.log("🚀 ~ simple ~ err:", err);
        });

      }else{
        this.$message.error("店员，没有东西，怎么结账呀~");
      }

    },
    upsearch(){
			this.$refs.table.reload(this.search);
		},
		moreUpsearch(search){
			this.search = search;
			this.upsearch();
		},
		moreSearch(){
			this.dialog.search = true
			this.$nextTick(() => {
				this.$refs.searchBox.open().setData(this.search)
			})
		},
		//表格选择后回调事件
		selectionChange(selection){
			this.selection = selection;
		},
    //----2.0 扫码枪监听-------------------------------------------------------------------------------
  async chooseSerial(){
    if ('serial' in navigator) {
      try {
        this.port = (await navigator.serial.requestPort()) || null;
        console.log('选择串口成功');
        this.port && this.openSerial();
        
      } catch (e) {
        console.log('选择串口失败');
      }
    } else {
      console.log('浏览器不支持serial API');
    }
  },
//打开串口读取数据
  async openSerial() {
    console.info("6666");
    await this.port.open({ baudRate: 9600 });
    try {
      const textDecoder = new TextDecoderStream();
      this.port.readable.pipeTo(textDecoder.writable);
      const reader = textDecoder.readable.getReader();
      let data = ''; //扫码数据
      while (true) {
        const { value, done } = await reader.read();
        if (done) {
          reader.releaseLock();
          break;
        }
        data=`${data}${value}`
        if(value.includes('\r')){//读取结束
                  let codeData=data;
          data="";//清空下次读取不会叠加
          console.log(`二维码数据:${codeData}`)
          //处理拿到数据逻辑
        }
      }
    } catch (error) {
      console.error(error);
      this.port = null;
    } finally {
        try {
          reader.releaseLock();
          //关闭串口
          await this.port.close();
        } catch (e) {}
    }
      this.port = null;
  }

    //----2.0 扫码枪监听-------------------------------------------------------------------------------
  },
};
</script>
<style scoped>
@import url('./cashierhome.scss');
</style>