<template>
  <div class="search-pages">
    <!-- 筛选 -->
    <div class="search-head">
      <div class="head-bos">
        <div class="head-title">分类:</div>
        <div class="head-box">
          <div
            @click="onHead(item, 'topCategoryId')"
            class="classify-list"
            v-for="(item, index) in classifyList"
            :key="index"
            :class="item.id == httpObj.topCategoryId ? 'hig' : ''"
          >
            {{ item.categoryName }}
          </div>
        </div>
      </div>
      <div class="head-bos">
        <div class="head-title">品牌:</div>
        <div class="head-box">
          <div
            @click="onHead(item, 'brandId')"
            class="classify-list"
            v-for="(item, index) in brandList"
            :key="index"
            :class="item.id == httpObj.brandId ? 'hig' : ''"
          >
            {{ item.brandName }}
          </div>
        </div>
      </div>
      <div class="head-bos">
        <div class="head-title">价格:</div>
        <div class="head-box">
          <div
            @click="onHead(item, 'priceRange')"
            class="classify-list"
            v-for="(item, index) in priceList"
            :key="index"
            :class="item.id == httpObj.priceRange ? 'hig' : ''"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
      <div class="head-bos">
        <div class="head-sort flex-row-center" @click="onSort(1)" :class="sortField1 != '' ? 'hig' : ''">
          <div>智能匹配</div>
          <div class="sort-box">
            <el-icon :color="sortField1 == 'Asc' ? '#E7000B' : '#333333'" class="icon1" :size="12"><CaretTop /></el-icon>
            <el-icon :color="sortField1 == 'Desc' ? '#E7000B' : '#333333'" class="icon2" :size="12"><CaretBottom /></el-icon>
          </div>
        </div>
        <div class="head-sort flex-row-center" @click="onSort(2)" :class="sortField2 != '' ? 'hig' : ''">
          <div>库存排序</div>
          <div class="sort-box">
            <el-icon :color="sortField2 == 'Asc' ? '#E7000B' : '#333333'" class="icon1" :size="12"><CaretTop /></el-icon>
            <el-icon :color="sortField2 == 'Desc' ? '#E7000B' : '#333333'" class="icon2" :size="12"><CaretBottom /></el-icon>
          </div>
        </div>
        <div class="head-sort flex-row-center" @click="onSort(3)" :class="sortField3 != '' ? 'hig' : ''">
          <div>价格排序</div>
          <div class="sort-box">
            <el-icon :color="sortField3 == 'Asc' ? '#E7000B' : '#333333'" class="icon1" :size="12"><CaretTop /></el-icon>
            <el-icon :color="sortField3 == 'Desc' ? '#E7000B' : '#333333'" class="icon2" :size="12"><CaretBottom /></el-icon>
          </div>
        </div>
        <el-checkbox-group v-model="checkList" style="margin-top: 15px" @change="getList">
          <el-checkbox label="可定制" value="isCustomize" />
        </el-checkbox-group>
      </div>
    </div>
    <!-- 商品 -->
    <div class="expert-bos">
      <div v-for="(item, index) in dataList" :key="index" class="expert-list" @click="onPath('/item?id=' + item.id)">
        <img :src="item.productImage" alt="" />
        <div class="itemName ellipsis">{{ item.itemName || '' }}</div>
        <div class="price">
          <span class="memberPrice">¥{{ item.memberPrice }}</span>
          <span class="marketPrice">¥{{ item.marketPrice }}</span>
        </div>
      </div>
    </div>
    <!-- 游标分页控制 -->
    <pagination
      v-show="dataList.length > 0"
      v-model:page="httpObj.pageNum"
      v-model:limit="httpObj.pageSize"
      v-model:way="way"
      :cursor-mode="true"
      :has-more="hasMore"
      @pagination="getList"
    />
  </div>
</template>

<script setup lang="ts">
import { getSpecialProductList, getBrandPage, getSpecialCategoryList, getSpecialBrandList } from '@/api/search/index';
import { onPath } from '@/utils/siteConfig';
import Pagination from '@/components/Pagination/index.vue';
const route = useRoute();
const type = ref<any>(1);
const dataList = ref<any>([]);
const checkList = ref<any>([]);
const classifyList = ref<any>([]);
const brandList = ref<any>([]);
const categoryName = ref<any>('');
const hasMore = ref(true); // 是否还有更多数据
const way = ref<any>(1);
const httpObj = ref<any>({
  topCategoryId: '',
  brandId: '',
  priceRange: '',
  sortField: '',
  sortOrder: '',
  isCustomize: '',
  pageSize: 10,
  pageNum: 1
});
const priceList = ref<any>([
  { label: '全部', id: '' },
  { label: '1-100', id: 1 },
  { label: '100-500', id: 2 },
  { label: '500-1000', id: 3 },
  { label: '1000以上', id: 4 }
]);
const sortField1 = ref<any>('');
const sortField2 = ref<any>('');
const sortField3 = ref<any>('');

