<template>
    <div class="tabs-container">
        <el-tabs type="border-card" class="fixed-width-tabs" style="height: 100%">
            <el-tab-pane label="短闪">
                <!-- 全局设置菜单内容 Modulation-->

                <div style="display: flex">
                    <el-form-item abel-width="180px">
                        <template #label>
                            <el-select
                                v-model="form[0].flickerData.waveType"
                                @change="changeLable"
                                style="width: 170px"
                            >
                                <el-option
                                    v-for="item in waveList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </template>

                        <el-select
                            placeholder="请选择波动类型"
                            style="width: 180px"
                            filterable
                            v-model="form[0].flickerData.fchagFre"
                            @change="changeWaveType"
                        >
                            <el-option
                                v-for="(item, i) in waveChildrenList"
                                :key="item.fchagFre"
                                :value="item.fchagFre"
                                :label="item.fchagFre"
                            />
                        </el-select>
                    </el-form-item>
                </div>
                <div style="display: flex; justify-content: end">
                    <el-form-item label="变动量(%)" label-width="180px">
                        <el-input
                            placeholder="请输入变动量"
                            style="width: 180px"
                            v-model="form[0].flickerData.fchagValue"
                        />
                    </el-form-item>
                </div>
            </el-tab-pane>
        </el-tabs>
        <el-tabs type="border-card" class="fixed-width-tabs" style="height: 100%">
            <el-tab-pane label="波形">
                <!-- 全局设置菜单内容 WaveForm -->
                <div>
                    <el-form-item label="波类型" label-width="100px">
                        <el-select
                            placeholder="请选择波类型"
                            style="width: 150px"
                            v-model="form[0].flickerData.waveFluType"
                            :disabled="!form[0].flickerFlag"
                        >
                            <el-option label="RECT" value="RECT"></el-option>
                            <el-option label="SIN" value="SIN"></el-option>
                            <el-option label="SQU" value="SQU"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="占空比(%)" label-width="100px">
                        <el-input
                            style="width: 150px"
                            v-model="form[0].flickerData.fdutyCycle"
                            :disabled="!form[0].flickerFlag"
                        />
                    </el-form-item>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
const props = defineProps({
    childForm: {
        type: [Array, Object] as any,
        required: true
    }
})

