<template>
    <el-dialog v-model="dialogVisible" :title="title" width="50%" draggable>
        <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="500px" :data="tableData">
            <vxe-colgroup field="anotherName" title="指标" width="180" />
            <!-- <vxe-colgroup field="unit" title="单位" /> -->
            <vxe-colgroup title="最小值">
                <vxe-column field="minphaseA" title="A">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.minphaseA ? 'red' : '' }">
                            {{ row.minphaseA }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="minphaseB" title="B">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.minphaseB ? 'red' : '' }">
                            {{ row.minphaseB }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="minphaseC" title="C">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.minphaseC ? 'red' : '' }">
                            {{ row.minphaseC }}
                        </span>
                    </template>
                </vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="最大值">
                <vxe-column field="maxphaseA" title="A">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.maxphaseA ? 'red' : '' }">
                            {{ row.maxphaseA }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="maxphaseB" title="B">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.maxphaseB ? 'red' : '' }">
                            {{ row.maxphaseB }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="maxphaseC" title="C">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.maxphaseC ? 'red' : '' }">
                            {{ row.maxphaseC }}
                        </span>
                    </template>
                </vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="平均值">
                <vxe-column field="avgphaseA" title="A">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.avgphaseA ? 'red' : '' }">
                            {{ row.avgphaseA }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="avgphaseB" title="B">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.avgphaseB ? 'red' : '' }">
                            {{ row.avgphaseB }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="avgphaseC" title="C">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.avgphaseC ? 'red' : '' }">
                            {{ row.avgphaseC }}
                        </span>
                    </template>
                </vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="cp95值">
                <vxe-column field="cp95PhaseA" title="A">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.cp95PhaseA ? 'red' : '' }">
                            {{ row.cp95PhaseA }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="cp95PhaseB" title="B">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.cp95PhaseB ? 'red' : '' }">
                            {{ row.cp95PhaseB }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="cp95PhaseC" title="C">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.cp95PhaseC ? 'red' : '' }">
                            {{ row.cp95PhaseC }}
                        </span>
                    </template>
                </vxe-column>
            </vxe-colgroup>

            <vxe-column field="limit" title="国际限值" />
        </vxe-table>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
const dialogVisible = ref(false)
const title = ref('')
const tableData: any = ref([])
const open = (row: any) => {
    title.value = row.title + ' - ' + row.row.time + ' - 越限详情'
    tableData.value = row.row[row.key]
    dialogVisible.value = true
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>
