<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="qrCodeUrl"
            :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'
import { useUserStore } from '@/store'

const userStore = useUserStore()

const contact = {
  '310000': {
    phone: '18516500555',
    qrCode: 'https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/shkf.jpg',
  },
  '370000': {
    phone: '18724728603',
    qrCode: 'https://api.static.ycymedu.com/images/kf.jpg',
  },
}

const phoneNumber = ref('18516500555')
const qrCodeUrl = ref('https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/shkf.jpg')

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

const handleBack = () => {
  uni.navigateBack()
}

onBeforeMount(() => {
  phoneNumber.value = contact[userStore.userInfo.city.code]?.phone || phoneNumber.value
  qrCodeUrl.value = contact[userStore.userInfo.city.code]?.qrCode || qrCodeUrl.value
})
</script>

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

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

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