<template>
  <div class="policy-tracking">
    <el-row :gutter="20">
      <!-- 左侧：政策建议落实情况 -->
      <el-col :span="14">
        <div class="policy-card">
          <div class="card-header">
            <CardTitle title="政策建议落实情况" />
            <div class="filter-buttons">
              <el-button 
                :class="{ active: activeFilter === 'all' }" 
                @click="setFilter('all')"
                size="small"
                text
              >
                全部
              </el-button>
              <el-button 
                :class="{ active: activeFilter === 'implemented' }" 
                @click="setFilter('implemented')"
                size="small"
                text
              >
                已实施
              </el-button>
              <el-button 
                :class="{ active: activeFilter === 'partial' }" 
                @click="setFilter('partial')"
                size="small"
                text
              >
                部分实施
              </el-button>
              <el-button 
                :class="{ active: activeFilter === 'pending' }" 
                @click="setFilter('pending')"
                size="small"
                text
              >
                未实施
              </el-button>
            </div>
          </div>
          
          <div class="card-body">
            <div class="policy-list">
              <div 
                v-for="(item, index) in props.policy" 
                :key="index" 
                class="policy-item"
                @click="openPolicyDetail(item)"
              >
                <div class="policy-number">{{ index + 1 }}</div>
                <div class="policy-content">
                  <p class="policy-text">{{ item.content }}</p>
                  <!-- <div class="policy-tags">
                    <el-tag size="small">{{ item.category }}</el-tag>
                    <el-tag size="small">{{ item.subcategory }}</el-tag>
                  </div> -->
                  <!-- <div class="policy-status">
                    <div class="status-info">
                      <span class="status-label">相关立法已通过：</span>
                      <span class="status-bill">《{{ item.relatedBill }}》</span>
                      <el-tag 
                        :type="getStatusType(item.status)" 
                        size="small" 
                        class="status-tag"
                      >
                        {{ item.status }}
                      </el-tag>
                    </div>
                  </div> -->
                </div>
                <div class="policy-status">
                  <el-tag :type="getStatusType(item.status)" size="small">{{ item.status }}</el-tag>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <!-- 右侧：相关政策动态 -->
      <el-col :span="10">
        <div class="policy-dynamics-card">
          <div class="card-header">
            <CardTitle title="相关政策动态" />
            <el-button type="text" size="small" class="more-link">
              查看更多 
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>

          <div class="card-body">
            <!-- 暂未开发 -->
            <!-- <el-empty description="暂无数据" /> -->
            <div class="dynamics-list">
              <div 
                v-for="(item, index) in policyDynamics" 
                :key="index" 
                class="dynamics-item"
              >
                <div class="dynamics-content">
                  <div class="dynamics-header">
                    <div class="dynamics-dot"></div>
                    <h4 class="dynamics-title">{{ item.title }}</h4>
                    <span class="dynamics-date">{{ item.date }}</span>
                  </div>
                  <p class="dynamics-description">{{ item.description }}</p>
                  <div class="dynamics-image" v-if="item.image">
                    <img :src="item.image" :alt="item.title" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 政策详情弹窗 -->
    <el-dialog 
      v-model="showDetailModal" 
      title="智库政策追踪" 
      width="800px"
      class="policy-detail-dialog"
      @close="closeDetailModal"
    >
      <div v-if="selectedPolicy" class="policy-detail-content">
        <!-- 政策标题 -->
        <h3 class="policy-detail-title">{{ selectedPolicy.text }}</h3>
        
        <!-- 标签区域 -->
        <div class="policy-detail-tags">
          <el-tag size="small">{{ selectedPolicy.category }}</el-tag>
          <el-tag size="small">{{ selectedPolicy.subcategory }}</el-tag>
        </div>

        <!-- 政策详细内容 -->
        <div class="policy-detail-body">
          <p class="policy-description">
            {{ selectedPolicy.detailedDescription || selectedPolicy.text }}
          </p>
        </div>

        <!-- 相关法案信息 -->
        <div v-if="selectedPolicy.relatedBill" class="related-bill-section">
          <div class="bill-info">
            <span class="bill-label">相关立法已通过：</span>
            <span class="bill-name">《{{ selectedPolicy.relatedBill }}》</span>
            <el-tag 
              :type="getStatusType(selectedPolicy.status)" 
              size="small" 
              class="bill-status"
            >
              {{ selectedPolicy.status }}
            </el-tag>
          </div>
        </div>

        <!-- 右侧信息区域 -->
        <div class="policy-side-info">
          <div class="think-tank-info">
            <div class="think-tank-cover">
              <img src="https://picsum.photos/120/160?random=7" alt="智库报告" />
            </div>
            <div class="think-tank-details">
              <h4 class="think-tank-title">兰德科技智库</h4>
              <p class="publish-date">2025年6月26日</p>
              <p class="report-title">中美经济竞争：复杂经济和地缘政治关系中的收益与风险</p>
              <el-button type="primary" size="small" class="download-btn">
                <el-icon><Download /></el-icon>
                下载智库报告原文
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ArrowRight, Download } from '@element-plus/icons-vue'
import CardTitle from '@/components/CardTitle.vue'

