<script setup>
import { ref } from 'vue';
import BlogBox from "../components/Blog_box.vue";

const tags = ref([
  { name: '家猪饲养', active: false },
  { name: '猪舍管理', active: false },
  { name: '猪饲料配方', active: false },
  { name: '猪种选择', active: false },
  { name: '猪场建设', active: false },
  { name: '环境控制', active: false },
  { name: '疫病防控', active: false },
  { name: '生猪免疫', active: false },
  { name: '饲养技术', active: false },
  { name: '家猪繁育', active: false },
  { name: '猪瘟预防', active: false },
  { name: '生猪疫苗', active: false },
  { name: '屠宰加工', active: false },
  { name: '猪肉品质', active: false },
  { name: '养猪设备', active: false },
  { name: '自动喂料', active: false },
  { name: '猪粪处理', active: false },
  { name: '循环利用', active: false },
  { name: '生猪运输', active: false },
  { name: '养猪政策', active: false },
  { name: '生猪市场', active: false },
  { name: '风险控制', active: false },
  { name: '遗传改良', active: false },
  { name: '饲料添加剂', active: false },
  { name: '生长调控', active: false },
  { name: '消化率提升', active: false },
  { name: '高效养猪', active: false },
  { name: '猪场消毒', active: false },
  { name: '智能养猪', active: false },
  { name: '数据养猪', active: false },
  { name: '健康管理', active: false },
  { name: '繁殖管理', active: false },
  { name: '环境优化', active: false },
  { name: '供应链管理', active: false },
  { name: '抗生素替代', active: false },
  { name: '兽医服务', active: false },
  { name: '营养管理', active: false },
  { name: '通风系统', active: false },
  { name: '饲料采购', active: false },
  { name: '种植基地', active: false },
  { name: '畜牧业创新', active: false },
  { name: '经济效益', active: false },
  { name: '信息化管理', active: false },
  { name: '肉品追溯', active: false },
  { name: '生长周期', active: false },
  { name: '劳动管理', active: false },
  { name: '粪污利用', active: false },
  { name: '智慧畜牧', active: false },
  { name: '可持续发展', active: false },
  { name: '生态养猪', active: false }
]);


const searchQuery = ref('');

