<template>
    <el-dialog v-model="dialogVisible" title="区域终端运行评价详情" width="50%" draggable>
        <el-form :inline="true" :model="formInline">
            <el-form-item label="所在地市">
                <el-select v-model="formInline.value" style="width: 240px" filterable>
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="运行状态">
                <el-select v-model="formInline.value1" style="width: 240px" filterable>
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item style="position: absolute; right: 0">
                <el-button type="primary" icon="el-icon-Search">查询</el-button>
            </el-form-item>
        </el-form>
        <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="500px" :data="tableData">
            <vxe-column field="num" title="终端名称" />
            <vxe-column field="num1" title="所在地市" />
            <vxe-column field="num2" title="所属变电站" />
            <vxe-column field="num3" title="终端型号" />
            <vxe-column field="num4" title="完整率(%)" />
            <vxe-column field="num4" title="在线率(%)" />
            <vxe-column field="num4" title="合格率(%)" />
            <vxe-column field="num5" title="运行状态">
                <template #default="{ row }">
                    <el-tag v-if="row.num5 == 1" effect="dark" type="success">在运</el-tag>
                    <el-tag v-if="row.num5 == 2" effect="dark" type="error">停运</el-tag>
                </template>
            </vxe-column>
        </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 radio1 = ref('1')
const tableData = ref([
    {
        num: '测试终端1',
        num1: '张家口',
        num2: '测试变电站1',
        num3: 'npqs_571_1',
        num4: '100',
        num5: 1
    },
    {
        num: '测试终端2',
        num1: '张家口',
        num2: '测试变电站2',
        num3: 'npqs_571_2',
        num4: '100',
        num5: 1
    },
    {
        num: '测试终端3',
        num1: '张家口',
        num2: '测试变电站3',
        num3: 'npqs_571_3',
        num4: '100',
        num5: 1
    }
])
const formInline = reactive({
    value: '',
    value1: '',
})

const options = [
    {
        value: '1',
        label: '张家口'
    },
    {
        value: '2',
        label: '承德'
    },
    {
        value: '3',
        label: '唐山'
    },
    {
        value: '4',
        label: '秦皇岛'
    },
    {
        value: '5',
        label: '廊坊'
    }
]
const options1 = [
    {
        value: '1',
        label: '在运'
    },
    {
        value: '2',
        label: '停运'
    },
   
]
const open = () => {
    dialogVisible.value = true
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>
