<template>
  <view class="data">
    <!-- 标题和状态行 -->
    <view class="header-row">
      <view class="project-title">{{ item.topLeft || '暂无数据' }}</view>
      <view class="status">{{ item.topRight || '暂无数据' }}</view>
    </view>
    
    <!-- 详细信息表格 -->
    <view class="details-table">
      <view class="table-row">
        <text class="label year-col">年份</text>
        <text class="label amount-col">建造金额(约)</text>
        <text class="label donor-col">捐赠人数</text>
        <text class="label detail-col">捐赠名单</text>
      </view>
      <view class="table-row">
        <text class="value year-col">{{ item.year || '暂无数据' }}</text>
        <text class="value amount-col">{{ item.amount || '暂无数据' }}</text>
        <text class="value donor-col">{{ item.donorCount || '暂无数据' }}</text>
        <text class="view-details detail-col" @click="onViewDetail">查看详情</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'InstitutionalItem',
  props: {
    // 数据项
    item: {
      type: Object,
      required: true,
      default: () => ({
        topLeft: '',
        topRight: '',
        bottomLeft: '',
        bottomRight: ''
      })
    },
    // 数据索引
    index: {
      type: Number,
      default: 0
    }
  },
  methods: {
    // 查看详细
    onViewDetail() {
      // 触发父组件的事件
      this.$emit('view-detail', {
        item: this.item,
        index: this.index
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.data {
  background-color: #FFFBF5;
  display: flex;
  flex-direction: column;
  width: 720rpx;
  box-sizing: border-box;
  min-height: 180rpx;
  border-radius: 11px;
  border: 1px solid #C7A26D;
  margin: 15rpx auto;
  padding: 12rpx;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
  padding-bottom: 12rpx;
}

.project-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #522510;
  flex: 1;
}

.status {
  font-size: 28rpx;
  color: #7F7F7F;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}

.details-table {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10rpx;
  width: 100%;
}

.label {
  font-size: 26rpx;
  color: #7C736E;
  font-weight: 500;
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.value {
  font-size: 26rpx;
  color: #695347;
  font-weight: 600;
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.view-details {
  font-size: 28rpx;
  color: #522510;
  font-weight: 500;

  cursor: pointer;
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.view-details:active {
  opacity: 0.7;
}

/* 不同列的弹性比例 */
.year-col {
  flex: 1;
}

.amount-col {
  flex: 1.5;
}

.donor-col {
  flex: 1;
}

.detail-col {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 80rpx;
}
</style>