<template>
    <div>
        <el-row :gutter="10">
            <!-- 分组 -->
            <el-col :span="4" :xs="24">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span style="font-size:20px;">重点关注[{{ state.stationNum }}]</span>
                            <div>
                                <el-button size="small" icon="el-icon-refresh" circle @click="handleRefresh" />
                                <el-button size="small" circle @click="state.isSearch = !state.isSearch">
                                    <el-icon style="vertical-align: middle">
                                        <Search />
                                    </el-icon>
                                </el-button>
                            </div>
                        </div>
                    </template>
                    <div class="div">
                        <el-input v-model="state.filterText" placeholder="关键词搜索" style="margin-bottom: 10px;" clearable
                            v-if="state.isSearch" maxlength="200"></el-input>
                        <el-tree class="tree" :data="state.groupData" :property="defaultProps" ref="tree" node-key="id"
                            accordion :expand-on-click-node="false" @node-click="handleNodeClick"
                            :filter-node-method="filterNode">
                            <!-- @node-contextmenu.prevent="floderOption" -->
                            <template #default="{ node, data }">
                                <el-icon v-if="data.type === '0'" :size="15" color="#409EFC">
                                    <Folder />
                                </el-icon>
                                <!-- 水表 -->
                                <el-icon v-else-if="data.deviceType == null || data.deviceType === '1'" :size="20">
                                    <Odometer />
                                </el-icon>

                                <!-- 压力表 -->
                                <!-- <img v-else src="../../assets/meter0.png" style="width: 16px; height: 16px" /> -->

                                <!-- 压力表 -->
                                <img v-else-if="data.deviceType === '2'" src="../../assets/meter0.png"
                                    style="width: 18px; height: 18px" />

                                <!-- 煤气表 -->
                                <img v-else-if="data.deviceType === '3'" src="../../assets/rqb.png"
                                    style="width: 20px; height: 20px" />

                                <span :title="node.label" class="custom-tree-node"> {{ node.label }}</span>
                            </template>
                        </el-tree>
                        <div id="menu" v-if="state.menuVisible" @mouseleave="state.menuVisible = !state.menuVisible">
                            <el-card class="box-card">
                                <div v-if="state.menuSelNode.type === '0'" style="margin-bottom: 10px;">
                                    <span @click="handleEdit(state.menuSelNode.data as CustomizeGroupModel)"
                                        style="font-size: 15px;">修改</span>
                                </div>
                                <div>
                                    <span @click="menuDel" style="font-size: 15px;">删除</span>
                                </div>
                            </el-card>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <!-- 遥测站信息 -->
            <el-col :span="20" :xs="24">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <div>
                                <el-button type="primary" class="button" @click="handleAdd">
                                    新增分组</el-button>
                                <el-button type="primary" class="button" style="margin-left:10px"
                                    @click="handleEdit(state.selectNode.data as CustomizeGroupModel)"
                                    :disabled="state.selectNode.type !== '0'">
                                    修改分组</el-button>
                                <el-button type="primary" class="button" style="margin-left:10px"
                                    @click="handleDel(state.selectNode.data as CustomizeGroupModel)"
                                    :disabled="state.selectNode.type !== '0'">删除分组</el-button>
                                <el-button type="primary" class="button" style="margin-left:10px"
                                    @click="handleDelDev(state.selectNode)" :disabled="state.selectNode.type !== '1'">
                                    删除站点</el-button>
                                <!-- <el-button type="primary" class="button" style="margin-left:10px" @click="scrollTest">
                                    测试滚动</el-button> -->
                            </div>
                            <div>
                                <el-input placeholder="站点编号(支持批量,逗号分隔)" style="width: 220px;"
                                    oninput="value=value.replace(/[^(\d+,)*\d+$]/g, '')" v-model="state.stationCode"
                                    maxlength="200" />
                                <el-button type="primary" class="button" style="margin-left:10px"
                                    :disabled="state.selectNode.type !== '0'" @click="handelAddDev">添加到当前分组
                                </el-button>

                                <el-button type="primary" class="button" style="margin-left:10px" @click="handleSearch"
                                    :disabled="state.selectNode.type !== '0'">
                                    搜索名称添加
                                </el-button>
                                <el-button type="primary" class="button" style="margin-left:10px"
                                    :disabled="state.selectNode.type !== '0'" @click="handleVerSearch"
                                    v-if="userType === '0'">
                                    按版本添加
                                </el-button>
                            </div>
                        </div>
                    </template>
                    <div>
                        <el-table v-loading="loading" :data="state.tableData" border stripe ref="my_table"
                            @cell-dblclick="celldblclick" :height="tableHeight" highlight-current-row
                            @current-change="handleCurrentRowChange"
                            :header-cell-style="{ background: '#FF000000', color: '#000000' }">

                            <el-table-column fixed type="index" width="40" align="center" />

                            <!-- 先改成和工作数据一样的列了,内部方便看数据(后面一样是内部看详细,客户看简要) 2022-07-08 guozhao -->
                            <el-table-column fixed prop="deviceSn" label="设备" header-align="center" width="170">
                                <template #default="scope">
                                    <el-space direction="vertical" alignment="start">
                                        <span :title="scope.row.stationName" v-if="scope.row.stationName"
                                            style="color: black;display: inline-block;font-size: 0.95em;">{{
                                                scope.row.stationName
                                            }}</span>
                                        <div style="display: flex;align-items: center;">
                                            <span title="点击查看设备配置" @click="showDevCfg(scope.row)"
                                                style="color: blue;display: inline-block;font-size: 0.95em;cursor:pointer;text-decoration: underline;text-underline-offset: 3px;">{{
                                                    'SN:&nbsp' + scope.row.deviceSn
                                                }}</span>
                                            <el-icon style="margin-left: 15px;cursor: pointer;" title="点击快速添加远程配置任务" v-if="userType === '0'"
                                                @click="openRemoteCfg(scope.row)">
                                                <Tools />
                                            </el-icon>
                                        </div>
                                        <span v-if="state.queryType !== 1"
                                            style="color: blue;display: inline-block;font-size: 0.95em;cursor:pointer;text-decoration: underline;text-underline-offset: 3px;"
                                            @click="stationNameClick(scope.row)">{{
                                                'ID&nbsp&nbsp:&nbsp' + scope.row.stationCode
                                            }}</span>

                                        <span style="color: black;font-size: 0.95em;" v-if="state.queryType === 1">{{
                                            'ID&nbsp&nbsp:&nbsp' + scope.row.stationCode
                                        }}</span>
                                        <!-- <el-tag size="small" style="width: 110px">SN:<span style="color: blue">{{
                                            scope.row.deviceSn
                                    }}</span></el-tag>
                                    <el-tag size="small" style="width: 110px">ID:<span style="color: green">{{
                                            scope.row.stationCode
                                    }}</span></el-tag> -->

                                        <!-- <el-tag size="small" style="width: 110px">MC:<span :title="scope.row.stationName"
                                            style="color: green;width: 63px;display: inline-block;">{{
                                                    scope.row.stationName != null && scope.row.stationName.length > 5 ?
                                                        scope.row.stationName.substring(0, 5) + '...' : scope.row.stationName
                                            }}</span>
                                    </el-tag> -->
                                    </el-space>
                                </template>
                            </el-table-column>

                            <!-- <el-table-column fixed prop="deviceSn" label="设备SN" header-align="center" width="120" /> -->
                            <el-table-column label="图片" header-align="center" width="150" resizable="false">
                                <template #default="scope">
                                    <div style="display: flex; align-items: center">
                                        <el-image :src="scope.row.src" :preview-src-list="scope.row.srcList"
                                            :title="global.getImageNameTip(scope.row.smallJpgUrl)"
                                            :hide-on-click-modal="true" :close-on-press-escape="true" slot="error"
                                            :style="!tool.stringIsNullOrEmpty(scope.row.src) && scope.row.src.includes('bmp') ? 'border:1.5px solid #F00;' : ''">
                                            <template #error>
                                                <div slot="error" class="image-slot">
                                                    <!-- <el-icon><icon-picture /></el-icon> -->
                                                    <i class="el-icon-picture-outline"
                                                        style="font-size: 30px;text-align: center;display: block;width: 120px;"></i>
                                                    <span style="color: red;text-align: center;display: block;"
                                                        v-if="scope.row.funCode === '52'">补发报(无图)</span>
                                                    <span
                                                        style="color: red;display:inline-block;width:120px;text-align:center;"
                                                        v-if="scope.row.funCode !== '52'">图片异常</span>
                                                </div>
                                            </template>
                                        </el-image>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="读数信息" header-align="center" width="135">
                                <template #default="scope">
                                    <el-space direction="vertical" alignment="start">
                                        <el-tag size="small">结果：<span style="color: blue">{{
                                            global.formatDecimal(scope.row.identValue, scope.row.decimalDigits)
                                        }}</span><span v-if="scope.row.deviceType === '2'">&nbsp;{{
    scope.row.deviceUnitName
}}</span>
                                        </el-tag>
                                        <el-tag size="small" v-if="userType === '0' && scope.row.deviceType !== '2'">
                                            原始：<span style="color: green">{{
                                                global.formatDecimal(scope.row.rawValue, scope.row.decimalDigits)
                                            }}</span>
                                        </el-tag>
                                        <el-tag size="small"
                                            v-if="userType === '0' && scope.row.deviceType !== '2'">服务：<span
                                                style="color: red;cursor:pointer;" @click="openServerImage(scope.row)">{{
                                                    global.getGoodFlagContent(scope.row.serverReadModel,
                                                        scope.row.decimalDigits)
                                                }}</span></el-tag>
                                    </el-space>
                                </template>
                            </el-table-column>
                            <el-table-column label="时间" header-align="center" width="186">
                                <template #default="scope">
                                    <el-space direction="vertical" alignment="start">
                                        <!-- <el-tag size="small" style="font-weight: bold;width: 158px">采样：<span
                                            style="color: blue;font-weight: bold;">{{
                                                    tool.dateFormatYMDHm(scope.row.sampleTime)
                                            }}</span></el-tag>
                                    <el-tag size="small" v-if="userType === '0'">发报：<span style="color: green">{{
                                            tool.dateFormat(scope.row.rptTime)
                                    }}</span>
                                    </el-tag>
                                    <el-tag size="small" v-if="userType === '0'">接收：<span style="color: red">{{
                                            tool.dateFormat(scope.row.revTime)
                                    }}</span>
                                    </el-tag> -->
                                        <span style="color: blue;font-weight: normal;font-size: 0.95em;">{{
                                            "采样：" + tool.dateFormatYMDHm(scope.row.sampleTime, 'YYYYMMDDHHmmss', 'YY-MM-DD HH:mm:ss')
                                                                                    }}</span>
                                        <span style="color: green;font-size: 0.95em;">{{
                                            "发报：" + tool.dateFormat(scope.row.rptTime, 'YYYYMMDDHHmmss', 'YY-MM-DD HH:mm:ss')
                                                                                    }}</span>
                                        <span style="color: #000000;;font-size: 0.95em;">{{
                                            "接收：" + tool.dateFormat(scope.row.revTime, 'YYYYMMDDHHmmss', 'YY-MM-DD HH:mm:ss')
                                                                                    }}</span>
                                    </el-space>
                                </template>
                            </el-table-column>
                            <el-table-column label="工作参数" header-align="center" width="110">
                                <template #default="scope">
                                    <el-space direction="vertical" alignment="start">
                                        <!-- <el-tag size="small">信号：<span style="color: blue">{{ scope.row.rsrp }}</span>
                                    </el-tag>
                                    <el-tag size="small">电压：<span style="color: green">{{ scope.row.voltage }}</span>
                                    </el-tag>
                                    <el-tag size="small" v-if="userType === '0'">信噪比：<span style="color: red">{{
                                            scope.row.snr
                                    }}</span>
                                    </el-tag> -->
                                        <span style="color: blue;font-size: 0.95em;"
                                            :title="`NB位置信息:${scope.row.nbRegLocation}`">{{ "信号&nbsp&nbsp&nbsp&nbsp：" +
                                                scope.row.rsrp
                                            }}</span>
                                        <span style="color: green;font-size: 0.95em;"
                                            :title="`电池运行时间:${scope.row.batRumTime}`">{{ "电压&nbsp&nbsp&nbsp&nbsp：" +
                                                scope.row.voltage
                                            }}</span>
                                        <span v-if="userType === '0'" style="color: black;font-size: 0.95em;">信噪比&nbsp：{{
                                            scope.row.snr
                                        }}</span>
                                    </el-space>
                                </template>
                            </el-table-column>

                            <el-table-column label="工作情况" header-align="center" width="100" v-if="userType === '0'">
                                <template #default="scope">
                                    <el-space direction="vertical" alignment="start">
                                        <span style="color: blue;font-size: 0.95em;">{{ "工作:" +
                                            tool.getValueFormat(scope.row.intervalMinutes, 's')
                                        }}</span>
                                        <span style="color: green;font-size: 0.95em;">{{ "传输:" +
                                            tool.getValueFormat(scope.row.tranDuration, 's')
                                        }}</span>
                                        <span
                                            :style="scope.row.loseFlag === '1' ? 'color: Red;font-size: 0.95em;font-weight: bold' : 'color: black;font-size: 0.95em;'">{{
                                                "计次:" +
                                                tool.getValueFormat(scope.row.mcuRunNum, '')
                                            }}</span>
                                    </el-space>
                                </template>
                            </el-table-column>
                            <el-table-column label="设备版本" header-align="center" width="180">
                                <template #default="scope">
                                    <el-space direction="vertical" alignment="start">
                                        <el-tag size="small">MCU：<span style="color: blue"
                                                :title="`MCU运行次数:${scope.row.mcuRunNum}`">{{ scope.row.softVer
                                                }}</span></el-tag>
                                        <el-tag size="small">AI&nbsp&nbsp&nbsp&nbsp：<span style="color: green">{{
                                            scope.row.aiVersion
                                        }}</span></el-tag>
                                        <el-row v-if="userType === '0'">
                                            <el-col :span="13">
                                                <el-tag size="small">CPU：<span style="color: red">{{
                                                    scope.row.hardVersion
                                                }}</span></el-tag>
                                            </el-col>
                                            <el-col :span="11">
                                                <el-tag size="small" style="width: 75px;">NB：<span style="color: red">{{
                                                    scope.row.nbVersion
                                                }}</span></el-tag>
                                            </el-col>
                                        </el-row>
                                        <!-- <div style="color: #606266;font-size: 0.95em;">MCU：
                                        <span style="color: green">{{scope.row.softVer
                                        }}</span>
                                    </div>
                                    <div style="color: #606266;font-size: 0.95em;">AI&nbsp&nbsp&nbsp&nbsp&nbsp：
                                        <span style="color: green">{{ 
                                            scope.row.aiVersion
                                        }}</span>
                                    </div>
                                    <el-row v-if="userType === '0'">
                                        <el-col>
                                            <div>
                                                <span style="font-size: 0.95em;width: 1px;">CPU \ NB：</span>
                                                <span style="color: green">{{ scope.row.hardVersion + ' \\ ' + scope.row.nbVersion
                                                }}</span>
                                            </div>
                                        </el-col>

                                    </el-row> -->
                                    </el-space>
                                </template>
                            </el-table-column>
                            <el-table-column fit label="调试信息" header-align="center" width="400" v-if="userType === '0'">
                                <template #default="scope">
                                    <el-row>
                                        <el-col>
                                            <span style="font-size:12px;" v-for="(item, i) in scope.row.alist">{{
                                                global.debugInfoFormat(item, i)
                                            }}</span>
                                        </el-col>
                                    </el-row>

                                    <el-row>
                                        <el-col>
                                            <span style="font-size:12px;" v-for="(item, i) in scope.row.blist">{{
                                                global.debugInfoFormat(item, i)
                                            }}</span>
                                        </el-col>
                                    </el-row>
                                    <el-row v-if="scope.row.serverAList">
                                        <el-divider style="margin-top: -2px;margin-bottom: -5px;height: 1px;" />
                                    </el-row>
                                    <el-row v-if="scope.row.serverAList">
                                        <el-col>
                                            <span style="font-size:12px;" v-for="(item, i) in scope.row.serverAList">{{
                                                global.debugInfoFormat(item, i)
                                            }}</span>
                                        </el-col>
                                    </el-row>

                                    <el-row v-if="scope.row.serverAList">
                                        <el-col>
                                            <span style="font-size:12px;" v-for="(item, i) in scope.row.serverBList">{{
                                                global.debugInfoFormat(item, i)
                                            }}</span>
                                        </el-col>
                                    </el-row>
                                    <!-- <el-descriptions direction="vertical" :column="12" :size='10'>
                                        <div v-for="(item, index) in scope.row.alist" :key="index">
                                            <el-descriptions-item :label=item label-align="center" align=center>{{
                                            scope.row.blist[index]
                                            }}
                                            </el-descriptions-item>
                                        </div>
                                    </el-descriptions> -->
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <el-config-provider :locale="locale">
                        <el-pagination v-model:currentPage="tairead_queryParams.page"
                            :default-page-size="tairead_queryParams.rows" v-model:page-size="tairead_queryParams.rows"
                            :page-sizes="[10, 15, 20, 50, 100]" :small="state.small" :disabled="state.disabled"
                            :background="state.background" layout="total, sizes, prev, pager, next, jumper"
                            :total="state.total" style="text-align: center; margin-top: 10px; height: 30px"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </el-config-provider>
                </el-card>
            </el-col>
        </el-row>

        <el-dialog :title="dialog.title" v-model="dialog.visible" width="400px" draggable center>
            <el-form ref="formRef" :model="formData" :rules="state.rules" label-width="100px">
                <el-form-item label="分组名称:" prop="groupName" style="width: 320px;">
                    <el-input v-model="formData.groupName" placeholder="分组名称" width="120px" show-word-limit
                        maxlength="20" />
                </el-form-item>
                <el-form-item label="开始时间:" style="width: 320px;">
                    <el-date-picker v-model="formData.startTime" type="datetime" placeholder="查询数据的开始时间"
                        value-format="YYYY-MM-DD HH:mm:ss" />
                </el-form-item>
                <el-form-item label="结束时间:">
                    <el-date-picker v-model="formData.endTime" type="datetime" placeholder="查询数据的结束时间"
                        value-format="YYYY-MM-DD HH:mm:ss" />
                </el-form-item>
                <el-form-item label="公开分组:">
                    <el-switch v-model="formData.publicFlag" inline-prompt="true" active-value="1" inactive-value="0" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel()">取消</el-button>
                    <el-button type="primary" @click="submitForm">确定</el-button>
                </span>
            </template>
        </el-dialog>

        <el-dialog :title="search_dialog.title" v-model="search_dialog.visible" width="470px" draggable center
            @close="dialogClose">
            <el-form ref="editFormRef">
                <el-form-item>
                    <el-autocomplete v-model="state.search_stationsParam.stationName" style="width:420px" clearable
                        :fetch-suggestions="querySearchAsync" :trigger-on-focus="false" placeholder="输入站点名称关键字"
                        @select="handleSelect" @keyup.enter="handleKeyup"
                        @input="changeStyle('block', '.el-autocomplete-suggestion')"
                        @keyup="changeStyle('block', '.el-autocomplete-suggestion')" />
                </el-form-item>
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>已选站点</span>
                        </div>
                    </template>
                    <el-space direction="horizontal" alignment="start" wrap="true">
                        <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-2" closable :disable-transitions="false"
                            @close="handleClose(tag)">
                            {{ tag }}
                        </el-tag>
                    </el-space>
                </el-card>

            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelSearch">取消</el-button>
                    <el-button type="primary" @click="submitSearch">确定</el-button>
                </span>
            </template>
        </el-dialog>

        <el-dialog :title="cfgdialog.title" v-model="cfgdialog.visible" width="1100px" center>
            <DevCfgDialog :stationCode="state.cfgData.stationCode" :deviceSn="state.cfgData.deviceSn"
                v-if="cfgdialog.visible"></DevCfgDialog>
        </el-dialog>

        <el-dialog :title="verdialog.title" v-model="verdialog.visible" width="900px" center @close="cancelSelection">
            <el-form ref="verFormRef">
                <el-row>
                    <el-col :span="4">
                        <el-form-item label="MCU版本:" label-width="80px">
                            <el-select v-model="customeQueryModel.softCompare" placeholder=" " style="max-width: 70px;">
                                <el-option v-for="item in compareTypeMap" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="5">
                        <el-input v-model="customeQueryModel.softVer" placeholder="MCU版本" maxlength="12" show-word-limit
                            onkeyup="value=value.replace(/[^\-\d.]/g, '')" />
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="AI版本:" label-width="80px">
                            <el-select v-model="customeQueryModel.aiCompare" placeholder=" " style="max-width: 70px;">
                                <el-option v-for="item in compareTypeMap" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="5">
                        <el-input v-model="customeQueryModel.aiVersion" placeholder="AI版本" maxlength="12" show-word-limit
                            onkeyup="value=value.replace(/[^\-\d.]/g, '')" />
                    </el-col>

                    <el-col :span="3">
                        <el-button type="primary" class="button" style="margin-left:10px" @click="queryByVersion">查询站点
                        </el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-table v-loading="loading" :data="state.customeQueryTableData" border stripe ref="multipleTableRef"
                @selection-change="handleSelectionChange" height="500px" highlight-current-row
                :header-cell-style="{ background: '#FF000000', color: '#000000' }">
                <el-table-column fixed type="selection" width="55" />
                <el-table-column fixed type="index" width="50" align="center" />
                <el-table-column prop="stationName" label="站点名称" header-align="center" min-width="110" />
                <el-table-column prop="stationCode" label="站点编码" header-align="center" width="100" />
                <el-table-column prop="softVer" label="MCU版本" header-align="center" width="115" />
                <el-table-column prop="aiVersion" label="AI版本" header-align="center" width="115" />
                <el-table-column label="工作时间" header-align="center" width="100">
                    <template #default="scope">
                        <span>{{ tool.dateFormatYMDHm(scope.row.sampleTime) }} </span>

                    </template>
                </el-table-column>
                <el-table-column prop="rawValue" label="原始读数" header-align="center" width="90" />
            </el-table>

            <template #footer style="margin-top: 0;">
                <span class="dialog-footer">
                    <el-button @click="cancelSelection()">取消</el-button>
                    <el-button type="primary" @click="saveSelection">确认</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog width="1300px" :title="CfgFormDialog.title" v-model="CfgFormDialog.visible" center>
            <CfgForm :device-sn="state.cfgData.deviceSn" @change="childMethod" v-if="CfgFormDialog.visible" />
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs, onMounted } from "vue";
import TAireadAction from "@/api/tairead";
import { GroupAndStationTree, StationGroupModel, StationAccModel, StationGroupQueryParam, TAireadModel, TAireadQueryParam, PageResult, StationsQueryParam, CustomizeGroupModel, Dialog, LinkItem, StationAccQueryParam, CustomeGroupQueryModel } from "@/types";
import arrayToTree, { Tree } from "array-to-tree";
import tool from "@/until/tool"
import Moment from "moment";
import { ElForm, ElMessage, ElMessageBox, ElTable, ElTableColumn } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import type Node from "element-plus/es/el-tree/src/model/node";
import { watch } from 'vue';
import CustomizeGroupAction from "@/api/customizegroup";
import StationAccAction from "@/api/station/stationacc"
import { number } from "echarts";
import global from "@/until/global";
import DevCfgDialog from "@/components/devcfg/index.vue";
import CfgForm from '@/components/remotecfg/index.vue';

