<template>
  <div class="page-container matters-view">
    <div class="page-header">
      <div>
        <h2>事项查询</h2>
        <p>输入事项名称，查看办理条件、材料、时限与依据文件。</p>
      </div>
    </div>

    <a-card>
      <a-input-search
        v-model:value="matterStore.query"
        placeholder="输入事项名称，如：建设用地审批"
        size="large"
        :loading="matterStore.loading"
        enter-button="搜索事项"
        @search="handleSearch"
      />
    </a-card>

    <a-card class="results-card" :loading="matterStore.loading">
      <template #title>
        <span>搜索结果</span>
      </template>

      <a-empty v-if="!matterStore.query && matterStore.results.length === 0" description="输入事项名称开始搜索" />
      <a-empty v-else-if="matterStore.query && matterStore.results.length === 0" description="未找到匹配事项" />

      <a-list v-else :data-source="matterStore.results" item-layout="vertical">
        <template #renderItem="{ item }">
          <a-list-item class="matter-list-item" @click="goToMatter(item.matter_id)">
            <a-list-item-meta>
              <template #title>
                <div class="matter-list-title-row">
                  <span>{{ item.name }}</span>
                  <div>
                    <a-tag v-if="item.matter_type">{{ item.matter_type }}</a-tag>
                    <StatusTag v-if="item.status" :status="item.status" />
                  </div>
                </div>
              </template>
              <template #description>
                <div>
                  <div>{{ item.description || '暂无事项描述' }}</div>
                  <div v-if="item.sample_doc_ids.length" class="sample-docs">
                    关联文档：{{ item.sample_doc_ids.join('、') }}
                  </div>
                </div>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import StatusTag from '@/components/StatusTag.vue'
import { useMatterStore } from '@/stores/matter'

const router = useRouter()
const matterStore = useMatterStore()

function handleSearch(value: string) {
  matterStore.search(value)
}

function goToMatter(matterId: string) {
  router.push(`/matters/${matterId}`)
}
</script>

<style scoped lang="less">
.matters-view {
  .page-header {
    margin-bottom: 16px;

    h2 {
      margin-bottom: 4px;
    }

    p {
      color: #8c8c8c;
    }
  }

  .results-card {
    margin-top: 16px;
  }

  .matter-list-item {
    cursor: pointer;
    border-radius: 8px;
    padding: 8px 4px;

    &:hover {
      background: #fafafa;
    }
  }

  .matter-list-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }

  .sample-docs {
    margin-top: 8px;
    font-size: 12px;
    color: #8c8c8c;
  }
}
</style>