<template>
  <div class="solve-page">
    <div class="solve-bos">
      <img class="solve-img" src="@/assets/images/login-background.jpg" alt="" />
      <div class="title">香港小熊食品 甜蜜褔利 品质之选</div>
      <div class="info">节日专题:节日、节日等主题盒子;可定制企业及福语、传递节日贺卡 员工关怀:办公室下午茶分享</div>
      <div class="filter-bos">
        <div v-for="(item1, index1) in filterListy" :key="index1" class="filter-list flex-row-start">
          <div class="filter-title">{{ item1.title }}</div>
          <div v-for="(item2, index2) in item1.list" :key="index2" class="filter-item" :class="item1.hig == item2.id ? 'hig' : ''">
            {{ item2.title }}
          </div>
        </div>
      </div>
      <div class="nav-bos flex-row-start">
        <div v-for="(item, index) in navList" :key="index" class="nav-list" :class="navIndex == index ? 'hig' : ''">
          {{ item.title }}
        </div>
      </div>
      <!-- 数据 -->
      <div class="data-bos">
        <div v-for="(item, index) in 13" :key="index" class="data-list" @click="onPath">
          <img class="data-img" src="@/assets/images/login-background.jpg" alt="" />
          <div class="data-title">格力KFR-72LW/定频冷暖空调柜机3P</div>
          <div class="money">
            <span class="money1">¥1,299</span>
            <span class="money2">¥1,899</span>
          </div>
          <div class="data-cat">加入购物车</div>
        </div>
      </div>
      <!-- 分页 -->
      <div class="pagination-bos flex-row-between">
        <div></div>
        <el-pagination
          v-model:current-page="currentPage1"
          v-model:page-size="pageSize2"
          layout="sizes, prev, pager, next ,jumper"
          :total="1000"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const currentPage1 = ref(5);
const pageSize2 = ref(100);
const navIndex = ref(0);
const router = useRouter();
const navList = ref<any>([{ title: '智能匹配' }, { title: '人气排序' }, { title: '价格排序' }]);
const filterListy = ref<any>([
  {
    title: '价格区间',
    hig: 1,
    list: [
      { title: '全部', id: 1 },
      { title: '1-100', id: 2 },
      { title: '100-500', id: 3 },
      { title: '1000+', id: 4 }
    ]
  },
  {
    title: '产品分类',
    hig: 1,
    list: [
      { title: '全部', id: 1 },
      { title: '食品饮料', id: 2 },
      { title: '食品饮料', id: 3 },
      { title: '食品饮料', id: 4 }
    ]
  },
  {
    title: '产品品牌',
    hig: 1,
    list: [
      { title: '全部', id: 1 },
      { title: '香港小熊', id: 2 }
    ]
  }
]);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};

const onPath = () => {
  router.push('/shop/info');
};
</script>

<style lang="scss" scoped>
.solve-page {
  width: 100%;
  background-color: #ffffff;

  .solve-bos {
    width: 1200px;
    margin: 0 auto;
    .solve-img {
      width: 1200px;
      height: 380px;
      border-radius: 10px;
    }
    .title {
      font-weight: 600;
      font-size: 20px;
      color: #101828;
      margin-top: 20px;
    }
    .info {
      font-size: 14px;
      color: #364153;
      margin-top: 8px;
      border-bottom: 1px solid #e5e7eb;
      padding-bottom: 20px;
    }
    .filter-bos {
      padding-bottom: 20px;
      border-bottom: 1px solid #e5e7eb;
      .filter-list {
        margin-top: 20px;

        .filter-title {
          font-size: 14px;
          color: #101828;
          margin-right: 40px;
        }

        .filter-item {
          font-size: 14px;
          color: #364153;
          margin-right: 30px;
          cursor: pointer;

          &.hig {
            color: #e7000b;
          }
        }
      }
    }
    .nav-bos {
      width: 1200px;
      padding: 20px 0;

      .nav-list {
        height: 32px;
        padding: 0 12px;
        background: #f7f8fa;
        border-radius: 2px 2px 2px 2px;
        font-size: 14px;
        color: #4e5969;
        margin-right: 8px;
        line-height: 32px;
        cursor: pointer;

        &.hig {
          background: #ffe8e8;
          color: #e7000b;
        }

        &:hover {
          color: #e7000b;
        }
      }
    }
    //数据
    .data-bos {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      margin-bottom: 40px;
      .data-list {
        width: 224px;
        background: #f4f4f4;
        border-radius: 10px;
        padding: 20px 20px 22px 20px;
        cursor: pointer;
        .data-img {
          width: 184px;
          height: 184px;
          border-radius: 10px;
        }
        .data-title {
          margin-top: 4px;
          font-size: 14px;
          color: #101828;
          height: 40px;
        }
        .money {
          margin-top: 4px;
          .money1 {
            font-size: 16px;
            color: #e7000b;
          }
          .money2 {
            font-size: 12px;
            color: #99a1af;
            text-decoration: line-through;
            padding-left: 6px;
          }
        }
        .data-cat {
          width: 86px;
          height: 26px;
          background: #e7000b;
          border-radius: 2px;
          font-size: 14px;
          color: #ffffff;
          line-height: 26px;
          text-align: center;
          margin-top: 16px;
        }
      }
    }
  }
}
</style>