const getList = () => {
  if (sortField1.value) {
    httpObj.value.sortField = '1';
    httpObj.value.sortOrder = sortField1.value;
  }
  if (sortField2.value) {
    httpObj.value.sortField = httpObj.value.sortField + (httpObj.value.sortField ? ',2' : '2');
    httpObj.value.sortOrder = httpObj.value.sortOrder + (httpObj.value.sortOrder ? ',' + sortField2.value : sortField2.value);
  }
  if (sortField3.value) {
    httpObj.value.sortField = httpObj.value.sortField + (httpObj.value.sortField ? ',3' : '3');
    httpObj.value.sortOrder = httpObj.value.sortOrder + (httpObj.value.sortOrder ? ',' + sortField3.value : sortField3.value);
  }
  if (checkList.value.length > 0) {
    httpObj.value.isCustomize = 1;
  } else {
    httpObj.value.isCustomize = '';
  }
  getSpecialProductList(httpObj.value).then((res) => {
    if (res.code == 200) {
      dataList.value = res.rows;
      // 判断是否还有更多数据
      hasMore.value = dataList.value.length === httpObj.value.pageSize;
    }
  });
};

//头部分类

const onHead = (item: any, type: string) => {
  httpObj.value[type] = item.id;
  getList();
};

// 筛选条件
const onSort = (type: number) => {
  if (type == 1) {
    if (sortField1.value == '' || sortField1.value == 'Desc') {
      sortField1.value = 'Asc';
    } else if (sortField1.value == 'Asc') {
      sortField1.value = 'Desc';
    }
  }
  if (type == 2) {
    if (sortField2.value == '' || sortField2.value == 'Desc') {
      sortField2.value = 'Asc';
    } else if (sortField2.value == 'Asc') {
      sortField2.value = 'Desc';
    }
  }
  if (type == 3) {
    if (sortField3.value == '' || sortField3.value == 'Desc') {
      sortField3.value = 'Asc';
    } else if (sortField3.value == 'Asc') {
      sortField3.value = 'Desc';
    }
  }
  getList();
};

onMounted(() => {
  //特价商品品牌
  getSpecialBrandList({}).then((res) => {
    if (res.code == 200) {
      res.data.unshift({
        brandName: '全部',
        id: ''
      });
      brandList.value = res.data;
    }
  });

  //特价商品分类
  getSpecialCategoryList({}).then((res) => {
    if (res.code == 200) {
      res.data.unshift({
        categoryName: '全部',
        id: ''
      });
      classifyList.value = res.data;
    }
  });
  getList();
});
</script>

<style lang="scss" scoped>
.search-pages {
  width: 1200px;
  margin: 0 auto;
  // 筛选
  .search-head {
    width: 1200px;
    background: #ffffff;
    border-radius: 10px;
    padding: 0 15px 15px 15px;
    font-size: 14px;
    color: #101828;
    .head-bos {
      display: flex;
      .head-title {
        width: 70px;
        padding-top: 15px;
      }
      .head-box {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        width: 0;
        gap: 10px 15px;
        border-bottom: 1px solid #e5e7eb;
        padding: 15px 0;
        .classify-list {
          cursor: pointer;
          &.hig {
            color: var(--el-color-primary);
          }
        }
      }
      .head-sort {
        margin: 15px 15px 0 0;
        width: 108px;
        height: 32px;
        border: 1px solid #e5e7eb;
        border-radius: 2px 2px 2px 2px;
        cursor: pointer;
        &.hig {
          border: 1px solid var(--el-color-primary);
        }
        .sort-box {
          margin-left: 10px;
          position: relative;
          height: 32px;
          .icon1 {
            position: absolute;
            top: 6px;
          }
          .icon2 {
            position: absolute;
            bottom: 6px;
          }
        }
      }
    }
  }
  // 商品
  // 行家精选
  .expert-bos {
    width: 1200px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
    gap: 20px 12.5px;
    .expert-list {
      width: 230px;
      height: 306px;
      background: #ffffff;

      padding: 20px;
      cursor: pointer;
      img {
        width: 100%;
        height: 190px;
      }
      .itemName {
        font-weight: 400;
        font-size: 14px;
        color: #101828;
        margin: 27px 0 2px 0;
      }
      .price {
        .memberPrice {
          color: var(--el-color-primary);
          font-size: 16px;
          color: #e7000b;
        }
        .marketPrice {
          font-size: 12px;
          color: #99a1af;
          line-height: 20px;
          text-decoration-line: line-through;
          text-transform: none;
          margin-left: 6px;
        }
      }
    }
  }
}
</style>
