<template>
  <div class="page">
    <div class="banner">
      <img src="/static/shop/banner.png" alt="" />
    </div>
    <div class="commodity-wrap">
      <div class="top-bar">
        <div class="header">分类</div>
        <div class="search">
          <wd-search hide-cancel placeholder="请输入要搜索的内容" />
        </div>
      </div>
      <div class="content">
        <div class="nav">
          <p
            v-for="(v, i) in navList"
            :key="i"
            @click="acitveNav = v.id"
            :class="{ active: acitveNav == v.id }"
          >
            {{ v.name }}
          </p>
        </div>
        <div class="list">
          <div class="list-top">
            <div class="subclass">
              <div v-for="v in 10" :key="v">鸡</div>
            </div>
            <div class="filter" @click="activeFilter = true" v-if="!activeFilter">
              筛选
              <img src="/static/shop/filter.png" alt="" />
            </div>
            <div class="sort" v-else>
              <Sort>销量</Sort>
              <Sort>交割</Sort>
            </div>
          </div>
          <div class="commodity-list">
            <CommodityItem v-for="v in 50" :key="v" />
          </div>
        </div>
      </div>
    </div>
    <!-- 购物车悬浮按钮 -->
    <div class="cart-floating">
      <img class="cart" @tap="toCart" src="/static/presale/cart.png" />
    </div>
    <!--    <div class="shopping-cart">-->
    <!--      <div>-->
    <!--        <img src="/src/static/shop/shoppingCart.png" alt="" />-->
    <!--        购物车-->
    <!--      </div>-->
    <!--      <img src="/src/static/shop/doubleArrow.png" alt="" />-->
    <!--    </div>-->
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CommodityItem from './commodityItem.vue';
import Sort from './sort.vue';
const navList = ref([
  {
    id: 1,
    name: '鲜货家禽',
  },
  {
    id: 2,
    name: '鲜货家禽',
  },
  {
    id: 3,
    name: '鲜货家禽',
  },
  {
    id: 4,
    name: '鲜货家禽',
  },
  {
    id: 5,
    name: '鲜货家禽',
  },
]);

const acitveNav = ref(1);
const activeFilter = ref(false);
function toCart() {
  // TODO: 跳转到购物车
  xma.navigateTo({
    url: '/pages/cart/cart',
  });
}
</script>

<style lang="scss" scoped>
uni-page-body {
  height: 100%;
}
.page {
  height: 100%;
  background-color: #f6f6f6;
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.banner {
  width: 710rpx;
  height: 236rpx;
  margin-bottom: 20rpx;
  img {
    width: 100%;
    height: 100%;
  }
}
.commodity-wrap {
  height: 40rpx;
  flex-grow: 1;
  background-color: #fff;
  border-radius: 16rpx 16rpx 0rpx 0rpx;
  display: flex;
  flex-direction: column;
  padding-bottom: 100rpx;
  .top-bar {
    display: flex;
    height: 88rpx;
    border-bottom: 2rpx solid #f6f6f6;
    .header {
      font-family: Source Han Sans;
      font-size: 32rpx;
      font-weight: 500;
      line-height: 88rpx;
      color: #3d3d3d;
      width: 180rpx;
      border-right: 2rpx solid #f6f6f6;
      text-align: center;
    }
    .search {
      flex: 1;
      padding: 16rpx 36rpx;
      .wd-search {
        padding: 0;
      }
    }
  }
  .content {
    display: flex;
    flex: 1;
    .nav {
      width: 180rpx;
      border-right: 2rpx solid #f6f6f6;
      background-color: #f1f1f1;
      p {
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 28rpx;
        font-weight: 500;
        color: #abaaaa;
        &.active {
          background-color: #fff;
          color: #3d3d3d;
        }
      }
    }
    .list {
      flex: 1;
      color: #3d3d3d;
      display: flex;
      flex-direction: column;
      .list-top {
        display: flex;
        padding: 24rpx 0;
        box-sizing: border-box;
        .subclass {
          display: flex;
          width: 40rpx;
          padding: 0 20rpx;
          flex-grow: 1;
          gap: 64rpx;
          overflow-x: scroll;
          font-size: 24rpx;
        }
        .filter {
          width: 78rpx;
          font-size: 22rpx;
          padding: 0 4rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            height: 19rpx;
            width: 16rpx;
          }
        }
        .sort {
          width: 194rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20rpx;
          box-sizing: border-box;
        }
      }
      .commodity-list {
        padding: 0 20rpx;
        overflow-y: scroll;
        height: 200rpx;
        flex-grow: 1;
        .item {
          margin-bottom: 20rpx;
        }
      }
    }
  }
}
.shopping-cart {
  position: fixed;
  bottom: 10rpx;
  background-color: #fff;
  right: 0;
  width: 730rpx;
  height: 98rpx;
  border-radius: 16rpx 0rpx 0rpx 0rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  & > img {
    width: 24rpx;
    height: 20rpx;
    margin-right: 70rpx;
  }
  div {
    margin-right: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 22rpx;
    color: #3d3d3d;
    img {
      margin-bottom: 10rpx;
      width: 40rpx;
      height: 38rpx;
    }
  }
}
.cart-floating {
  position: fixed;
  text-align: center;
  bottom: 10%;
  width: 80rpx;
  height: 80rpx;
  z-index: 99;
  background-color: #ffffff;
  border-radius: 50%;
  margin-left: 10px;
}
.cart {
  position: relative;
  top: 20rpx;
  left: 16rpx;
  width: 48rpx;
  height: 46rpx;
}
</style>
