<template>
  <div class="tech-think-tank">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator=">" class="breadcrumb">
      <el-breadcrumb-item>国家科技安全</el-breadcrumb-item>
      <el-breadcrumb-item>中美博弈概览</el-breadcrumb-item>
      <el-breadcrumb-item class="current">科技智库</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 搜索区域 -->
    <div class="search-section">
      <el-input
        v-model="searchText"
        placeholder="搜索智库、报告或政策建议"
        class="search-input"
        size="large"
      >
        <template #append>
          <el-button
            type="primary"
            style="background: #1677FF; color: #fff;"
            :icon="Search">搜索</el-button>
        </template>
      </el-input>
    </div>

    <!-- 统计数据 -->
    <div class="stats-section">
      <div class="stat-item">
        <div class="stat-number">128</div>
        <div class="stat-label">追踪智库数量</div>
      </div>
      <div class="stat-item">
        <div class="stat-number">42</div>
        <div class="stat-label">本月新增报告</div>
      </div>
      <div class="stat-item">
        <div class="stat-number">18</div>
        <div class="stat-label">重点政策建议</div>
      </div>
      <div class="stat-item">
        <div class="stat-number">12</div>
        <div class="stat-label">热点科技领域</div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧数据分布 -->
      <div class="left-section">
        <div class="section-header">
          <el-icon class="location-icon"><Location /></el-icon>
          <span class="section-title">数据分布</span>
          <div class="time-filters">
            <span :class="{ active: activeTime === '今天' }" @click="activeTime = '今天'">今天</span>
            <span :class="{ active: activeTime === '本周' }" @click="activeTime = '本周'">本周</span>
            <span :class="{ active: activeTime === '本月' }" @click="activeTime = '本月'">本月</span>
            <span :class="{ active: activeTime === '今年' }" @click="activeTime = '今年'">今年</span>
          </div>
        </div>
        
        <!-- 地图区域 -->
        <div class="map-container">
          <div ref="worldMapRef" class="world-map" style="width: 100%; height: 400px;"></div>
        </div>
      </div>

      <!-- 右侧网络信号 -->
      <div class="right-section">
        <div class="signal-header">
          <el-icon class="signal-icon"><Warning /></el-icon>
          <span class="signal-title">风险信号</span>
          <el-badge :value="5" class="signal-badge" />
          <span class="more-link">更多 ></span>
        </div>
        
        <div class="signal-list">
          <div v-for="signal in signals" :key="signal.id" class="signal-item">
            <div class="signal-content">
              <div class="signal-left">
                <el-tag :type="signal.type" size="small" class="signal-tag">{{ signal.tag }}</el-tag>
                <div class="signal-text">{{ signal.content }}</div>
              </div>
              <div class="signal-time">{{ signal.time }}</div>
            </div>
          </div>
        </div>

        <el-button type="primary" class="process-btn" block>
          <el-icon><Setting /></el-icon>
          风险处理
        </el-button>
      </div>
    </div>

    <!-- 智库展示区域 -->
    <div class="think-tanks-section">
      <div
        v-for="tank in thinkTanks" :key="tank.id" class="think-tank-card"
        @click="handleClick(tank)">
        <div class="tank-header">
          <div class="tank-logo">
            <el-image :src="$withFallbackImage(tank.logo, tank.id)" :alt="tank.name" />
          </div>
          <div class="tank-country">{{ tank.country }}</div>
        </div>
        <div class="tank-name">{{ tank.name }}</div>
        <div class="tank-description" :title="tank.describe">{{ tank.describe }}</div>
        <div class="tank-tags">
          <el-tag v-for="tag in tank.tags" :key="tag" type="primary" size="small">
            {{ tag }}
          </el-tag>
        </div>
      </div>
      
      <div class="view-all">
        <span class="view-all-link">查看全部智库 ></span>
      </div>
    </div>

    <ReportList />
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { Search, Location, Warning, Setting } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import ReportList from '@/components/ReportList.vue'
import { useRouter } from 'vue-router'
import rand from '@/assets/images/rand.png'
import brookings from '@/assets/images/brookings.png'
import mit from '@/assets/images/mit.png'
import itif from '@/assets/images/itif.png'
import mckinsley from '@/assets/images/mckinsey.png'
import { getThinkTankList } from '@/api'

const router = useRouter()

const searchText = ref('')
const activeTime = ref('本月')
const worldMapRef = ref(null)