let locale = ref(zhCn);
const tableHeight = ref(document.documentElement.clientHeight - 183);
const loading = ref(false);
const formRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
const tree_loading = ref(false);
const currentRow = ref();
const tree: any = ref(null);
let userType = localStorage.getItem("UserType") + '';
let pageSize = (localStorage.getItem("PageSize") == null ? 10 : localStorage.getItem("PageSize") as unknown as number) * 1;
let userId = localStorage.getItem("CustomerId") + '';
const my_table = ref();
const multipleSelection = ref<TAireadModel[]>([])

const handleRefresh = () => {
    state.groupData = [] as GroupAndStationTree[];
    state.tableData = [] as TAireadModel[];
    state.group_queryParams = { page: 1, rows: pageSize, customerId: localStorage.getItem("CustomerId"), groupCode: "1" } as StationGroupQueryParam;
    state.tairead_queryParams = { page: 1, rows: pageSize } as TAireadQueryParam;
    state.total = 0;
    state.selectNode = {} as GroupAndStationTree;
    state.stationsQueryParam = { page: 1, rows: pageSize } as StationsQueryParam;
    queryTreeList();
};

const state = reactive({
    total: 0,
    small: false,
    background: true,
    disabled: false,
    searchDisabled: false,
    dialog: {} as Dialog,
    formData: {} as CustomizeGroupModel,
    groupData: [] as GroupAndStationTree[],
    group_queryParams: { page: 1, rows: pageSize, customerId: localStorage.getItem("CustomerId"), groupCode: "1" } as StationGroupQueryParam,
    tairead_queryParams: { page: 1, rows: pageSize } as TAireadQueryParam,
    tableData: [] as TAireadModel[],
    selectNode: {} as GroupAndStationTree,
    stationsQueryParam: { page: 1, rows: pageSize } as StationsQueryParam,
    queryType: 0,
    stationNum: 0,
    filterText: "",
    isSearch: false,
    currentType: 0,
    stationCode: "",
    menuVisible: false,
    menuSelNode: {} as GroupAndStationTree,
    search_dialog: {} as Dialog,
    dynamicTags: [] as string[],
    links: [] as LinkItem[],
    search_selStations: [] as string[],
    search_stationsParam: { page: 1, rows: pageSize } as StationAccQueryParam,
    cfgdialog: {} as Dialog,
    verdialog: {} as Dialog,
    cfgData: {} as TAireadModel,
    customeQueryModel: {} as CustomeGroupQueryModel,
    customeQueryTableData: [] as TAireadModel[],
    rules: {
        groupName: [
            { required: true, message: "分组名称不能为空", trigger: "blur" },
            { min: 2, max: 20, message: "分组长度不合法", trigger: "blur" },
        ],
    },
    CfgFormDialog: {} as Dialog,
});

