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

<template>
  <view class="bg-[#fff] h-[100vh] flex flex-col">
    <wd-navbar safeAreaInsetTop custom-class="bg-transparent!" :bordered="false">
      <template #title>
        <text class="text-[#1F2329] text-[36rpx] font-medium">在线客服</text>
      </template>
      <template #left>
        <wd-icon name="thin-arrow-left" custom-style="icon-style" @click="handleBack"></wd-icon>
      </template>
    </wd-navbar>

    <view
      class="flex-1 bg-[#F8F8F8] px-[32rpx]"
      :style="`padding-bottom:${safeAreaInsets.bottom}px;`"
    >
      <view class="mt-[84rpx] h-[754rpx] radius-[16rpx] bg-[#fff]">
        <view class="py-[48rpx] mx-[48rpx] avatar-border flex justify-center items-center">
          <image
            class="w-[144rpx] h-[144rpx] rounded-full"
            src="@/pages-sub/static/images/customerService/avatar.svg"
          ></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">400-621-1003</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="@/pages-sub/static/images/customerService/qrCode.svg"
            :show-menu-by-longpress="true"
          ></image>

          <view class="flex items-center justify-center mt-[34rpx]">
            <image
              class="w-[28rpx] h-[28rpx]"
              src="@/pages-sub/static/images/customerService/vector.svg"
            ></image>
            <text class="text-[24rpx] text-[#000] font-normal ml-[12rpx]">
              扫码添加客服企业微信
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import useNavbarWeixin from '@/hooks/useNavbarWeixin'

const { safeAreaInsets } = useNavbarWeixin()

const makePhoneCall = () => {
  uni
    .makePhoneCall({
      phoneNumber: '400-621-1003',
    })
    .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>
