<template>
  <view class="service-page">
    <!-- 物业管家 -->
    <view class="service-section">
      <view class="section-header">
        <text class="section-title">物业管家</text>
      </view>
      <view class="service-grid">
        <view
          v-for="service in propertyServices"
          :key="service.id"
          class="service-item"
          @click="handleServiceClick(service)"
        >
          <view class="service-icon">
            <u-icon :name="service.icon" size="60rpx"/>
          </view>
          <text class="service-name">{{ service.name }}</text>
        </view>
      </view>
    </view>
    <!-- 便民服务 -->
    <view class="service-section">
      <view class="section-header">
        <text class="section-title">便民服务</text>
      </view>
      <view class="service-grid">
        <view
          v-for="service in lifeServices"
          :key="service.id"
          class="service-item"
          @click="handleServiceClick(service)"
        >
          <view class="service-icon">
            <u-icon :name="service.icon" size="60rpx"/>
          </view>
          <text class="service-name">{{ service.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      propertyServices: [
        { id: 1, name: '物业缴费', icon: '/static/物业费.png', path: '/pages/property-payment/index' },
        { id: 2, name: '远程开门', icon: '/static/一键开门.png', path: '/pages/remote-door/index' },
        { id: 3, name: '报事报修', icon: '/static/报修管理备份2x.png', path: '/pages/repair/repair' },
        { id: 4, name: '投诉建议', icon: '/static/物业费.png', path: '/pages/complaint/index' }
      ],
      lifeServices: [
        { id: 1, name: '生活缴费', icon: '/static/20-缴费记录.png', path: '/pages/payment/index' },
        { id: 2, name: '社区育儿', icon: '/static/亲子活动.png', path: '' },
        { id: 3, name: '交管12123', icon: '/static/交警.png', path: '' },
        { id: 4, name: '租赁中心', icon: '/static/租赁资产.png', path: '' },
        { id: 5, name: '餐饮服务', icon: '/static/餐饮.png', path: '' },
        { id: 6, name: '常用快递', icon: '/static/快递.png', path: '' },
        { id: 7, name: '掌上银行', icon: '/static/银行卡-01.png', path: '' },
        { id: 8, name: '保险服务', icon: '/static/保险.png', path: '' },
        { id: 9, name: '安居客', icon: '/static/物业费.png', path: '' },
        { id: 10, name: 'e出行', icon: '/static/交通出行.png', path: '' },
        { id: 11, name: '常用工具', icon: '/static/工具.png', path: '' },
        { id: 12, name: '健康运动', icon: '/static/跑步.png', path: '' },
        { id: 13, name: '小区服务', icon: '/static/服务.png', path: '' }
      ]
    }
  },
  methods: {
    handleServiceClick(service) {
      if (service.path) {
        uni.navigateTo({ url: service.path })
      } else {
        uni.showToast({
          title: '功能开发中',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>