<template>
  <Transition name="fade" @after-leave="onTransitionComplete">
    <view v-show="showValue" class="popup-overlay" @click="closeOnOverlayClick && close()">
      <Transition name="pop">
        <view
          v-show="showValue"
          class="popup-content"
          :class="positionClass"
          :style="{ width, height }"
          @click.stop
        >
          <view v-if="closable" class="popup-close" @click="close">
            <image src="@/static/images/production/close.png" class="w-40rpx h-40rpx"></image>
          </view>
          <view class="bg-cardlight flex flex-col items-center h-full">
            <view
              class="dialog-box-content w-full flex-grow"
              :class="ov ? 'overflow-y-scroll' : 'overflow-y-hidden'"
            >
              <slot></slot>
            </view>
            <slot name="footer">
              <!--              <view class="dialog-box-footer">-->
              <!--                <view-->
              <!--                  @click="onConfirm"-->
              <!--                  class="w-[90%] h-100rpx rounded-20rpx button-bg flex items-center justify-center text-white mx-auto mb-70rpx"-->
              <!--                >-->
              <!--                  {{ $t('production.team.joinBtn') }}-->
              <!--                </view>-->
              <!--              </view>-->
            </slot>
          </view>
        </view>
      </Transition>
    </view>
  </Transition>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core'

const props = defineProps({
  showValue: {
    type: Boolean,
    default: false,
  },
  ov: {
    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 showValue = useVModel(props, 'showValue', emit)

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 = () => {
  showValue.value = false
}

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

const onConfirm = () => {
  emit('onConfirm')
}
</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;
  overflow: hidden;
}

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

.dialog-box-content {
  height: calc(100% - 170rpx); /* 减去底部按钮的高度和边距 */
}

.dialog-box-footer {
  width: 100%;
}

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

.popup-top {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.popup-bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

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

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

.button-bg {
  background: var(--primary-color);
}

.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>
