<template>
    <u-popup
        v-model="show"
        mode="bottom"
        duration="200"
        border-radius="20"
        height="98%"
        :customStyle="{
            background: '#f8f8fb'
        }"
        safe-area-inset-bottom
        @close="close"
    >
        <view class="flex flex-col h-full">
            <view
                class="p-[30rpx] pb-[140rpx] flex flex-col flex-1 min-h-0 justify-center items-center relative"
            >
                <!--    头部标题    -->
                <view class="absolute top-[34rpx] right-[40rpx]" @click="close">
                    <u-icon name="close" size="30" color="#333"></u-icon>
                </view>
                <view
                    class="w-full text-center text-black text-lg font-medium pb-[30rpx]"
                >
                    详情
                </view>

                <!--    内容页面    -->
                <scroll-view scroll-y="true" class="w-full flex-1 min-h-0">
                    <view class="w-full">
                        <image
                            v-show="!loading"
                            :src="content.thumbnail || content.image"
                            class="w-full rounded-[16rpx]"
                            mode="widthFix"
                            @load="loading = false"
                            @error="error = true"
                            @click.stop="previewImage"
                        />
                        <view
                            class="flex justify-center items-center h-[500rpx]"
                            v-if="loading && !error"
                        >
                            <u-loading
                                mode="circle"
                                :color="$theme.primaryColor"
                                size="80"
                            ></u-loading>
                        </view>
                        <image
                            v-if="error"
                            class="w-full"
                            :src="ErrorIcon"
                            mode="widthFix"
                        ></image>
                    </view>
                    <view class="bg-white rounded-[16rpx] w-full mt-[30rpx]">
                        <view class="flex justify-between">
                            <text
                                class="text-base text-black font-medium p-[24rpx]"
                                >描述词</text
                            >
                            <text
                                class="text-sm text-primary p-[24rpx]"
                                @click.stop="
                                    copy(content?.original_prompts?.prompt)
                                "
                            >
                                复制
                            </text>
                        </view>
                        <view class="text-base text-main px-[24rpx]">
                            {{ content?.original_prompts?.prompt }}
                        </view>

                        <view
                            class="flex justify-between"
                            v-if="content?.original_prompts?.prompt_en"
                        >
                            <text
                                class="text-base text-black font-medium p-[24rpx]"
                                >英文描述词</text
                            >
                            <text
                                class="text-sm text-primary p-[24rpx]"
                                @click.stop="
                                    copy(content?.original_prompts?.prompt_en)
                                "
                            >
                                复制
                            </text>
                        </view>
                        <view
                            class="text-base text-main px-[24rpx] pb-[30rpx]"
                            v-if="content?.original_prompts?.prompt_en"
                        >
                            {{ content?.original_prompts?.prompt_en }}
                        </view>
                    </view>
                    <view class="bg-white rounded-[16rpx] w-full mt-[30rpx]">
                        <view class="flex justify-between">
                            <text
                                class="text-base text-black font-medium p-[24rpx]"
                                >创作信息</text
                            >
                        </view>
                        <view
                            class="flex justify-between pb-[30rpx]"
                            v-if="appStore.getDrawSquareConfig.is_show_user"
                        >
                            <text class="text-base text-main px-[24rpx]"
                                >作者</text
                            >
                            <text class="text-base text-main px-[24rpx]">{{
                                content.user_info.name
                            }}</text>
                        </view>
                        <view class="flex justify-between pb-[30rpx]">
                            <text class="text-base text-main px-[24rpx]"
                                >发布时间</text
                            >
                            <text class="text-base text-main px-[24rpx]">{{
                                content.create_time
                            }}</text>
                        </view>
                        <view
                            class="flex justify-between pb-[30rpx]"
                            v-if="content.draw_model"
                        >
                            <text class="text-base text-main px-[24rpx]"
                                >绘画模型</text
                            >
                            <text class="text-base text-main px-[24rpx]">{{
                                content.draw_model
                            }}</text>
                        </view>
                        <view
                            class="flex justify-between pb-[30rpx]"
                            v-if="content.scale"
                        >
                            <text class="text-base text-main px-[24rpx]"
                                >画面尺寸</text
                            >
                            <text class="text-base text-main px-[24rpx]">{{
                                content.scale
                            }}</text>
                        </view>
                    </view>
                </scroll-view>

                <!--    底部页面    -->
                <view class="footer-bar flex justify-between items-center px-[60rpx]">
                    <view class="flex text-xs text-[#666]">
                        <view class="text-center" @click.stop="onPraise">
                            <view class="praise">
                                <view
                                    class="praise-animate"
                                    :class="content.is_praise ? 'praise-entry':'praise-leave'"
                                >
                                </view>
                            </view>
                            <view class="text-[22rpx] text-content">喜欢</view>
                        </view>
                        <view class="ml-5 text-center" @click.stop="emit('showPoster', content)">
                            <image src="@/packages/static/images/poster.png" class="w-[42rpx] h-[42rpx]" />
                            <view class="text-[22rpx] text-content">生成海报</view>
                        </view>
                    </view>
                    <view class="button-group">
                        <u-button
                            type="primary"
                            class="flex-1"
                            shape="circle"
                            size="default"
                            :customStyle="{
                                padding: '0 30rpx',
                                height: '82rpx',
                                'min-width': '300rpx'
                            }"
                            @click="saveImage"
                        >
                            <!-- #ifndef H5 -->
                            保存
                            <!-- #endif -->
                            <!-- #ifdef H5 -->
                            长按保存图片
                            <!-- #endif -->
                        </u-button>
                    </view>
                </view>
            </view>
        </view>
    </u-popup>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import ErrorIcon from '@/packages/static/images/square/error.png'
