<template>
  <div class="policy-tracker-container">
    <!-- 顶部搜索栏 -->
    <div class="top-search-bar" v-if="props.showSearch">
      <div class="search-left">
        <el-input 
          v-model="searchQuery" 
          placeholder="搜索政策建议" 
          class="search-input"
          size="default"
        >
          <template #suffix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
      <div class="search-right">
        <el-select v-model="dateRange" class="select-item" size="default">
          <el-option label="近一年发布" value="last_year" />
          <el-option label="近三年发布" value="last_three_years" />
        </el-select>
        <el-select v-model="sortOrder" class="select-item" size="default">
          <el-option label="发布时间" value="time" />
          <el-option label="热度" value="popularity" />
        </el-select>
      </div>
    </div>
    
    <el-row :gutter="24">
      <el-col :span="6">
        <aside class="filter-sidebar">
          <div class="filter-group">
            <CardTitle title="实施状态" style="margin-bottom: 10px"/>
            <div class="checkbox-group">
              <el-checkbox-group v-model="activeStatus">
                <el-checkbox 
                  v-for="status in statusFilters" 
                  :key="status.id"
                  :label="status.id"
                  class="filter-checkbox"
                >
                  <span 
                    class="status-dot" 
                    :style="`background-color: ${status.color}; border-color: ${status.borderColor || status.color || '#dcdfe6'}`"
                  ></span>
                  {{ status.label }} ({{ status.count }})
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div class="filter-group">
            <CardTitle title="科技领域" style="margin-bottom: 10px"/>
            <div class="checkbox-group">
              <el-checkbox-group v-model="activeTechField">
                <el-checkbox 
                  v-for="field in techFieldFilters"
                  :key="field.id"
                  :label="field.id"
                  class="filter-checkbox tech-checkbox"
                >
                  {{ field.label }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </aside>
      </el-col>
      <el-col :span="18">
        <div class="main-content">
          <PolicyList :policyList="policies" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue';
import PolicyList from './PolicyList.vue';
import CardTitle from './CardTitle.vue';
import { getOverviewPolicy } from '@/api'

const props = defineProps({
  showSearch: {
    type: Boolean,
    default: true
  }
})

// --- Sidebar Filters State & Data ---
const activeStatus = ref(['implemented']); // 改为数组支持多选
const activeTechField = ref(['ai']); // 改为数组支持多选

const statusFilters = ref([
  { id: 'implemented', label: '已实施', count: 18, color: '#e66657' },
  { id: 'partial', label: '部分实施', count: 12, color: '#e6a23c' },
  { id: 'unimplemented', label: '未实施', count: 12, color: '#909399' },
  { id: 'unknown', label: '未知状态', count: 4, color: 'transparent', borderColor: '#909399' },
]);

const techFieldFilters = ref([
    { id: 'ai', label: '人工智能' },
    { id: 'semiconductor', label: '半导体/芯片' },
    { id: 'energy', label: '能源与气候' },
    { id: 'international', label: '国际关系' },
    { id: 'economy', label: '经济决策' },
    { id: 'national_security', label: '国防与安全' },
]);

// --- Main Content State ---
const searchQuery = ref('');
const dateRange = ref('last_year');
const sortOrder = ref('time');
const policies = ref([]);
const getPolicies = async () => {
  const { data } = await getOverviewPolicy({
    researchTypeIds: activeTechField.value,
    statusList: activeStatus.value,
  })
  policies.value = data
}



onMounted(() => {
  getPolicies()
})

</script>

<style scoped>
.policy-tracker-container {
  padding-top: 0;
}

/* 顶部搜索栏样式 */
.top-search-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-left {
  flex: 1;
  max-width: 400px;
}

.search-input {
  width: 100%;
}

.search-input :deep(.el-input__wrapper) {
  border-radius: 6px;
  box-shadow: 0 0 0 1px #dcdfe6;
  transition: box-shadow 0.3s ease;
}

.search-input :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #409EFF;
}

.search-input :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409EFF;
}

.search-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.select-item {
  width: 140px;
}

.select-item :deep(.el-input__wrapper) {
  border-radius: 6px;
  box-shadow: 0 0 0 1px #dcdfe6;
  transition: box-shadow 0.3s ease;
}

.select-item :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #409EFF;
}
.main-content {
  background-color: #fff;
  padding: 8px;
}
/* --- Sidebar Styles --- */
.filter-sidebar {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}
.filter-group {
  margin-bottom: 25px;
}
.filter-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
}
.implementation-title {
  padding-left: 12px;
  position: relative;
}
.implementation-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background-color: #409EFF;
  border-radius: 2px;
}
.icon-square {
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #409EFF;
  margin-right: 8px;
  border-radius: 2px;
}
.filter-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* 复选框组样式 */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-checkbox {
  margin: 0 !important;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
  width: 100%;
  display: flex;
  align-items: center;
}

.filter-checkbox:hover {
  background-color: #f0f2f5;
}


.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0;
  border: 1px solid transparent;
  display: inline-block;
  flex-shrink: 0;
}


/* 响应式设计 */
@media (max-width: 768px) {
  .top-search-bar {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }
  
  .search-left {
    max-width: none;
    width: 100%;
  }
  
  .search-right {
    width: 100%;
    justify-content: center;
    gap: 8px;
  }
  
  .select-item {
    width: 120px;
  }
}

@media (max-width: 480px) {
  .search-right {
    flex-direction: column;
    gap: 8px;
  }
  
  .select-item {
    width: 100%;
    max-width: 200px;
  }
}
</style>