// 世界地图数据 - 各国智库数量统计
const mapData = ref([
  { name: 'United States', value: 6, itemStyle: { color: '#ff4757' } },
  { name: 'China', value: 3, itemStyle: { color: '#ffa726' } },
  { name: 'United Kingdom', value: 2, itemStyle: { color: '#42a5f5' } },
  { name: 'Germany', value: 1, itemStyle: { color: '#66bb6a' } },
  { name: 'Japan', value: 1, itemStyle: { color: '#66bb6a' } },
  { name: 'France', value: 1, itemStyle: { color: '#66bb6a' } }
])

// 初始化世界地图
const initWorldMap = async () => {
  if (!worldMapRef.value) return
  
  const chart = echarts.init(worldMapRef.value)
  
  // 使用可靠的世界地图数据源
  try {
    const response = await fetch('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson')
    const geoJson = await response.json()
    
    // 注册世界地图
    echarts.registerMap('world', geoJson)
    
    const option = {
      title: {
        text: '全球智库分布',
        left: 'center',
        top: 20,
        textStyle: {
          color: '#333',
          fontSize: 18,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: function(params) {
          if (params.seriesType === 'map') {
            const data = mapData.value.find(item => item.name === params.name)
            if (data) {
              return `${params.name}<br/>智库数量: ${data.value}个`
            }
            return `${params.name}<br/>暂无数据`
          }
          return params.name
        }
      },
      visualMap: {
        min: 0,
        max: 6,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'],
        calculable: true,
        inRange: {
          color: ['#e3f2fd', '#1976d2']
        },
        textStyle: {
          color: '#333'
        }
      },
      series: [
        {
          name: '智库数量',
          type: 'map',
          map: 'world',
          roam: true,
          emphasis: {
            label: {
              show: true
            }
          },
          data: [
            { name: 'United States of America', value: 6, itemStyle: { color: '#ff4757' } },
            { name: 'China', value: 3, itemStyle: { color: '#ffa726' } },
            { name: 'United Kingdom', value: 2, itemStyle: { color: '#42a5f5' } },
            { name: 'Germany', value: 1, itemStyle: { color: '#66bb6a' } },
            { name: 'Japan', value: 1, itemStyle: { color: '#66bb6a' } },
            { name: 'France', value: 1, itemStyle: { color: '#66bb6a' } }
          ],
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
          }
        }
      ]
    }
    
    chart.setOption(option)
    
  } catch (error) {
    console.log('使用备用地图方案')
    // 如果外部数据源失败，使用内置的简化世界地图
    const option = {
      title: {
        text: '全球智库分布',
        left: 'center',
        top: 20,
        textStyle: {
          color: '#333',
          fontSize: 18,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: function(params) {
          return `${params.name}<br/>智库数量: ${params.value}个`
        }
      },
      geo: {
        type: 'map',
        map: 'world',
        roam: true,
        itemStyle: {
          color: '#f0f0f0',
          borderColor: '#999',
          borderWidth: 0.5
        },
        emphasis: {
          itemStyle: {
            color: '#e0e0e0'
          }
        },
        regions: [
          {
            name: 'United States',
            itemStyle: {
              color: '#ff4757'
            }
          },
          {
            name: 'China', 
            itemStyle: {
              color: '#ffa726'
            }
          },
          {
            name: 'United Kingdom',
            itemStyle: {
              color: '#42a5f5'
            }
          }
        ]
      },
      series: [
        {
          name: '智库分布',
          type: 'scatter',
          coordinateSystem: 'geo',
          data: [
            { name: '美国', value: [-95, 37, 6], itemStyle: { color: '#ff4757' } },
            { name: '中国', value: [104, 35, 3], itemStyle: { color: '#ffa726' } },
            { name: '英国', value: [-3, 55, 2], itemStyle: { color: '#42a5f5' } },
            { name: '德国', value: [10, 51, 1], itemStyle: { color: '#66bb6a' } },
            { name: '日本', value: [138, 36, 1], itemStyle: { color: '#66bb6a' } },
            { name: '法国', value: [2, 46, 1], itemStyle: { color: '#66bb6a' } }
          ],
          symbolSize: function (val) {
            return Math.max(val[2] * 15, 25)
          },
          label: {
            show: true,
            formatter: function(params) {
              return params.data.name + '\n' + params.data.value[2] + '个'
            },
            position: 'top',
            textStyle: {
              color: '#333',
              fontSize: 12,
              fontWeight: 'bold'
            }
          },
          emphasis: {
            scale: true,
            scaleSize: 10
          }
        }
      ]
    }
    
    chart.setOption(option)
  }
  
  // 响应式处理
  window.addEventListener('resize', () => {
    chart.resize()
  })
}



const signals = ref([
  {
    id: 1,
    type: 'danger',
    tag: '特别重大',
    content: '兰德科技智库发布2025中美年度科技报告',
    time: '一天前'
  },
  {
    id: 2,
    type: 'danger', 
    tag: '特别重大',
    content: '信息技术与创新基金会发布《中国正在迅速成...',
    time: '一天前'
  },
  {
    id: 3,
    type: 'warning',
    tag: '重大',
    content: '战略与国际研究中心发布《DeepSeek、华为、...',
    time: '一天前'
  },
  {
    id: 4,
    type: 'warning',
    tag: '重大',
    content: '兰德科技智库发布《中国对AI的转型产业政策》',
    time: '一天前'
  },
  {
    id: 5,
    type: 'success',
    tag: '一般',
    content: '兰德科技智库发布《中美对抗、竞争和合作...',
    time: '一天前'
  }
])

const thinkTanks = ref([])

const getThinkTanks= async () => {
  const { data } = await getThinkTankList()
  thinkTanks.value = data
}
const handleClick = (tank) => {
  router.push({ name: 'ThinkTankDetail', params: { id: tank.id } })
}

// 组件挂载后初始化地图
onMounted(() => {
  getThinkTanks()
  nextTick(() => {
    initWorldMap()
  })
})
</script>

<style scoped lang="scss">
.tech-think-tank {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  background: url('@/assets/images/background.png') no-repeat;
  background-position: center -100px;
  background-size: 100% 100%;
  min-height: 100vh;
}

.breadcrumb {
  margin-bottom: 20px;
  .current {
    font-weight: 600;
  }
}

.search-section {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
}

.search-input {
  max-width: 800px;
}

.stats-section {
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-bottom: 40px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 48px;
  font-weight: bold;
  color: #1459BB;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.main-content {
  display: flex;
  gap: 10px;
  margin-bottom: 40px;
  height: 490px;
}

.left-section {
  flex: 2;
  background: white;
  border-radius: 2px;
  padding: 20px;
}

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

.location-icon {
  color: #409eff;
  margin-right: 8px;
}

.section-title {
  font-weight: 500;
  margin-right: auto;
}

.time-filters {
  display: flex;
  gap: 15px;
}

.time-filters span {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
}

.time-filters span.active {
  background-color: #409eff;
  color: white;
}

.map-container {
  // height: 300px;
  background: #f0f2f5;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.map-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  position: relative;
}

.data-point {
  position: absolute;
}

.point-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.point-circle.yellow {
  background-color: #f39c12;
}

.point-circle.red {
  background-color: #e74c3c;
}

.point-circle.blue {
  background-color: #3498db;
}

.right-section {
  flex: 1;
  background: white;
  border-radius: 2px;
  padding: 20px;
}

.signal-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.signal-icon {
  color: #f56c6c;
  margin-right: 2px;
}

.signal-title {
  font-weight: 500;
  margin-right: 8px;
}

.signal-badge {
  margin-right: auto;
}

.more-link {
  color: #409eff;
  font-size: 14px;
  cursor: pointer;
}

.signal-list {
  margin-bottom: 40px;
  height: 330px;
  overflow-y: auto;
}

.signal-item {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.signal-item:last-child {
  border-bottom: none;
}

.signal-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.signal-left {
  flex: 1;
  display: flex;
  gap: 6px;
}

.signal-tag {
  align-self: flex-start;
}

.signal-text {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  word-break: break-word;
}

.signal-time {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
}

.process-btn {
  width: 100%;
}

.think-tanks-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
}

.think-tank-card {
  background: white;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #e4e7ed;
  width: 220px;
  // height: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

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

.tank-logo {
  width: 60px;
  height: 60px;
  background: #f0f0f0;
  border-radius: 8px;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  .el-image {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: contain;
  }
}

.tank-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tank-country {
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}

.tank-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #333;
}

.tank-description {
  font-size: 12px;
  color: #666;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  margin-bottom: 5px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.tank-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.view-all {
  text-align: center;
  width: 180px;
  padding: 0 5px;
  background: #fff;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.view-all-link {
  color:#1459BB;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin: 0 auto;
}

.view-all-link:hover {
  text-decoration: underline;
}
</style>