<template>
  <view class='content'>
    <view class='search-view'>
      <view class='search-input'>
        <image :src='assetsUrl("ic_search.png")' />
        <input placeholder='输入名称、款号搜索' @input='bindInput' />
      </view>
    </view>

    <scroll-view class='goods-list'>
      <grid-view :cross-axis-count='2'>
        <view v-for='(item, index) in goodsList' :key='index' class='goods-item'
              @click.stop='goPath(`/pages/mall/subs/goods/detail?goodsId=${item.goodsId}`)'>
          <image class='goods-image' :src='item.images' />
          <text class='goods-name'>{{ item.goodsName }}</text>
          <text class='goods-price'>¥{{ item.price }}</text>
          <image class='add-image' :src='assetsUrl("ic_add_goods.png")' @click.stop='addShoppingCart(item)' />
        </view>
      </grid-view>
    </scroll-view>
  </view>
  <sku-dialog ref='skuDialogRef' />
</template>

<script lang='ts' setup>
import SkuDialog from '@/components/sku-dialog.vue';
import { assetsUrl } from '@/utils/assets';
import { goPath } from '@/utils';
import { getGoodsList } from '@/api/goods';
import useShoppingCartStore from '@/store/modules/shoppingcart';
import { GoodsBean } from '@/api/goods/types';

const skuDialogRef = ref();
const shoppingCartStore = useShoppingCartStore();

const goodsList = ref<GoodsBean[]>([]);

onLoad((e) => {

});

const bindInput = async (e: any) => {
  const { rows } = await getGoodsList({
    page: {
      pageNum: 1,
      pageSize: 100,
      bean: {
        keyword: e.detail.value,
        typeIds: ['1724629185362591745']
      }
    }
  });
  goodsList.value = rows;
};

const addShoppingCart = (goodsBean: GoodsBean) => {
  skuDialogRef.value.show(goodsBean.goodsId, (e: GoodsBean) => {
    shoppingCartStore.save(e);
  });
};

</script>

<style lang='scss' scoped>
.content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 0 20rpx;
}

.search-view {
  display: flex;
  flex-direction: row;
  background: white;
  padding: 19rpx 30rpx;

  .search-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #F7F7F7;
    padding: 17rpx 23rpx;
    font-size: 26rpx;
    width: 100%;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 20rpx;
    }
  }
}

.goods-list {
  display: flex;
  background: white;

  .goods-item {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 10rpx 10rpx;
    flex: 1;

    .goods-image {
      border-radius: 10rpx;
      width: 100%;
      max-height: 400rpx;
    }

    .goods-name {
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 10rpx;
    }

    .goods-price {
      font-size: 36rpx;
      font-weight: bold;
      color: #F32B2B;
    }

    .add-image {
      width: 42rpx;
      height: 42rpx;
      position: absolute;
      bottom: 10rpx;
      right: 10rpx;
    }
  }
}
</style>
