<template>
  <section class="filter-section">
    <div class="section-header">
      <div class="header-left">
        <img src="../assets/fitller.svg" />
        <h2 class="section-title text-title-3-bold">核心相似度维度筛选</h2>
      </div>

    </div>
    <div class="divider" />
    <div class="fields-grid">

      <!-- 政策领域 -->
      <div class="field-item">
        <span class="field-label text-tip-1 text-primary-65-clor">政策领域：</span>
        <div class="field-content">
          <el-select
            v-model="localValues.policyArea"
            multiple
            placeholder="请选择"
            style="width: 420px"
            @change="handleChange"
          >
            <el-option
              v-for="opt in fields.policyArea.options"
              :key="opt.value"
              :label="opt.label"
              :value="opt.value"
            />
          </el-select>
        </div>
      </div>

      <!-- 政府结构类型 -->
      <div class="field-item">
        <span class="field-label text-tip-1 text-primary-65-clor">政府结构类型：</span>
        <div class="field-content">
          <el-select
            v-model="localValues.governmentType"
            multiple
            placeholder="请选择"
            style="width: 420px"
            @change="handleChange"
          >
            <el-option
              v-for="opt in fields.governmentType.options"
              :key="opt.value"
              :label="opt.label"
              :value="opt.value"
            />
          </el-select>
          <div v-if="fields.governmentType.hint" class="field-hint">
            <img src="../assets/importent.svg" />
            <span class="text-tip-2 text-primary-50-clor">{{ fields.governmentType.hint }}</span>
          </div>
        </div>
      </div>

      <!-- 对方党派提案人 -->
      <div class="field-item">
        <span class="field-label text-tip-1 text-primary-65-clor">对方党派提案人：</span>
        <div class="field-content">
          <el-select
            v-model="localValues.oppositionProposer"
            multiple
            placeholder="请选择"
            style="width: 420px"
            @change="handleChange"
          >
            <el-option
              v-for="opt in fields.oppositionProposer.options"
              :key="opt.value"
              :label="opt.label"
              :value="opt.value"
            />
          </el-select>
        </div>
      </div>

      <!-- 提案时间 -->
      <div class="field-item">
        <span class="field-label text-tip-1 text-primary-65-clor">提案时间：</span>
        <div class="field-content">
          <el-select
            v-model="localValues.proposalTime"
            placeholder="请选择"
            style="width: 420px"
            @change="handleChange"
          >
            <el-option
              v-for="opt in fields.proposalTime.options"
              :key="opt.value"
              :label="opt.label"
              :value="opt.value"
            />
          </el-select>
        </div>
      </div>

    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import type { ProposalInfo } from '../api'

const props = defineProps<{
  proposalInfo?: ProposalInfo | null
  defaultFilters?: Record<string, string[]>
}>()

// 本地 v-model 值（proposalTime 为单选，用 string）
const localValues = ref({
  policyArea: [] as string[],
  governmentType: [] as string[],
  oppositionProposer: [] as string[],
  proposalTime: '' as string,
})

// 根据 proposalInfo 计算初始筛选值（即"设置为当前提案"的目标状态）
function buildInitialValues(info?: ProposalInfo | null) {
  if (!info) return { policyArea: [], governmentType: [], oppositionProposer: [], proposalTime: '' }
  return {
    policyArea: info.defaultDomains?.length ? [...info.defaultDomains] : [...(info.areas || [])],
    governmentType: info.patternType ? [info.patternType] : [],
    oppositionProposer: [],
    proposalTime: '',
  }
}

// 监听 proposalInfo 首次传入时设置初始值
watch(
  () => props.proposalInfo,
  (newInfo) => {
    Object.assign(localValues.value, buildInitialValues(newInfo))
  },
  { immediate: true }
)

// 重置：清空所有已选项
function reset() {
  localValues.value = {
    policyArea: [],
    governmentType: [],
    oppositionProposer: [],
    proposalTime: '',
  }
}

// 设置为当前提案：恢复为 proposalInfo 的初始状态
function setAsCurrent() {
  Object.assign(localValues.value, buildInitialValues(props.proposalInfo))
}

defineExpose({
  reset,
  setAsCurrent,
  getValues: () => ({
    ...localValues.value,
    // proposalTime 单选，包装为数组保持传值一致
    proposalTime: localValues.value.proposalTime ? [localValues.value.proposalTime] : []
  })
})

// 固定的政策领域选项（15个）
const policyAreaOptions = [
  { value: '人工智能', label: '人工智能' },
  { value: '生物科技', label: '生物科技' },
  { value: '新一代通信网络', label: '新一代通信网络' },
  { value: '量子科技', label: '量子科技' },
  { value: '新能源', label: '新能源' },
  { value: '集成电路', label: '集成电路' },
  { value: '海洋', label: '海洋' },
  { value: '先进制造', label: '先进制造' },
  { value: '新材料', label: '新材料' },
  { value: '航空航天', label: '航空航天' },
  { value: '太空', label: '太空' },
  { value: '深海', label: '深海' },
  { value: '极地', label: '极地' },
  { value: '核', label: '核' },
  { value: '其他', label: '其他' }
]

// 固定的字段配置
const fields = computed(() => {
  return {
    policyArea: { options: policyAreaOptions },
    governmentType: {
      options: [
        { value: '统一政府', label: '统一政府' },
        { value: '分裂政府', label: '分裂政府' },
        { value: '微弱多数', label: '微弱多数' }
      ],
      hint: '总统所属政党同时控制国会参众两院'
    },
    oppositionProposer: {
      options: [
        { value: '两党共同提案', label: '两党共同提案' },
        { value: '单政党提案（共和党提案）', label: '单政党提案（共和党提案）' },
        { value: '单政党提案（民主党提案）', label: '单政党提案（民主党提案）' }
      ]
    },
    proposalTime: {
      options: [
        { value: '近三年', label: '近三年' },
        { value: '近五年', label: '近五年' },
        { value: '近十年', label: '近十年' }
      ]
    }
  }
})

function handleChange() {}
</script>

<style scoped>
.filter-section {
  margin-top: 24px;
}

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

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-outline {
  padding: 6px 16px;
  border: 1px solid var(--bg-black-10);
  border-radius: var(--radius-4);
  background-color: var(--bg-white-100);
  font-size: 14px;
  color: var(--text-primary-80-color);
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-outline:hover {
  background-color: var(--bg-black-2);
}

.divider {
  height: 1px;
  background-color: var(--border-black-5);
  margin-bottom: 24px;
}

.fields-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-left: 30px;
}

.field-item {
  width: 580px;
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.field-label {
  display: block;
  width: 140px;
  flex-shrink: 0;
  padding-top: 6px;
}

.field-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-hint {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>