// props
const props = defineProps({
  policy: {
    type: Array,
    required: true
  }
})
const activeFilter = ref('all')
const showDetailModal = ref(false)
const selectedPolicy = ref(null)

// 政策建议落实情况数据
const policyList = ref([
  {
    text: '允许OPT的国际学生出国旅行并持多次入境签证重新进入美国。',
    category: '人才交流',
    subcategory: '移民政策',
    relatedBill: '2024重塑美国人口结构法案',
    status: '已实施',
    detailedDescription: '当前基于就业的绿卡上限设定为140,000个。每个国家的上限设定为总数的7%。这意味着每年只有大约9,800名在美国的中国工人可以通过就业优先类别成为合法永久居民。这个上限造成了符合要求的中国申请者的积压，他们必须等待多年才能获得绿卡批准。在这种情况中，高技能移民报告他们有意愿离开第三国或返回原籍国。美国可以从自己1992年通过的《华人学生保护法》中汲取训练。该法案使某些中国公民免于上限和其他要求。因此，54,000名中国移民住于了这个机会。受过教育的中国移民的回归率较低于今天，尽管有美国移民身份可以让他们提高工人在中国劳动力市场的价值并降低回中国的风险来同时间注，但持有绿卡可以对回归的效果太大，因为维持绿卡需要满足国际任务要求。'
  },
  {
    text: '增加中国公民可获得 H-1B 签证数量。',
    category: '人才交流',
    subcategory: '移民政策',
    relatedBill: '2024调整签证政策以吸纳外国重点领域人才法案',
    status: '部分实施'
  },
  {
    text: '通过就业偏好类别增加卡的数量。',
    category: '人才交流',
    subcategory: '移民政策',
    relatedBill: '2024重塑美国人口结构法案',
    status: '已实施'
  },
  {
    text: '推动清洁能源生产的内，化石燃料重新配置出口。',
    category: '人才交流',
    subcategory: '移民政策',
    relatedBill: '',
    status: '未实施'
  },
  {
    text: '支持国内核工业商业化扩张。',
    category: '人才交流',
    subcategory: '移民政策',
    relatedBill: '2024重塑美国人口结构法案',
    status: '已实施'
  },
  {
    text: '在美国和友好国家建立关键矿产加工能力',
    category: '人才交流',
    subcategory: '移民政策',
    relatedBill: '2024重塑美国人口结构法案',
    status: '已实施'
  }
])

// 相关政策动态数据
const policyDynamics = ref([
  {
    title: '减税与就业法案的出台与立法博弈',
    date: '2025-08-30',
    description: '2017年，美国通过了一项旨在根本性以来最为重大的税制改革——《减税与就业法案》...',
    image: 'https://picsum.photos/80/60?random=1'
  },
  {
    title: '信用评级机构穆迪下调美国信用评级',
    date: '2025-05-16',
    description: '2025年5月16日，信用评级机构穆迪自2011年以来第三次下调美国主权信用评级，首...',
    image: 'https://picsum.photos/80/60?random=2'
  },
  {
    title: '马斯克与特朗普首次会',
    date: '2025-05-16',
    description: '马斯克5月30日高任政府效率部负责人时与特朗普首次会面别，但6月3日美然批评OBB...',
    image: 'https://picsum.photos/80/60?random=3'
  },
  {
    title: '马斯克成立"美国党"',
    date: '2025-05-16',
    description: '7月5日（法案签署次日），马斯克宣布成立新政党"美国党"，计划参与2026年中期...',
    image: 'https://picsum.photos/80/60?random=4'
  },
  {
    title: '"90天关税暂缓期"即将到期',
    date: '2025-05-16',
    description: '法案通过议会美国对多国"90天关税暂缓期"即将到期（2025年7月9日），欧盟...',
    image: 'https://picsum.photos/80/60?random=5'
  },
  {
    title: '减税与就业法案的出台与立法博弈',
    date: '2025-08-30',
    description: '2017年，美国通过了一项旨在根本性以来最为重大的税制改革——《减税与就业法案》...',
    image: 'https://picsum.photos/80/60?random=6'
  }
])

// 过滤后的政策列表
const filteredPolicyList = computed(() => {
  if (activeFilter.value === 'all') {
    return policyList.value
  }
  const statusMap = {
    'implemented': '已实施',
    'partial': '部分实施',
    'pending': '未实施'
  }
  return policyList.value.filter(item => item.status === statusMap[activeFilter.value])
})

// 设置过滤器
const setFilter = (filter) => {
  activeFilter.value = filter
}

// 获取状态标签类型
const getStatusType = (status) => {
  const typeMap = {
    '已实施': 'success',
    '部分实施': 'warning',
    '未实施': 'info'
  }
  return typeMap[status] || 'info'
}

