<template>
  <aside class="sidebar-filter"> 
    <div class="sf-section">
      <div class="sf-title-row">
        <span class="sf-title-bar"></span>
        <span class="sf-title-text">科技领域</span>
      </div>
      <div class="sf-options">
        <label v-for="opt in domains" :key="opt.id" class="sf-label">
          <span
            class="sf-checkbox-icon"
            :class="{ checked: selectedDomains.includes(opt.id) }"
            @click.prevent="$emit('toggle-domain', opt.id)"
          >
            <svg v-if="selectedDomains.includes(opt.id)" width="14" height="14" viewBox="0 0 14 14" fill="none">
              <rect width="14" height="14" rx="4" fill="#055FC2"/>
              <path d="M3.5 7L6 9.5L10.5 5" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span v-else class="sf-checkbox-empty"></span>
          </span>
          <span class="sf-text" @click="$emit('toggle-domain', opt.id)">{{ opt.label }}</span>
        </label>
      </div>
    </div> 
    <div class="sf-section">
      <div class="sf-title-row">
        <span class="sf-title-bar"></span>
        <span class="sf-title-text">发布时间</span>
      </div>
      <div class="sf-options">
        <label v-for="opt in timeRanges" :key="opt.id" class="sf-label">
          <span
            class="sf-checkbox-icon"
            :class="{ checked: selectedTimeRanges.includes(opt.id) }"
            @click.prevent="$emit('toggle-time', opt.id)"
          >
            <svg v-if="selectedTimeRanges.includes(opt.id)" width="14" height="14" viewBox="0 0 14 14" fill="none">
              <rect width="14" height="14" rx="4" fill="#055FC2"/>
              <path d="M3.5 7L6 9.5L10.5 5" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span v-else class="sf-checkbox-empty"></span>
          </span>
          <span class="sf-text" @click="$emit('toggle-time', opt.id)">{{ opt.label }}</span>
        </label>
      </div>
    </div>
  </aside>
</template>

<script setup>
defineProps({
  domains: { type: Array, default: () => [] },
  timeRanges: { type: Array, default: () => [] },
  selectedDomains: { type: Array, default: () => ['all'] },
  selectedTimeRanges: { type: Array, default: () => ['all'] },
})
defineEmits(['toggle-domain', 'toggle-time'])
</script>

<style scoped>
.sidebar-filter {
  width: 360px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(234, 236, 238, 1);
  box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
  box-sizing: border-box;
  padding: 16px 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  overflow: hidden;
}

.sf-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.sf-title-row {
  display: flex;
  align-items: center;
  gap: 17px;
  width: 100%;
  padding: 0 0 0 0;
  box-sizing: border-box;
}

.sf-title-bar {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: rgba(5, 95, 194, 1);
  border-radius: 0 2px 2px 0;
  flex-shrink: 0;
}

.sf-title-text {
  font-size: 16px;
  font-weight: 700;
  font-family: 'Source Han Sans CN', 'Noto Sans SC', sans-serif;
  color: rgba(5, 95, 194, 1);
  letter-spacing: 1px;
  line-height: 24px;
}

.sf-options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 4px;
  align-content: flex-start;
  align-items: flex-start;
  padding: 0 0 0 24px;
  width: 100%;
  box-sizing: border-box;
}

.sf-label {
  width: 160px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.sf-checkbox-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
}

.sf-checkbox-empty {
  display: block;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(230, 231, 232, 1);
  border-radius: 4px;
  box-sizing: border-box;
  background: #fff;
}

.sf-text {
  font-size: 16px;
  font-weight: 400;
  font-family: 'Source Han Sans CN', 'Noto Sans SC', sans-serif;
  color: rgba(95, 101, 108, 1);
  line-height: 24px;
  cursor: pointer;
  white-space: nowrap;
}

.sf-label:hover .sf-text {
  color: rgba(59, 65, 75, 1);
}
</style>
