<template>
    <view class="picker_box">
        <wd-popup
            v-model="showPopup"
            position="bottom"
            safe-area-inset-bottom
            custom-style="border-radius: 20rpx 20rpx 0 0;"
            :close-on-click-modal="false"
            @click-modal="showPopup = false"
        >
            <view
                class="popup_box"
                :style="{
                    height: showLocalLogo ? 577 + 'rpx' : 457 + 'rpx',
                }"
            >
                <view class="header_title">
                    {{ title }}
                </view>
                <view class="content">
                    <view v-if="!showLocalLogo" class="list">
                        <view
                            v-for="(i, idx) in methods"
                            :key="idx"
                            :class="[activeType === i.type ? 'active' : '', 'item']"
                            @click="chooseMethod(i)"
                        >
                            {{ i.name }}
                        </view>
                    </view>

                    <view v-if="showLocalLogo" class="all_logo">
                        <view
                            v-for="(i, idx) in localLogo"
                            :key="idx"
                            class="logo"
                            @click="chooseLocalLogo(i)"
                        >
                            <image :src="i.file" mode="" class="logo_image"></image>
                            <image
                                :src="
                                    activeLogo === i.index
                                        ? `${OSS_URL}/checked_icon.png`
                                        : `${OSS_URL}/unchecked_icon.png`
                                "
                                mode=""
                                class="radio"
                            ></image>
                        </view>
                    </view>
                </view>

                <view class="operation">
                    <button class="cancel_btn" @tap="tapCancelBtn">取消</button>
                    <button class="confirm_btn" @tap="tapConfirmBtn">确定</button>
                </view>
            </view>
        </wd-popup>
    </view>
</template>

<script setup lang="ts">
import { computed, nextTick, reactive, ref, watch } from 'vue';

const props = defineProps({
    title: {
        type: String,
        default: '选择奖励 LOGO',
    },
});
const emits = defineEmits(['update:modelValue', 'confirm']);
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const showPopup = ref(false);
const showLocalLogo = ref(false);

const activeType = ref(1);
const activeLogo = ref(); // 选中本地logo

const methods = reactive([
    {
        name: '选择小程序提供LOGO',
        type: 1,
    },
    {
        name: '从手机相册选择',
        type: 2,
    },
]);
const localLogo = ref([
    {
        file: 'https://word-1313840333.cos.ap-guangzhou.myqcloud.com/1826792700070375426.png',
        index: 1,
    },
    {
        file: 'https://word-1313840333.cos.ap-guangzhou.myqcloud.com/1826792640217657346.png',
        index: 2,
    },
    {
        file: 'https://word-1313840333.cos.ap-guangzhou.myqcloud.com/1826792575776370689.png',
        index: 3,
    },
    {
        file: 'https://word-1313840333.cos.ap-guangzhou.myqcloud.com/1826792508650729473.png',
        index: 4,
    },
    {
        file: 'https://word-1313840333.cos.ap-guangzhou.myqcloud.com/1826792438874288130.png',
        index: 5,
    },
    {
        file: 'https://word-1313840333.cos.ap-guangzhou.myqcloud.com/1826792341499326466.png',
        index: 6,
    },
]);

// 打开弹窗
function open() {
    activeType.value = 1;
    activeLogo.value = '';
    showLocalLogo.value = false;

    showPopup.value = true;
}

// 取消
function tapCancelBtn() {
    if (showLocalLogo.value) {
        activeLogo.value = '';
        showLocalLogo.value = false;
    } else {
        showPopup.value = false;
    }
}
// 确定
function tapConfirmBtn() {
    showLocalLogo.value = activeType.value === 1;
    if (activeType.value === 1 && activeLogo.value) {
        // 本地LOGO
        let logoFile = localLogo.value.find(item => item.index === activeLogo.value);
        if (logoFile) emits('confirm', logoFile.file, activeType.value);
        showPopup.value = false;
    } else if (activeType.value === 2) {
        // 本地相册
        uni.chooseImage({
            count: 1, // 最多可以选择的图片张数
            sizeType: ['compressed', 'original'], // original 原图，compressed 压缩图，默认二者都有
            sourceType: ['album'], // album 从相册选图，camera 使用相机，默认二者都有
            success: res => {
                uni.getImageInfo({
                    src: res.tempFilePaths[0],
                    success: imageInfo => {
                        const { width, height } = imageInfo;
                        if (width !== height) {
                            uni.showToast({
                                title: 'LOGO比例1:1',
                                icon: 'none',
                            });
                            return;
                        }
                        const isSize = res.tempFiles.find(item => {
                            return item.size > 1024 * 1024 * 10;
                        });
                        if (isSize) {
                            uni.showToast({
                                title: '图片大小不能超过10M',
                                icon: 'none',
                            });
                            return;
                        }
                        const file = res.tempFilePaths[0];
                        emits('confirm', file, activeType.value);
                        showPopup.value = false;
                    },
                    fail: () => {
                        uni.showToast({
                            title: '获取图片信息失败',
                            icon: 'none',
                        });
                        return;
                    },
                });
            },
            fail: err => {
                // 图片接口调用失败的回调函数
                console.log('chooseImage fail', err);
            },
        });
    }
}

function chooseMethod(val) {
    activeType.value = val.type;
}
// 选择本地logo
function chooseLocalLogo(val) {
    activeLogo.value = val.index;
}
defineExpose({
    open,
});
</script>

<style lang="scss" scoped>
.picker_box {
    .popup_box {
        position: relative;
        background-color: #fff;

        overflow: hidden;

        .header_title {
            position: absolute;
            top: 30rpx;
            left: 30rpx;
            z-index: 99;
            color: #333;
            font-size: 32rpx;
        }

        .content {
            padding: 75rpx 0 0 0;

            .list {
                font-size: 32rpx;
                color: #333;
                text-align: center;

                .item {
                    padding: 30rpx;
                    line-height: 45rpx;

                    &:first-child {
                        border-bottom: 1px solid #eee;
                    }
                }

                .active {
                    color: #615dff;
                }
            }

            .all_logo {
                display: flex;
                flex-wrap: wrap;
                padding: 30rpx 100rpx 0 100rpx;
                box-sizing: border-box;

                .logo {
                    position: relative;
                    margin: 0 30rpx 30rpx 30rpx;
                    width: 120rpx;
                    height: 120rpx;

                    &_image {
                        width: 100%;
                        height: 100%;
                    }

                    .radio {
                        position: absolute;
                        top: -8rpx;
                        right: -8rpx;
                        width: 30rpx;
                        height: 30rpx;
                        background-color: #fff;
                        border-radius: 50%;
                    }
                }
            }
        }

        .operation {
            display: flex;
            justify-content: center;
            position: fixed;
            width: 100%;
            padding-top: 16rpx;
            border-top: 1px solid #eeeeee;
            bottom: 60rpx;

            button::after {
                border: none;
            }

            .cancel_btn {
                width: 230rpx;
                height: 90rpx;
                color: #615dff;
                background-color: #ececff;
            }

            .confirm_btn {
                margin-left: 20rpx;
                height: 90rpx;
                width: 440rpx;
                color: #fff;
                background-color: #615dff;
            }
        }
    }
}
</style>
