<template>
  <view class="container">
  <view class="header1">
  	服务
  </view>
	<view class="service-back">
		
	
    <view class="services">
      <view v-for="(service, index) in services" :key="index" class="service-item" @click="navigateTo(service)">
        <image :src="service.icon" mode="aspectFit" />
        <text style="text-align: center; ">{{ service.name }}</text>
      </view>
    </view>
    </view>
    <view class="sections">
      <view v-for="(section, index) in sections" :key="index" class="section-item" @click="navigateTo(section)">
        <image :src="section.image" mode="aspectFill" />
        <text >{{ section.title }}</text>
      </view>
    </view>
	
    <view class="company">
    	
  
    <image class="company-image" src="https://leaseraycos.oss-cn-shanghai.aliyuncs.com/document/20240912212116_bb38e4382cc089f4680f971ab4e09f58_323088_1918_1080.jpg" mode="aspectFill" />
      </view>
    
  </view>
</template>

<script setup>
import { ref } from 'vue'

const services = ref([
  { name: '产能计算', icon: '/static/计算器.svg', link: '/pages/capacity-calculation/index' },
  { name: '油品推荐', icon: '/static/油品.svg', link: '/pages/oil-recommendation/index' },
  { name: '刀片推荐', icon: 'https://leaseraycos.oss-cn-shanghai.aliyuncs.com/document/20240912211758_4037d040dfd724a7ed7eb4ccc398d6fb_33697_400_323.jpg', link: '/pages/blade-recommendation/index' },
  { name: '包胶硬度对比', icon: '/static/橡胶密封件.svg', link: '/pages/rubber-hardness-comparison/index' },
  { name: '锯体重量计算', icon: '/static/公斤.svg', link: '/pages/saw-weight-calculation/index' },
  { 
      name: '轴承查询', 
      icon: '/static/轴承.svg', 
      isMiniprogramLink: true,
      appId: 'wxb4b83027a868ac52', // 替换为实际的小程序 appId
      path: 'pages/index/index' // 替换为实际的小程序页面路径
    },
  { name: '温度与压力', icon: '/static/液压仪(压力).svg', link: '/pages/hydraulic-hose/index' },
  { name: '壹领AI助理', icon: '/static/人工智能.svg', link: '/pages/ai-assistant/index' },
])

const sections = ref([
  { title: '智桥科技', image: 'https://leaseraycos.oss-cn-shanghai.aliyuncs.com/document/20240912212224_ef8282907ec2bbf3589eff1d9bbb2cab_66988_355_532.png', link: '/pages/zhiqiao/index' },
  { title: '公众号', image: 'https://leaseraycos.oss-cn-shanghai.aliyuncs.com/document/20240912212158_ed0551d910c462394ec553ff61d7033e_100506_371_557.png', link: '/pages/qinglianggz/index' },
  { title: '投诉建议', image: 'https://leaseraycos.oss-cn-shanghai.aliyuncs.com/document/20240912211631_6d06996798bb191f9a32fd10e45ede10_202607_493_657.png', link: '/pages/complaint/index' }
])

const navigateTo = (service) => {
  console.log('Attempting to navigate to:', service);
  if (!service) {
    console.error('Service object is undefined or empty');
    return;
  }

  if (service.isMiniprogramLink) {
    // 跳转到其他小程序
    uni.navigateToMiniProgram({
      appId: service.appId,
      path: service.path,
      success: (res) => {
        console.log('Mini program navigation successful', res);
      },
      fail: (err) => {
        console.error('Mini program navigation failed', err);
        // 可以在这里添加失败后的处理逻辑，比如显示错误提示
      }
    });
  } else if (service.link) {
    // 普通页面跳转
    uni.navigateTo({
      url: service.link,
      success: (res) => {
        console.log('Navigation successful', res);
      },
      fail: (err) => {
        console.error('Navigation failed', err);
        // 如果 navigateTo 失败，尝试使用 reLaunch
        uni.reLaunch({
          url: service.link,
          success: (res) => console.log('reLaunch successful', res),
          fail: (reLaunchErr) => console.error('reLaunch also failed', reLaunchErr)
        });
      }
    });
  } else {
    console.error('Invalid service object: missing link or miniprogram info');
  }
};
</script>

<style>

.container {

  font-family:Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding-bottom: 20rpx; 
  
}

.header1 {
  font-size: 30rpx;
  font-weight: bold;
  height: 30px;
  background-color: #1296db;
  color: #ffffff;
  text-align: center;
  padding-top: 60px;
 
}
.service-back{
	display: flex;
	flex-wrap: wrap;
	background-color: white;
	border-radius: 0px 0px 10px 10px ;
	width: 100%;
	margin-bottom: 20rpx;
	padding-bottom: 10px;
	
	background-color: #1296db;
	
}
.services {
 
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  border-radius: 10px;
  padding: 5px;
  margin: 20rpx;
 
 
}

.service-item {

  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.service-item image {
  width: 80rpx;
  height: 80rpx;
}

.service-item text {
  font-size: 24rpx;
  margin-top: 20rpx;
}

.sections {
  display: flex;
  justify-content: space-between;
  margin: 20rpx;
 
}

.section-item {
  width: 30%;
  position: relative;
  height:130px;
}

.section-item image {
  width: 100%;
  height: 150px;
  border-radius: 6px;
}

.section-item text {
  position: absolute;
  bottom: 30%;
  left: 30%;
  color: #ffffff;
  font-size: 24rpx;
}

.company{
   display: flex;
   justify-content: space-between;
  height: 170px;
  border-radius: 10px;
  margin-left: 10px ;
  margin-right: 10px ;
  margin-top: 30px;
  overflow: hidden;
  margin-bottom: 40px;
}

.company-image {
	width: 100%;
   display: flex;
  height: 170px;
  
}


.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tab-item image {
  width: 40rpx;
  height: 40rpx;
}

.tab-item text {
  font-size: 24rpx;
  margin-top: 5rpx;
}

.tab-item.active {
  color: #1296db;
}
</style>