<template>
  <div class="other-info-content">
    <AnalysisBox title="重点实验室" width="100%" height="auto" :show-all-btn="false" class="labs-box">
      <div class="labs-grid">
        <div v-for="(lab, index) in labsData" :key="index" class="lab-card">
          <div class="lab-logo">
            <img :src="lab.logo" :alt="lab.name" />
          </div>
          <div class="lab-name">{{ lab.name }}</div>
          <div class="lab-description">{{ lab.description }}</div>
          <div class="lab-tags">
            <AreaTag v-for="(tag, tagIdx) in lab.tags" :key="tagIdx" :tag-name="tag.name" :type="tag.type" />
          </div>
        </div>
      </div>
    </AnalysisBox>

    <AnalysisBox title="政策文件" width="100%" height="auto" :show-all-btn="false" class="policy-box">
      <div class="policy-grid">
        <div v-for="(policy, index) in policyData" :key="index" class="policy-card">
          <div class="policy-icon">
            <!-- <img src="/images/policy-icon.png" alt="policy" /> -->
          </div>
          <div class="policy-content">
            <div class="policy-title">{{ policy.title }}</div>
            <div class="policy-description">{{ policy.description }}</div>
          </div>
        </div>
      </div>
      <div class="pagination-area">
        <div class="total-count">共{{ totalCount }}篇合作动态</div>
        <div class="pagination">
          <LeftBtn @click="prevPage" />
          <span v-for="page in displayPages" :key="page" :class="['page-num', { active: page === currentPage }]" @click="goToPage(page)">
            {{ page === '...' ? '...' : page }}
          </span>
          <RightBtn @click="nextPage" />
        </div>
      </div>
    </AnalysisBox>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue'
import LeftBtn from '@/components/base/pageBtn/LeftBtn.vue'
import RightBtn from '@/components/base/pageBtn/RightBtn.vue'
import AreaTag from '@/components/base/AreaTag/index.vue'
import { getLabList, getPolicyList } from '@/api/innovationSubject/overview.js'

const props = defineProps<{
  orgId?: string
}>()

const areaTypeMap: Record<string, string> = {
  '人工智能': 'tag1',
  '生物科技': 'tag2',
  '太空': 'tag3',
  '航空航天': 'tag4',
  '先进制造': 'tag5',
  '物理学': 'tag6',
  '海洋': 'tag7',
  '新能源': 'tag8',
  '医学': 'tag9',
  '化学': 'tag10',
  '新一代通信网络': 'tag11',
  '其他': 'tag12'
}

const labsData = ref<Array<{
  logo: string
  name: string
  description: string
  tags: Array<{ name: string; type: string }>
}>>([])

const policyData = ref<Array<{
  title: string
  description: string
}>>([])

const currentPage = ref(1)
const pageSize = ref(6)
const totalCount = ref(0)
const totalPages = ref(0)
const loading = ref(false)

const fetchLabList = async () => {
  const orgId = props.orgId || '6789'
  try {
    const result = await getLabList(orgId)
    if (result.success && result.data) {
      labsData.value = result.data.map((item: any) => ({
        logo: item.logoUrl || '/images/lab-default.png',
        name: item.labName,
        description: item.introduction,
        tags: (item.arealist || []).map((area: string) => ({
          name: area,
          type: areaTypeMap[area] || 'tag12'
        }))
      }))
    }
  } catch (error) {
    console.error('获取实验室列表失败:', error)
  }
}

const fetchPolicyList = async () => {
  const orgId = props.orgId || '6789'
  loading.value = true
  try {
    const result = await getPolicyList(orgId, currentPage.value, pageSize.value)
    if (result.success && result.data) {
      policyData.value = result.data.content.map((item: any) => ({
        title: `《${item.name}》`,
        description: item.introduction
      }))
      totalCount.value = result.data.totalElements
      totalPages.value = result.data.totalPages
    }
  } catch (error) {
    console.error('获取政策文件列表失败:', error)
  } finally {
    loading.value = false
  }
}

watch(currentPage, () => {
  fetchPolicyList()
})

onMounted(() => {
  fetchLabList()
  fetchPolicyList()
})

const displayPages = computed(() => {
  const pages: (number | string)[] = []
  const total = totalPages.value
  if (total <= 7) {
    for (let i = 1; i <= total; i++) pages.push(i)
  } else {
    pages.push(1)
    if (currentPage.value > 3) pages.push('...')
    const start = Math.max(2, currentPage.value - 1)
    const end = Math.min(total - 1, currentPage.value + 1)
    for (let i = start; i <= end; i++) pages.push(i)
    if (currentPage.value < total - 2) pages.push('...')
    pages.push(total)
  }
  return pages
})

const prevPage = () => {
  if (currentPage.value > 1) currentPage.value--
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) currentPage.value++
}

const goToPage = (page: number | string) => {
  if (typeof page === 'number') currentPage.value = page
}
</script>

<style lang="scss" scoped>
.other-info-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.labs-box {
  .labs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 16px;

    .lab-card {
      padding: 16px;
      background: #FFFFFF;
      border: 1px solid #EAECEE;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      gap: 12px;

      .lab-logo {
        width: 40px;
        height: 40px;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .lab-name {
        font-size: 16px;
        font-weight: 700;
        color: #3B414B;
        line-height: 24px;
      }

      .lab-description {
        font-size: 14px;
        color: #5F656C;
        line-height: 22px;
        flex: 1;
      }

      .lab-tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;


      }
    }
  }
}

.policy-box {
  .policy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 16px;

    .policy-card {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: #FFFFFF;
      border: 1px solid #EAECEE;
      border-radius: 4px;

      .policy-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .policy-content {
        flex: 1;

        .policy-title {
          font-size: 16px;
          font-weight: 700;
          color: #3B414B;
          line-height: 24px;
          margin-bottom: 8px;
        }

        .policy-description {
          font-size: 14px;
          color: #5F656C;
          line-height: 22px;
        }
      }
    }
  }

  .pagination-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-top: 1px solid #EAECEE;

    .total-count {
      font-size: 14px;
      color: #84888E;
    }

    .pagination {
      display: flex;
      align-items: center;
      gap: 8px;

      .page-num {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #3B414B;
        cursor: pointer;
        border-radius: 4px;

        &:hover {
          background: #F6FAFF;
        }

        &.active {
          background: #055FC2;
          color: #FFFFFF;
        }
      }
    }
  }
}
</style>
