<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, 'categoryId')"
            class="classify-list"
            v-for="(item, index) in classifyList"
            :key="index"
            :class="item.id == httpObj.categoryId ? 'hig' : ''"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
      <div class="head-bos head-bos1">
        <div class="head-title">字母:</div>
        <div class="head-box">
          <div
            @click="onHead(item, 'initial')"
            class="classify-list"
            v-for="(item, index) in initialList"
            :key="index"
            :class="item.id == httpObj.initial ? 'hig' : ''"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
      <div class="head-bos head-bos1">
        <div class="head-title">品牌名称:</div>
        <div class="head-box">
          <el-input v-model="httpObj.name" style="width: 240px" placeholder="请输入品牌名称" />
        </div>
      </div>
    </div>
    <!-- 商品 -->
    <div class="expert-bos">
      <!-- @click="onPath('/item?id=' + item.id)" -->
      <div v-for="(item, index) in dataList" :key="index" class="expert-list">
        <img :src="item.brandBigImage" alt="" />
        <div class="itemName ellipsis">{{ item.brandName || '' }}</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 { getBrandByCategoryList, getBrandPage } from '@/api/search/index';
import { getProductCategoryTree } from '@/api/home/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>({
  categoryId: '',
  initial: '',
  name: '',
  pageSize: 30,
  pageNum: 1
});
const initialList = ref<any>([
  { label: '全部', id: '' },
  { label: 'A', id: 'A' },
  { label: 'B', id: 'B' },
  { label: 'C', id: 'C' },
  { label: 'D', id: 'D' },
  { label: 'E', id: 'E' },
  { label: 'F', id: 'F' },
  { label: 'G', id: 'G' },
  { label: 'H', id: 'H' },
  { label: 'I', id: 'I' },
  { label: 'J', id: 'J' },
  { label: 'K', id: 'K' },
  { label: 'L', id: 'L' },
  { label: 'M', id: 'M' },
  { label: 'N', id: 'N' },
  { label: 'O', id: 'O' },
  { label: 'P', id: 'P' },
  { label: 'Q', id: 'Q' },
  { label: 'R', id: 'R' },
  { label: 'S', id: 'S' },
  { label: 'T', id: 'T' },
  { label: 'U', id: 'U' },
  { label: 'V', id: 'V' },
  { label: 'W', id: 'W' },
  { label: 'X', id: 'X' },
  { label: 'Y', id: 'Y' },
  { label: 'Z', id: 'Z' }
]);
const sortField1 = ref<any>('');
const sortField2 = ref<any>('');
const sortField3 = ref<any>('');

const getList = () => {
  getBrandByCategoryList(httpObj.value).then((res) => {
    if (res.code == 200) {
      dataList.value = res.rows;
      // 判断是否还有更多数据
      hasMore.value = res.total > httpObj.value.pageSize * httpObj.value.pageNum;
    }
  });
};

//头部分类

const onHead = (item: any, type: string) => {
  if (type == 'topCategoryId') {
    if (item.id) {
      getBrand();
    } else {
    }
  }
  httpObj.value[type] = item.id;
};

//查询品牌
const getBrand = () => {
  getBrandPage({
    categoryName: categoryName.value,
    categoryId: httpObj.value.topCategoryId,
    pageSize: 100,
    pageNum: 1
  }).then((res) => {
    if (res.code == 200) {
      brandList.value = res.rows;
    }
  });
};

//筛选品牌
const remoteMethod = (res: any) => {
  if (res) {
    categoryName.value = res;
  } else {
    categoryName.value = '';
  }
  getBrand();
};

// 筛选条件
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(() => {
  getProductCategoryTree({}).then((res) => {
    if (res.code == 200) {
      res.data.unshift({
        label: '全部',
        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-bos1 {
        // align-items: center;
      }

      .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);
          }
        }
      }
    }
  }

  // 商品
  // 行家精选
  .expert-bos {
    width: 1200px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
    gap: 15px;

    .expert-list {
      width: 228px;
      height: 140px;
      background: #ffffff;
      border-radius: 10px;
      padding: 20px;
      cursor: pointer;

      img {
        width: 100%;
        height: 70px;
      }

      .itemName {
        font-weight: 400;
        font-size: 14px;
        color: #999999;
        margin-top: 10px;
        text-align: center;
      }
    }
  }
}
</style>
