<template>
  <uni-popup ref="popup" type="center" :safe-area="false">
    <view class="popup-content bg-white mx-[24px] px-[12px] py-16 rounded-[12px]">
      <view class="header flex flex-items-center pb-[12px]">
        <view class="title flex-full text-center text-[17px] text-[#000000] font-[500] ml-[24px]">呼叫热线</view>
        <uni-icons type="close" size="24" color="#CACFD8" @click="close" />
      </view>

      <view class="border-box pl-[12px] pr-[12px]">
        <view class="text-[16px] text-[#a3a3a3] leading-[22px]">
          如有任何疑问，欢迎随时致电景区咨询热线：
          <text class="text-[#2563eb]" @click="handleClick(mobleNumber1)">{{ mobleNumber1 }}</text> / <text
            class="text-[#2563eb]" @click="handleClick(mobleNumber2)">{{ mobleNumber2 }}</text>，
          我们将全程为您提供细致解答与暖心服务。
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref } from "vue";
const mobleNumber1 = "0854-3516115";
const mobleNumber2 = "0854-3516116";

const popup = ref(null);

const open = () => {
  popup.value && popup.value.open();
};

const close = () => {
  popup.value && popup.value.close();
};

const handleClick = (phoneNumber) => {
  close();
  uni.makePhoneCall({
    phoneNumber: phoneNumber,
  });
};

uni.$on("SHOW_CALL_MOBILE_POPUP", () => {
  open();
});
</script>

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