const {
    groupData,
    total,
    group_queryParams,
    tairead_queryParams,
    tableData,
    selectNode,
    dialog,
    formData,
    menuVisible,
    search_dialog,
    dynamicTags,
    search_stationsParam,
    links,
    cfgdialog,
    verdialog,
    customeQueryModel,
    customeQueryTableData,
    CfgFormDialog,
} = toRefs(state);

const defaultProps = {
    children: "children", //"children"内的每个对象解析为一个子项;
    label: "label", //所有"label"所在的对象解析为一个父项
};

const handleCurrentRowChange = (val: StationAccModel | StationGroupModel | undefined) => {
    currentRow.value = val;
};

const multipleTableRef = ref<InstanceType<typeof ElTable>>()

const handleNodeClick = (node: GroupAndStationTree) => {
    state.selectNode = node;
    state.group_queryParams.groupCode = node.code;

    state.tableData = [] as TAireadModel[];

    if (node.type === "0") {
        let customizeGroupModel = node.data as CustomizeGroupModel;
        if (customizeGroupModel.stationCodes == null || customizeGroupModel.stationCodes.length == 0) {
            return;
        }
        state.queryType = 0;
        state.tairead_queryParams.page = 1;
        state.stationsQueryParam.page = 1;
        state.stationsQueryParam.stationCodes = customizeGroupModel.stationCodes;
        queryDataByStationCodes();
        if (Object.keys(my_table).length > 0) { if (my_table.value != null) { (my_table.value as any).$refs.bodyWrapper.scrollTop = 0; } }
    }
    else if (node.type === "1") {
        state.tairead_queryParams.startTime = Moment((new Date()).getTime() - 1000 * 3600 * 24 * 90).format("YYYYMMDDHHmmss");// tool.dateFormat(state.defaultTime[0].toString(), "YYYY-MM-DD HH:mm:ss", "YYYYMMDDHHmmss");
        state.tairead_queryParams.endTime = Moment((new Date())).format("YYYYMMDDHHmmss");// tool.dateFormat(state.defaultTime[1].toString(), "YYYY-MM-DD HH:mm:ss", "YYYYMMDDHHmmss");
        let parent = state.groupData.filter(s => s.code === node.parentcode);
        if (parent.length > 0) {
            let custGroup = parent[0].data as CustomizeGroupModel;
            if (custGroup.startTimeFlag === '1') {
                state.tairead_queryParams.startTime = Moment(custGroup.startTime).format("YYYYMMDDHHmmss");
                //console.log(state.tairead_queryParams.startTime);
            }

            if (custGroup.endTimeFlag === '1') {
                state.tairead_queryParams.endTime = Moment(custGroup.endTime).format("YYYYMMDDHHmmss");
                //console.log(state.tairead_queryParams.endTime);
            }
        }

        state.tairead_queryParams.stationCode = node.code;
        state.tairead_queryParams.page = 1;
        state.queryType = 1;
        queryData();
        if (Object.keys(my_table).length > 0) { if (my_table.value != null) { (my_table.value as any).$refs.bodyWrapper.scrollTop = 0; } }
    }
};

