<template>
  <div class="news-sidebar">
    <!-- Section: 科技领域 -->
    <div class="ns-section">
      <div class="ns-section-header">
        <span class="ns-header-bar"></span>
        <span class="ns-header-title">科技领域</span>
      </div>
      <div class="ns-options">
        <label
          v-for="opt in domainOptions"
          :key="opt.id"
          class="ns-option"
        >
          <span
            :class="['ns-checkbox', { 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="rgba(5,95,194,1)" />
              <path d="M3.5 7l2.5 2.5 4.5-5" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
            </svg>
          </span>
          <span class="ns-option-label" @click="$emit('toggle-domain', opt.id)">{{ opt.label }}</span>
        </label>
      </div>
    </div>
 
    <div class="ns-section">
      <div class="ns-section-header">
        <span class="ns-header-bar"></span>
        <span class="ns-header-title">发布时间</span>
      </div>
      <div class="ns-options">
        <label
          v-for="opt in timeOptions"
          :key="opt.id"
          class="ns-option"
        >
          <span
            :class="['ns-checkbox', { checked: selectedTimes.includes(opt.id) }]"
            @click.prevent="$emit('toggle-time', opt.id)"
          >
            <svg v-if="selectedTimes.includes(opt.id)" width="14" height="14" viewBox="0 0 14 14" fill="none">
              <rect width="14" height="14" rx="4" fill="rgba(5,95,194,1)" />
              <path d="M3.5 7l2.5 2.5 4.5-5" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
            </svg>
          </span>
          <span class="ns-option-label" @click="$emit('toggle-time', opt.id)">{{ opt.label }}</span>
        </label>
      </div>
    </div>
  </div>
</template>

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

<style scoped>
.news-sidebar {
  width: 360px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  border: 1px solid rgba(234, 236, 238, 1);
  box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
  padding: 19px 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
 
.ns-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
 
.ns-section-header {
  display: flex;
  flex-direction: row;
  gap: 17px;
  align-items: center;
}
.ns-header-bar {
  width: 8px;
  height: 16px;
  background: rgba(5, 95, 194, 1);
  border-radius: 0 4px 4px 0;
  flex-shrink: 0;
}
.ns-header-title {
  font-size: 16px;
  font-family: 'Source Han Sans CN', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 24px;
  color: rgba(5, 95, 194, 1);
}
 
.ns-options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 4px;
  padding: 0 0 0 24px;
}
 
.ns-option {
  width: 160px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}
 
.ns-checkbox {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid rgba(230, 231, 232, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.ns-checkbox.checked {
  border: none;
}
.ns-checkbox.checked svg {
  display: block;
}

.ns-option-label {
  font-size: 16px;
  font-family: 'Source Han Sans CN', sans-serif;
  font-weight: 400;
  line-height: 24px;
  color: rgba(95, 101, 108, 1);
  user-select: none;
}
</style>
