<script setup lang="ts">
import {appCustomerServiceGetInfoGet} from "@/service";
import {callPhone} from "@/utils/utils";
const {t, locale} = useI18n();

const show = ref(false);
const serviceData = ref({})
function init() {
  appCustomerServiceGetInfoGet({}).then(res=> {
    console.log('客服信息', res)
    serviceData.value = res.data
  })
  show.value = true;
}

function close() {
  show.value = false;
}

function handleDial() {
  callPhone(serviceData.value.servicePhone)
}

defineExpose({
  show,
  init,
  close,
});
</script>
<template>
  <wd-popup
      custom-class="!bg-transparent"
      position="bottom"
      safe-area-inset-bottom
      v-model="show"
      @close="close"
  >
    <view class="p-[40rpx+20rpx]">
      <view
          class="mb-18rpx py-32rpx text-center bg-white shadow-[0rpx_3rpx_6rpx_rgba(0,0,0,0.16)] rounded-16rpx"
      >
        <view class="text-30rpx text-#333 font-bold mb-22rpx">{{ t("pages.mine.customer-service-phone") }}: {{ serviceData.servicePhone }}</view>
        <view class="text-28rpx text-#999">{{ t("pages.mine.work-time") }}: {{ locale === 'en' ? serviceData.workingHoursEn : serviceData.workingHoursZh }}</view>
      </view>
      <view
          class="h-100rpx flex items-center justify-center text-28rpx text-primary font-bold shadow-[0rpx_3rpx_6rpx_rgba(0,0,0,0.16)] bg-white rounded-16rpx"
          @click="handleDial"
      >
        {{ t("pages.mine.dial") }}
      </view>
    </view>
  </wd-popup>
</template>

<style scoped lang="scss"></style>
