<!--  -->
<template>
    <!-- <div v-if="imageList.length > 0 && type == 'IMAGE'" class="pic-box"> -->
    <div class="pic-box" :class="{ show: viewer }" :style="metasHeight ? `height:${metasHeight}px;` : ''">
        <div>
            <div class="ctrl-btn left-btn" v-if="imageNum != 0" @click.stop="chengeImgae('pre')">
                <ui-icon type="left"></ui-icon>
            </div>
            <div class="ctrl-btn right-btn" v-if="imageNum < imageList.length - 1" @click.stop="chengeImgae('next')">
                <ui-icon type="right"></ui-icon>
            </div>
        </div>
        <div class="over-box">
            <div v-show="!loading" class="image-list" :style="`transform:translateX(${-100 * imageNum}%);`">
                <div :style="`transform:translateX(${100 * index}%);background-image:url(${common.changeUrl(i.src)});`" class="image-item" v-for="(i, index) in imageList"></div>
                <!-- <div v-else :style="`transform:translateX(${100 * index}%);`" class="image-item" v-for="(i, index) in imageList">
                    <img @error="filesError(index)" :src="common.changeUrl(i.src)" alt="" />
                </div> -->
            </div>
            <ui-icon v-show="loading" class="loading-icon" type="_loading_"></ui-icon>

            <div v-if="isEdit" class="del-btn" @click="delPic()">
                <ui-icon type="del"></ui-icon>
            </div>
        </div>
        <div class="continue" v-if="(!isEdit && imageList.length > 1) || isEdit">
            <ui-input
                v-if="imageList.length < custom[type].maxNum && isEdit"
                type="file"
                :placeholder="custom[type].uploadPlace"
                :disable="custom[type].upload"
                :scale="custom[type].scale"
                :accept="custom[type].accept"
                :multiple="custom[type].multiple"
                :maxSize="custom[type].maxSize"
                :maxLen="custom[type].maxNum"
                :othPlaceholder="custom[type].othPlaceholder"
                @update:modelValue="data => hanlderFiles(data)"
            >
                <template v-slot:replace>
                    <span class="continue-tips">继续添加</span>
                    <span class="edit-pic-num">
                        <span class="cur">{{ imageList.length }}</span>
                        <span> / {{ custom[type].maxNum }}</span>
                    </span>
                </template>
            </ui-input>
            <!-- <span v-if="isEdit" class="pic-num">
                <span class="cur">{{ imageList.length }}</span>
                <span> / {{ custom[type].maxNum }}</span>
            </span> -->
            <span v-if="!isEdit" class="pic-num">
                <span class="cur">{{ imageNum + 1 }}</span>
                <span><span>&nbsp;</span>/<span>&nbsp;</span></span>
                <span>{{ imageList.length }}</span>
            </span>
        </div>
    </div>
</template>

<script setup>
import { reactive, toRefs, onBeforeMount, onMounted, nextTick, ref, computed, defineProps } from 'vue'
import { useStore } from 'vuex'
import common from '@/utils/common'
import { custom } from '../constant.js'
import { getApp, useApp } from '@/app'
import { Dialog } from '@/global_components/'
const isMobile = ref(false)
const store = useStore()
const type = ref('image')
const props = defineProps({
    metasHeight: {
        type: Number,
        default: null,
    },
    viewer: {
        type: Boolean,
        default: false,
    },
})
const isEdit = computed(() => store.getters['tag/isEdit'])
const hotData = computed(() => store.getters['tag/hotData'])
const imageList = computed(() => {
    return hotData.value.media.image
})
const loading = ref(true)
const imageNum = ref(0)
const delPic = () => {
    store.commit('tag/delMetas', { index: imageNum.value, type: type.value })
    if (imageNum.value > 0) {
        imageNum.value--
    }
}
const chengeImgae = type => {
    if (type == 'pre') {
        imageNum.value--
    } else {
        imageNum.value++
    }
}
const hanlderFiles = data => {
    console.log(data[0])
    // store.commit('tag/setImageList', data[0])
    setImageList(data[0])
    console.log(imageList.value.length, data[0].length - 1)
    // if (imageNum.value < imageList.value.length + data[0].length - 1) {
    //     imageNum.value = imageList.value.length + data[0].length - 1
    // }
    imageNum.value = imageList.value.length - 1
}

