<template>
  <view class="mb-8">
    <view class="flex justify-between items-center mb-4">
      <view class="flex items-center">
        <text class="text-2xl font-bold text-primary">红娘推荐</text>
        <view class="ml-2 px-2 py-1 bg-primary/10 rounded-full">
          <text class="text-xs text-primary font-medium">专业认证</text>
        </view>
      </view>
      <view class="flex items-center">
        <text class="i-carbon-task-complete text-base text-primary"></text>
      </view>
    </view>
    <view class="relative">
      <view
        class="p-5 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300"
      >
        <view class="flex items-start">
          <view class="relative">
            <image
              :src="matchmakerInfo.avatar"
              mode="aspectFill"
              class="w-24 h-24 rounded-full border-2 border-primary/20 shadow-md"
            />
            <view
              class="absolute -bottom-1 -right-1 w-7 h-7 bg-gradient-to-r from-primary to-primary/80 rounded-full flex items-center justify-center shadow-md"
            >
              <text class="i-carbon-task-complete text-xs text-white"></text>
            </view>
          </view>
          <view class="ml-5 flex-1">
            <view class="flex items-center mb-3">
              <text class="text-xl font-bold text-gray-800 mr-3">{{ matchmakerInfo.name }}</text>
              <view class="px-3 py-1 bg-gradient-to-r from-primary/10 to-primary/5 rounded-full">
                <text class="text-sm text-primary font-medium">金牌红娘</text>
              </view>
            </view>
            <view class="space-y-2.5">
              <view class="flex items-center">
                <text class="i-carbon-logo-wechat text-lg text-gray-500 mr-2"></text>
                <text class="text-sm text-gray-600">微信: {{ matchmakerInfo.wechat }}</text>
              </view>
              <view class="flex items-center">
                <text class="i-carbon-phone text-lg text-gray-500 mr-2"></text>
                <text class="text-sm text-gray-600">电话: {{ matchmakerInfo.phone }}</text>
              </view>
              <view class="flex items-center text-sm">
                <text class="i-carbon-star-filled text-lg text-yellow-400 mr-2"></text>
                <text class="text-gray-600">
                  成功率:
                  <text class="font-medium text-primary">{{ matchmakerInfo.successRate }}%</text>
                </text>
                <text class="mx-3 text-gray-300">|</text>
                <text class="text-gray-600">
                  服务人数:
                  <text class="font-medium text-primary">{{ matchmakerInfo.serviceCount }}+</text>
                </text>
              </view>
            </view>
          </view>
        </view>
        <view class="mt-5 pt-4 border-t border-gray-100">
          <view class="flex justify-between items-center">
            <view class="flex items-center">
              <text class="i-carbon-chat text-lg text-gray-500 mr-2"></text>
              <text class="text-sm text-gray-600">在线咨询</text>
            </view>
            <button
              class="flex items-center px-5 py-2.5 bg-gradient-to-r from-[#FF6B6B] to-[#FF8E8E] text-white rounded-full text-sm font-medium shadow-md hover:shadow-lg hover:from-[#FF8E8E] hover:to-[#FF6B6B] transition-all duration-300 active:scale-95 active:shadow-inner"
              @click="contactMatchmaker"
            >
              <text class="font-semibold">立即联系</text>
              <text class="i-carbon-arrow-right text-xs ml-1"></text>
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface MatchmakerInfo {
  name: string
  avatar: string
  wechat: string
  phone: string
  successRate: number
  serviceCount: number
}

// 红娘信息
const matchmakerInfo = ref<MatchmakerInfo>({
  name: '王红娘',
  avatar:
    'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg',
  wechat: 'matchmaker123',
  phone: '13800138000',
  successRate: 98,
  serviceCount: 1000,
})

// 联系红娘方法
const contactMatchmaker = () => {
  uni.showActionSheet({
    itemList: ['复制微信号', '拨打电话'],
    success: (res) => {
      if (res.tapIndex === 0) {
        uni.setClipboardData({
          data: matchmakerInfo.value.wechat,
          success: () => {
            uni.showToast({
              title: '微信号已复制',
              icon: 'success',
            })
          },
        })
      } else if (res.tapIndex === 1) {
        uni.makePhoneCall({
          phoneNumber: matchmakerInfo.value.phone,
        })
      }
    },
  })
}
</script>
