<template>
  <view class="page-container">
    
    <!-- 列表 -->
    <view class="list-content">
      <view class="list-item" v-for="(item, index) in wasteCategories" :key="index">
        <text class="item-name">{{ item.alias }}</text>
        <text class="data-card-tag blue">{{ item.fwdm }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { api } from '@/api'
export default {
  data() {
    return {
      wasteCategories: []
    }
  },
  onLoad() {
    this.loadData()
  },
  methods: {
    loadData() {
      api.hwType().then(res => {
        if (res.code === 1000 && res.data) {
          this.wasteCategories = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: #f5f5f5;
}

.page-header {
  background: #ffffff;
  padding: 20px 16px;
  border-bottom: 1px solid #f0f0f0;
  
  .page-title {
    font-size: $font-size-lg;
    font-weight: 600;
    color: #333333;
  }
}

.list-content {
  padding: 12px 16px;
}

.list-item {
  background: #ffffff;
  border-radius: 4px;
  padding: 14px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  .item-name {
    font-size: $font-size-md;
    color: #333333;
  }

  .item-code {
    font-size: $font-size-base;
    color: #999999;
    margin-left: auto;
  }
}
</style>
