<template>
  <div>
    <van-popup
      v-model:show="show"
      round
      teleport="body"
      :style="{ width: '90%', top: '80%' }"
      @click-overlay="hide"
    >
      <div class="text-center py-4" @click="handleClickCall">
        <Icon
          name="icon-a-dianhua"
          color="#3E4FAF"
          size="17"
          class="inline-block pr-3 align-text-bottom"
        />
        <span class="text-app-blue text-sm align-middle font-semibold"
          >呼叫{{ phone }}</span
        >
      </div>
    </van-popup>
    <van-popup
      v-model:show="show"
      round
      :style="{ width: '90%', margin: '60px auto 0px auto', top: '80%' }"
      teleport="body"
      :overlay="false"
      @click-overlay="hide"
    >
      <div
        class="
          text-app-blue text-sm
          font-semibold
          border-t border-gray-200
          text-center
          py-4
        "
        @click="hide"
      >
        取消
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts" setup>
import Vue from "vue";
import jsBridge from "@/utils/jsBridge2";
import Icon from "../common/Icon.vue";

const emit = defineEmits(["hidden"]);

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  phone: {
    type: String,
  },
});

const hide = () => {
  emit("hidden", false);
};

const handleClickCall = async () => {
  console.log(props.phone);
  new jsBridge().bridge_call(props.phone, () => {
    emit("hidden", false);
  });
};
</script>
