<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">
            <text class="icon-emoji">{{ service.icon }}</text>
          </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">
            <text class="icon-emoji">{{ service.icon }}</text>
          </view>
          <text class="service-name">{{ service.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      propertyServices: [
        { id: 1, name: '物业缴费', icon: '🏠', path: '/pages/property-payment/index' },
        { id: 2, name: '远程开门', icon: '🚪', path: '/pages/remote-door/index' },
        { id: 3, name: '报事报修', icon: '🔧', path: '/pages/repair/repair' },
        { id: 4, name: '投诉建议', icon: '📝', path: '/pages/complaint/index' }
      ],
      lifeServices: [
        { id: 1, name: '生活缴费', icon: '💳', path: '/pages/payment/index' },
        { id: 2, name: '社区育儿', icon: '👶', path: '' },
        { id: 3, name: '交管12123', icon: '🚗', path: '' },
        { id: 4, name: '租房中心', icon: '🏘️', path: '' },
        { id: 5, name: '餐饮服务', icon: '🍽️', path: '' },
        { id: 6, name: '常用快递', icon: '📦', path: '' },
        { id: 7, name: '掌上银行', icon: '🏦', path: '' },
        { id: 8, name: '保险服务', icon: '🛡️', path: '' },
        { id: 9, name: '安居客', icon: '🏠', path: '' },
        { id: 10, name: 'e出行', icon: '🚌', path: '' },
        { id: 11, name: '常用工具', icon: '🔨', path: '' },
        { id: 12, name: '健康运动', icon: '🏃', path: '' },
        { id: 13, name: '小区服务', icon: '🤝', 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>