<template>
    <div class="default-main">
        <TableHeader date-picker area showExport showCustomColumn>
            <template v-slot:select>
                <el-form-item label="终端状态">
                    <el-select
                        multiple
                        clearable
                        collapse-tags
                        v-model="tableStore.table.params.runFlag"
                        placeholder="请选择"
                        filterable
                    >
                        <el-option label="投运" value="0" />
                        <el-option label="检修" value="1" />
                        <el-option label="停运" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="通讯状态">
                    <el-select
                        multiple
                        clearable
                        collapse-tags
                        v-model="tableStore.table.params.comFlag"
                        placeholder="请选择"
                        filterable
                    >
                        <el-option label="正常" value="1" />
                        <el-option label="中断" value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item label="厂家">
                    <el-select
                        multiple
                        clearable
                        collapse-tags
                        v-model="manufacturerForm"
                        placeholder="请选择"
                        @change="onManufacturerChange"
                        filterable
                    >
                        <el-option v-for="item in manufacturer" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="筛选数据">
                    <el-input
                        v-model="tableStore.table.params.searchValue"
                        placeholder="变电站,终端编号,型号或网络参数"
                        maxlength="32"
                        show-word-limit
                        clearable
                    />
                </el-form-item>
            </template>
        </TableHeader>
        <Table ref="tableRef" />
    </div>
</template>
<script setup lang="tsx">
import { ref, onMounted, provide, reactive } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import Area from '@/components/form/area/index.vue'

defineOptions({
    name: 'Operationmanagement/terminalmanagement'
})
const dictData = useDictData()
const manufacturer = dictData.getBasicData('Dev_Manufacturers')
const manufacturerForm = ref<string[]>([])
const tableStore = new TableStore({
    isWebPaging: true,
    url: '/device-boot/runManage/getRuntimeData',
    method: 'POST',
    column: [
        {
            title: '序号',
          
            align: 'center',
            width: 80,
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        { title: '区域', field: 'areaName', align: 'center', width: 120 },
        { title: '供电公司', field: 'gdName', align: 'center', width: 120 },
        { title: '变电站', field: 'bdName', align: 'center', showOverflow: true, minWidth: 100 },
        { title: '终端编号', field: 'devName', align: 'center', width: 160 },
        { title: '投运时间', field: 'loginTime', align: 'center', width: 200 },
        { title: '厂家', field: 'manufacturer', align: 'center', width: 160 },
        { title: '型号', field: 'devType', align: 'center', width: 200 },
        { title: '网络参数', field: 'ip', align: 'center' ,width:'120px'},
        { title: '端口', field: 'port', align: 'center', width: 100 },
        { title: '终端状态', field: 'runFlag', align: 'center', width: 100 },
        { title: '通讯状态', field: 'comFlag', align: 'center', width: 100 },
        { title: '最新数据', field: 'updateTime', align: 'center', width: 200 },
        {
            title: '评价',
            field: 'onlineEvaluate',
            align: 'center',
            width: 100,
            render: 'customRender',
            customRender: props => {
                if (props.renderValue == null) {
                    return <span></span>
                }else  if (props.renderValue == 3.14159) {
                    return <el-tag effect="dark" type="info">
                            /
                        </el-tag>
                } else if (props.renderValue * 100 > 90) {
                    return (
                        <el-tag effect="dark" type="success">
                            优
                        </el-tag>
                    )
                } else if (props.renderValue * 100 > 60) {
                    return (
                        <el-tag effect="dark" type="warning">
                            良
                        </el-tag>
                    )
                } else {
                    return (
                        <el-tag effect="dark" type="danger">
                            差
                        </el-tag>
                    )
                }
            }
        }
    ],
    resetCallback: () => {
        manufacturerForm.value = []
    }
})
tableStore.table.params.runFlag = []
tableStore.table.params.comFlag = []
tableStore.table.params.manufacturer = []
tableStore.table.params.statisticalType = {}
tableStore.table.params.serverName = 'event-boot'
tableStore.table.params.searchValue = ''
provide('tableStore', tableStore)

onMounted(() => {
    tableStore.index()
})

const onManufacturerChange = () => {
    tableStore.table.params.manufacturer = manufacturer
        .filter(item => {
            return manufacturerForm.value.includes(item.id)
        })
        .map(item => {
            return {
                ...item,
                label: item.name,
                value: item.id
            }
        })
}
</script>