// 打开政策详情弹窗
const openPolicyDetail = (policy) => {
  selectedPolicy.value = policy
  showDetailModal.value = true
}

// 关闭政策详情弹窗
const closeDetailModal = () => {
  showDetailModal.value = false
  selectedPolicy.value = null
}
</script>

<style scoped>
.policy-tracking {
  /* padding: 20px 0; */
}

.policy-card,
.policy-dynamics-card {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  height: fit-content;
}

.policy-card,
.policy-dynamics-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.policy-card .card-header,
.policy-dynamics-card .card-header {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.policy-card .card-body,
.policy-dynamics-card .card-body {
  padding: 20px;
  max-height: 600px;
  overflow-y: auto;
}


.filter-buttons {
  display: flex;
  gap: 8px;
}

.filter-buttons .el-button {
  color: #666;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
}

.filter-buttons .el-button.active {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
}

.more-link {
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 左侧政策列表样式 */
.policy-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.policy-item {
  display: flex;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.policy-item:hover {
  background-color: #f8f9fa;
}

.policy-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.policy-item:last-child:hover {
  padding-bottom: 12px;
}

.policy-number {
  width: 24px;
  height: 24px;
  background: #409eff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 2px;
}

.policy-content {
  flex: 1;
}

.policy-text {
  margin: 0 0 12px 0;
  line-height: 1.6;
  color: #333;
  font-size: 14px;
}

.policy-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.policy-status {
  /* background: #f8f9fa; */
  padding: 8px 12px;
  border-radius: 4px;
  /* border-left: 3px solid #409eff; */
}

.status-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.status-label {
  font-size: 12px;
  color: #666;
}

.status-bill {
  font-size: 12px;
  color: #409eff;
  font-weight: 500;
}

.status-tag {
  margin-left: auto;
}

/* 右侧动态列表样式 */
.dynamics-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dynamics-item {
  position: relative;
  padding-left: 16px;
}

.dynamics-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 20px;
  bottom: -16px;
  width: 1px;
  background: #e4e7ed;
}

.dynamics-content {
  background: white;
  position: relative;
}

.dynamics-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  position: relative;
}

.dynamics-dot {
  width: 8px;
  height: 8px;
  background: #409eff;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
  position: absolute;
  left: -12px;
  z-index: 1;
}

.dynamics-title {
  font-size: 14px;
  font-weight: 600;
  color: #409eff;
  margin: 0;
  flex: 1;
  line-height: 1.4;
}

.dynamics-date {
  font-size: 12px;
  color: #999;
  flex-shrink: 0;
}

.dynamics-description {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin: 0 0 8px 0;
  max-width: 320px;
}

.dynamics-image {
  width: 80px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  float: right;
  margin-left: 12px;
  margin-top: -40px;
}

.dynamics-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 弹窗样式 */
.policy-detail-dialog :deep(.el-dialog) {
  border-radius: 8px;
}

.policy-detail-dialog :deep(.el-dialog__header) {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e4e7ed;
}

.policy-detail-dialog :deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.policy-detail-dialog :deep(.el-dialog__body) {
  padding: 24px;
}

.policy-detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

.policy-detail-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.5;
  padding-right: 140px;
}

.policy-detail-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.policy-detail-body {
  margin: 16px 0;
}

.policy-description {
  font-size: 14px;
  color: #666;
  line-height: 1.8;
  margin: 0;
  text-align: justify;
  padding-right: 140px;
}

.related-bill-section {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 6px;
  border-left: 3px solid #409eff;
  margin-right: 140px;
}

.bill-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

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

.bill-name {
  font-size: 14px;
  color: #409eff;
  font-weight: 500;
}

.bill-status {
  margin-left: auto;
}

/* 右侧信息区域 */
.policy-side-info {
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
}

.think-tank-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.think-tank-cover {
  width: 120px;
  height: 160px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.think-tank-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.think-tank-details {
  width: 100%;
}

.think-tank-title {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px 0;
}

.publish-date {
  font-size: 11px;
  color: #999;
  margin: 0 0 8px 0;
}

.report-title {
  font-size: 11px;
  color: #666;
  line-height: 1.4;
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.download-btn {
  font-size: 10px;
  padding: 4px 8px;
  height: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.download-btn .el-icon {
  font-size: 12px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .policy-tracking :deep(.el-row) {
    flex-direction: column;
  }
  
  .policy-tracking :deep(.el-col) {
    width: 100% !important;
    margin-bottom: 20px;
  }

  .policy-detail-title,
  .policy-description {
    padding-right: 0;
  }

  .related-bill-section {
    margin-right: 0;
  }

  .policy-side-info {
    position: static;
    width: 100%;
    margin-top: 20px;
  }

  .think-tank-info {
    flex-direction: row;
    text-align: left;
    gap: 16px;
  }

  .think-tank-cover {
    width: 80px;
    height: 100px;
    margin-bottom: 0;
  }

  .think-tank-details {
    flex: 1;
  }
}
</style>