<template>
    <div class="og-setting">
        <div class="og-setting__toolbar">
            <el-button type="primary" icon="el-icon-Tickets" @click="readExternal">读取外部定值</el-button>
            <el-button type="primary" icon="el-icon-Edit" @click="modifySetting">修改定值</el-button>
        </div>

        <el-tabs v-model="activeTab" type="border-card" class="og-setting__tabs" @tab-change="onTabChange">
            <el-tab-pane
                v-for="tab in tabs"
                :key="tab.name"
                :label="tab.label"
                :name="tab.name"
            >
                <div class="og-setting__table" v-loading="loading">
                    <vxe-table
                        v-bind="defaultAttribute"
                        :data="tableMap[tab.name]"
                        height="auto"
                      
                    >
                        <vxe-column type="seq" title="序号" width="90" sortable />
                        <vxe-column field="name" title="定值名称" min-width="160" />
                        <vxe-column field="value" title="当前定值" min-width="140" />
                        <vxe-column field="range" title="定值范围" min-width="160" />
                    </vxe-table>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { defaultAttribute } from '@/components/table/defaultAttribute'

defineOptions({
    name: 'operationalguidance/settingManage'
})

const props = defineProps<{
    device?: anyObj
}>()

type TabName = 'basic' | 'harmonicCurrent' | 'harmonicVoltage' | 'interharmonic'

const tabs: { label: string; name: TabName }[] = [
    { label: '基本定值', name: 'basic' },
    { label: '谐波电流', name: 'harmonicCurrent' },
    { label: '谐波电压', name: 'harmonicVoltage' },
    { label: '间谐波定值', name: 'interharmonic' }
]

const activeTab = ref<TabName>('basic')
const loading = ref(false)
const tableMap = reactive<Record<TabName, anyObj[]>>({
    basic: [],
    harmonicCurrent: [],
    harmonicVoltage: [],
    interharmonic: []
})

const loadData = async (tab: TabName = activeTab.value) => {
    if (!props.device?.id) {
        tableMap[tab] = []
        return
    }
    loading.value = true
    try {
        // TODO: 按设备 + 定值类型请求接口
        tableMap[tab] = []
    } finally {
        loading.value = false
    }
}

const onTabChange = (name: string | number) => {
    loadData(name as TabName)
}

const readExternal = () => {
    if (!props.device?.id) {
        ElMessage.warning('请先选择设备')
        return
    }
    ElMessage.info('读取外部定值')
    loadData()
}

const modifySetting = () => {
    if (!props.device?.id) {
        ElMessage.warning('请先选择设备')
        return
    }
    ElMessage.info('修改定值')
}

watch(
    () => props.device,
    () => loadData(),
    { immediate: true, deep: true }
)
</script>

<style scoped lang="scss">
.og-setting {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 10px;
    box-sizing: border-box;

    &__toolbar {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-bottom: 10px;
        flex-shrink: 0;
    }

    &__tabs {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;

        :deep(.el-tabs__header) {
            margin: 0;
            flex-shrink: 0;
        }

        :deep(.el-tabs__content) {
            flex: 1;
            min-height: 0;
            padding: 0;
        }

        :deep(.el-tab-pane) {
            height: 100%;
        }

        :deep(.el-tabs__item) {
            height: 36px;
            line-height: 36px;
        }
    }

    &__table {
        height: 100%;
        min-height: 0;
        padding:0 10px;
        box-sizing: border-box;
    }

}
</style>
