<template>
  <!-- :mask-click="false" -->
  <uni-popup ref="popup" type="center" @change="change">
    <view :style="elderVarStyle" class="popup-content px-15 border-box rounded overflow-hidden">
      <view class="py-12 text-center text-lg font-semibold text-dark">
        患者知情同意书
      </view>
      <view class="p-10 rounded mb-10 content-bg">
        <scroll-view class="content-scroll">
          <view class="text-base leading-normal">
            您正在使用震元堂中医院互联网医院在线诊疗服务平台。
          </view>
          <view class="pt-5 text-base leading-normal">
            接下来的问诊、开方服务将由震元堂中医院互联网医院的注册医师提供，药店工作人员仅提供操作辅助。
          </view>
          <view class="pt-5 text-base leading-normal">
            请确认您已了解并同意上述安排。
          </view>
        </scroll-view>
      </view>
      <view class="mb-10 py-10 rounded text-white text-center text-lg agree-btn" @click="agree()">
        同意
      </view>
      <view class="mb-10 py-10 rounded text-center text-lg cancel-btn" @click="close()">
        不同意
      </view>
    </view>
  </uni-popup>
</template>

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

const emits = defineEmits(['close', 'agree'])
const props = defineProps({
  elderVarStyle: {
    type: String,
    default: ""
  },
  visible: {
    type: Boolean,
    default: false
  }
})

const popup = ref()

function agree() {
  emits('agree')
  close()
  setTimeout(() => {
    uni.navigateTo({
      url: props.nextPath
    })
  }, 500)
}

function change(e) {
  if (!e.show) {
    emits('close')
  }
}

function close() {
  popup.value && popup.value.close()
}

watch(() => props.visible, n => {
  if (n) {
    popup.value && popup.value.open()
  }
})
</script>

<style lang="scss" scoped>
.popup-content {
  width: 690rpx;
  background: #FFF;
}

.content-bg {
  background: #f5ede0;
}

.content-scroll {
  max-height: 60vh;
}

.agree-btn {
  background: #b8956a;
  box-shadow: 0 4rpx 12rpx rgba(139, 101, 56, 0.3);
}

.cancel-btn {
  border-color: #d4c4a8;
  color: #8b6f47;
}
</style>