/**
 * 查询设备数据
 */
const queryData = () => {
    loading.value = true;

    TAireadAction.QueryTAireadListByStation(state.tairead_queryParams)
        .then((result) => {
            if (result.status === 200) {
                const { res, flag, error } = result.data;
                if (flag === "1") {
                    const pageData = res as PageResult<TAireadModel[]>;

                    pageData.list.forEach(element => {
                        element.srcList = [];
                        element.alist = [];
                        element.blist = [];
                        if (element.smallJpgUrl) {
                            element.src = element.smallJpgUrl;
                            element.srcList.push(element.smallJpgUrl);

                            //把BMP图加到预览列表 2022-11-09 guozhao
                            // if (element.picType && element.picType === 1) {
                            //     element.srcList.push(element.smallJpgUrl.replace('.jpg', '.bmp'));
                            // }
                        }

                        if (element.bigJpgUrl) {
                            element.src = element.bigJpgUrl;
                            element.srcList.push(element.bigJpgUrl);
                        }

                        if (element.szsbz) {
                            let alist = element.szsbz.split(",");
                            element.alist = alist;
                        }

                        if (element.szsbgl) {
                            let blist = element.szsbgl.split(",");

                            element.blist = blist;
                        }

                        if (element.serverReadModel != null) {
                            if (!tool.stringIsNullOrEmpty(element.serverReadModel.jpgUrl)) {
                                element.srcList.push(element.serverReadModel.jpgUrl);
                            }
                            if (!tool.stringIsNullOrEmpty(element.serverReadModel.smallJpgUrl)) {
                                element.srcList.push(element.serverReadModel.smallJpgUrl);
                            }
                            if (element.serverReadModel.szsbz) {
                                element.serverAList = element.serverReadModel.szsbz.split(",");
                            }
                            if (element.serverReadModel.szsbgl) {
                                element.serverBList = element.serverReadModel.szsbgl.split(",");
                            }
                        }
                    });

                    state.tableData = pageData.list;
                    state.total = pageData.total;
                    loading.value = false;
                } else {
                    ElMessage.warning(error);
                    loading.value = false;
                }
            }
            else {
                loading.value = false;
            }
        })
        .catch((error) => {
            //请求失败时的操作
            ElMessage.error(error || "未知异常...");
            loading.value = false;
        });
}

