<template>
    <div class="signal-format">
        <el-select
            v-model="currentOption"
            :disabled="disabled"
            @change="onChange()"
        >            
            <el-option-group
                v-for="group in formatOptions"
                :key="group.label"
                :label="group.label"
            >
                <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
            </el-option-group>
        </el-select>
    </div>
</template>


<script setup>
import { saveViewApi } from '@/api';
import { globalLookup } from '@/hook/global';
import { makeSaveViewPayload } from '@/hook/recover';
import { sidebarSelectedWires } from '@/hook/sidebar-select-wire';
import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';

// 负责展示波形 数值的 类型，分为 二进制、十六进制、八进制、十进制、浮点数（半精度、单精度、双精度）
defineComponent({ name: 'signal-value-format' });

const { t } = useI18n();

const currentOption = ref(2);
const disabled = ref(true);


onMounted(() => {
    formatOptions.push({
        label: t('toolbar.format.category.base'),
        options: [
            {
                value: 0,
                label: 'Bin'
            },
            {
                value: 1,
                label: 'Oct'
            },
            {
                value: 2,
                label: 'Hex'
            },
        ]
    });

    formatOptions.push({
        label: t('toolbar.format.category.dec'),
        options: [
            {
                value: 3,
                label: t('toolbar.format.signed')
            },
            {
                value: 4,
                label: t('toolbar.format.unsigned')
            },
        ]
    });

    formatOptions.push({
        label: t('toolbar.format.category.float'),
        options: [
            {
                value: 5,
                label: t('toolbar.format.half')
            },
            {
                value: 6,
                label: t('toolbar.format.float')
            },
            {
                value: 7,
                label: t('toolbar.format.double')
            },
        ]
    });
});

const formatOptions = reactive([]);

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

        // 重新渲染，不过只需要渲染数值即可
        globalLookup.render({ type: 'value' });
        
        // 保存
        // TODO: 优化：只保存 waves
        const savePath = globalLookup.originFile + '.view';
        const payload = makeSaveViewPayload();    
        saveViewApi(savePath, payload);
    }
}

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

</script>

<style scoped>
.signal-format {
    width: 100px;
}
</style>