<!--终端详情页面，包含终端基础信息、元器件列表信息-->
<template>
    <el-dialog draggable class="cn-operate-dialog" v-model="machineDetailVisible" :title="title" style="width: 1000px">
        <el-scrollbar>
            <el-form :inline="false" :model="form" label-width="120px" ref="formRef">
                <el-form-item label="终端名称">
                    <el-input v-model="form.name" readonly />
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="终端型号">
                            <el-input v-model="form.type" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="终端损失">
                            <el-input v-model="form.machineLoss" readonly>
                                <template #append>万元</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="原料损失">
                            <el-input v-model="form.materialLoss" readonly>
                                <template #append>万元</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="功率">
                            <el-input v-model="form.machinePower" readonly>
                                <template #append>kW</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <!--元器件表格-->
            <unit-table ref="unitTable" />
        </el-scrollbar>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="machineDetailVisible = false">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue'
import UnitTable from '@/views/pqs/voltageSags/sagGovern/businessUser/sensitiveUnit/unitTable.vue'

// 注意不要和表单ref的命名冲突
const form = reactive<any>({
    id: '',
    name: '',
    type: '',
    machineLoss: '',
    materialLoss: '',
    machinePower: ''
})
const unitTable = ref()
const machineDetailVisible = ref(false)
const title = ref('')

//回显终端基础信息
const open = (text: string, data?: any) => {
    title.value = text
    machineDetailVisible.value = true
    if (data) {
        // 表单赋值
        for (let key in form) {
            form[key] = data[key]
        }
    }
    //查询元器件数据 todo...
    //待子组件渲染完毕
    nextTick(() => {
        unitTable.value.getTableData(form.id)
    })
}

defineExpose({ open })
</script>
<style scoped>
.el-form-item {
    margin-bottom: 10px !important;
}
</style>
