<script setup>
import order from "./component/order.vue";
import shop from "./component/shop.vue";
import padding from "@/components/padding.vue";
import pupop from "./component/pupop.vue";
import classify from "./component/classify.vue";
import pay from "@/components/pay.vue";
import { ref, nextTick, onMounted, onUnmounted } from "vue";
import { cartCreateApi, orderCheckApi } from "@/api/store.js";
import { saleStoreListApi } from "@/api/shop.js";
import { useUserStore } from "@/store/user.js";
import { useRoute } from "vue-router";
import mitt from "@/utils/mitt.js";

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

const storeList = ref([]);

const userStore = useUserStore();
const route = useRoute();

const where = ref({
  page_no: 1,
  page_size: 30,
});
const getStoreList = (data = {}, reload = false) => {
  where.value = {
    ...where.value,
    ...data,
  };
  if (reload) {
    storeList.value = [];
    where.value.page_no = 1;
    loadEnd.value = false;
  }
  saleStoreListApi(where.value).then((res) => {
    if (res.data?.lists?.length < where.value.page_size) loadEnd.value = true;
    storeList.value = storeList.value.concat(res.data.lists);
    if (
      data.bar_code &&
      storeList.value.length == 1 &&
      isAllDigits(data.bar_code)
    ) {
      shopRef.value.bar_code = "";
      changeItem(storeList.value[0], storeList.value[0].attr[0]);
    }
    where.value.page_no++;
  });
};

const loadEnd = ref(false);
const loadMore = (data) => {
  if (loadEnd.value) return;
  getStoreList(data);
};

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

const cartAddInfo = (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 : "",
    staff_id: userStore.userInfo.service.service_id,
    product_type: 0,
    sale_type: 2,
    // spread_id: this.currSpid,
  };
  cartCreateApi(q).then((res) => {
    orderRef.value.getList();
  });
};

const changeItem = (item, change) => {
  if (!item.attr || item.attr.length == 0 || item.attr.length == 1)
    return cartAddInfo(item, item.attr[0] ? item.attr[0] : "");
  else if (change) return cartAddInfo(item, change);
  else {
    pupopRef.value.setForm(item, "add");
    pupopRef.value.show(true);
  }
};

const editItem = (id, data) => {
  orderRef.value.editItem(id, data);
};

const editPupop = (item) => {
  pupopRef.value.setForm(item, "edit");
  pupopRef.value.show(true);
};

// 结算
const checkOut = () => {
  let cart_id = orderRef.value.list.map((item) => item.cart_id);
  let query = {
    takes: [],
    use_coupon: {},
    use_integral: false,
    cart_id: cart_id,
  };
  if (orderRef.value.discounts > 0) {
    query.deduction_price = orderRef.value.discounts.toFixed(2);
    query.pay_type = "micropay";
  }
  orderCheckApi(query).then((res) => {
    payRef.value.setForm({
      data: res.data,
      cart_id: cart_id,
    });
  });
};

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

const paySuccess = () => {
  orderRef.value.getList();
};

// 键盘事件
const aF9 = () => {
  if (route.name != "saleHome") return;
  if (!payRef.value.drawer && orderRef.value.list.length > 0) goPay();
  else payRef.value.beforeClose();
};
onMounted(() => {
  getStoreList();
  where.value.page_no++;
  mitt.on("F9", aF9);
});

onUnmounted(() => {
  mitt.off("F9", aF9);
});
</script>

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

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

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

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

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