<template>
  <div class="project">
    <div class="project-pages">
      <img class="solve-img" src="@/assets/images/login-background.jpg" alt="" />
      <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
            @click="onFilter(item1, item2)"
            v-for="(item2, index2) in item1.list"
            :key="index2"
            class="filter-item"
            :class="item1.id == item2.id ? 'hig' : ''"
          >
            {{ item2.title }}
          </div>
        </div>
      </div>
      <!-- 数据 -->
      <div class="project-bos">
        <div v-for="(item, index) in dataList" :key="index" class="project-list" @click="onPath('/plan_info/project?id=' + item.id)">
          <img :src="item.uploadProgram" alt="" />
          <div class="project-box">
            <div class="project1">{{ item.caseTitle || '' }}</div>
            <div class="project2">
              {{ item.projectBrief || '' }}
            </div>
            <div class="project-more flex-row-between">
              <div></div>
              <div class="flex-row-start">
                <div style="margin-right: 5px">了解详情</div>
                <el-icon :size="14" color="#E7000B"><ArrowRight /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 游标分页控制 -->
    <div class="pagination-bos flex-row-between">
      <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>
  </div>
</template>

<script setup lang="ts">
import { onPath } from '@/utils/siteConfig';
import { getProjectCaseAllList, getCustomerIndustry, getProjectTypeList } from '@/api/plan/index';
import Pagination from '@/components/Pagination/index.vue';
const httpObj = ref<any>({
  topCategoryId: '',
  brandId: '',
  priceRange: '',
  sortField: '',
  sortOrder: '',
  isCustomize: '',
  pageSize: 10,
  pageNum: 1
});
const dataList = ref<any>([]);
const hasMore = ref(true); // 是否还有更多数据
const way = ref<any>(1);

const navList = ref<any>([
  { title: '专题分类' },
  { title: '大中型企业采购' },
  { title: '政府&公共采购' },
  { title: '营销福利' },
  { title: '商用工程' },
  { title: '中小型企业采购' }
]);
const filterListy = ref<any>([
  {
    title: '客户行业',
    key: 'clientIndustry',
    id: '',
    list: [
      {
        id: '',
        title: '全部'
      }
    ]
  },
  {
    title: '项目类型',
    key: 'projectType',
    id: '',
    list: [
      {
        id: '',
        title: '全部'
      }
    ]
  }
]);

onMounted(() => {
  //适配行业
  getCustomerIndustry({}).then((res) => {
    if (res.code == 200) {
      res.data.forEach((item: any) => {
        item.title = item.industryCategoryName;
        filterListy.value[0].list.push(item);
      });
    }
  });

  //项目类型
  getProjectTypeList({}).then((res) => {
    if (res.code == 200) {
      res.data.forEach((item: any) => {
        item.title = item.typeName;
        filterListy.value[1].list.push(item);
      });
    }
  });
  getList();
});
const getList = () => {
  getProjectCaseAllList(httpObj.value).then((res) => {
    if (res.code == 200) {
      dataList.value = res.rows;
      // 判断是否还有更多数据
      hasMore.value = dataList.value.length === httpObj.value.pageSize;
    }
  });
};

const onFilter = (item1: any, item2: any) => {
  item1.id = item2.id;
  httpObj.value[item1.key] = item2.id;
  getList();
};
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<style lang="scss" scoped>
.project {
  width: 100%;
  background-color: #ffffff;
  .project-pages {
    width: 1200px;
    margin: 0 auto;
    .solve-img {
      width: 1200px;
      height: 380px;
      border-radius: 10px;
    }
    .filter-bos {
      .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;
          }
        }
      }
    }
    //项目案例
    .project-bos {
      display: flex;
      width: 1200px;
      margin-top: 25px;
      gap: 15px;
      flex-wrap: wrap;
      .project-list {
        width: 390px;
        height: 350px;
        cursor: pointer;
        border-radius: 10px;
        overflow: hidden;

        .project-box {
          width: 390px;
          height: 156px;
          background: #ffffff;
          border-radius: 10px;
          margin-top: -20px;
          z-index: 2;
          position: absolute;
          padding: 20px;
          border: 1px solid #e5e7eb;
        }
        img {
          width: 390px;
          height: 180px;
        }
        .project1 {
          font-weight: 600;
          font-size: 16px;
          color: #101828;
          margin-bottom: 14px;
        }
        .project2 {
          font-size: 14px;
          color: #364153;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2; /* 添加标准属性 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .project-more {
          text-align: right;
          font-size: 14px;
          color: var(--el-color-primary);
          margin-top: 18px;
        }
      }
    }
  }
}
.solve {
  width: 100%;

  .solve-head {
    width: 100%;
    background: #ffffff;

    .head-bos {
      width: 1200px;
      margin: 0 auto;
      padding-bottom: 20px;
    }
  }

  .nav-bos {
    border-bottom: 1px solid #e5e7eb;
    width: 1200px;
    padding-bottom: 20px;

    .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 {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 22px 0 40px 0;

    .data-list {
      width: 386px;
      height: 302px;
      background: #ffffff;
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;

      .data-img {
        height: 200px;
        width: 386px;
      }

      .data-box {
        height: 102px;
        width: 386px;
        padding: 12px 20px;

        .title {
          font-weight: 600;
          font-size: 14px;
          color: #101828;
        }

        .info {
          font-size: 12px;
          color: #364153;
          margin-top: 4px;
        }

        .text {
          font-size: 14px;
          color: #e7000b;
        }
      }
    }
  }

  //分页
  .pagination-bos {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 60px;
    :deep(.el-select__wrapper) {
      background: #f4f4f4;
      box-shadow: 0 0 0 1px #e5e6eb inset;
      border-radius: 2px;
    }
    :deep(.el-select__placeholder) {
      color: #1d2129;
    }
    :deep(.el-input__wrapper) {
      background: #f4f4f4;
      box-shadow: 0 0 0 1px #e5e6eb inset;
      border-radius: 2px;
    }
    :deep(.el-input__inner) {
      color: #1d2129;
    }

    :deep(.btn-prev) {
      background: #f4f4f4;
      border: 1px solid #e5e6eb;
      margin-right: 8px;
    }
    :deep(.btn-next) {
      background: #f4f4f4;
      border: 1px solid #e5e6eb;
      margin-left: 8px;
    }
    :deep(.el-pager) {
      gap: 0 8px;
      li {
        background: #f4f4f4;
        border: 1px solid #e5e6eb;
        color: #1d2129;
      }
    }
  }
}
</style>
