<template>
  <view class="flex flex-col bg-[#f8f8f8] h-screen">
    <view
      class="mx-[32rpx] bg-[#fff] rounded-[8rpx] mt-[32rpx] text-[28rpx] text-[#303030] font-bold"
    >
      <view
        class="flex items-center justify-between mr-[16rpx] ml-[32rpx] py-[28rpx] not-last-child"
      >
        <text>客服电话</text>
        <view class="flex items-center gap-[16rpx]" @click="makePhoneCall">
          <text>{{ phoneNumber }}</text>
          <view class="i-carbon-chevron-down rotate-270 text-[#BFBFBF]"></view>
        </view>
      </view>
      <view class="flex items-center justify-between mx-[32rpx] py-[28rpx]">
        <text>Email</text>
        <view class="flex items-center">
          <text>yly@ycymedu.com</text>
        </view>
      </view>
    </view>

    <view
      class="flex flex-col items-center py-[48rpx] bg-[#fff] rounded-[16rpx] mx-[32rpx] mt-[144rpx]"
    >
      <text class="text-[36rpx] font-semibold mb-[38rpx]">官方微信公众号</text>
      <view class="w-[252rpx] h-[252rpx]">
        <image
          src="https://api.static.ycymedu.com/images/erweima.jpg"
          mode="scaleToFill"
          :show-menu-by-longpress="true"
        />
      </view>
      <view class="flex items-center justify-center mt-[40rpx]">
        <view class="i-carbon-fingerprint-recognition text-[#E75859] text-[28rpx]"></view>
        <text class="text-[24rpx] text-[#000] font-normal ml-[12rpx]">
          长按二维码，关注后获取实时通知
        </text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const phoneNumber = '18724728603'

const makePhoneCall = () => {
  uni
    .makePhoneCall({
      phoneNumber: phoneNumber,
    })
    .catch((err) => {
      console.error(err)
    })
}
</script>

<style lang="scss" scoped>
.not-last-child {
  border-bottom: 2rpx solid #f5f5f5;
}
</style>
