<template>
    <div class="container">
        <div class="content">
            <div class="header">
                <span class="title">图组上传</span>
                <span class="btn" @click="handleUpload"><van-icon name="plus" size="14" />新增图片</span>
                <!-- <input type="file" hidden ref="inputRef" accept="image/*" @change="changeFile" :multiple="true"> -->
            </div>
            <div class="list">
                <div class="item" v-for="(item, index) in fileList" :key="index">
                    <div class="item-content">
                        <div class="logo">
                            <img :src="item.src">
                            <div class="close">
                                <img src="@/static/image/close.png" @click="handleDelete(index)">
                            </div>
                        </div>
                        <div class="info">
                            <div class="info-box">
                                <span class="title">图片{{ index + 1 }}描述：</span>
                                <div>
                                    <radio-group @change="radioChange" class="radio-box">
                                        <span class="title">封面</span>
                                        <radio style="transform: scale(0.6);" :value="index"
                                            :checked="index == current" />
                                    </radio-group>
                                </div>
                            </div>
                            <div class="text">
                                <textarea v-model="item.enclosureDesc" disable-default-padding placeholder="请输入图片描述"
                                    :disabled="!item.uploadResult" style="max-height: 30px;"></textarea>
                            </div>
                        </div>
                    </div>
                    <van-progress :percentage="item.progress" v-if="!item.uploadResult" />
                </div>
            </div>
        </div>
        <div class="footer-placeholder">
            <div class="footer" ref="footerRef">
                <div class="info">
                    <div>
                        <span>图片总大小：</span>
                        <span class="info-content">{{ fileSize }}KB</span>
                    </div>
                    <div>
                        <span>图片总容量：</span>
                        <span class="info-content">{{ fileList.length }}张</span>
                    </div>
                </div>
                <div>
                    <van-button round type="primary" @click="handleNext">下一步</van-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { uploadFile } from '@/api/publish'
import { showToast } from 'vant'
import useUserStore from "@/store/user"
const userStore = useUserStore()
const footerRef = ref()
const inputRef = ref()
const fileList = ref([])
const fileSize = ref(0)

const handleUpload = () => {
    // inputRef.value.click()
    xma.chooseImage({
        count: 20, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
            console.log(res.tempFiles);
            const files = res.tempFiles
            for (let i = 0; i < files.length; i++) {
                const item = files[i]
                const index = fileList.value.push(item) - 1
                let reader = new FileReader()
                reader.readAsDataURL(item)
                reader.onload = async (e) => {
                    item.src = e.target.result
                    fileList.value.splice(index, 1, { ...item })
                    item.uploadResult = await uploadFile(item, (e) => {
                        item.progress = Math.floor(
                            (e.loaded / e.total) * 100,
                        )
                        fileList.value.splice(index, 1, { ...item })
                    })
                    fileSize.value += parseInt(item.uploadResult.data.compressNameAndPath[0].size)
                    fileList.value.splice(index, 1, { ...item })
                }

            }
        },
    });
}

const current = ref(0)
const radioChange = (evt) => {
    current.value = evt.detail.value
    console.log(current.value)
}

const handleDelete = (index) => {
    // 当删除的是最后一张图片且是封面图的时候，更换封面图为第一张
    if (index + 1 == fileList.value.length && index == current.value) {
        current.value = 0
    }
    fileList.value.splice(index, 1)
}

const emits = defineEmits(["confirm"])
const handleNext = () => {
    if (!fileList.value.length) {
        showToast('请上传图片')
        return
    }
    const enclosureLists = []
    for (let i = 0; i < fileList.value.length; i++) {
        const item = fileList.value[i]
        if (!item.enclosureDesc) {
            showToast(`请输入图片${i + 1}的描述`)
            return
        }
        enclosureLists.push({
            mediacatalogId: null,
            enclosureName: item.uploadResult.data.compressNameAndPath[0].name,
            enclosureType: 3,
            // enclosureAddr: item.uploadResult.data.compressNameAndPath[0].path,
            enclosureAddr: item.uploadResult.data.rawPath[0],
            enclosureDesc: item.enclosureDesc,
            createBy: userStore.userinfo.user.name,
            fileSize: item.uploadResult.data.compressNameAndPath[0].size,
            compressPath: item.uploadResult.data.compressPath[0],
            watermarkPath: item.uploadResult.data.waterpath[0]
        })
    }
    emits('confirm', { code: 'next', enclosureLists: enclosureLists, coverIndex: current.value })
}

</script>
<style lang="scss" scoped>
.container {
    padding-top: 10px;
    background-color: #f6f6f6;
    min-height: 100vh;

    .content {
        padding: 10px;
        background-color: #ffffff;

        .header {
            display: flex;
            justify-content: space-between;
            font-size: 16px;

            .title {
                color: #545454;
            }

            .btn {
                color: #2879fe;
            }
        }

        .list {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;

            .item {
                .item-content {
                    display: flex;
                    gap: 10px;

                    .logo {
                        // flex: 0 0 35%;
                        width: 120px;
                        height: 90px;
                        position: relative;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            border-radius: 5px;
                        }

                        .close {
                            position: absolute;
                            top: 5px;
                            right: 5px;

                            img {
                                width: 18px;
                                height: 18px;
                            }
                        }
                    }

                    .info {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        gap: 10px;
                        box-sizing: border-box;

                        .info-box {
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            align-items: center;

                            .title {
                                color: #545454;
                                font-size: 15px;
                            }

                            .radio-box {
                                display: flex;
                                align-items: center;
                                font-size: 28rpx;
                                color: #545454;
                                margin-bottom: 20rpx;
                            }
                        }

                        .text {
                            flex: 1;

                            textarea {
                                border: 1px solid #cccccc;
                                border-radius: 5px;
                                font-size: 14px;
                                padding: 10px;
                                width: 100%;
                                box-sizing: border-box;
                                resize: none;
                                min-height: 100%;
                            }
                        }
                    }
                }
            }

            .van-progress {
                width: 35%;
                margin-top: 5px;
            }
        }
    }

    .footer-placeholder {
        height: 68px;

        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #ffffff;
            display: flex;
            justify-content: space-between;
            padding: 15px 10px;
            box-shadow: -1px -1px 5px rgba(0, 0, 0, 0.1);
            align-items: center;
            height: 38px;
            z-index: 999;

            .info {
                font-size: 14px;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .info-content {
                    color: #2879fe;
                }
            }

            :deep(.van-button--normal) {
                padding: 0 20px;
                height: 35px;
                font-size: 15px;
            }
        }
    }
}
</style>