const imageURL = (r1, r2) => {
  return `https://picsum.photos/${220 + Math.floor(r1 * 500)}/${220 + Math.floor(r2 * 500)}`
}
const blogs = ref([
  { title: '如何提升家猪的生长速度', author: '张强', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-12 08:30', tags: ['家猪饲养', '生长调控'] },
  { title: '猪舍管理的最佳实践', author: '李梅', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-11 16:45', tags: ['猪舍管理', '环境优化'] },
  { title: '选择优质猪种的重要性', author: '王涛', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-10 10:15', tags: ['猪种选择', '遗传改良'] },
  { title: '猪饲料配方调整技巧', author: '刘刚', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-09 14:00', tags: ['猪饲料配方', '饲料添加剂'] },
  { title: '现代猪场建设的关键要素', author: '陈峰', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-08 09:50', tags: ['猪场建设', '智能养猪'] },
  { title: '如何有效控制养猪环境', author: '赵立', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-07 11:30', tags: ['环境控制', '猪舍管理'] },
  { title: '猪免疫接种的最佳时机', author: '孙华', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-06 13:00', tags: ['生猪免疫', '疫病防控'] },
  { title: '如何提高猪肉的品质', author: '周凯', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-05 15:00', tags: ['猪肉品质', '屠宰加工'] },
  { title: '智能化养猪设备的应用', author: '杨峰', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-04 09:20', tags: ['养猪设备', '自动喂料'] },
  { title: '猪粪处理与资源回收的创新', author: '吴敏', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-03 17:30', tags: ['猪粪处理', '循环利用'] },
  { title: '生猪疫苗的选用标准', author: '高雪', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-02 11:00', tags: ['生猪疫苗', '疫病防控'] },
  { title: '如何建立高效的猪场管理体系', author: '张涛', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-01 13:30', tags: ['饲养技术', '风险控制'] },
  { title: '从猪场到市场的供应链管理', author: '李丹', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-31 16:40', tags: ['供应链管理', '生猪市场'] },
  { title: '抗生素替代技术的研究与应用', author: '周鑫', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-30 10:50', tags: ['抗生素替代', '饲料添加剂'] },
  { title: '生态养猪：环境友好与可持续发展', author: '刘婧', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-29 08:00', tags: ['生态养猪', '可持续发展'] },
  { title: '家猪繁殖管理的最佳方法', author: '陈光', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-28 09:00', tags: ['家猪繁育', '繁殖管理'] },
  { title: '猪场智能化的未来趋势', author: '王慧', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-27 14:10', tags: ['智能养猪', '智慧畜牧'] },
  { title: '优化猪肉品质的生产流程', author: '周华', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-26 16:25', tags: ['猪肉品质', '生长周期'] },
  { title: '高效养猪的创新技术', author: '刘磊', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-25 13:40', tags: ['高效养猪', '饲养技术'] },
  { title: '猪场管理的数字化转型', author: '张丽', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-24 12:10', tags: ['信息化管理', '数据养猪'] },
  { title: '猪肉产品追溯系统的建设', author: '李平', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-23 15:30', tags: ['肉品追溯', '生猪免疫'] },
  { title: '如何减少猪场的疫病传播', author: '赵新', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-22 17:00', tags: ['疫病防控', '猪舍管理'] },
  { title: '科学管理猪场劳动成本', author: '王萌', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-21 11:15', tags: ['劳动管理', '经济效益'] },
  { title: '猪种改良与遗传优化的前景', author: '孙凯', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-20 09:00', tags: ['遗传改良', '猪种选择'] },
  { title: '生猪运输过程中风险的防控', author: '杨华', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-19 12:40', tags: ['生猪运输', '风险控制'] },
  { title: '猪场的环保与粪污利用技术', author: '王波', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-18 14:10', tags: ['粪污利用', '生态养猪'] },
  { title: '智能化管理提升养猪效益', author: '赵雪', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-17 13:30', tags: ['智能养猪', '高效养猪'] },
  { title: '家猪养殖中的生长调控策略', author: '陈婷', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-16 10:30', tags: ['生长调控', '家猪饲养'] },
  { title: '如何高效利用猪饲料', author: '李伟', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-15 09:10', tags: ['猪饲料配方', '饲料添加剂'] },
  { title: '猪场废水处理与资源再利用', author: '周丹', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-14 12:30', tags: ['猪粪处理', '循环利用'] },
  { title: '猪场防疫技术与管理措施', author: '王鑫', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-13 14:50', tags: ['疫病防控', '生猪免疫'] },
  { title: '现代养猪业的科技创新', author: '刘辉', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-12 16:00', tags: ['畜牧业创新', '智能养猪'] },
  { title: '新型猪肉加工技术解析', author: '高林', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-11 11:20', tags: ['屠宰加工', '猪肉品质'] },
  { title: '猪场的健康管理体系建设', author: '陈杰', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-10 08:40', tags: ['健康管理', '饲养技术'] },
  { title: '自动化养猪技术的优势分析', author: '李斌', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-09 13:30', tags: ['养猪设备', '自动喂料'] },
  { title: '猪场食品安全与监管体系', author: '张文', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-08 15:10', tags: ['生猪免疫', '肉品追溯'] },
  { title: '精准农业与家猪养殖的结合', author: '李龙', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-07 09:50', tags: ['精准农业', '智能养猪'] },
  { title: '如何提高家猪的繁殖效率', author: '王丽', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-06 10:20', tags: ['家猪繁育', '繁殖管理'] },
  { title: '猪舍设计与环境调控技术', author: '孙瑶', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-05 11:00', tags: ['猪舍管理', '环境控制'] },
  { title: '如何选择最合适的猪种进行养殖', author: '赵林', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-04 14:00', tags: ['猪种选择', '遗传改良'] },
  { title: '猪场环境污染控制与治理技术', author: '周波', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-03 16:30', tags: ['环境优化', '猪粪处理'] },
  { title: '猪肉市场分析与趋势预测', author: '王海', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-02 10:50', tags: ['生猪市场', '经济效益'] },
  { title: '家猪养殖中的健康风险控制', author: '杨东', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-01 09:30', tags: ['风险控制', '健康管理'] },
  { title: '家猪繁育管理的难点与对策', author: '李彬', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-31 15:40', tags: ['家猪繁育', '繁殖管理'] },
  { title: '猪场生产效率的提升路径', author: '陈明', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-30 13:00', tags: ['高效养猪', '饲养技术'] },
  { title: '猪场废物利用与绿色养殖', author: '周宇', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-29 11:20', tags: ['循环利用', '生态养猪'] },
  { title: '生猪运输中的安全问题与防控', author: '王飞', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-28 14:50', tags: ['生猪运输', '风险控制'] },
  { title: '家猪免疫管理的关键措施', author: '刘薇', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-27 16:30', tags: ['生猪免疫', '疫病防控'] },
  { title: '如何使用智能设备提高养猪效率', author: '赵婷', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-26 10:40', tags: ['智能养猪', '养猪设备'] },
  { title: '猪肉品质的影响因素分析', author: '张莉', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-25 13:30', tags: ['猪肉品质', '生长周期'] },
  { title: '猪场管理中数据分析的应用', author: '李帅', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-24 14:10', tags: ['数据养猪', '信息化管理'] },
  { title: '猪种选择对养殖效益的影响', author: '王月', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-23 16:40', tags: ['猪种选择', '经济效益'] }
])



const toggleTag = (tag) => {
  tag.active = !tag.active;
};

const filterBlogs = () => {
  return blogs.value.filter(blog => {
    const matchesTags = blog.tags.some(tag => tags.value.find(t => t.name === tag && t.active));
    const matchesSearch = blog.title.toLowerCase().includes(searchQuery.value.toLowerCase());
    return (matchesTags || tags.value.every(t => !t.active)) && matchesSearch;
  });
};
</script>

<template>
  <div class="container">
    <div class="filters">
      <div class="tags">
        <span v-for="tag in tags" :key="tag.name" :class="{ active: tag.active }" @click="toggleTag(tag)">
          {{ tag.name }}
        </span>
      </div>
      <input type="text" v-model="searchQuery" placeholder="搜索博客..." class="search-bar" />
    </div>

    <div class="blogs">
      <BlogBox v-for="blog in filterBlogs()" :key="blog.title" :blog="blog" />
    </div>
  </div>
</template>

<style scoped>
.container {
  height: calc(100vh - 100px);
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  //margin-top: 70px;
}

.filters {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

.tags {
  display: flex;
  flex-wrap: wrap;  /* 允许标签换行 */
  gap: 10px;
  justify-content: center; /* 使标签居中 */
}

.tags span {
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 15px;
}

.tags span.active {
  background-color: #007bff;
  color: white;
}

.search-bar {
  padding: 10px;
  margin: 20px 0;
  width: 50%;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.blogs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.theme-light .tags span.active {
  background-color: #ffb74d;
  color: black;
}

.theme-light .search-bar {
  border: 1px solid #ffb74d;
}

::-webkit-scrollbar {
  display: none;
}
</style>
