<template>
  <div class="government-container">
    <h1>政府平台</h1>
    <div v-if="loading" class="loading-indicator">数据加载中...</div>
    <div v-if="error" class="error-message">数据加载失败，请稍后重试。</div>
    <div v-if="!loading && !error">
      <div class="policy-section">
        <h3>政策通知</h3>
        <ul>
          <li v-for="(policy, index) in policies" :key="index">
            {{ policy.title }} - {{ policy.date }}
          </li>
        </ul>
      </div>
      <div class="data-section">
        <h3>政务数据</h3>
        <a-table :dataSource="governmentData" :columns="columns" />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const policies = ref([]);
    const governmentData = ref([]);
    const columns = ref([
      { title: '指标', dataIndex: 'indicator', key: 'indicator' },
      { title: '数值', dataIndex: 'value', key: 'value' },
      { title: '单位', dataIndex: 'unit', key: 'unit' },
    ]);
    const loading = ref(true);
    const error = ref(false);

    const fetchData = async () => {
      try {
        loading.value = true;
        error.value = false;
        const [policyResponse, dataResponse] = await Promise.all([
          axios.get('/api/policies'),
          axios.get('/api/government-data')
        ]);
        policies.value = policyResponse.data;
        governmentData.value = dataResponse.data;
      } catch (err) {
        error.value = true;
        console.error('获取数据失败:', err);
      } finally {
        loading.value = false;
      }
    };

    onMounted(() => {
      fetchData();
    });

    return {
      policies,
      governmentData,
      columns,
      loading,
      error
    };
  }
};
</script>

<style scoped>
.government-container {
  padding: 20px;
}

.policy-section,
.data-section {
  margin-bottom: 20px;
}

.loading-indicator,
.error-message {
  text-align: center;
  padding: 20px;
  font-size: 16px;
  color: #666;
}

.error-message {
  color: #ff4d4f;
}

@media (max-width: 768px) {
  .policy-section ul,
  .data-section {
    padding: 10px;
  }

  .data-section .ant-table {
    overflow-x: auto;
  }
}
</style>