const waveList = [
    {
        label: '变动频度(次/min)',
        value: 'CPM',
        children: [
            {
                fchagFre: '0.1',
                fchagValue: '7.4'
            },
            {
                fchagFre: '0.2',
                fchagValue: '4.58'
            },
            {
                fchagFre: '0.4',
                fchagValue: '3.54'
            },
            {
                fchagFre: '0.6',
                fchagValue: '3.2'
            },
            {
                fchagFre: '1',
                fchagValue: '2.724'
            },
            {
                fchagFre: '2',
                fchagValue: '2.211'
            },
            {
                fchagFre: '3',
                fchagValue: '1.95'
            },
            {
                fchagFre: '5',
                fchagValue: '1.64'
            },
            {
                fchagFre: '7',
                fchagValue: '1.459'
            },
            {
                fchagFre: '10',
                fchagValue: '1.29'
            },
            {
                fchagFre: '22',
                fchagValue: '1.02'
            },
            {
                fchagFre: '39',
                fchagValue: '0.906'
            },
            {
                fchagFre: '48',
                fchagValue: '0.87'
            },
            {
                fchagFre: '68',
                fchagValue: '0.81'
            },
            {
                fchagFre: '110',
                fchagValue: '0.725'
            },
            {
                fchagFre: '176',
                fchagValue: '0.64'
            },
            {
                fchagFre: '273',
                fchagValue: '0.56'
            },
            {
                fchagFre: '375',
                fchagValue: '0.5'
            },
            {
                fchagFre: '480',
                fchagValue: '0.48'
            },
            {
                fchagFre: '585',
                fchagValue: '0.42'
            },
            {
                fchagFre: '682',
                fchagValue: '0.37'
            },
            {
                fchagFre: '796',
                fchagValue: '0.32'
            },
            {
                fchagFre: '1020',
                fchagValue: '0.28'
            },
            {
                fchagFre: '1055',
                fchagValue: '0.28'
            },
            {
                fchagFre: '1200',
                fchagValue: '0.29'
            },
            {
                fchagFre: '1390',
                fchagValue: '0.34'
            },
            {
                fchagFre: '1620',
                fchagValue: '0.402'
            },
            {
                fchagFre: '2400',
                fchagValue: '0.77'
            }
        ]
    },
    {
        label: '变动频率(HZ)',
        value: 'HZ',
        children: [
            {
                fchagFre: '0.000833',
                fchagValue: '7.4'
            },
            {
                fchagFre: '0.001667',
                fchagValue: '4.58'
            },
            {
                fchagFre: '0.003333',
                fchagValue: '3.54'
            },
            {
                fchagFre: '0.005000',
                fchagValue: '3.2'
            },
            {
                fchagFre: '0.008333',
                fchagValue: '2.724'
            },
            {
                fchagFre: '0.016667',
                fchagValue: '2.211'
            },
            {
                fchagFre: '0.025000',
                fchagValue: '1.95'
            },
            {
                fchagFre: '0.041667',
                fchagValue: '1.64'
            },
            {
                fchagFre: '0.058333',
                fchagValue: '1.459'
            },
            {
                fchagFre: '0.083333',
                fchagValue: '1.29'
            },
            {
                fchagFre: '0.183333',
                fchagValue: '1.02'
            },
            {
                fchagFre: '0.325000',
                fchagValue: '0.906'
            },
            {
                fchagFre: '0.400000',
                fchagValue: '0.87'
            },
            {
                fchagFre: '0.566667',
                fchagValue: '0.81'
            },
            {
                fchagFre: '0.916667',
                fchagValue: '0.725'
            },
            {
                fchagFre: '1.466667',
                fchagValue: '0.64'
            },
            {
                fchagFre: '2.275000',
                fchagValue: '0.56'
            },
            {
                fchagFre: '3.125000',
                fchagValue: '0.5'
            },
            {
                fchagFre: '4.000000',
                fchagValue: '0.48'
            },
            {
                fchagFre: '4.875000',
                fchagValue: '0.42'
            },
            {
                fchagFre: '5.683333',
                fchagValue: '0.37'
            },
            {
                fchagFre: '6.633333',
                fchagValue: '0.32'
            },
            {
                fchagFre: '8.500000',
                fchagValue: '0.28'
            },
            {
                fchagFre: '8.791667',
                fchagValue: '0.28'
            },
            {
                fchagFre: '10.000000',
                fchagValue: '0.29'
            },
            {
                fchagFre: '11.583333',
                fchagValue: '0.34'
            },
            {
                fchagFre: '13.500000',
                fchagValue: '0.402'
            },
            {
                fchagFre: '20.000000',
                fchagValue: '0.77'
            }
        ]
    }
]

const waveChildrenList = computed(() => {
    return waveList.filter((item: any) => item.value === form.value[0].flickerData.waveType)[0].children
})
const changeLable = e => {
    setTimeout(() => {
        let data = {
            fchagFre: '',
            fchagValue: ''
        }
        waveList.forEach((item: any, i: number) => {
            item.children.forEach((item1: any, j: number) => {
                if (item1.fchagFre == props.childForm[0].flickerData.fchagFre) {
                    data = waveList[i == 0 ? 1 : 0].children[j]
                }
            })
        })
        props.childForm[0].flickerData.fchagFre = data.fchagFre
        props.childForm[0].flickerData.fchagValue = data.fchagValue
    }, 100)
}
// [频率变化]
const changeWaveType = e => {
    props.childForm[0].flickerData.fchagValue = waveChildrenList.value.filter(
        (item: any) => item.fchagFre == e
    )[0].fchagValue
}
const form: any = computed({
    get() {
        if (props.childForm[0].flickerData.flickerValue == null) {
            props.childForm[0].flickerData.fchagValue = ''
            props.childForm[0].flickerData.fchagFre = ''
        }
        return props.childForm
    },
    set(value) {}
})

onMounted(() => {})
</script>

<style scoped>
.form-container {
    display: flex;
    justify-content: space-between; /* 使两个 el-form-item 之间有间距 */
    align-items: center; /* 使两个 el-form-item 垂直居中对齐 */
}

.tabs-container {
    display: flex;
    justify-content: center; /* 使两个 el-tabs 居中对齐 */
    align-items: stretch; /* 使两个 el-tabs 高度拉伸 */
    height: 100%;
    padding: 0 20px; /* 可选：添加左右间距 */
}

.fixed-width-tabs {
    margin-right: 100px; /* 可选：添加右侧间距 */
}

.fixed-width-tabs:last-child {
    margin-right: 0; /* 最后一个 el-tabs 不需要右侧间距 */
}

.el-tab-pane {
    display: flex;
    flex-direction: column; /* 确保内容上下排列 */
}

.el-form-item {
    margin-bottom: 20px; /* 可选：添加表单项之间的间距 */
}
</style>
