<template>
  <div class="home-main-footer-main">
    <div class="left">
      <div class="select-research-box">
        <div class="select-box-header">
          <div class="icon"></div>
          <div class="title">{{ "科技领域" }}</div>
        </div>
        <div class="select-main">
          <div class="checkbox-group">
            <el-checkbox class="filter-checkbox" :model-value="isGroupAllSelected(researchTypeIds)"
              @change="val => handleToggleAll(val, researchTypeIds)">
              全部领域
            </el-checkbox>
            <el-checkbox v-for="type in researchTypeList" :key="type.id" v-model="selectedResearchIds" :label="type.id"
              class="filter-checkbox" @change="handleFilterChange">
              {{ type.name }}
            </el-checkbox>
          </div>
        </div>
      </div>

      <div class="select-time-box">
        <div class="select-box-header">
          <div class="icon"></div>
          <div class="title">{{ "发布时间" }}</div>
        </div>
        <div class="select-main">
          <div class="checkbox-group">
            <el-checkbox class="filter-checkbox" :model-value="isGroupAllSelected(researchTimeIds)"
              @change="val => handleToggleAll(val, researchTimeIds)">
              全部时间
            </el-checkbox>
            <el-checkbox v-for="type in researchTimeList" :key="type.id" v-model="selectedResearchTimeIds"
              :label="type.id" class="filter-checkbox" @change="handleFilterChange">
              {{ type.name }}
            </el-checkbox>
          </div>
        </div>
      </div>

      <div class="select-hearing-box">
        <div class="select-box-header">
          <div class="icon"></div>
          <div class="title">{{ "听证会部门" }}</div>
        </div>
        <div class="select-main">
          <div class="checkbox-group hearing-grid">
            <el-checkbox class="filter-checkbox" :model-value="isGroupAllSelected(researchHearingIds)"
              @change="val => handleToggleAll(val, researchHearingIds)">
              全部部门
            </el-checkbox>
            <el-checkbox v-for="type in researchHearingList" :key="type.id" v-model="selectedResearchHearingIds"
              :label="type.id" class="filter-checkbox" @change="handleFilterChange">
              {{ type.name }}
            </el-checkbox>
          </div>
        </div>
      </div>
    </div>

    <div class="right">
      <div class="card-box">
        <div class="card-content">
          <div v-for="(item, index) in displayList" :key="item.id ?? index">
            <div class="card-item" @click="emit('report-click', item)">
              <img class="card-item-img" src="../ThinkTankDetail/thinkDynamics/images/img congress.png"
                alt="report image" />
              <div class="card-item-text">
                <div class="card-item-title">
                  {{ item.title }}
                </div>
                <div class="card-item-time">
                  {{ item.time + ' · ' + item.content }}
                  <img src="../ThinkTankDetail/thinkDynamics/images/image open.png" alt="open icon"
                    class="card-open-image" />
                </div>
                <div class="card-item-category">
                  <AreaTag :key="index" :tagName="item.category">
                  </AreaTag>
                </div>
              </div>
            </div>
            <div class="divider" v-if="index !== displayList.length - 1"></div>
          </div>
        </div>
      </div>

      <div class="right-footer">
        <div class="info">
          共 {{ filteredHearingData.length }} 篇智库报告
        </div>
        <div class="page-box">
          <el-pagination :page-size="pageSize" background layout="prev, pager, next" :total="filteredHearingData.length"
            @current-change="handlePageChange" :current-page="currentPage" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";

const props = defineProps({
  researchTypeList: { type: Array, default: () => [] },
  researchTimeList: { type: Array, default: () => [] },
});

const emit = defineEmits(["report-click"]);

const pageSize = 10;
const currentPage = ref(1);

const selectedResearchIds = ref([]);
const selectedResearchTimeIds = ref([]);
const selectedResearchHearingIds = ref([]);

