<template>
  <div class="home-main-footer-main">
    <div class="left">
      <div class="select-box-science">
        <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="isAllSelected(typeIds)"
              @change="val => toggleAll(val, typeIds)">
              全部领域
            </el-checkbox>
            <el-checkbox class="filter-checkbox" v-for="t in (researchTypeList || [])" :key="t.id"
              v-model="selectedTypeIds" :label="t.id" @change="emitChange">
              {{ t.name }}
            </el-checkbox>
          </div>
        </div>
      </div>

      <div class="select-box-publish">
        <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="isAllSelected(yearIds)"
              @change="val => toggleAll(val, yearIds)">
              全部时间
            </el-checkbox>
            <el-checkbox class="filter-checkbox" v-for="y in (researchTimeList || [])" :key="y.id"
              v-model="selectedYearIds" :label="y.id" @change="emitChange">
              {{ y.name }}
            </el-checkbox>
          </div>
        </div>
      </div>
    </div>

    <div class="right">
      <div class="right-main">
        <div class="right-main-item" v-for="(item, index) in list" :key="index" @click="emit('item-click', item)">
          <div class="item-left">
            <img :src="item.coverImage" alt="" />
          </div>
          <div class="item-right">
            <div class="title">{{ item.content }}</div>
            <div class="info">
              <span class="info-text">{{ item.date }} · {{ item.title }}</span>
              <div class="more">
                <img src="@/views/thinkTank/ThinkTankDetail/thinkDynamics/images/image open.png" alt="" />
              </div>
            </div>
            <div class="tag-box" v-if="item.domains && item.domains.length">
              <AreaTag v-for="d in item.domains" :key="d" :tagName="d" />
            </div>
          </div>
        </div>
      </div>
      <div class="right-footer">
        <div class="info">共{{ total }}条政策建议</div>
        <div class="page-box">
          <el-pagination :page-size="pageSize" background layout="prev, pager, next" :total="total"
            @current-change="p => emit('page-change', p)" :current-page="currentPage" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import AreaTag from "@/components/base/AreaTag/index.vue";

const props = defineProps({
  researchTypeList: { type: Array, default: () => [] },
  researchTimeList: { type: Array, default: () => [] },
  list: { type: Array, default: () => [] },
  total: { type: Number, default: 0 },
  currentPage: { type: Number, default: 1 },
  pageSize: { type: Number, default: 7 },
});

const emit = defineEmits(["filter-change", "page-change", "item-click"]);

const selectedTypeIds = ref([]);
const selectedYearIds = ref([]);

const typeIds = computed(() => (props.researchTypeList || []).map(i => i.id));
const yearIds = computed(() => (props.researchTimeList || []).map(i => i.id));

const isAllSelected = ids => ids.length > 0 && ids.every(id => {
  const target = ids === typeIds.value ? selectedTypeIds.value : selectedYearIds.value
  return target.includes(id)
});

const toggleAll = (checked, ids) => {
  const target = ids === typeIds.value ? selectedTypeIds : selectedYearIds
  target.value = checked ? [...ids] : []
  emitChange()
}

const emitChange = () => {
  emit("filter-change", {
    researchTypeIds: [...selectedTypeIds.value],
    researchTimeIds: [...selectedYearIds.value],
  })
}
</script>

<style lang="scss" scoped>
/* 最外层对齐智库报告资源库布局 */
.home-main-footer-main {
  margin: 0 auto;
  margin-top: 36px;
  width: 1600px;
  display: flex;
  gap: 16px;

  .left {
    width: 360px;
    height: 100%;
    padding-bottom: 36px;
    box-sizing: border-box;
    border: 1px solid rgba(234, 236, 238, 1);
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
    background: rgba(255, 255, 255, 1);

    .select-box-science,
    .select-box-publish {
      margin-top: 16px;

      .select-box-header {
        display: flex;

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

        .title {
          margin-left: 17px;
          font-family: "Source Han Sans CN";
          font-weight: 700;
          font-size: 16px;
          line-height: 24px;
          letter-spacing: 1px;
          text-align: left;
          color: rgba(5, 95, 194, 1);
        }
      }

      .select-main {
        margin-top: 12px;
      }

      .checkbox-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px 4px;
        margin-left: 24px;

        .filter-checkbox {
          width: 160px;
          margin: 0;
          font-family: "Source Han Sans CN", sans-serif;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          letter-spacing: 0px;
          text-align: justify;
        }
      }
    }
  }

  .right {
    width: 1224px;
    height: 1200px;
    margin-bottom: 20px;
    box-sizing: border-box;
    border: 1px solid rgba(234, 236, 238, 1);
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
    background: rgba(255, 255, 255, 1);

    .right-main {
      height: 1100px;
      margin-top: 17px;
      margin-left: 0;
      width: 100%;
      box-sizing: border-box;
      padding-left: 37px;
      padding-right: 0;


      .right-main-item {
        box-sizing: border-box;
        padding-top: 16px;
        padding-bottom: 16px;
        margin-left: -37px;
        padding-left: 37px;
        padding-right: 36px;
        width: calc(100% + 37px - 36px);
        border-bottom: 1px solid rgba(234, 236, 238, 1);
        display: flex;
        align-items: center;
        cursor: pointer;

        .item-left {
          width: 112px;
          height: 76px;
          margin-right: 22px;
          flex-shrink: 0;

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

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

          .title {
            color: rgba(59, 65, 75, 1);
            font-family: "Source Han Sans CN";
            font-size: 18px;
            font-weight: 700;
            line-height: 24px;
            letter-spacing: 0px;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .info {
            margin-top: 7px;
            color: rgba(95, 101, 108, 1);
            font-family: "Source Han Sans CN";
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            display: flex;
            align-items: center;

            .info-text {
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .more {
              flex-shrink: 0;

              img {
                width: 16px;
                height: 16px;
                display: block;
                margin-left: 9px;
                margin-top: 3px;
              }
            }
          }

          .tag-box {
            margin-top: 6px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
          }
        }
      }
    }

    .right-footer {
      margin-top: 24px;
      padding: 0 37px 24px 37px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