import { saveImageToPhotosAlbum } from '@/utils/file'
import { useAppStore } from '@/stores/app'
import { useCopy } from '@/hooks/useCopy'
import router from '@/router'
import { drawPraise } from '@/api/square'
import { useUserStore } from '@/stores/user'
const { copy } = useCopy()
const appStore = useAppStore()

const emit = defineEmits(['click', 'showPoster'])

const userStore = useUserStore()
const show = ref<boolean>(false)
const error = ref<boolean>(false)
const loading = ref<boolean>(true)
const content = ref({
    image: '',
    prompts: '',
    category_name: '',
    user_info: {
        image: '',
        name: ''
    }
})

const open = (row: any) => {
    show.value = true
    content.value = row
}

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

const saveImage = () => {
    //#ifdef H5
    uni.$u.toast('请长按图片保存')
    previewImage()
    //#endif
    //#ifndef H5
    saveImageToPhotosAlbum(content.value.image)
    //#endif
}

const previewImage = () => {
    uni.previewImage({
        urls: [content.value.image],
        current: 0,
        success: function () {
            close()
        },
        fail: function () {}
    })
}

const onPraise = async () => {
    if (!userStore.isLogin) {
        router.navigateTo('/pages/login/login')
        return
    }
    try {
        await drawPraise({
            id: content.value.id,
            praise: content.value.is_praise ? 0 : 1
        })
        content.value.is_praise = content.value.is_praise ? 0 : 1
        // // 分类ID是0说明是当前在喜欢页
        // if (props.cid === 0) {
        //     paging.value.refresh()
        //     waterfallRef.value?.remove(value.id)
        // } else {
        //     waterfallRef.value?.modify(value.id, 'is_praise', value.is_praise ? 0 : 1)
        // }
    } catch (e) {
        console.error(e)
        uni.$u.toast(JSON.stringify(e))
    }
}

defineExpose({ open })
</script>

<style lang="scss" scoped>
.footer-bar {
    position: fixed;
    width: 100%;
    height: calc(120rpx + env(safe-area-inset-bottom));
    left: 0;
    bottom: 0;
    border-radius: 15rpx 15rpx 0 0;
    background-color: #ffffff;
    padding: 0 60rpx env(safe-area-inset-bottom) 60rpx;

    .praise {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 42rpx;
        height: 42rpx;
        border-radius: 30px;
    }

    .praise-animate {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 54px;
        height: 54px;
        background: url('@/packages/static/images/praise02.png') no-repeat;
        background-position: left;
        background-size: cover;
    }
    // 没点赞
    .praise-leave {
        background-position: left;
    }

    // 点赞
    .praise-entry {
        background-position: right;
        transition: background 1s steps(28);
    }
}
</style>
