<template>
    <div class="">
        <el-radio-group
            v-model="signalModal"
            :disabled="disabled"
            @change="onSignalModalUpdate"
        >
            <!-- 数字模式 -->
            <el-radio-button :label="0">
                <el-tooltip
                    effect="dark"
                    :content="t('toolbar.modal.common-digital')"
                    placement="bottom"
                    raw-content
                >
                <span class="iconfont icon-common-digital"></span>
                </el-tooltip>
            </el-radio-button>
            <!-- 阶梯模拟 -->
            <el-radio-button :label="1">
                <el-tooltip
                    effect="dark"
                    :content="t('toolbar.modal.ladder-analog')"
                    placement="bottom"
                    raw-content
                ><span class="iconfont icon-ladder-analog"></span></el-tooltip>
            </el-radio-button>
            <!-- 折线模拟 -->
            <el-radio-button :label="2">
                <el-tooltip
                    effect="dark"
                    :content="t('toolbar.modal.line-analog')"
                    placement="bottom"
                    raw-content
                ><span class="iconfont icon-line-analog"></span></el-tooltip>
                
            </el-radio-button>
        </el-radio-group>
    </div>
</template>


<script setup>
import { globalLookup } from '@/hook/global';
import { sidebarSelectedWires } from '@/hook/sidebar-select-wire';
import { defineComponent, nextTick, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';

// 负责展示波形形式的模块，分为数字形式、折线模拟形式、阶梯模拟形式
defineComponent({ name: 'signal-modal' });
const { t } = useI18n();

const signalModal = ref(0);
const disabled = ref(true);

function onSignalModalUpdate() {
    const links = globalLookup.sidebarSelectedWireLinks;
    if (links.size > 0) {
        const modal = signalModal.value;
        // 更新渲染选项
        for (const link of links) {
            const realChange = globalLookup.setRenderOption(link, 'renderModal', modal);
            if (realChange) {
                globalLookup.waveRender.resetVertice(link);
            }
        }

        // 重新渲染
        globalLookup.render();
    }
}


sidebarSelectedWires.addToPipe(lastLink => {
    if (lastLink) {
        const option = globalLookup.currentSignalRenderOptions.get(lastLink);
        if (option && typeof option.renderModal === 'number') {
            signalModal.value = option.renderModal;
            disabled.value = false;
        } else {
            signalModal.value = 0;
            disabled.value = false;
        }
    } else {
        signalModal.value = 0;
        disabled.value = true;
    } 
});


</script>

<style scoped>

.iconfont {
    font-size: 1.10em;
    font-weight: 800;
}

</style>