<template>
  <uv-popup
    ref="doctorPopup"
    mode="bottom"
    closeable="true"
    round="12"
    v-model:visible="isVisible"
  >
    <view class="content">
      <view class="title">付爱明医生工作室</view>
      <view>
        <image src="@/static/images/chat_01.png" 
        style="border-radius: 50%;"
        mode="scaleToFill" />
      </view>
      <view class="info-item">
        <text class="title-20-800">付爱明</text>
        <text>主治医师</text>
        <text>内科</text>
      </view>
      <view class="info-item">
        <text class="sign">三甲</text>
        <text>南方医院</text>
      </view>
      <image
        src="@/static/images/chat_02.png"
        class="title-icon"
        mode="scaleToFill"
      />
      <view class="desc">
        从事心血管病诊治工作数年，擅长冠心病、高血压、心力衰竭等诊断从事心血管病诊治工作数年，擅长冠心病、高血压、心力衰竭等诊断...从事心血管病诊治工作数年，擅长冠心病、高血压、心力衰竭等诊断
      </view>
    </view>
  </uv-popup>
</template>

<script lang="ts" setup>
import { ref, watch, defineEmits } from 'vue';

const props = defineProps({
  open: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:open']);
const doctorPopup = ref<any>(null);
const isVisible = ref(props.open);

watch(() => props.open, (newVal) => {
  console.log("2222222222222",newVal);
  
  isVisible.value = newVal;
  if(props.open) {
    doctorPopup.value.open()
  }
});

watch(isVisible, (newVal) => {
    emit('update:open', false);
  // }
  
});

const closePopup = () => {
  isVisible.value = false;
};
</script>

<style scoped lang="scss">
// 弹出框
	.content {
		border-radius: 100rpx;
		padding: 48rpx;
		display: flex;
		padding-bottom: 80rpx;
		flex-direction: column;
		gap: 10rpx;
		.title {
			text-align: center;
			font-weight: bold;
			font-size: 34rpx;
			color: #1d2129;
		}
		image {
			width: 103rpx;
			height: 103rpx;
		}
		.info-item {
			display: flex;
			color: #1d2129;
			font-weight: 500;
			font-size: 28rpx;
			gap: 10rpx;
			align-items: center;
			.sign {
				font-size: 16rpx;
				padding: 5rpx;
				background-color: #05d3a2;
				color: white;
				border-radius: 3rpx 6rpx 3rpx 6rpx;
			}
		}
		.desc {
			font-weight: 400;
			font-size: 30rpx;
			color: #848d99;
		}
		.title-icon{
			height: 28rpx;
			width:120rpx;
			margin: 30rpx 0 10rpx 0 ;

		}
	}

</style>
