<template>
  <div class="desc-tab">
    <!-- 上半部分：基本信息和概况 -->
    <div class="top-section">
      <!-- 左侧：基本信息卡片 -->
      <div class="basic-info-card">
        <!-- 基本信息 cardtitle -->
        <CardTitle title="基本信息" />
        <div class="tank-image">
          <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=400" alt="智库建筑" />
        </div>
        <div class="info-content">
          <div class="info-row">
            <span class="label">国家：</span>
            <span class="value">{{ thinkTankInfo.country }}</span>
          </div>
          <div class="info-row">
            <span class="label">成立时间：</span>
            <span class="value">{{ thinkTankInfo.foundingDate }}</span>
          </div>
          <div class="info-row">
            <span class="label">总部位置：</span>
            <span class="value">{{ thinkTankInfo.position }}</span>
          </div>
          <div class="info-row">
            <span class="label">机构性质：</span>
            <span class="value">{{ thinkTankInfo.nature }}</span>
          </div>
          <div class="info-row">
            <span class="label">员工数量：</span>
            <span class="value">{{ thinkTankInfo.memnum }}</span>
          </div>
          <div class="info-row">
            <span class="label">年度预算：</span>
            <span class="value">{{ thinkTankInfo.budget }}</span>
          </div>
        </div>
        
        <div class="additional-info">
          <CardTitle title="全球分支机构" />
          <div class="branch-list">
            <div class="branch-item" v-for="(item, key) in branchInfo" :key="key">
              <span class="location">{{ key }}：</span>
              <span class="desc">{{ item .join('、')}}</span>
            </div>
            
          </div>
        </div>
      </div>

      <!-- 右侧：经费概况和研究领域 -->
      <div class="right-section">
        <!-- 经费概况 -->
        <div class="funding-overview">
          <div class="section-header">
            <CardTitle title="经费来源" />
            <el-icon class="expand-icon"><MoreFilled /></el-icon>
          </div>
          <div class="funding-content">
            <!-- 左侧总计信息 -->
            <div class="funding-left">
              <!-- 总计 -->
              <div class="funding-total">
                <div class="total-label">总计</div>
                <div class="total-amount">{{ fundTotal.totalJe }}美元</div>
              </div>
              
              <!-- 主要分类 -->
              <div class="funding-categories">
                <div class="category-group">
                  <div class="category-header">
                    <div class="category-title">政府部门</div>
                    <div class="category-amount">{{ fundTotal.zfJe }}美元</div>
                  </div>
                </div>
                
                <div class="category-group">
                  <div class="category-header">
                    <div class="category-title">其他机构</div>
                    <div class="category-amount">{{ fundTotal.otherJe }}美元</div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 右侧ECharts环形饼图 -->
            <div class="funding-right">
              <div ref="fundingChart" class="funding-chart"></div>
            </div>
          </div>
        </div>

        <div class="timeline-section">
          <div class="section-header">
            <CardTitle title="研究领域概览" />
            <el-icon class="expand-icon"><MoreFilled /></el-icon>
          </div>
          
          <div class="timeline-container">
            <div class="timeline-periods">
              <div class="period-item active" v-for="value in researchAreas" :key="value.id">
                <div class="period-title">{{ value.time }}</div>
                <div class="period-desc">{{ value.describe }}</div>
              </div>
              
            </div>
            
            <div class="timeline-line">
              <div class="timeline-progress"></div>
              <div class="timeline-dots">
                <div class="dot active" v-for="value in researchAreas" :key="value.id"></div>
              </div>
            </div>
          </div>   
        </div>
         <!-- 核心研究人员 -->
        <div class="core-researchers-section">
        <div class="section-header">
            <CardTitle title="核心研究人员" />
            <el-icon class="more-icon">
            <MoreFilled />
            </el-icon>
        </div>
        
          <div class="researchers-grid">
            <div class="researchers-column">
              <div 
                v-for="researcher in coreResearchers" 
                :key="researcher.id"
                class="researcher-item"
              >
                <div class="researcher-avatar">
                  <el-image :src="$withFallbackImage(researcher.avatar, researcher.name) " :alt="researcher.name" />
                </div>
                <div class="researcher-info">
                  <h4 class="researcher-name">{{ researcher.name }}</h4>
                  <p class="researcher-position">{{ researcher.describe }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { MoreFilled } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import {
  getThinkTankBasicInfo,
  getThinkTankBranchInfo,
  getThinkTankFundsSource,
  getThinkTankFundsTotal,
  getThinkTankResearchArea,
  getThinkTankPersonList
} from '@/api'
import { useRoute } from 'vue-router'

// 组件状态
const activeTimelinePeriod = ref(0)
const fundingChart = ref(null)
const route = useRoute()
// 经费数据
const fundingData = ref([])

// 初始化ECharts图表
const initFundingChart = () => {
  if (!fundingChart.value) return
  
  const chart = echarts.init(fundingChart.value)
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}万 ({d}%)'
    },
    series: [
      {
        name: '经费来源',
        type: 'pie',
        radius: ['50%', '70%'], // 环形图
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 2,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'outside',
          formatter: (params) => {
            return `{amount|${params.value}万} {percent|${params.percent}%}\n{name|${params.name}}`
          },
          rich: {
            amount: {
              fontSize: 12,
              fontWeight: 'bold',
              color: '#1f2937'
            },
            percent: {
              fontSize: 11,
              color: '#6b7280'
            },
            name: {
              fontSize: 11,
              color: '#4b5563',
              lineHeight: 16
            }
          },
          lineHeight: 14
        },
        labelLine: {
          show: true,
          length: 20,
          length2: 15,
          smooth: 0.2,
          lineStyle: {
            color: '#d1d5db',
            width: 1
          }
        },
        data: fundingData.value.map(item => ({
          value: item.value,
          name: item.name,
        }))
      }
    ]
  }
  
  chart.setOption(option)
  
  // 响应式处理
  const handleResize = () => {
    chart.resize()
  }
  window.addEventListener('resize', handleResize)
  
  // 组件销毁时清理
  return () => {
    window.removeEventListener('resize', handleResize)
    chart.dispose()
  }
}

