<template>
  <div class="searchWrap">
    <a-input-search
      v-model:value="searchInfo"
      placeholder="请输入"
      enter-button="搜索"
      size="large"
      @search="onSearch"
    />
    <div class="shoppingCart" @click="handleGoShoppingCart" title="购物车">
      <a-badge :count="shoppingCartNum">
        <ShoppingCartOutlined />
      </a-badge>
    </div>
    <div class="close" title="关闭商城" @click="handleClose">
      <CloseCircleOutlined />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, defineProps, onMounted, watch } from 'vue';
  import { ShoppingCartOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
  import { useGo } from '/@/hooks/web/usePage';
  import * as CartApi from '/@/api/order/cartApi';
  import { useShoppingStoreWithOut } from '/@/store/modules/store';

  const go = useGo();
  const shoppingStore = useShoppingStoreWithOut();
  const props = defineProps(['navId']);
  const shoppingCartNum = ref(0);

  const handleGoShoppingCart = () => {
    go('/main/store/shopping-cart' + `?nav=${props.navId}`);
  };

  const getCount = () => {
    CartApi.count().then((res) => {
      shoppingCartNum.value = res;
    });
  };

  const handleClose = () => {
    go('/main/dashboard', true);
  };

  watch(
    () => shoppingStore.shoppingCartRefresh,
    () => {
      getCount();
    },
  );

  const searchInfo = ref('');
  const onSearch = () => {};

  onMounted(() => {
    getCount();
  });
</script>

<style lang="less" scoped>
  .searchWrap {
    width: 100%;
    position: relative;
    text-align: center;

    .ant-input-group-wrapper {
      width: 500px;
    }

    .shoppingCart {
      width: 40px;
      height: 40px;
      text-align: center;
      position: absolute;
      right: 80px;
      top: 0;
      line-height: 40px;
      font-size: 30px;
      cursor: pointer;

      &:hover {
        background: #eee;
        border-radius: 50%;
      }

      .ant-badge {
        width: 40px;
        height: 40px;
        font-size: 30px;
      }
    }

    .close {
      width: 40px;
      height: 40px;
      text-align: center;
      position: absolute;
      right: 20px;
      top: 0;
      line-height: 40px;
      font-size: 25px;
      cursor: pointer;

      &:hover {
        background: #eee;
        border-radius: 50%;
      }
    }
  }
</style>
