<template>
  <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">
        <view class="text-base leading-normal">
          <text class="text-base text-dark">为确保您的用药安全，根据规定：</text>
          <text class="text-base text-danger">药品属特殊商品，非质量问题一经售出概不退换</text>
        </view>
      </view>
      <view class="text-center pb-10" :class="elderMode ? '' : 'flex'">
        <view class="flex-grow order-2 p-10 rounded border-primary bg-primary text-white text-lg" @click="agree()">
          我已知晓并继续
        </view>
        <view class="flex-grow order-1 p-10 rounded border-primary text-primary text-lg"
          :class="elderMode ? 'mt-12' : 'mr-10'" @click="close()">
          取消
        </view>
      </view>
    </view>
  </uni-popup>
</template>

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

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

const popup = ref()

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

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

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

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}
</style>