<template>
  <a-page-header :title="`收银台`" @back="() => $router.go(-1)">
    <div class="flex gap-5">
      <!-- 载入购物车 -->
      <Cart
        :spinning="spinning"
        :loginUser="loginUser"
        :cashier="cashier"
        :count="cashier?.totalNums"
        @group="openGroupForm"
        @reload="reload"
        @pay="onPay"
      />
      <!-- 商品搜索 -->
      <Goods :loginUser="loginUser" @reload="reload" />
    </div>
  </a-page-header>
  <!-- 取单 -->
  <GroupForm v-model:visible="showCashierForm" @done="reload" />
  <!-- 支付结算 -->
  <Pay v-model:visible="showPayForm" :data="cashier" @done="reload" />
</template>

<script lang="ts" setup>
  import { computed, ref, watch } from 'vue';
  import GroupForm from './components/group.vue';
  import Cart from './components/cashier.vue';
  import Goods from './components/goods.vue';
  import Pay from './components/pay.vue';
  import * as CashierApi from '@/api/shop/cashier';
  import { useUserStore } from '@/store/modules/user';
  import { CashierVo } from '@/api/shop/cashier/model';

  // 当前用户信息
  const userStore = useUserStore();
  const loginUser = computed(() => userStore.info ?? {});
  const cashier = ref<CashierVo>({});

  // 加载中状态
  const spinning = ref<boolean>(true);
  const showCashierForm = ref<boolean>(false);
  const showPayForm = ref<boolean>(false);

  const openGroupForm = () => {
    showCashierForm.value = true;
  };

  const onPay = () => {
    showPayForm.value = true;
  };

  /* 加载数据 */
  const reload = () => {
    spinning.value = true;
    CashierApi.listCashier({ groupId: 0 })
      .then((data) => {
        if (data) {
          cashier.value = data;
        }
      })
      .finally(() => {
        console.log('.......');
        spinning.value = false;
      });
  };

  watch(
    loginUser,
    ({ userId }) => {
      console.log(userId);
      reload();
    },
    { immediate: true }
  );
</script>
