<!--  -->
<template>
    <div class="web-box" :style="metasHeight ? `height:${metasHeight}px;` : ''">
        <div class="show-tips" v-if="link.length == 0">
            <span>{{ $t('tag.toolbox.webShow') }}</span>
        </div>
        <div class="iframe-box" v-if="link.length > 0">
            <div v-if="isEdit" class="del-btn" @click="delWeb()">
                <ui-icon type="del"></ui-icon>
            </div>
            <iframe v-for="(i, index) in link" :src="i.src" frameborder="0"></iframe>
        </div>
        <div v-if="isEdit" class="input-web" :class="{ disabled: link.length > 0 }">
            <input type="text" v-model="inputValue" placeholder="https://" autocomplete="off" />
            <div class="ok-web" v-if="link.length <= 0" @click="confirmWeb">
                <ui-icon type="checkbox1"></ui-icon>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, toRefs, onBeforeMount, onMounted, ref, computed, defineProps } from 'vue'
import { useStore } from 'vuex'
import { Cropper, Loading, Dialog } from '@/global_components/'
import { custom } from '../constant.js'
const store = useStore()
const linkNum = ref(0)
const hotData = computed(() => store.getters['tag/hotData'])
const link = computed(() => {
    return hotData.value.media.link
})
const props = defineProps({
    metasHeight: {
        type: Number,
        default: null,
    },
})
const inputLink = computed(() => store.getters['tag/inputLink'])
const isEdit = computed(() => store.getters['tag/isEdit'])
const inputValue = computed({
    get() {
        if (inputLink.value && inputLink.value != void 0) {
            return inputLink.value
        }
        return inputLink.value || ''
    },
    set(value) {
        store.commit('tag/setLink', value)
    },
})
const type = ref('link')
const showIframe = ref(false)

const delWeb = () => {
    store.commit('tag/delMetas', { type: type.value, index: linkNum.value })
    showIframe.value = false
    inputValue.value = null
}
const confirmWeb = () => {
    if (inputValue.value.indexOf('http' || 'https') == -1) {
        inputValue.value = 'https://' + inputValue.value
    }
    console.log(inputValue.value)
    store.commit('tag/setWeb', inputValue.value)
    showIframe.value = false
    showIframe.value = true
}
</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;
}
.web-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    top: 0;
    left: 0;
    z-index: 10;
    .show-tips {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
            color: rgba(255, 255, 255, 0.3);
            font-size: 16px;
            font-weight: bold;
        }
    }
    .iframe-box {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        iframe {
            width: 100%;
            height: 100%;
        }
    }
    .input-web {
        height: 32px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, #000000 200%) !important;
        border-radius: 0px 0px 4px 4px;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px 0 0;
        &.disabled {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, #000000 200%) !important;
            opacity: 0.8 !important;
        }
        input {
            background: none;
            border: none;
            padding: 0 0 0 10px;
            width: 94%;
            box-sizing: border-box;
            &:focus {
                border: none;
            }
            &::placeholder {
                color: rgba(255, 255, 255, 0.6);
            }
        }
        .ok-web {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.6);
            color: rgba(0, 0, 0, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
    }
}
</style>
