<template>
    <!--    上传参考图    -->
    <view class="mt-[40rpx]">
        <view class="text-base font-medium">上传参考图</view>
        <view
            class="uploader mt-[20rpx] flex justify-center items-center"
            @click="onUploader"
        >
            <!--    没有图片的时候    -->
            <view
                v-if="!modelValue"
                class="flex flex-col justify-center items-center"
            >
                <image
                    class="w-[72rpx] h-[72rpx] mb-[12rpx]"
                    src="@/static/images/icon/icon_upload.png"
                ></image>
                <view class="text-muted">点击上传参考图</view>
            </view>
            <!--    有图片的时候    -->
            <view
                v-else
                class="w-full h-full relative text-center has_image"
                @click.stop
            >
                <u-icon
                    class="has_img_delete"
                    name="close-circle-fill"
                    color="#ffffff"
                    size="40"
                    @click.stop="emit('update:modelValue', '')"
                ></u-icon>
                <image
                    class="w-full h-full"
                    :src="modelValue"
                    mode="aspectFit"
                ></image>
                <view class="has_img_btn" @click="onUploader"> 换图 </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { uploadImage } from '@/api/app'
import { useUserStore } from '@/stores/user'
import { client } from '@/utils/client'
import cache from '@/utils/cache'
import { usePermissionsStore } from '@/stores/androidPermissions'

const emit = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()
const props = withDefaults(
    defineProps<{
        modelValue?: any
    }>(),
    {
        modelValue: ''
    }
)

const onUploader = async () => {
    const userStore = useUserStore()
    if (!userStore.isLogin) {
        return uni.navigateTo({ url: '/pages/login/login' })
    }
    // #ifdef APP-PLUS
    if (client == 6) {
        // const res = await uni.showModal({
        //     title: '温馨提示',
        //     content:
        //         '是否允许应用使用(存储权限)，以便我们获取图片并上传示例图片'
        // })
        // if (res.cancel) return
        // else cache.set('reference-image', 1)
        const { requestPermissions } = usePermissionsStore()
        const result = await requestPermissions('WRITE_EXTERNAL_STORAGE')
        if (result !== 1) return
    }
    // #endif
    uni.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => {
            uploadImg(res.tempFilePaths[0])
        }
    })
}

const uploadImg = async (file: string) => {
    uni.showLoading({
        title: '上传中'
    })
    try {
        const res: any = await uploadImage(file, { type: 'draw' })
        emit('update:modelValue', res.uri)
        uni.hideLoading()
    } catch (error) {
        uni.hideLoading()
        uni.$u.toast(error)
        console.log('上传图片失败', error)
    }
}
</script>

<style lang="scss" scoped>
.uploader {
    height: 200rpx;
    border-radius: 8rpx;
    border: 1px dashed #dcdfe6;
    .has_img_delete {
        position: absolute;
        right: 10rpx;
        top: 10rpx;
    }
    .has_img_btn {
        position: absolute;
        right: 10rpx;
        bottom: 10rpx;
        font-size: 24rpx;
        display: inline-block;
        padding: 12rpx 30rpx;
        border-radius: 8rpx;
        background: transparent;
        border: 1px solid #888;
    }
}
</style>
