<template>
  <view>
    <view class="area_functional">
      <view
        v-for="(i, index) in area_functional"
        :key="`items_${index}`"
        class="item"
        @click="handleToPage(i?.url)"
      >
        <view class="icon">
          <image :src="`/static/svg/${i?.icon || ''}.svg`" mode="heightFix" />
        </view>
        <view class="label"> {{ i?.label || '' }} </view>
      </view>
    </view>
    <view class="house_wallet">
      <view class="item">
        <view class="content">
          <view class="title">房屋管理</view>
          <view class="value"> 已绑定<text>3</text>个房屋 </view>
        </view>
        <image src="/static/images/IconHouse.png" mode="heightFix" />
      </view>
      <view class="item">
        <view class="content">
          <view class="title">我的钱包</view>
          <view class="value"> 余额：<text>0.00元</text> </view>
        </view>
        <image src="/static/images/IconWallet.png" mode="heightFix" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const area_functional = [
  {
    label: '我的收藏',
    icon: 'IconCollection',
    url: ''
  },
  {
    label: '我的审核',
    icon: 'IconReview',
    url: '/INDEX/owner_audit_list/index'
  },
  {
    label: '我的活动',
    icon: 'IconEvent',
    url: ''
  },
  {
    label: '我的车辆',
    icon: 'IconVehicle',
    url: ''
  }
]
const handleToPage = (url: string) => {
  if (url) {
    uni.navigateTo({ url })
  }
}
</script>

<style lang="scss" scoped>
.area_functional {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 30rpx;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  color: #3d3d3d;
  font-size: 24rpx;
  .item {
    text-align: center;
    position: relative;
    .icon {
      width: 100%;
      height: 42rpx;
      image {
        height: 42rpx;
      }
    }
    .label {
      padding-top: 10rpx;
    }
  }
}
.house_wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 30rpx;
  .item {
    background-color: #fff;
    border-radius: 20rpx;
    width: 330rpx;
    height: 140rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .content {
      padding: 0 0 0 30rpx;
    }
    .title {
      color: #3d3d3d;
      font-size: 28rpx;
      font-weight: 500;
      padding-bottom: 10rpx;
    }
    image {
      width: 80rpx;
      height: 80rpx;
      margin-right: 30rpx;
    }
    .value {
      color: #999;
      font-size: 24rpx;
      text {
        color: #c45656;
      }
    }
  }
}
</style>
