<template>
    <button
        class="avatar-upload p-0 m-0 rounded"
        :style="styles"
        hover-class="none"
        open-type="chooseAvatar"
        @click="chooseAvatar"
        @chooseavatar="chooseAvatar"
    >
        <image class="w-full h-full" mode="heightFix" :src="modelValue" v-if="modelValue" />
        <slot v-else>
            <div
                :style="styles"
                class="border border-dotted border-light flex w-full h-full flex-col items-center justify-center text-muted text-xs box-border rounded"
            >
                <u-icon name="plus" :size="36" />
                添加图片
            </div>
        </slot>
    </button>
</template>
<script lang="ts" setup>
import { addUnit } from '@/utils/util'
import { isBoolean } from 'lodash'
import { computed, CSSProperties, onUnmounted } from 'vue'
import { uploadFile } from '@/utils/util'

const props = defineProps({
    modelValue: {
        type: String,
    },
    fileKey: {
        type: String,
        default: 'uri',
    },
    size: {
        type: [String, Number],
        default: 120,
    },
    round: {
        type: [Boolean, String, Number],
        default: false,
    },
    border: {
        type: Boolean,
        default: true,
    },
})
const emit = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()
const styles = computed<CSSProperties>(() => {
    const size = addUnit(props.size)
    return {
        width: size,
        height: size,
        borderRadius: isBoolean(props.round) ? (props.round ? '50%' : '') : addUnit(props.round),
    }
})

const chooseAvatar = (e: any) => {
    // #ifndef MP-WEIXIN
    uni.navigateTo({
        url: '/uni_modules/vk-uview-ui/components/u-avatar-cropper/u-avatar-cropper?destWidth=300&rectWidth=200&fileType=jpg',
    })
    // #endif
    // #ifdef MP-WEIXIN
    const path = e.detail?.avatarUrl
    if (path) {
        uploadImageIng(path)
    }
    // #endif
}

const uploadImageIng = async (path: string) => {
    uni.showLoading({
        title: '正在上传中...',
    })
    try {
        const res: any = await uploadFile(path)
        uni.hideLoading()
        emit('update:modelValue', res.path)
    } catch (error) {
        uni.hideLoading()
        uni.$u.toast(error)
    }
}
// 监听从裁剪页发布的事件，获得裁剪结果
uni.$on('uAvatarCropper', (path) => {
    uploadImageIng(path)
})
onUnmounted(() => {
    uni.$off('uAvatarCropper')
})
</script>

<style lang="scss" scoped>
.avatar-upload {
    background: #fff;
    overflow: hidden;
    &::after {
        border: none;
    }
}
</style>