const setImageList = data => {
    let picLength = 0
    let list = JSON.parse(JSON.stringify(imageList.value))
    if (list.length > 0) {
        picLength = list.length
    }
    for (let i = 0; i < data.length; i++) {
        if (list.length < custom['image'].maxNum) {
            list.push('')
            var index = i + picLength
            list[index] = { src: URL.createObjectURL(data[i]), file: data[i] }
        } else {
            Dialog.toast({
                type: 'error',
                content: `${t('limit.maxLengthFile', { length: custom['image'].maxNum })}`,
            })
            break
        }
    }
    store.commit('tag/setImageList', list)
}

onMounted(async () => {
    const app = await useApp()
    isMobile.value = app.config.mobile

    nextTick(() => {
        let img = new Image()
        img.onload = () => {
            loading.value = false
        }
        img.src = common.changeUrl(imageList.value[0].src)
    })
})
const filesError = index => {
    loading.value = false
}
</script>
<style lang="scss" scoped>
.del-btn {
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pic-box {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    top: 0;
    left: 0;
    z-index: 10;
    .loading-icon {
        color: var(--editor-main-color);
        animation: rotate 2s infinite linear;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
    }
    @keyframes rotate {
        0% {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }
    .over-box {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .continue {
        width: 100%;
        height: 32px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, #000000 200%);
        border-radius: 0px 0px 4px 4px;
        position: absolute;
        bottom: 0;
        left: 0;

        .ui-input {
            width: 100%;
        }
        .continue-tips {
            font-size: 12px;
            margin-right: 5px;
        }
        .edit-pic-num {
            // position: absolute;
            // right: 10px;
            font-size: 12px;
            .cur {
                color: var(--editor-main-color);
            }
        }
        .pic-num {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 12px;
            .cur {
                color: var(--editor-main-color);
            }
        }
    }

    .ctrl-btn {
        width: 32px;
        height: 32px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        position: absolute;
        cursor: pointer;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        .iconfont {
            font-size: 14px;
        }
        &.left-btn {
            left: 5px;
        }
        &.right-btn {
            right: 5px;
        }
    }
    .image-list {
        width: 100%;
        height: 100%;
        position: relative;
        transition: all 0.3s linear;
        .image-item {
            width: 100%;
            height: 100%;
            // background: red;
            position: absolute;
            transform: translateX(0);
            text-align: center;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            img {
                height: 100%;
                width: auto;
            }
        }
    }
    &.show {
        .ctrl-btn {
            width: 40px;
            height: 80px;
            background: rgba(0, 0, 0, 0.6);
            .iconfont {
                font-size: 20px;
            }
            &.left-btn {
                left: 0px;
                border-radius: 0 40px 40px 0;
                .icon {
                    margin-right: 5px;
                }
            }
            &.right-btn {
                right: 0px;
                border-radius: 40px 0 0 40px;
                .icon {
                    margin-left: 8px;
                }
            }
        }
        .continue {
            width: 76px;
            height: 36px;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 20px;
            position: absolute;
            bottom: -5%;
            left: 50%;
            transform: translateX(-50%);

            .pic-num {
                width: 76px;
                height: 36px;
                display: inline-block;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                span {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
}

[is-mobile] {
    .pic-box {
        &.show {
            .ctrl-btn {
                width: 40px;
                height: 80px;
                background: rgba(0, 0, 0, 0.6);
                .iconfont {
                    font-size: 20px;
                }
                &.left-btn {
                    left: 0px;
                    border-radius: 0 40px 40px 0;
                    .icon {
                        margin-right: 5px;
                    }
                }
                &.right-btn {
                    right: 0px;
                    border-radius: 40px 0 0 40px;
                    .icon {
                        margin-left: 8px;
                    }
                }
            }
            .continue {
                width: 76px;
                height: 36px;
                background: rgba(0, 0, 0, 0.6);
                border-radius: 20px;
                position: absolute;
                bottom: -6%;
                left: 50%;
                transform: translateX(-50%);

                .pic-num {
                    width: 76px;
                    height: 36px;
                    display: inline-block;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 20px;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    span {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }
        }
    }
}
</style>