/**
 * 查询当前用水户所有水表的最新一条数据
 */
const queryDataByStationCodes = () => {
    loading.value = true;
    TAireadAction.QueryLatestTAireadSortStationCodes(state.stationsQueryParam)
        .then((result) => {
            if (result.status === 200) {
                const { res, flag, error } = result.data;
                if (flag === "1") {
                    const pageData = res as PageResult<TAireadModel[]>;

                    pageData.list.forEach(element => {
                        element.srcList = [];
                        element.alist = [];
                        element.blist = [];
                        if (element.smallJpgUrl) {
                            element.src = element.smallJpgUrl;
                            element.srcList.push(element.smallJpgUrl);
                        }

                        if (element.bigJpgUrl) {
                            element.src = element.bigJpgUrl;
                            element.srcList.push(element.bigJpgUrl);
                        }

                        if (element.szsbz) {
                            let alist = element.szsbz.split(",");
                            element.alist = alist;
                        }

                        if (element.szsbgl) {
                            let blist = element.szsbgl.split(",");

                            element.blist = blist;
                        }

                        if (element.serverReadModel != null) {
                            // if (!tool.stringIsNullOrEmpty(element.serverReadModel.jpgUrl)) {
                            //     element.srcList.push(element.serverReadModel.jpgUrl);
                            // }
                            // if (!tool.stringIsNullOrEmpty(element.serverReadModel.smallJpgUrl)) {
                            //     element.srcList.push(element.serverReadModel.smallJpgUrl);
                            // }
                            if (element.serverReadModel.szsbz) {
                                element.serverAList = element.serverReadModel.szsbz.split(",");
                            }
                            if (element.serverReadModel.szsbgl) {
                                element.serverBList = element.serverReadModel.szsbgl.split(",");
                            }
                        }
                    });

                    state.tableData = pageData.list;
                    state.total = pageData.total;
                    loading.value = false;

                } else {
                    ElMessage.warning(error);
                    loading.value = false;
                }
            }
            else {
                loading.value = false;
            }
        })
        .catch((error) => {
            //请求失败时的操作
            ElMessage.error(error || "未知异常...");
            loading.value = false;
        });
}

