<template>
  <!-- :mask-click="false" -->
  <uni-popup ref="popup" type="center" @change="change">
    <view :style="elderVarStyle" class="popup-content px-15 border-box bg-white rounded overflow-hidden">
      <view class="py-12 text-center text-lg font-semibold text-dark">
        查询医保购药记录授权
      </view>
      <view class="p-10 rounded mb-10 bg-gray">
        <scroll-view class="content-scroll">
          <view class="text-base leading-normal">
            请授权医生查看您近3个月医保购药记录，以便医生更加全面地了解您的健康状况、提供更加准确的复诊服务。
          </view>
          <!-- <view class="pt-5 text-base leading-normal">
            请授权医生查看您近3个月医保购药记录。
          </view> -->
        </scroll-view>
      </view>
      <view class="mb-10 py-10 rounded bg-primary text-white text-center text-lg" @click="agree('Y')">
        同意授权
      </view>
      <view class="mb-10 py-10 rounded border text-dark text-center text-lg" @click="agree('N')">
        拒绝授权
      </view>
    </view>
  </uni-popup>
</template>

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

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

const popup = ref()

function agree(result) {
  emits('confirm', result)
  close()
}

function change(e) {
  if (!e.show) {
    emits('close')
  }
  console.log('change: ', e)
}

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;
}

.content-scroll {
  max-height: 60vh;
}
</style>