<template>
    <view v-if="display" class="sheet-root" @touchmove.stop="handlePanelTouch">
        <view class="sheet-mask" :class="maskClass" @click="handleMaskClick"></view>
        <view class="sheet-panel-wrapper">
            <view class="sheet-panel" :class="panelClass" @click.stop="handlePanelClick">
                <view class="sheet-handle"></view>
                <view v-if="showHeader" class="sheet-header">
                    <view class="sheet-header-left">
                        <slot name="header">
                            <text v-if="showTitle" class="sheet-title">{{ title }}</text>
                        </slot>
                    </view>
                    <view v-if="showClose" class="sheet-close-area" @click.stop="handleCloseClick">
                        <image class="sheet-close-icon" src="/static/icon_close.png" mode="aspectFit"></image>
                    </view>
                </view>
                <view class="sheet-content">
                    <scroll-view scroll-y="true" style="flex:1">
                        <!-- 二维码区域 -->
                        <view class="qr-section">
                            <view class="qr-code-container" v-if="qrcode">
                                <image :src="qrcode" class="qr-code-image" mode="aspectFit" />
                            </view>
                            <view class="qr-loading" v-else>
                                <text class="loading-text">二维码生成中...</text>
                            </view>
                            <text class="qr-instruction">手机扫码即可分享</text>
                        </view>
                        <slot></slot>
                    </scroll-view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="uts">
import { ref, watchEffect, nextTick, computed, useSlots, onBeforeUnmount } from 'vue'
import { shareQrcode, type ResponseData } from '../../utils/reques.uts'

const TRANSITION_DURATION: number = 260

type ActionSheetProps = {
    visible: boolean
    title: string
    showClose: boolean
    closeOnOverlay: boolean
    worksId?: number
}

type ActionSheetEmits = {
    (e: 'update:visible', value: boolean): void
    (e: 'open'): void
    (e: 'closed'): void
    (e: 'close'): void
}

const props = withDefaults(defineProps<ActionSheetProps>(), {
    visible: false,
    title: '',
    showClose: true,
    closeOnOverlay: true,
    worksId: 0
})

const emit = defineEmits<ActionSheetEmits>()

const qrcode = ref('')

const getQrcode = async (worksId: number): Promise<void> => {
    try {
        const res = await shareQrcode(worksId) as ResponseData
        if (res.code == 0 && res.data != null) {
            const dataObj = res.data as UTSJSONObject
            const base64Image = dataObj.get('base_64_image')
            if (base64Image != null) {
                qrcode.value = base64Image as string
            }
        } else {
            console.log('获取二维码失败:', res.message)
        }
    } catch (error) {
        console.log('请求二维码失败:', error)
    }
}

const slots = useSlots()

const display = ref<boolean>(false)
const maskVisible = ref<boolean>(false)
const panelVisible = ref<boolean>(false)

let hideTimer: number = -1
let openTimer: number = -1

const showTitle = computed((): boolean => {
    if (props.title.length > 0) {
        return true
    }
    return false
})

const hasHeaderSlot = computed((): boolean => {
    const headerSlot = slots['header']
    if (headerSlot != null) {
        return true
    }
    return false
})

const showHeader = computed((): boolean => {
    if (hasHeaderSlot.value == true) {
        return true
    }
    if (showTitle.value == true) {
        return true
    }
    if (props.showClose == true) {
        return true
    }
    return false
})

const maskClass = computed((): string => {
    if (maskVisible.value == true) {
        return 'sheet-mask--show'
    }
    return 'sheet-mask--hide'
})

const panelClass = computed((): string => {
    if (panelVisible.value == true) {
        return 'sheet-panel--show'
    }
    return ''
})

const clearTimers = (): void => {
    if (hideTimer != -1) {
        clearTimeout(hideTimer)
        hideTimer = -1
    }
    if (openTimer != -1) {
        clearTimeout(openTimer)
        openTimer = -1
    }
}

const openPanel = (): void => {
    clearTimers()
    display.value = true
    maskVisible.value = true
    nextTick(() => {
        if (props.visible == true) {
            panelVisible.value = true
        }
    })
    openTimer = setTimeout(() => {
        emit('open')
        openTimer = -1
    }, TRANSITION_DURATION) as number
}

const closePanel = (): void => {
    clearTimers()
    panelVisible.value = false
    maskVisible.value = false
    hideTimer = setTimeout(() => {
        display.value = false
        emit('closed')
        hideTimer = -1
    }, TRANSITION_DURATION) as number
}

const handleMaskClick = (): void => {
    if (props.closeOnOverlay == true) {
        emit('update:visible', false)
        emit('close')
    }
}

const handleCloseClick = (): void => {
    emit('update:visible', false)
    emit('close')
}

const handlePanelClick = (): void => {}

const handlePanelTouch = (): void => {}

watchEffect(() => {
    const visible = props.visible
    if (visible == true) {
        openPanel()
        // 打开时请求二维码
        if (props.worksId > 0) {
            qrcode.value = ''
            getQrcode(props.worksId)
        }
    } else {
        if (display.value == true) {
            closePanel()
        }
    }
})

onBeforeUnmount(() => {
    clearTimers()
})
</script>

<style>
    .sheet-root {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
    }

    .sheet-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.45);
        opacity: 0;
        transition: opacity 0.26s ease;
    }

    .sheet-mask--show {
        opacity: 1;
    }

    .sheet-mask--hide {
        opacity: 0;
    }

    .sheet-panel-wrapper {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
    }

    .sheet-panel {
        width: 100%;
        max-height: 600rpx;
        background-color: #FFFFFF;
        border-top-left-radius: 28rpx;
        border-top-right-radius: 28rpx;
        padding: 24rpx 36rpx 36rpx;
        box-shadow: 0px -8rpx 32rpx rgba(0, 0, 0, 0.08);
        transform: translateY(100%);
        transition: transform 0.26s ease;
        display: flex;
        flex-direction: column;
    }

    .sheet-panel--show {
        transform: translateY(0%);
    }

    .sheet-handle {
        width: 110rpx;
        height: 10rpx;
        border-radius: 5rpx;
        background-color: rgba(0, 0, 0, 0.12);
        align-self: center;
        margin-bottom: 24rpx;
    }

    .sheet-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24rpx;
    }

    .sheet-header-left {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .sheet-title {
        margin-left: 50rpx;
        font-size: 30rpx;
        color: #1F1F1F;
        font-weight: bold;
    }

    .sheet-close-area {
        width: 48rpx;
        height: 48rpx;
        border-radius: 24rpx;
        background-color: rgba(0, 0, 0, 0.05);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sheet-close-icon {
        width: 28rpx;
        height: 28rpx;
    }

    .sheet-content {
        flex: 1;
        overflow: hidden;
    }

    /* 二维码区域 */
    .qr-section {
        padding: 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .qr-code-container {
        width: 300rpx;
        height: 300rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .qr-code-image {
        width: 100%;
        height: 100%;
    }

    .qr-loading {
        width: 300rpx;
        height: 300rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .loading-text {
        font-size: 28rpx;
        color: #999;
    }

    .qr-instruction {
        margin-top: 30rpx;
        font-weight: 400;
font-size: 20rpx;
color: #A9A9B2;
        text-align: center;
    }
</style>

