<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>
      <button class="btn-outline" @click="setAsCurrent">设置为当前提案</button>
    </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"
            multiple
            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 值
const localValues = ref({
  policyArea: [] as string[],
  governmentType: [] as string[],
  oppositionProposer: [] as string[],
  proposalTime: [] as string[],
})

// 根据 proposalInfo 计算初始筛选值（即"设置为当前提案"的目标状态）
function buildInitialValues(info?: ProposalInfo | null): Record<string, string[]> {
  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 })

// 固定的字段配置，options 由 proposalInfo 动态注入
const fields = computed(() => {
  const billDomain = props.proposalInfo?.billDomain
  const domainOptions = Array.isArray(billDomain) ? billDomain.map(d => ({ value: d, label: d })) : []
  return {
    policyArea: { options: domainOptions },
    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>
