<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="bg-[#fff] h-[100vh] flex flex-col">
    <Navbar safeAreaInsetTop :bordered="false" title="在线客服" leftArrow @clickLeft="handleBack">
      <template #title>
        <text class="text-[#1F2329] text-[36rpx] font-medium">在线客服</text>
      </template>
    </Navbar>

    <view class="flex-1 bg-[#F8F8F8] px-[32rpx] pb-safe">
      <view class="mt-[84rpx] h-[754rpx] rounded-[16rpx] bg-[#fff]">
        <view class="py-[48rpx] mx-[48rpx] avatar-border flex justify-center items-center">
          <image
            class="min-w-[144rpx] min-h-[144rpx] w-[144rpx] h-[144rpx] rounded-full"
            src="https://api.static.ycymedu.com/sub/images/customerService/avatar.jpg"
          ></image>
          <view class="flex flex-col text-[#000] ml-[32rpx]">
            <text class="mb-[12rpx] font-normal text-[28rpx]">专属客服为您服务</text>
            <view class="flex items-center">
              <text class="text-[44rpx] font-medium whitespace-nowrap">{{ phoneNumber }}</text>
              <view
                @click="makePhoneCall"
                class="rounded-[8rpx] w-[88rpx] h-[44rpx] btn-border text-[#1580FF] text-[24rpx] font-normal flex items-center justify-center ml-[44rpx]"
              >
                拨打
              </view>
            </view>
          </view>
        </view>

        <view class="px-[168rpx] pt-[48rpx]">
          <image
            class="w-[352rpx] h-[352rpx]"
            src="https://api.static.ycymedu.com/images/kf.jpg"
            :show-menu-by-longpress="true"
          ></image>

          <view class="flex items-center justify-center mt-[34rpx]">
            <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>
    </view>
  </view>
</template>

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

const phoneNumber = '400-621-1003'

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

const handleBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.icon-style {
  font-size: 48rpx;
}

.btn-border {
  border: 2rpx solid #1580ff;
}

.avatar-border {
  border-bottom: 2rpx solid #ececec;
}
</style>