// 时间线数据
const timelinePeriods = ref([
  {
    title: '1940s-1950s',
    description: '军事战略研究与国家安全研究，包括核战略、数学大战略分析'
  },
  {
    title: '1960s-1970s', 
    description: '扩展至社会科学领域，包括教育政策、医疗卫生、城市问题研究'
  },
  {
    title: '1980s-1990s',
    description: '增加国际发展研究，关注苏联解体后的地缘政治格局'
  },
  {
    title: '2000s-2010s',
    description: '重点关注反恐战略，网络安全、能源政策和气候变化'
  },
  {
    title: '2020s-现在',
    description: '聚焦人工智能、大数据分析、全球竞争与合作关系'
  }
])

// 旧的经费数据（已被上面的ECharts数据替代）
// const fundingData = ref({
//   total: '4.358亿美元',
//   government: '3.271亿美元', 
//   other: '1.087亿美元'
// })

// 研究领域数据
const researchAreas = ref([])

const thinkTankInfo = ref({})
const getThinkTankInfo = async () => {
  const { data } = await getThinkTankBasicInfo({ id: route.params.id })
  console.log(data)
  thinkTankInfo.value = data
}

const branchInfo = ref({})
const getBranchInfo = async () => {
  const { data } = await getThinkTankBranchInfo({ id: route.params.id })
  // 以 area 为分组，将city 以逗号分隔
  let branchInfoObj = {}
  data.forEach(item => {
    if (!branchInfoObj[item.area]) {
      branchInfoObj[item.area] = []
    }
    branchInfoObj[item.area].push(item.city)
  })
  branchInfo.value = branchInfoObj
}

const getFundsSource = async () => {
  const { data } = await getThinkTankFundsSource({ id: route.params.id })
  console.log('getFundsSource', data)
  fundingData.value = data.map(item => ({
    value: item.amount,
    name: item.institution,
    // color: item.percent
  }))
  initFundingChart()
}

const fundTotal = ref({
  totalJe: 0,
  zfJe: 0,
  otherJe: 0
})
const getFundTotal = async () => {
  const { data } = await getThinkTankFundsTotal({ id: route.params.id })
  console.log('getFundTotal', data)
  fundTotal.value = data
}

const getResearchArea = async () => {
  const { data } = await getThinkTankResearchArea({ id: route.params.id })
  console.log('getResearchArea', data)
  researchAreas.value = data
}

const getPersonList = async () => {
  const { data } = await getThinkTankPersonList({ id: route.params.id })
  console.log('getPersonList', data)
  coreResearchers.value = data
}
// 初始化图表
onMounted(async () => {
  getThinkTankInfo()
  getBranchInfo()
  getFundsSource()
  getFundTotal()
  getResearchArea()
  getPersonList()
})

// 核心研究人员数据
const coreResearchers = ref([])
</script>

<style scoped>
.desc-tab {
  min-height: 100vh;
}

/* 上半部分布局 */
.top-section {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* 基本信息卡片 */
.basic-info-card {
  min-width: 360px;
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  height: auto;
}

.tank-image {
  margin-bottom: 20px;
  margin-top: 10px;
}

.tank-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
}

