<template>
  <uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,.5)" :safe-area="false">
    <view class="tips-wrapper">
      <view class="tips-text call-phone">
        {{ vdata.tips }}
        <view class="phone-number">{{ vdata.phone }}</view>
      </view>
      <view class="single-text flex-center" hover-class="u-cell-hover" hover-stay-time="150" style="color: #2980fd" @tap="emits('callPhone')">{{ vdata.confirmText }}</view>
      <view class="line"></view>
      <view class="tips-text tips-cancel flex-center" hover-class="u-cell-hover" hover-stay-time="150" @tap="popup.close()"> 取消 </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { reactive, ref } from 'vue'

const vdata = reactive({
	phone: '',
	tips: '',
	confirmText: ''
})
const emits = defineEmits(['callPhone'])

const selected = ref(undefined)
const popup = ref(null)
// 打开弹窗 val 选中数据的key
const open = (val) => {
	console.log(val)
	Object.assign(vdata, val)
  popup.value.open()
}

const close = () => popup.value.close()
defineExpose({ open, close })
</script>

<style lang="scss" scoped>
.tips-wrapper {
  // overflow: hidden;
  border-radius: 32rpx 32rpx 0 0;
  padding-top: 20rpx;
  padding-bottom: 60rpx;
  background-color: #fff;
  .tips-text {
    text-align: center;
    min-height: 90rpx;
    font-size: 30rpx;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.07);
  }
  .single-text {
    height: 120rpx;
  }
  .line {
    height: 20rpx;
    background-color: rgba(0, 0, 0, 0.07);
  }
  .tips-cancel {
    height: 110rpx;
    color: $J-color-t80;
    font-size: 33rpx;
    border: none;
  }
  .u-cell-hover {
    background-color: #f8f9fa;
  }
}
.call-phone {
  padding: 0 60rpx;
  padding-top: 40rpx;
  font-size: 30rpx;
  color: #808080;
  .phone-number {
    margin-top: 25rpx;
    margin-bottom: 40rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: #000;
  }
}
</style>
