<template>
  <view class="page-container">
    <scroll-view class="page-body" scroll-y>
      <view class="ledger-menu">
        <view 
          class="ledger-item" 
          v-for="item in ledgerList" 
          :key="item.id"
          @click="navigateTo(item)"
        >
          <view class="ledger-text">
            <text class="title">{{ item.alias }}</text>
            <!-- <text class="desc">{{ item.lx }}</text> -->
          </view>
          <uni-icons type="right" size="14" color="#cccccc"></uni-icons>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { api } from '@/api'
export default {
  data() {
    return {
      ledgerList: []
    }
  },
  onLoad() {
    this.loadData()
  },
  methods: {
    navigateTo(item) {
      uni.navigateTo({
        url: '/pages/ledger/detail?item=' + encodeURIComponent(JSON.stringify(item))
      })
    },
    async loadData() {
      const res = await api.ledgetType()
      if (res.code === 1000) {
        // 按 sort_order 排序
        this.ledgerList = res.data.sort((a, b) => a.sort_order - b.sort_order)
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.ledger-menu {
  padding: $spacing-md;
}

.ledger-item {
  background: #ffffff;
  border-radius: $border-radius-md;
  padding: $spacing-md;
  margin-bottom: $spacing-base;
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ledger-text {
  flex: 1;

  .title {
    display: block;
    font-size: $font-size-md;
    color: $text-primary;
    margin-bottom: 2px;
  }

  .desc {
    display: block;
    font-size: $font-size-sm;
    color: $text-placeholder;
  }
}

</style>