const queryTreeList = () => {
    state.groupData = [] as GroupAndStationTree[];
    //state.selectNode = {} as GroupAndStationTree;
    let unitCode = localStorage.getItem("UnitCode") + '';
    let model = {} as CustomizeGroupModel;
    model.unitCode = unitCode;
    model.createUserId = userId;
    let ax = CustomizeGroupAction.FindCustomizeGroupTree(model);

    ax.then((result) => {
        if (result.status === 200) {
            const { res, flag, error } = result.data;
            if (flag === "1") {
                if (res !== null) {
                    let treeArray = res as GroupAndStationTree[];
                    let treeArrayNew = [] as GroupAndStationTree[];
                    state.stationNum = 0;
                    treeArray.forEach(eleme => {
                        treeArrayNew.push(eleme);
                        if (eleme.type === '1') {
                            state.stationNum++;
                        }
                    });

                    state.groupData = arrayToTree(treeArrayNew, {
                        parentProperty: "parentcode",
                        customID: "code",
                        childrenProperty: "children",
                    });
                }
            } else {
                ElMessage.error(error || "未知异常...")
            }
        }
    })
        .catch((error) => {
            //请求失败时的操作
            ElMessage.error(error || "未知异常...")
        });
};

const handleSizeChange = (val: number) => {
    if (state.queryType == 0) {
        state.stationsQueryParam.rows = val;
        queryDataByStationCodes();
    }
    else {
        queryData();
    }
    localStorage.setItem("PageSize", val.toString());
};

const handleCurrentChange = (val: number) => {
    if (state.queryType === 0) {
        state.stationsQueryParam.page = val;
        queryDataByStationCodes();
    }
    else {
        queryData();
    }
    if (Object.keys(my_table).length > 0) { if (my_table.value != null) { (my_table.value as any).$refs.bodyWrapper.scrollTop = 0; } }
};

onMounted(() => {
    window.onresize = function () {
        tableHeight.value = document.documentElement.clientHeight - 183;
    };
    handleRefresh();
});

//监听树筛选条件
watch(() => state.filterText, (val) => { tree.value!.filter(val); }, { deep: true })

const filterNode = (value: string, data: GroupAndStationTree) => {
    if (!value) return true
    return data.label.includes(value)
}

const handleAdd = () => {
    state.formData = {} as CustomizeGroupModel;
    state.currentType = 0;
    state.dialog = {
        title: "新增自定义分组",
        visible: true,
        disabled: false,
    };
};

const handleSearch = () => {
    state.search_dialog = {
        title: "名称搜索",
        visible: true,
        disabled: false,
    };
};

//编辑分组
const handleEdit = (model: CustomizeGroupModel) => {
    //let model = state.selectNode.data as CustomizeGroupModel;
    if (userId !== model.createUserId) {
        ElMessage.warning("分组仅允许创建者操作!");
        return;
    }
    state.formData = state.selectNode.data as CustomizeGroupModel;
    state.currentType = 1;
    state.dialog = {
        title: "编辑自定义分组",
        visible: true,
        disabled: false,
    };
};

const handleDel = (model: CustomizeGroupModel) => {
    //let model = state.selectNode.data as CustomizeGroupModel;
    if (userId !== model.createUserId) {
        ElMessage.warning("分组仅允许创建者操作!");
        return;
    }
    ElMessageBox.confirm(
        ' 是否删除分组[' + model.groupName + ']? ',
        '提示',
        {
            cancelButtonText: '取消',
            confirmButtonText: '确认',
            type: 'warning',
            center: true,
        }
    )
        .then(() => {
            CustomizeGroupAction.DeleteCustomizeGroup(model.uid).then(result => {
                if (result.status === 200) {
                    const { res, flag, error } = result.data;
                    if (flag === "1") {
                        state.selectNode = {} as GroupAndStationTree;
                        ElMessage.success('删除成功');
                        queryTreeList();
                    }
                }
            }
            );
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除成功!',
            })
        })
}