// 概览页暂无独立接口时，先使用一份静态数据（结构与智库动态保持一致）
const hearingData = ref([
  { id: 1, title: "美国国会听证会：人工智能与国家安全", content: "美中经济与安全审查委员会", category: "人工智能", time: "2025年7月8日" },
  { id: 2, title: "美国国会听证会：先进制造供应链韧性", content: "国会-行政部门中国委员会", category: "先进制造", time: "2025年6月15日" },
  { id: 3, title: "美国国会听证会：半导体出口管制与产业政策", content: "美国商务部", category: "半导体", time: "2025年5月22日" },
  { id: 4, title: "美国国会听证会：人工智能与国家安全", content: "美中经济与安全审查委员会", category: "人工智能", time: "2025年7月8日" },
  { id: 5, title: "美国国会听证会：先进制造供应链韧性", content: "国会-行政部门中国委员会", category: "先进制造", time: "2025年6月15日" },
  { id: 6, title: "美国国会听证会：半导体出口管制与产业政策", content: "美国商务部", category: "半导体", time: "2025年5月22日" },
  { id: 7, title: "美国国会听证会：人工智能与国家安全", content: "美中经济与安全审查委员会", category: "人工智能", time: "2025年7月8日" },
  { id: 8, title: "美国国会听证会：先进制造供应链韧性", content: "国会-行政部门中国委员会", category: "先进制造", time: "2025年6月15日" },
  { id: 9, title: "美国国会听证会：半导体出口管制与产业政策", content: "美国商务部", category: "半导体", time: "2025年5月22日" },
  { id: 10, title: "美国国会听证会：人工智能与国家安全", content: "美中经济与安全审查委员会", category: "人工智能", time: "2025年7月8日" },
  { id: 11, title: "美国国会听证会：先进制造供应链韧性", content: "国会-行政部门中国委员会", category: "先进制造", time: "2025年6月15日" },
  { id: 12, title: "美国国会听证会：半导体出口管制与产业政策", content: "美国商务部", category: "半导体", time: "2025年5月22日" },
]);

const researchHearingList = ref([
  { id: "美中经济与安全审查委员会", name: "美中经济与安全审查委员会" },
  { id: "国会-行政部门中国委员会", name: "国会-行政部门中国委员会" },
  { id: "美国商务部", name: "美国商务部" },
]);

const researchTypeIds = computed(() => (props.researchTypeList || []).map(item => item.id));
const researchTimeIds = computed(() => (props.researchTimeList || []).map(item => item.id));
const researchHearingIds = computed(() => (researchHearingList.value || []).map(item => item.id));

const getTargetSelection = ids => {
  if (ids === researchTypeIds.value) return selectedResearchIds;
  if (ids === researchTimeIds.value) return selectedResearchTimeIds;
  return selectedResearchHearingIds;
};

const isGroupAllSelected = ids =>
  ids.length > 0 && ids.every(id => getTargetSelection(ids).value.includes(id));

const handleToggleAll = (checked, ids) => {
  if (!ids.length) return;
  const targetSelection = getTargetSelection(ids);
  const nextSelected = new Set(targetSelection.value);
  if (checked) {
    ids.forEach(id => nextSelected.add(id));
  } else {
    ids.forEach(id => nextSelected.delete(id));
  }
  targetSelection.value = [...nextSelected];
  handleFilterChange();
};

const filteredHearingData = computed(() => {
  return (hearingData.value || []).filter(item => {
    const matchYear =
      selectedResearchTimeIds.value.length === 0 ||
      selectedResearchTimeIds.value.some(year => String(item.time || "").startsWith(year));
    const matchDepartment =
      selectedResearchHearingIds.value.length === 0 ||
      selectedResearchHearingIds.value.some(department =>
        String(item.content || "").includes(department) || String(item.title || "").includes(department)
      );
    const matchType =
      selectedResearchIds.value.length === 0 ||
      selectedResearchIds.value.some(typeId =>
        String(item.category || "").includes(typeId) || String(item.title || "").includes(typeId)
      );
    return matchYear && matchDepartment && matchType;
  });
});

