<template>
  <div id="app">
    <!-- 顶部导航栏 -->
    <el-header class="navbar">
      <el-menu mode="horizontal" background-color="#333" text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item index="1">安装教程</el-menu-item>
        <el-menu-item index="2">开发服务</el-menu-item>
        <el-menu-item index="3">我的订单</el-menu-item>
      </el-menu>
      <div class="user-actions">
        <el-button type="primary">立即登录</el-button>
        <el-button type="success">快速注册</el-button>
      </div>
    </el-header>

    <!-- 搜索区域 -->
    <el-main class="search-section">
      <h1>毕设网</h1>
      <p>优质的设计资源共享平台</p>
      <el-input placeholder="搜索设计"
                v-model="queryParams.name"
                clearable
                @keyup.enter.native="handleQuery"
                class="search-box">
        <el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
      </el-input>
    </el-main>

    <!-- 分类导航 -->
<!--    <el-main>-->
<!--      <el-menu mode="horizontal" class="categories">-->
<!--        <el-menu-item index="1">设计导航</el-menu-item>-->
<!--        <el-menu-item index="2">PHP设计</el-menu-item>-->
<!--        <el-menu-item index="3">Java设计</el-menu-item>-->
<!--        <el-menu-item index="4">微信小程序</el-menu-item>-->
<!--      </el-menu>-->
<!--    </el-main>-->

    <el-main>
      <el-menu mode="horizontal"
               class="categories"
               @select="handleQueryByType">
        <el-menu-item
          v-for="(item, index) in typeList"
          :key="item.number"
          :index="item.id"
          @click="handleQueryByType(item.number)">
          {{ item.name }}
        </el-menu-item>
      </el-menu>
    </el-main>

    <!-- 最新设计展示 -->
    <el-main>
      <h2 style="display: flex;justify-content: center;align-items: center">最新设计</h2>
      <div class="wai">
      <el-row :gutter="20" class="project-grid">
        <el-col :span="6" v-for="(item, index) in goodsList" :key="index" style="margin-bottom: 30px">
          <router-link :to="`/cusDetails/${item.id}`">
          <el-card :body-style="{ padding: '5px' }">
            <el-image :src="`http://127.0.0.1:8080${item.cover}`" class="image" style="width:100px;height:160px"/>
            <div style="padding: 8px;">
              <span>{{ item.name }}</span>
              <div class="bottom clearfix">
                <span class="price" >价格：￥{{ item.price }}</span>
              </div>
              <div>
                <span >项目简介：{{item.introduction}}</span>
              </div>
            </div>
          </el-card>
          </router-link>
        </el-col>
      </el-row>
      </div>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

    </el-main>


        <!-- 标签部分 -->
        <div class="tags-container">
      <el-button
        v-for="(tag, index) in designTypeList"
        :key="tag.type"
        :label="tag.name"
        @click="handleQueryByType(tag.type)"
          style="margin: 5px;">
        {{ tag.name }}
      </el-button>
        </div>


    <!--页脚部分-->
    <footer class="footer">
      <div class="footer-content">
        <p>© 2024 Company Name. All Rights Reserved.</p>
        <p>联系我们: contact@example.com | 电话: 123-456-7890</p>
        <nav>
          <a href="/about">关于我们</a> |
          <a href="/privacy">隐私政策</a> |
          <a href="/terms">使用条款</a>
        </nav>
      </div>
    </footer>
  </div>

</template>

<script>
import {listAllGoods} from "@/api/system/goods";
import {listType} from "@/api/system/type";
import {listDesignType} from "@/api/system/designType";

export default {
  data() {
    return {
      searchQuery: '',
      // 总条数
      total: 0,
      // 商品表格数据
      goodsList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 12,
        name: null,
        cover: null,
        technicalTypeId: null,
        designTypeId: null,
        price: null,
        introduction: null,
        details: null,
        resource: null,
        technicalName: null,
        designName: null,
        createTime: null,
      },

      // 技术类型表格数据
      typeList: [],
      queryParamsTn: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        number: null,
      },

      // 设计类型表格数据
      designTypeList: [],
      queryParamsDn: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        type: null,
      },
    };
  },
  mounted() {
  },
  created() {
    this.getList();
    this.getTnList()
    this.getDnList()
  },
  methods: {
    /** 查询商品列表 */
    getList() {
      listAllGoods(this.queryParams).then(response => {
        this.goodsList = response.rows;
        this.total = response.total;
      });
    },
    /** 查询技术类型列表 */
    getTnList() {
      listType(this.queryParamsTn).then(response => {
        this.typeList = response.rows;
      });
    },
    /** 查询设计类型列表 */
    getDnList() {
      listDesignType(this.queryParamsDn).then(response => {
        this.designTypeList = response.rows;
        this.total = response.total;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 根据type查询商品列表 */
    handleQueryByType(type) {
      this.queryParams.technicalTypeId = type;
      listAllGoods(this.queryParams).then(response => {
        this.goodsList = response.rows;
        this.total = response.total;
      });
    },

  }
};
</script>

<style scoped lang="scss">

.container {
  width: 60%; /* 调整宽度，留出两边空白 */
  margin: 0 auto; /* 自动左右边距居中 */
}
/* 卡片的布局样式 */
.card-container {
  display: flex; /* 使用 flex 布局来水平排列卡片 */
  justify-content: space-around; /* 在卡片之间留出空隙 */
}

.el-card {
  width: 260px; /* 卡片宽度调整 */
  height: 300px;
  text-align: center;
  padding: 10px; /* 给卡片增加一些内边距 */
  background-color: #f4f4f4; /* 设置背景颜色 */
  border-radius: 8px; /* 圆角样式 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.card img {
  width: 100%; /* 图片占满卡片宽度 */
  border-radius: 8px; /* 图片圆角和卡片保持一致 */
}
/* 样式和之前相同 */
.navbar {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.search-section {
  text-align: center;
  background-color: #333;
  color: white;
  padding: 50px 20px;
}

.search-box {
  margin-top: 20px;
  width: 400px;
}

.project-grid {
  margin-top: 20px;
}

.image {
  width: 100%;
  height: 150px;
}

.price {
  color: #ff9900;
  font-weight: bold;
}

.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  color: #409EFF;
  cursor: pointer;
}


.tags-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px;
}

.tags-container span {
  margin: 10px;
  padding: 8px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  background-color: #fff;
  transition: background-color 0.3s;
}

.tags-container span:hover {
  background-color: #eee;
}

/* 页脚样式 */
.footer {
  background-color: #333;
  color: white;
  padding: 20px 0;
  text-align: center;
  margin-top: 20px;
}

.footer a {
  color: #ddd;
  margin: 0 10px;
  text-decoration: none;
}

.footer a:hover {
  color: white;
}

.footer-content p {
  margin: 5px 0;
}
.wai{
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1200px;
}

.el-menu {
  border-bottom: none; /* 去掉底部的线条 */
}




</style>