.info-content {
  margin-bottom: 24px;
}

.info-row {
  display: flex;
  margin-bottom: 12px;
  align-items: center;
}

.info-row .label {
  font-weight: 500;
  color: #374151;
  min-width: 80px;
  font-size: 14px;
}

.info-row .value {
  color: #111827;
  font-size: 14px;
}

.additional-info h4 {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 16px 0;
}

.branch-list {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  gap: 8px;
}

.branch-item {
  margin-bottom: 8px;
  font-size: 14px;
}

.branch-item .location {
  font-weight: 500;
  color: #374151;
}

.branch-item .desc {
  color: #6b7280;
}

/* 右侧区域 */
.right-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 通用卡片样式 */
.funding-overview,
.research-overview {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.expand-icon {
  color: #9ca3af;
  cursor: pointer;
}

/* 经费概况 */
.funding-content {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.funding-left {
  flex: 0 0 280px;
  min-width: 0;
}

.funding-total {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.total-label {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 4px;
}

.total-amount {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
}

.funding-categories {
  margin-bottom: 20px;
}

.category-group {
  margin-bottom: 16px;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.category-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

.category-amount {
  font-size: 16px;
  font-weight: 600;
  color: #dc2626;
}

.funding-right {
  flex: 1;
  position: relative;
  min-height: 400px;
}

.funding-chart {
  width: 100%;
  height: 400px;
  min-height: 400px;
}

/* 研究领域概览 */
.research-content {
  display: flex;
  align-items: center;
  gap: 24px;
}

.research-chart {
  flex-shrink: 0;
}

.research-list {
  flex: 1;
}

.research-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.research-item:last-child {
  margin-bottom: 0;
}

.color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.research-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.research-info .percentage {
  font-weight: 600;
  color: #111827;
  min-width: 30px;
  font-size: 14px;
}

.research-info .name {
  color: #374151;
  font-size: 14px;
}

/* 饼图样式 */
.pie-chart {
  position: relative;
}

.pie-chart svg {
  transform: rotate(-90deg);
}

/* 时间线部分 */
.timeline-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.timeline-container {
  position: relative;
}

.timeline-periods {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}

.period-item {
  flex: 1;
  padding: 0 16px;
  text-align: center;
}

.period-item.active .period-title {
  color: #3b82f6;
  font-weight: 600;
}

.period-title {
  font-size: 16px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.period-desc {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}

.timeline-line {
  position: relative;
  height: 4px;
  background-color: #e5e7eb;
  border-radius: 2px;
  margin: 0 60px;
}

.timeline-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 2px;
}

.timeline-dots {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #e5e7eb;
  border: 2px solid white;
  box-shadow: 0 0 0 2px #e5e7eb;
}

.dot.active {
  background-color: #3b82f6;
  box-shadow: 0 0 0 2px #3b82f6;
}

/* 核心研究人员样式 */
.core-researchers-section {
  margin-top: 20px;
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 30px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.more-icon {
  color: #6b7280;
  cursor: pointer;
  font-size: 16px;
}

.more-icon:hover {
  color: #374151;
}

.researchers-grid {
}
/* 每行两个div */
.researchers-column {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}

.researcher-item {
  width: 48%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
}

.researcher-avatar {
  flex-shrink: 0;
}

.researcher-avatar .el-image {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f3f4f6;
}

.researcher-info {
  flex: 1;
  min-width: 0;
}

.researcher-name {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.researcher-position {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
  word-wrap: break-word;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .top-section {
    flex-direction: column;
  }
  
  .funding-content,
  .research-content {
    flex-direction: column;
    text-align: center;
  }
  
  .funding-left {
    flex: none;
    width: 100%;
  }
  
  .funding-right {
    min-height: 300px;
  }
  
  .funding-chart {
    height: 300px;
    min-height: 300px;
  }
  
  .timeline-periods {
    flex-direction: column;
    gap: 20px;
  }
  
  .timeline-line {
    display: none;
  }
  
  .researchers-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .desc-tab {
    padding: 16px;
  }
  
  .basic-info-card,
  .funding-overview,
  .research-overview,
  .timeline-section,
  .core-researchers-section {
    padding: 16px;
  }
  
  .researchers-grid {
    gap: 16px;
  }
  
  .researchers-column {
    gap: 16px;
  }
  
  .researcher-item {
    gap: 10px;
    padding: 8px 0;
  }
  
  .researcher-avatar .el-image {
    width: 40px;
    height: 40px;
  }
  
  .researcher-name {
    font-size: 14px;
  }
  
  .researcher-position {
    font-size: 12px;
  }
}
</style>