const displayList = computed(() => {
  const list = filteredHearingData.value || [];
  const start = (currentPage.value - 1) * pageSize;
  return list.slice(start, start + pageSize);
});

const handleFilterChange = () => {
  currentPage.value = 1;
};

const handlePageChange = page => {
  currentPage.value = page;
};
</script>

<style lang="scss" scoped>
/* 统一资源库国会听证会内所有 el-checkbox 文本为 16px */
:deep(.el-checkbox__label) {
  font-size: 16px;
}

/* 外层对齐智库报告资源库布局 */
.home-main-footer-main {
  margin: 0 auto;
  margin-top: 36px;
  width: 1600px;
  display: flex;
  gap: 16px;
}

.left {
  width: 360px;
  height: 100%;
  padding-bottom: 24px;
  box-sizing: border-box;
  border: 1px solid rgba(234, 236, 238, 1);
  border-radius: 10px;
  box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
  background: rgba(255, 255, 255, 1);
  position: relative;
}

.select-box-header {
  display: flex;
  gap: 17px;


  .icon {
    margin-top: 4px;
    width: 8px;
    height: 16px;
    background: var(--color-main-active);
    border-radius: 0 4px 4px 0;
  }

  .title {
    height: 24px;
    color: var(--color-main-active);
    font-family: "Source Han Sans CN";
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 1px;
    text-align: left;
  }
}

.select-research-box {
  width: 360px;
  height: 284px;
  margin-top: 16px;
}

.select-time-box {
  margin-top: 16px;
  width: 360px;

}

.select-hearing-box {
  margin-top: 16px;
  width: 360px;
}

.select-main {
  margin-left: 24px;
  margin-top: 12px;

  .checkbox-group {
    display: grid;
    grid-template-columns: repeat(2, 160px);
    gap: 8px 4px;

    .filter-checkbox {
      width: 160px;
      height: 24px;
      margin-right: 0 !important;
    }
  }

  .hearing-grid {
    grid-template-columns: 160px;
    width: 259px;
    gap: 4px;
  }
}

.right {
  width: 1224px;
  height: 1377px;

  .card-box {
    width: 100%;
    height: 1134px;
    display: flex;
    background: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border: 1px solid rgba(234, 236, 238, 1);
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
    padding-right: 36px;

    .card-content {
      width: 1211px;
      height: 1067px;
      margin-top: 33px;
      margin-left: 37px;
    }
  }

  .right-footer {
    margin-top: 43px;
    display: flex;
    justify-content: space-between;

    .info {
      height: 19px;
      color: rgba(132, 136, 142, 1);
      font-family: Microsoft YaHei;
      font-size: 14px;
      font-weight: 400;
      line-height: 18px;
      letter-spacing: 0px;
      text-align: left;
    }
  }
}

.card-item {
  width: 100%;
  height: 77px;
  display: flex;
  align-items: center;

  .card-item-img {
    width: 56px;
    height: 77px;
    margin-right: 22px;
    flex-shrink: 0;
  }

  .card-item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;

    .card-item-title {
      color: rgb(59, 65, 75);
      font-family: "Source Han Sans CN";
      font-size: 18px;
      font-weight: 700;
      line-height: 22px;
      margin-bottom: 2px;
      display: inline-flex;
    }

    .card-item-time {
      color: rgb(95, 101, 108);
      font-family: "Source Han Sans CN";
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      margin-bottom: 7px;
      text-align: left;
      display: inline-flex;

      .card-open-image {
        width: 16px;
        height: 16px;
        margin-left: 9px;
        margin-top: 3px;
      }
    }

    .card-item-category {
      gap: 8px;
      height: 24px;
      display: flex;

    }
  }
}

.divider {
  height: 1px;
  background: rgb(234, 236, 238);
  margin: 16px 0;
}
</style>