const cancel = () => {
    state.dialog = {
        title: "",
        visible: false,
        disabled: true,
    };
    state.tableData = [] as TAireadModel[];
    state.formData = {} as CustomizeGroupModel;
}

const submitForm = () => {
    formRef.value.validate((valid: any) => {
        if (valid) {
            if (state.currentType == 0) {
                state.formData.createUserName = localStorage.getItem("UserName") || "";
                state.formData.createUserId = localStorage.getItem("CustomerId") || "";
                state.formData.userType = localStorage.getItem("UserType") || "";
                state.formData.unitCode = localStorage.getItem("UnitCode") || "";
                state.formData.codeType = "0";
                CustomizeGroupAction.AddCustomizeGroup(state.formData).then((result) => {
                    const { res, flag, error } = result.data;
                    if (flag === "1") {
                        ElMessage.success("新增成功");
                        cancel();
                        queryTreeList();
                    }
                    else {
                        ElMessage.error(error || "未知异常...");
                    }
                });
            } else if (state.currentType == 1) {
                CustomizeGroupAction.EditCustomizeGroup(state.formData).then((result) => {
                    const { res, flag, error } = result.data;
                    if (flag === "1") {
                        ElMessage.success("编辑成功");
                        cancel();
                        queryTreeList();

                        tree.value.setCurrentKey(state.selectNode.id);
                    }
                    else {
                        ElMessage.error(error || "未知异常...");
                    }
                });
            }
        }
    });
}

const handelAddDev = () => {
    if (state.stationCode && state.stationCode.length > 9) {
        let group = state.selectNode.data as CustomizeGroupModel;
        //console.log(group);

        if (group.stationCodes == null || group.stationCodes.indexOf(state.stationCode) == -1) {
            if (group.stationCodes == null) {
                group.stationCodes = state.stationCode;
            } else {
                group.stationCodes = group.stationCodes + "," + state.stationCode;
            }

            CustomizeGroupAction.EditCustomizeGroup(group).then((result) => {
                const { res, flag, error } = result.data;
                if (flag === "1") {
                    ElMessage.success("添加成功");
                    state.stationCode = "";
                    queryTreeList();
                }
                else {
                    ElMessage.error(error || "未知异常...");
                }
            });
        } else {
            ElMessage.warning("分组中已经存在此站点");
        }
    } else {
        ElMessage.warning("站点编号不规范");
    }
}

const handleDelDev = (groupTree: GroupAndStationTree) => {
    ElMessageBox.confirm(
        ' 是否移除站点[' + groupTree.label + ']? ',
        '提示',
        {
            cancelButtonText: '取消',
            confirmButtonText: '确认',
            type: 'warning',
            center: true,
        }
    ).then(() => {        //let groupTree = state.selectNode as GroupAndStationTree;
        //let index = state.groupData.indexOf(groupTree);
        CustomizeGroupAction.DeleteStationByGroupId(groupTree.parentcode, groupTree.code, userId).then((result) => {
            const { res, flag, error } = result.data;
            if (flag === "1") {
                ElMessage.success("站点移除成功");
                state.selectNode = {} as GroupAndStationTree;
                cancel();
                queryTreeList();
            }
            else {
                ElMessage.error(error || "未知异常...");
            }
        });
    })

}

const floderOption = (e: MouseEvent, data: GroupAndStationTree, node: Node) => {
    state.menuVisible = true;
    state.menuSelNode = data;
    let menu = document.querySelector("#menu") as HTMLImageElement;
    if (menu) {
        menu.style.cssText = "position: fixed; left: " + (e.clientX - 10) + 'px' + "; top: " + (e.clientY - 25) + 'px; z-index: 999; cursor:pointer;';
    }
}

//禁用浏览器的右键弹出
// document.oncontextmenu = function (e) {
//     return false;
// }

//树右键菜单的删除
const menuDel = () => {
    if (state.menuSelNode.type === '0') {
        let model = state.menuSelNode.data as CustomizeGroupModel;
        handleDel(model);
    } else if (state.menuSelNode.type === '1') {
        let groupTree = state.menuSelNode as GroupAndStationTree;
        handleDelDev(groupTree)
    }
}

const handleSelect = (item: LinkItem) => {
    if (state.dynamicTags.indexOf(item.value) === -1) {
        dynamicTags.value.push(item.value);
        state.search_selStations.push(item.link);
    } else {
        ElMessage.warning("该站点已添加!!");
    }
};

//根据传进来的状态改变建议输入框的状态（展开|隐藏）
const changeStyle = (status: any, className: any) => {
    let dom = document.querySelectorAll(className);
    dom[0].style.display = status;
};

const handleKeyup = (item: any) => {
    changeStyle("none", ".el-autocomplete-suggestion");
    if (state.search_stationsParam.stationName) {
        if (state.dynamicTags.indexOf(state.search_stationsParam.stationName) === -1) {
            dynamicTags.value.push(state.search_stationsParam.stationName);
            let linkItem = links.value.find(s => s.value === state.search_stationsParam.stationName);
            if (linkItem) {
                state.search_selStations.push(linkItem?.link);
            }
        } else {
            ElMessage.warning("该站点已添加!!");
        }
    }
};

