<!--  -->
<template>
    <div class="hot-editor" :id="`tagBox_${hotData.sid}`">
        <div class="header">
            <div class="header-title">{{ $t('tag.toolbox.hotspot') }}</div>
            <!-- <ui-icon class="close" type="close"></ui-icon> -->
        </div>
        <div class="hot-content">
            <StyleIcon />
            <ui-input
                require
                class="input"
                width="100%"
                :placeholder="$t('tag.toolbox.hotspotTitleTips')"
                type="text"
                :modelValue="title"
                @update:modelValue="value => (title = value)"
                maxlength="30"
            />

            <div class="desc-box" :class="{ border: showBorder }">
                <div class="edit-box">
                   
                </div>
                <div class="desc-link">
                    <!-- <LinkManage :show="!!(inInsertLink && maxTextLen)" :textlen="maxTextLen" @close="inInsertLink = false" @add="insertel" /> -->
                    <LinkManage v-if="showLink" @close="closeLink" @confirm="insertText" />
                    <ui-icon type="link" class="icon" @click="showLink = true" />

                    <span>
                        <span class="theme-color">{{ descriptionLength }}</span>
                        /
                        <span>{{ descriptionMax }}</span>
                    </span>
                </div>
            </div>

            <div class="tag-metas">
                <MetasUpload :type="info.type" />
            </div>
            <div class="submit-ctrl">
                <div class="radio-group">
                    <ui-input
                        v-for="(item, type) in custom"
                        :key="type"
                        class="radio"
                        type="radio"
                        :modelValue="info.type === type"
                        @update:modelValue="changeType(type)"
                        :tip="item.name"
                        :icon="item.icon"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, toRefs, ref, onBeforeMount, onMounted, defineProps, computed, nextTick } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
import MetasUpload from './metas-upload.vue'
import StyleIcon from './style-icon.vue'
import LinkManage from './link-manage.vue'
import { custom } from './constant.js'

const editor$ = ref(null)
const descriptionMax = 200
const descriptionLength = ref(0)
const showLink = ref(false)
const hotData = computed(() => store.getters['tag/hotData'])
const info = computed(() => {
    let data = {
        type: hotData.value.type || 'image',
    }
    return data
})
const title = computed({
    get() {
        if (hotData.value.title && hotData.value.title != void 0) {
            return hotData.value.title
        }
        return hotData.value.title || ''
    },
    set(value) {
        store.commit('tag/setTitle', value)
    },
})
const content = computed({
    get() {
        if (editor$.value) {
            descriptionLength.value = editor$.value.getLength()
            if (hotData.value.content && hotData.value.content != void 0) {
                return hotData.value.content
            } else {
                editor$.value.setHtml(hotData.value.content)
            }
        }
        return hotData.value.content || ''
    },
    set(value) {
        // console.log(value)
        store.commit('tag/setContent', { value })
    },
})

const closeLink = () => {
    showLink.value = false
}
const insertText = data => {
    editor$.value.insertLink(data.text.value, data.link.value)
    nextTick(() => {
        store.commit('tag/update', { content: editor$.value.getHtml() })
    })
    closeLink()
}
const onDescriptionChange = ({ length, html, init }) => {
    // // alert(1)
    // console.log(length, html, init)
    // if (init) {
    //     return (descriptionLength.value = length)
    // }

    content.value = html
    descriptionLength.value = length
}
const showBorder = ref(false)
const onEditDescription = () => {
    showBorder.value = false
}

const changeType = type => {
    console.log(type)
    info.value.type = type
    store.commit('tag/setMetaType', type)
}
const maxContentLen = ref(10)
</script>
<style lang="scss" scoped>
.hot-editor {
    background: rgba(27, 27, 28, 0.8);
    border-radius: 4px;
    pointer-events: auto;
    backdrop-filter: blur(4px);
    // min-width: 400px;
    .hot-content {
        width: 100%;
        padding: 30px 20px;
        .submit-ctrl {
            margin-top: 20px;
            display: flex;

            .radio-group {
                flex: 1;
                display: inline-flex;

                > .radio {
                    margin-right: 22px;
                }
            }

            .submit {
                flex: none;
                cursor: pointer;
            }
        }
        .desc-box {
            width: 100%;
            height: 158px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 10px;
            &.border {
                border: 1px solid var(--editor-main-color);
            }
            .edit-box {
                height: 128px;
                padding: 10px;
                box-sizing: border-box;
            }
        }
        .tag-metas {
            width: 100%;
            height: 225px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            overflow: hidden;
        }
        .desc-link {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 0px 0px 4px 4px;
            height: 30px;
            padding: 0 10px;
            .iconfont {
                font-size: 16px;
                cursor: pointer;
            }
            span {
                font-size: 12px;
            }
        }
        .input {
            margin-bottom: 10px;
        }
    }
    .header {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        box-sizing: border-box;
        color: #999;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
        .header-title {
            font-size: 16px;
            font-weight: bold;
        }
        .close {
            cursor: pointer;
        }
    }
}
</style>
