<template>
  <div class="damaged-list">
    <header class="header"> 受灾物品 </header>
    <nav class="nav">
      <template v-for="damagedItem in damagedList" :key="damagedItem.fixTaskId">
        <div
          v-if="damagedItem.isLoss"
          class="nav-item"
          :class="{ active: activeTaskId === damagedItem.fixTaskId }"
          @click="handleActiveTask(damagedItem.fixTaskId, damagedItem.id)"
        >
          <span class="nav-item__name">{{ damagedItem.affectedItems }}</span>
        </div>
      </template>
    </nav>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import type { LossRecordListDetail } from '@/types/disaster-control';
  const props = defineProps<{
    damagedList: LossRecordListDetail[];
    activeId: number;
  }>();
  const emits = defineEmits<{
    (e: 'update:activeId', value: number): void;
    (e: 'update:activeReportRecordId', value: number): void;
  }>();
  const activeTaskId = ref<number>(props.activeId);
  const handleActiveTask = (fixTaskId: number, reportRecordId: number) => {
    activeTaskId.value = fixTaskId;
    emits('update:activeId', fixTaskId);
    emits('update:activeReportRecordId', reportRecordId);
  };
  watch(
    () => props.activeId,
    (newId) => {
      activeTaskId.value = newId;
    },
  );
</script>

<style lang="scss" scoped>
  .damaged-list {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-color: $white-color;
  }
  .header {
    width: 100%;
    height: 44px;
    font-weight: 550;
    font-size: 16px;
    line-height: 44px;
    padding: 0 16px;
  }
  .nav-item {
    width: 100%;
    padding: 8px 16px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    &.active,
    &:hover {
      color: $primary-color;
      background-color: #e7f1ff;
      border-radius: 4px;
    }
  }
</style>
