<template>
	<NormalPopupView
		v-if="visible"
		:zIndex="9999"
		@close="hide"
	>
		<view class="tips-popup-content">
			<view class="title" :style="{ color: themeStore.theme.text.normal }">
				{{ title || $t('app.popup.tips') }}
			</view>
			<view class="text" :style="{ color: themeStore.theme.text.normal }">
				{{ text }}
			</view>
      <view class="flex-acenter plr24">
        <view v-if="showCancel" class="confirm-button" :style="{ 'background': themeStore.theme.button.cancel , 'color': themeStore.theme.button.textNormal}" @click.stop="handleCancelClick">
          <view>
            {{ cancelText || $t('app.popup.cancel') }}
          </view>
        </view>
        <view v-if="showConfirm" class="confirm-button" :style="{ 'background': themeStore.theme.button.normal , 'color': themeStore.theme.button.textNormal}" @click.stop="handleConfirmClick">
          <view>
            {{ confirmText || $t('app.popup.confirm') }}
          </view>
        </view>
      </view>
		</view>
	</NormalPopupView>
</template>

<script setup>
	import { ref } from 'vue';
	import NormalPopupView from './NormalPopupView.vue'
	import { useThemeStore } from '@/store/useThemeStore'
	import { useI18n } from 'vue-i18n'
	
	const { t } = useI18n()
	const themeStore = useThemeStore()

	const visible = ref(false)
	const emit = defineEmits(['confirm'])
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		text: {
			type: String,
			default: ''
		},
		showConfirm: {
			type: Boolean,
			default: true
		},
		confirmText: {
			type: String,
			default: ''
		},
    showCancel: {
			type: Boolean,
			default: true
		},
		confirmText: {
			type: String,
			default: ''
		}
	})
	
	const show = () => {
		visible.value = true
	}
	
	const hide = () => {
		visible.value = false
	}

  const handleCancelClick = () => {
    hide()
  }
	
	const handleConfirmClick = () => {
		emit('confirm')
		hide()
	}
	
	defineExpose({
		show,
		hide
	})
</script>

<style lang="scss" scoped>
	.tips-popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.title {
			font-size: 38rpx;
			font-weight: bold;
		}
		
		.text {
			margin-top: 50rpx;
			font-size: 30rpx;
			max-height: 300rpx;
			overflow-y: scroll;
		}
		
		.confirm-button {
      margin: 0rpx 10rpx;
      flex: 1;
			margin-top: 50rpx;
			min-width: 300rpx;
			max-width: 500rpx;
			height: 90rpx;
			border-radius: 45rpx;
			font-size: 32rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>