<script setup>
import order from "./component/order.vue";
import shop from "./component/shop.vue";
import padding from "./component/padding.vue";
import pupop from "./component/pupop.vue";
import pay from "./component/pay.vue";
import { ref, nextTick } from "vue";
import { storeListApi, cartCreateApi } from "@/api/store.js";
import { useUserStore } from "@/store/user.js";

const pupopRef = ref(null);
const orderRef = ref(null);
const shopRef = ref(null);
const payRef = ref(null);

const storeList = ref([]);

const userStore = useUserStore();

const where = ref({
  page: 1,
  limit: 30,
});
const getStoreList = (data) => {
  where.value = {
    source: 300,
    ...where.value,
    ...data,
  };
  storeListApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
    storeList.value = res.data.list.map((item) => {
      item.attr = Object.keys(item.sku);
      return item;
    });
    if (storeList.value.length == 1 && isAllDigits(data.bar_code)) {
      changeItem(storeList.value[0], storeList.value[0].attr[0]);
    }
  });
};

function isAllDigits(str) {
  return /^\d+$/.test(str);
}

const changeItem = (item, change = "") => {
  // console.log(item, change);
  let q = {
    is_new: 0,
    product_id: item.product_id,
    cart_num: 1,
    product_attr_unique:
      item.sku[change] !== undefined ? item.sku[change].unique : "",
    source: 300, //收银
    product_type: 0,
    // spread_id: this.currSpid,
    // sale_type: 1
  };
  cartCreateApi(q).then((res) => {
    console.log(res);
    orderRef.value.getList(item);
  });
};

getStoreList();

const goPay = () => {
  payRef.value.drawer = true;
};

nextTick(() => {
  // pupopRef.value.show(true);
});
</script>

<template>
  <div class="my-card">
    <order ref="orderRef" @goPay="goPay" />
    <padding />
    <shop
      ref="shopRef"
      style="flex: 1"
      :storeList="storeList"
      @getStoreList="getStoreList"
      @changeItem="changeItem"
    />
    <pupop ref="pupopRef" />
    <pay ref="payRef" />
  </div>
</template>

<style lang="scss">
.my-card {
  display: flex;
}
/* 修改滚动条的样式 */
::-webkit-scrollbar {
  width: 5px; /* 设置滚动条的宽度 */
}

/* 设置滚动条的轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 设置轨道的背景色 */
  margin: 20px 0;
}

/* 设置滚动条的滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #ccc; /* 设置滑块的背景色 */
  border-radius: 5px; /* 设置滑块的圆角 */
}

/* 设置滚动条鼠标悬停时的滑块样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
}
</style>
