 <template>
  <view class="data">
    <view class="row">
      <view class="topLeft">{{ item.topLeft || '暂无数据' }}</view>
      <view>{{ item.topRight || '暂无数据' }}</view>
    </view>
    <view class="row">
      <view class="subRow">
        <view>{{ item.bottomLeft || '暂无数据' }}</view>
        <view>{{ item.bottomRight || '暂无数据' }}</view>
      </view>
      <view>
        <view class="bottomRight" @click="onViewDetail">查看详细</view>
      </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;
  justify-content: space-between;
  align-items: center;
  width: 720rpx; /* 固定宽度，适配父容器的padding */
  box-sizing: border-box;
  height: 180rpx;
  border-radius: 11px;
  border: 1px solid #C7A26D;
  margin: 15rpx auto; /* 使用 auto 实现水平居中 */
}

.row {
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
}

.subRow {
  display: flex;
}

.subRow view {
  padding-right: 20px;
  font-size: 16px;
}

.topLeft {
  font-size: 21px;
  font-weight: 1000;
  color: #522510;
}

.bottomRight {
  font-size: 16px;
  font-weight: 1000;
  color: #522510;
  cursor: pointer;
}
</style>