<template>
  <view class="bg-white px-[30rpx] pb-safe pt-[14rpx] grid grid-cols-2 gap-[24rpx]">
    <image
      src="https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/dh.png"
      mode="scaleToFill"
      class="h-[88rpx]"
      @click="handlePhone"
    />
    <image
      src="https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/wx.png"
      mode="scaleToFill"
      class="h-[88rpx]"
      @click="handleFriend"
    />

    <MessageBox v-model:show="show" title="好友添加">
      <template>
        <image
          :src="friendImage"
          mode="scaleToFill"
          class="w-full h-[80vh] py-[20rpx]"
          :show-menu-by-longpress="true"
        />
      </template>
    </MessageBox>
  </view>
</template>

<script lang="ts" setup>
import MessageBox from '@/pages-sub/components/messageBox/MessageBox.vue'

const props = defineProps({
  phoneNumber: {
    type: String,
    default: '4000616985',
  },
  friendImage: {
    type: String,
    default: 'https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/tianjiawx.png',
  },
})

const show = ref(false)

const handlePhone = () => {
  uni.makePhoneCall({ phoneNumber: props.phoneNumber })
}

const handleFriend = () => {
  show.value = true
}
</script>
