<template>
  <Transition name="fade" @after-leave="onTransitionComplete">
    <view v-show="show" class="popup-overlay" @click="closeOnOverlayClick && close()">
      <Transition name="pop">
        <view v-show="show" class="popup-content" :class="positionClass" @click.stop>
          <view v-if="closable" class="popup-close" @click="close">×</view>
          <view
            class="bg-[#27272A] flex flex-col items-center"
            :style="{ width: width, height: height }"
          >
            <view class="dialog-box-content overflow-y-scroll w-full">
              <slot></slot>
            </view>
            <slot name="footer">
              <view class="dialog-box-footer absolute bottom-70rpx">
                <view
                  @click="onConfirm"
                  class="w-630rpx h-100rpx rounded-20rpx button-bg flex items-center justify-center text-white"
                >
                  {{ $t('production.team.joinBtn') }}
                </view>
              </view>
            </slot>
          </view>
        </view>
      </Transition>
    </view>
  </Transition>
</template>

<script setup lang="ts">
const props = defineProps({
  showValue: {
    type: Boolean,
    default: false,
  },
  width: {
    type: String,
    default: '690rpx',
  },
  height: {
    type: String,
    default: '794rpx',
  },
  position: {
    type: String,
    default: 'center',
  },
  closable: {
    type: Boolean,
    default: true,
  },
  closeOnOverlayClick: {
    type: Boolean,
    default: true,
  },
})

const emit = defineEmits(['update:showValue', 'onConfirm'])

const show = ref(props.showValue)

const positionClass = computed(() => {
  switch (props.position) {
    case 'top':
      return 'popup-top'
    case 'bottom':
      return 'popup-bottom'
    case 'left':
      return 'popup-left'
    case 'right':
      return 'popup-right'
    default:
      return 'popup-center'
  }
})

const close = () => {
  show.value = false
}

const onTransitionComplete = () => {
  emit('update:showValue', show.value)
}

const onConfirm = () => {
  emit('onConfirm')
}

watch(
  () => props.showValue,
  (newValue) => {
    show.value = newValue
  },
)
</script>

<style scoped>
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-content {
  background-color: #27272a;
  border-radius: 30rpx;
  position: relative;
}

.popup-close {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  font-size: 40rpx;
  color: white;
  cursor: pointer;
}

.popup-center {
  /* Center positioning styles */
}

.popup-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.popup-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.popup-left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}

.popup-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}

.button-bg {
  background: #8ae54a;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.pop-enter-active,
.pop-leave-active {
  transition: all 0.3s ease;
}

.pop-enter-from,
.pop-leave-to {
  opacity: 0;
  transform: scale(0.8);
}
</style>