const handleClose = (tag: string) => {
    dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

let timeout: NodeJS.Timeout;
const querySearchAsync = (
    queryString: string,
    callback: (arg: any) => void
) => {
    links.value = [] as LinkItem[];
    if (!isNull(queryString)) {
        StationAccAction.QueryStationAccList(state.search_stationsParam)
            .then((result) => {
                if (result.status === 200) {
                    const { res, flag, error } = result.data;
                    if (flag === "1") {
                        const pageData = res as PageResult<StationAccModel[]>;
                        pageData.list.forEach(element => {
                            let link = {} as LinkItem;
                            link.link = (element as StationAccModel).stationCode;
                            link.value = (element as StationAccModel).stationName;
                            links.value.push(link);
                        });

                        clearTimeout(timeout);
                        timeout = setTimeout(() => {
                            callback(links.value);
                        }, 2000);
                    } else {
                        ElMessage.success(error || "未知异常...");
                    }
                }
            }).catch((error) => {
                ElMessage.success(error || "未知异常...");
            });
    }
};

const isNull = (val: any) => {
    if (val) {
        return false;
    } else {
        return true;
    }
};

//关闭名称搜索弹出框
const cancelSearch = () => {
    state.search_dialog = {
        title: "",
        visible: false,
        disabled: true,
    };
    state.dynamicTags = [] as string[];
    state.links = [] as LinkItem[];
    state.search_selStations = [] as string[];
    state.search_stationsParam = { page: 1, rows: pageSize } as StationAccQueryParam;
}

//保存按名称搜索的站点
const submitSearch = () => {
    if (state.links.length === 0) {
        ElMessage.warning("未选择任何站点");
        return;
    }

    let group = state.selectNode.data as CustomizeGroupModel;

    let stations = "," + state.search_selStations.join(',');

    if (group.stationCodes == null) {
        group.stationCodes = state.stationCode;
    } else {
        group.stationCodes = group.stationCodes + stations;
    }

    CustomizeGroupAction.EditCustomizeGroup(group).then((result) => {
        const { res, flag, error } = result.data;
        if (flag === "1") {
            ElMessage.success("添加成功");
            queryTreeList();
            cancelSearch();
        }
        else {
            ElMessage.error(error || "未知异常...");
        }
    });
}

const dialogClose = () => {
    cancel();
}

//站点名称点击事件
const stationNameClick = (row: any) => {
    if (row && state.selectNode && state.selectNode.children !== undefined) {
        let model = row as TAireadModel;
        state.selectNode.children.forEach(s => {
            if (s.code === model.stationCode) {
                handleNodeClick(s);
                tree.value.setCurrentKey(s.id);
            }
        })
    }
}

//显示参数配置
const showDevCfg = (row: any) => {
    state.cfgData = row as TAireadModel;

    state.cfgdialog = {
        title: "设备参数预览[" + state.cfgData.deviceSn + "]",
        visible: true,
        disabled: false,
    };
}

//双击复制调试信息
const celldblclick = (row: any, column: any, cell: any, event: any) => {
    let colInfo = JSON.parse(JSON.stringify(column));
    if (event.type === "dblclick" && colInfo.label === '调试信息') {
        let airead = row as TAireadModel;
        var save = function (e: any) {
            let strC = airead.alist + '\r\n' + airead.blist;

            e.clipboardData.setData('text/plain', strC);
            //e.clipboardData.setData('text/plain',event.target.innerText); 
            e.preventDefault();//阻止默认行为
        }
        document.addEventListener('copy', save);
        document.execCommand("copy");
        document.removeEventListener('copy', save);
        ElMessage.success("复制成功");
    }
}

const handleVerSearch = () => {
    state.customeQueryModel.softCompare = 0;
    state.customeQueryModel.aiCompare = 0;
    state.verdialog = {
        title: "根据版本筛选站点",
        visible: true,
        disabled: false,
    };
};

//比较类型
const compareTypeMap = [
    { value: -1, label: '<' },
    { value: 0, label: '=' },
    { value: 1, label: '>' }
];

const queryByVersion = () => {
    TAireadAction.QueryTAireadListByVersion(state.customeQueryModel).then((result) => {
        const { res, flag, error } = result.data;
        if (flag === "1") {
            state.customeQueryTableData = res as TAireadModel[];

            //默认勾选全部
            state.customeQueryTableData.forEach(element => {
                multipleTableRef.value!.toggleRowSelection(element, true)
            });

            if (state.customeQueryTableData.length === 0) {
                ElMessage.info("没有符合条件的数据");
            }
        }
        else {
            ElMessage.error(error || "未知异常...");
        }
    });
}

const cancelSelection = () => {
    state.verdialog = {
        title: "",
        visible: false,
        disabled: true,
    };
    state.customeQueryTableData = [] as TAireadModel[];
    multipleSelection.value = [] as TAireadModel[];
    state.customeQueryModel = {} as CustomeGroupQueryModel;
}

const handleSelectionChange = (val: TAireadModel[]) => {
    multipleSelection.value = val
}

const saveSelection = () => {
    let arr = [] as string[];
    multipleSelection.value.forEach(s => {
        arr.push(s.stationCode);
    });
    if (arr.length === 0) {
        ElMessage.info("未勾选任何记录");
        return;
    }
    customeQueryModel.value.stationCodes = arr;
    let model = state.selectNode.data as CustomizeGroupModel
    customeQueryModel.value.uid = model.uid;
    CustomizeGroupAction.updateCustomizeGroupByCustomeGroupQueryModel(customeQueryModel.value).then((result) => {
        const { res, flag, error } = result.data;
        if (flag === "1") {
            cancelSelection();
            queryTreeList();
        }
        else {
            ElMessage.error(error || "未知异常...");
        }
    });
}

//新标签页打开服务侧图片
const openServerImage = (row: any) => {
    window.open(row.serverReadModel.jpgUrl, "_blank")
}

//快速创建远程任务
const openRemoteCfg = (row: any) => {
    state.cfgData = row as TAireadModel;
    state.CfgFormDialog = {
        title: "远程配置[" + state.cfgData.deviceSn + "]",
        visible: true,
        disabled: false,
    };
}

//远程任务子组件保存或取消的返回值
const childMethod = (val: Boolean) => {
    state.CfgFormDialog = {
        title: "",
        visible: false,
        disabled: true,
    };
}
</script> 

<style lang="scss" scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 35px;
}

.div {
    height: calc(100vh - 138px);
}

.tree {
    overflow-y: scroll;
    overflow-x: auto;
    width: 100%;
    height: calc(100vh - 138px);
    overflow: auto;
}

::v-deep .el-tree-node.is-current>.el-tree-node__content {
    background-color: rgb(255, 255, 255);
    color: rgb(64, 158, 255);
    font-weight: bold;
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    padding-right: 0px;
    margin-left: 5px;
}

.el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.el-card ::v-deep .el-card__header {
    padding: 10px 10px;
    background-color: white;
}

.el-card ::v-deep .el-card__body {
    padding: 1px;
    background-color: white;
}
</style>