<script setup lang="ts">
import { ref } from 'vue';
import WorkbenchModuleCard from './workbench-module-card.vue';

defineOptions({ name: 'WorkbenchPersonalItem' });

interface Props {
  editing?: boolean;
  collapsed?: boolean;
}
withDefaults(defineProps<Props>(), { editing: false, collapsed: false });
defineEmits<{ (e: 'hide'): void; (e: 'toggle-collapse'): void }>();

interface ItemRow {
  id: string;
  title: string;
  done: boolean;
}

const items = ref<ItemRow[]>([
  { id: 'p1', title: '周会准备 · 跨境支付方案 PPT', done: false },
  { id: 'p2', title: '整理 Q2 OKR 复盘材料', done: false },
  { id: 'p3', title: '回复采购系统迁移邮件', done: true },
  { id: 'p4', title: '技术分享话题征集', done: false },
  { id: 'p5', title: '新人 Onboarding · 文档整理', done: false }
]);
</script>

<template>
  <WorkbenchModuleCard
    title="我的个人事项"
    icon="mdi:format-list-checks"
    :badge-count="items.filter(i => !i.done).length"
    :editing="editing"
    :collapsed="collapsed"
    @hide="$emit('hide')"
    @toggle-collapse="$emit('toggle-collapse')"
  >
    <ul class="item-list">
      <li v-for="item in items" :key="item.id" class="item-row">
        <ElCheckbox v-model="item.done" />
        <span class="item-text" :class="{ 'item-done': item.done }">{{ item.title }}</span>
      </li>
    </ul>
  </WorkbenchModuleCard>
</template>

<style scoped>
.item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}
.item-row:last-child {
  border-bottom: none;
}
.item-text {
  font-size: 13px;
}
.item-done {
  text-decoration: line-through;
  color: var(--el-text-color-placeholder);
}
</style>
