<template>
    <div class="device-detail-page">
        <el-card class="main-card">
            <div class="flex-between detail-main">
                <div class="main-left">
                    <el-descriptions :column="1" border style="margin-bottom: 50px">
                        <!-- 设备模式-->
                        <el-descriptions-item :label-style="statusColor">
                            <template slot="label">
                                <i class="el-icon-menu"></i>
                                {{ $t('device.running-status.866086-0') }}
                            </template>
                            <el-link :underline="false" style="line-height: 28px; font-size: 16px; padding-right: 10px">{{ title }}</el-link>
                        </el-descriptions-item>
                        <!-- 设备升级-->
                        <el-descriptions-item :label-style="statusColor">
                            <template slot="label">
                                <svg-icon icon-class="ota" />
                                {{ $t('device.running-status.866086-1') }}
                            </template>
                            <el-link :underline="false" style="line-height: 28px; font-size: 16px; padding-right: 10px">Version {{ deviceInfo.firmwareVersion }}</el-link>
                            <el-button type="success" size="mini" style="float: right" :disabled="deviceInfo.status != 3" @click="getLatestFirmware(deviceInfo.deviceId)">
                                {{ $t('device.running-status.866086-2') }}
                            </el-button>
                        </el-descriptions-item>

                        <!-- 设备物模型-->
                        <el-descriptions-item v-for="(item, index) in deviceInfo.thingsModels" :key="index" :label-style="statusColor">
                            <template slot="label">
                                <i class="el-icon-open"></i>
                                {{ item.name }}
                            </template>
                            <div v-if="item.datatype.type == 'bool'">
                                <el-switch
                                    v-model="item.shadow"
                                    active-text=""
                                    inactive-text=""
                                    :disabled="shadowUnEnable || item.isReadonly == 1"
                                    active-value="1"
                                    inactive-value="0"
                                    style="min-width: 100px"
                                    @change="mqttPublish(deviceInfo, item)"
                                />
                            </div>
                            <div v-if="item.datatype.type == 'enum'">
                                <div v-if="item.datatype.showWay && item.datatype.showWay == 'button'">
                                    <el-button
                                        v-for="subItem in item.datatype.enumList"
                                        :key="subItem.value"
                                        style="margin: 5px"
                                        size="mini"
                                        :disabled="shadowUnEnable || item.isReadonly == 1"
                                        @click="enumButtonClick(deviceInfo, item, subItem.value)"
                                    >
                                        {{ subItem.text }}
                                    </el-button>
                                </div>
                                <el-select v-else v-model="item.shadow" :placeholder="$t('device.running-status.866086-3')" :disabled="shadowUnEnable || item.isReadonly == 1" @change="mqttPublish(deviceInfo, item)">
                                    <el-option v-for="subItem in item.datatype.enumList" :key="subItem.value" :label="subItem.text" :value="subItem.value" />
                                </el-select>
                            </div>
                            <div v-if="item.datatype.type == 'string'">
                                <el-input
                                    v-model="item.shadow"
                                    :disabled="shadowUnEnable || item.isReadonly == 1"
                                    :placeholder="item.datatype.unit ? $t('device.running-status.866086-5', [item.datatype.unit]) : $t('device.running-status.866086-4')"
                                >
                                    <el-button
                                        v-if="!shadowUnEnable && item.isReadonly == 0"
                                        slot="append"
                                        icon="el-icon-s-promotion"
                                        :title="$t('device.running-status.866086-6')"
                                        style="font-size: 20px"
                                        @click="mqttPublish(deviceInfo, item)"
                                    ></el-button>
                                </el-input>
                            </div>
                            <div v-if="item.datatype.type == 'decimal'">
                                <div style="width: 80%; float: left">
                                    <el-slider
                                        v-model="item.shadow"
                                        :min="item.datatype.min"
                                        :max="item.datatype.max"
                                        :disabled="shadowUnEnable || item.isReadonly == 1"
                                        :format-tooltip="(x) => x + ' ' + item.datatype.unit"
                                        :step="item.datatype.step"
                                    ></el-slider>
                                </div>
                                <div style="width: 20%; float: left">
                                    <el-button
                                        v-if="!shadowUnEnable && item.isReadonly == 0"
                                        icon="el-icon-s-promotion"
                                        type="info"
                                        :title="$t('device.running-status.866086-6')"
                                        style="font-size: 16px; padding: 1px 8px; margin: 2px 0 0 5px; border-radius: 3px"
                                        @click="mqttPublish(deviceInfo, item)"
                                    ></el-button>
                                </div>
                            </div>
                            <div v-if="item.datatype.type == 'integer'">
                                <div style="width: 80%; float: left">
                                    <el-slider
                                        v-model="item.shadow"
                                        :min="item.datatype.min"
                                        :max="item.datatype.max"
                                        :disabled="shadowUnEnable || item.isReadonly == 1"
                                        :format-tooltip="(x) => x + ' ' + item.datatype.unit"
                                        :step="item.datatype.step"
                                    ></el-slider>
                                </div>
                                <div style="width: 20%; float: left">
                                    <el-button
                                        v-if="!shadowUnEnable && item.isReadonly == 0"
                                        icon="el-icon-s-promotion"
                                        type="info"
                                        :title="$t('device.running-status.866086-6')"
                                        style="font-size: 16px; padding: 1px 8px; margin: 4px 0 0 10px; border-radius: 3px"
                                        @click="mqttPublish(deviceInfo, item)"
                                    ></el-button>
                                </div>
                            </div>
                            <div v-if="item.datatype.type == 'object'">
                                <el-descriptions :column="1" size="mini" border>
                                    <el-descriptions-item v-for="(param, index) in item.datatype.params" :key="index" :label="param.name">
                                        <div v-if="param.datatype.type == 'bool'">
                                            <el-switch
                                                v-model="param.shadow"
                                                active-text=""
                                                :disabled="shadowUnEnable || param.isReadonly == 1"
                                                active-value="1"
                                                inactive-text=""
                                                inactive-value="0"
                                                style="min-width: 100px"
                                                @change="mqttPublish(deviceInfo, param)"
                                            />
                                        </div>
                                        <div v-if="param.datatype.type == 'enum'">
                                            <div v-if="param.datatype.showWay && param.datatype.showWay == 'button'">
                                                <el-button
                                                    v-for="subItem in param.datatype.enumList"
                                                    :key="subItem.value"
                                                    style="margin: 5px"
                                                    size="mini"
                                                    :disabled="shadowUnEnable || param.isReadonly == 1"
                                                    @click="enumButtonClick(deviceInfo, param, subItem.value)"
                                                >
                                                    {{ subItem.text }}
                                                </el-button>
                                            </div>
                                            <el-select
                                                v-else
                                                v-model="param.shadow"
                                                size="small"
                                                :disabled="shadowUnEnable || param.isReadonly == 1"
                                                :placeholder="$t('device.running-status.866086-3')"
                                                @change="mqttPublish(deviceInfo, param)"
                                            >
                                                <el-option v-for="subItem in param.datatype.enumList" :key="subItem.value" :label="subItem.text" :value="subItem.value" />
                                            </el-select>
                                        </div>
                                        <div v-if="param.datatype.type == 'string'">
                                            <el-input v-model="param.shadow" :placeholder="$t('device.running-status.866086-4')" :disabled="shadowUnEnable || param.isReadonly == 1">
                                                <el-button
                                                    v-if="!shadowUnEnable && param.isReadonly == 0"
                                                    slot="append"
                                                    icon="el-icon-s-promotion"
                                                    :title="$t('device.running-status.866086-6')"
                                                    style="font-size: 20px"
                                                    @click="mqttPublish(deviceInfo, param)"
                                                ></el-button>
                                            </el-input>
                                        </div>
                                        <div v-if="param.datatype.type == 'decimal'">
                                            <el-input v-model="param.shadow" type="number" :placeholder="$t('device.running-status.866086-7')" :disabled="shadowUnEnable || param.isReadonly == 1">
                                                <el-button
                                                    v-if="!shadowUnEnable && param.isReadonly == 0"
                                                    slot="append"
                                                    icon="el-icon-s-promotion"
                                                    :title="$t('device.running-status.866086-6')"
                                                    style="font-size: 20px"
                                                    @click="mqttPublish(deviceInfo, param)"
                                                ></el-button>
                                            </el-input>
                                        </div>
                                        <div v-if="param.datatype.type == 'integer'">
                                            <el-input v-model="param.shadow" type="integer" :placeholder="$t('device.running-status.866086-8')" :disabled="shadowUnEnable || param.isReadonly == 1">
                                                <el-button
                                                    v-if="!shadowUnEnable && param.isReadonly == 0"
                                                    slot="append"
                                                    icon="el-icon-s-promotion"
                                                    :title="$t('device.running-status.866086-6')"
                                                    style="font-size: 20px"
                                                    @click="mqttPublish(deviceInfo, param)"
                                                ></el-button>
                                            </el-input>
                                        </div>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>
                            <div v-if="item.datatype.type == 'array'">
                                <el-descriptions v-if="item.datatype.arrayType != 'object'" :column="1" size="mini" border>
                                    <el-descriptions-item v-for="(model, index) in item.datatype.arrayModel" :key="index" :label="item.name + (index + 1)">
                                        <div v-if="item.datatype.arrayType == 'string'">
                                            <el-input
                                                v-model="model.shadow"
                                                :placeholder="$t('device.running-status.866086-4')"
                                                size="mini"
                                                :disabled="shadowUnEnable || item.isReadonly == 1"
                                                @input="arrayItemChange($event, item)"
                                            >
                                                <el-button
                                                    v-if="!shadowUnEnable || item.isReadonly == 0"
                                                    slot="append"
                                                    icon="el-icon-s-promotion"
                                                    :title="$t('device.running-status.866086-6')"
                                                    style="font-size: 20px"
                                                    @click="mqttPublish(deviceInfo, model)"
                                                ></el-button>
                                            </el-input>
                                        </div>
                                        <div v-if="item.datatype.arrayType == 'decimal'">
                                            <el-input
                                                v-model="model.shadow"
                                                type="number"
                                                :placeholder="$t('device.running-status.866086-7')"
                                                size="mini"
                                                :disabled="shadowUnEnable || item.isReadonly == 1"
                                                @input="arrayItemChange($event, item)"
                                            >
                                                <el-button
                                                    v-if="!shadowUnEnable || item.isReadonly == 0"
                                                    slot="append"
                                                    icon="el-icon-s-promotion"
                                                    :title="$t('device.running-status.866086-6')"
                                                    style="font-size: 20px"
                                                    @click="mqttPublish(deviceInfo, model)"
                                                ></el-button>
                                            </el-input>
                                        </div>
                                        <div v-if="item.datatype.arrayType == 'integer'">
                                            <el-input
                                                v-model="model.shadow"
                                                type="integer"
                                                :placeholder="$t('device.running-status.866086-8')"
                                                size="mini"
                                                :disabled="shadowUnEnable || item.isReadonly == 1"
                                                @input="arrayItemChange($event, item)"
                                            >
                                                <el-button
                                                    v-if="!shadowUnEnable || item.isReadonly == 0"
                                                    slot="append"
                                                    icon="el-icon-s-promotion"
                                                    :title="$t('device.running-status.866086-6')"
                                                    style="font-size: 20px"
                                                    @click="mqttPublish(deviceInfo, model)"
                                                ></el-button>
                                            </el-input>
                                        </div>
                                    </el-descriptions-item>
                                </el-descriptions>
                                <el-collapse v-if="item.datatype.arrayType == 'object'">
                                    <el-collapse-item v-for="(arrayParam, index) in item.datatype.arrayParams" :key="index">
                                        <template slot="title">
                                            <span style="color: #666">
                                                <i class="el-icon-tickets"></i>
                                                {{ item.name + (index + 1) }}
                                            </span>
                                        </template>
                                        <el-descriptions :column="1" size="mini" border>
                                            <el-descriptions-item v-for="(param, index) in arrayParam" :key="index" :label="param.name">
                                                <div v-if="param.datatype.type == 'bool'">
                                                    <el-switch
                                                        v-model="param.shadow"
                                                        active-text=""
                                                        :disabled="shadowUnEnable || param.isReadonly == 1"
                                                        active-value="1"
                                                        inactive-text=""
                                                        inactive-value="0"
                                                        style="min-width: 100px"
                                                        @change="mqttPublish(deviceInfo, param)"
                                                    />
                                                </div>
                                                <div v-if="param.datatype.type == 'enum'">
                                                    <div v-if="param.datatype.showWay && param.datatype.showWay == 'button'">
                                                        <el-button
                                                            v-for="subItem in param.datatype.enumList"
                                                            :key="subItem.value"
                                                            style="margin: 5px"
                                                            size="mini"
                                                            :disabled="shadowUnEnable || param.isReadonly == 1"
                                                            @click="enumButtonClick(deviceInfo, param, subItem.value)"
                                                        >
                                                            {{ subItem.text }}
                                                        </el-button>
                                                    </div>
                                                    <el-select
                                                        v-else
                                                        v-model="param.shadow"
                                                        :placeholder="$t('device.running-status.866086-3')"
                                                        :disabled="shadowUnEnable || param.isReadonly == 1"
                                                        size="small"
                                                        @change="mqttPublish(deviceInfo, param)"
                                                    >
                                                        <el-option v-for="subItem in param.datatype.enumList" :key="subItem.value" :label="subItem.text" :value="subItem.value" />
                                                    </el-select>
                                                </div>
                                                <div v-if="param.datatype.type == 'string'">
                                                    <el-input v-model="param.shadow" :placeholder="$t('device.running-status.866086-4')" :disabled="shadowUnEnable || param.isReadonly == 1">
                                                        <el-button
                                                            v-if="!shadowUnEnable && param.isReadonly == 0"
                                                            slot="append"
                                                            icon="el-icon-s-promotion"
                                                            :title="$t('device.running-status.866086-6')"
                                                            style="font-size: 20px"
                                                            @click="mqttPublish(deviceInfo, param)"
                                                        ></el-button>
                                                    </el-input>
                                                </div>
                                                <div v-if="param.datatype.type == 'decimal'">
                                                    <el-input v-model="param.shadow" type="number" :disabled="shadowUnEnable || param.isReadonly == 1" :placeholder="$t('device.running-status.866086-7')">
                                                        <el-button
                                                            v-if="!shadowUnEnable && param.isReadonly == 0"
                                                            slot="append"
                                                            icon="el-icon-s-promotion"
                                                            :title="$t('device.running-status.866086-6')"
                                                            style="font-size: 20px"
                                                            @click="mqttPublish(deviceInfo, param)"
                                                        ></el-button>
                                                    </el-input>
                                                </div>
                                                <div v-if="param.datatype.type == 'integer'">
                                                    <el-input v-model="param.shadow" type="integer" :disabled="shadowUnEnable || param.isReadonly == 1" :placeholder="$t('device.running-status.866086-8')">
                                                        <el-button
                                                            v-if="!shadowUnEnable && param.isReadonly == 0"
                                                            slot="append"
                                                            icon="el-icon-s-promotion"
                                                            :title="$t('device.running-status.866086-6')"
                                                            style="font-size: 20px"
                                                            @click="mqttPublish(deviceInfo, param)"
                                                        ></el-button>
                                                    </el-input>
                                                </div>
                                            </el-descriptions-item>
                                        </el-descriptions>
                                    </el-collapse-item>
                                </el-collapse>
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>

                    <!---设备状态(影子模式，value值不会更新)-->
                    <el-descriptions v-if="deviceInfo.isShadow == 1 && deviceInfo.status != 3" :column="1" border size="mini">
                        <template slot="title">
                            <span style="font-size: 14px; color: #606266">{{ $t('device.running-status.866086-9') }}</span>
                        </template>

                        <!-- 设备物模型-->
                        <el-descriptions-item v-for="(item, index) in deviceInfo.thingsModels" :key="index">
                            <template slot="label">
                                <i class="el-icon-open"></i>
                                {{ item.name }}
                            </template>
                            <div v-if="item.datatype.type == 'bool'">
                                <el-switch v-model="item.value" active-text="" inactive-text="" active-value="1" disabled inactive-value="0" style="min-width: 100px" @change="mqttPublish(deviceInfo, item)" />
                            </div>
                            <div v-if="item.datatype.type == 'enum'">
                                <div v-if="item.datatype.showWay && item.datatype.showWay == 'button'">
                                    <el-button v-for="subItem in item.datatype.enumList" :key="subItem.value" style="margin: 5px" size="mini" disabled>{{ subItem.text }}</el-button>
                                </div>
                                <el-select v-else v-model="item.value" :placeholder="$t('device.running-status.866086-3')" disabled size="mini" @change="mqttPublish(deviceInfo, item)">
                                    <el-option v-for="subItem in item.datatype.enumList" :key="subItem.value" :label="subItem.text" :value="subItem.value" />
                                </el-select>
                            </div>
                            <div v-if="item.datatype.type == 'string'">
                                <el-input v-model="item.value" :placeholder="$t('device.running-status.866086-4')" disabled size="mini"></el-input>
                            </div>
                            <div v-if="item.datatype.type == 'decimal'">
                                <el-input v-model="item.value" type="number" :placeholder="$t('device.running-status.866086-7')" disabled size="mini"></el-input>
                            </div>
                            <div v-if="item.datatype.type == 'integer'">
                                <el-input v-model="item.value" type="integer" :placeholder="$t('device.running-status.866086-8')" disabled size="mini"></el-input>
                            </div>
                            <div v-if="item.datatype.type == 'object'">
                                <el-descriptions :column="1" size="mini" border>
                                    <el-descriptions-item v-for="(param, index) in item.datatype.params" :key="index" :label="param.name">
                                        <div v-if="param.datatype.type == 'bool'">
                                            <el-switch
                                                v-model="param.value"
                                                size="mini"
                                                active-text=""
                                                active-value="1"
                                                disabled
                                                inactive-text=""
                                                inactive-value="0"
                                                style="min-width: 100px"
                                                @change="mqttPublish(deviceInfo, param)"
                                            />
                                        </div>
                                        <div v-if="param.datatype.type == 'enum'">
                                            <el-select v-model="param.value" :placeholder="$t('device.running-status.866086-3')" disabled size="mini" @change="mqttPublish(deviceInfo, param)">
                                                <el-option v-for="subItem in param.datatype.enumList" :key="subItem.value" :label="subItem.text" :value="subItem.value" />
                                            </el-select>
                                        </div>
                                        <div v-if="param.datatype.type == 'string'">
                                            <el-input v-model="param.value" :placeholder="$t('device.running-status.866086-4')" disabled size="mini"></el-input>
                                        </div>
                                        <div v-if="param.datatype.type == 'decimal'">
                                            <el-input v-model="param.value" type="number" :placeholder="$t('device.running-status.866086-7')" disabled size="mini"></el-input>
                                        </div>
                                        <div v-if="param.datatype.type == 'integer'">
                                            <el-input v-model="param.value" type="integer" :placeholder="$t('device.running-status.866086-8')" disabled size="mini"></el-input>
                                        </div>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>
                            <div v-if="item.datatype.type == 'array'">
                                <el-descriptions v-if="item.datatype.arrayType != 'object'" :column="1" size="mini" border>
                                    <el-descriptions-item v-for="(model, index) in item.datatype.arrayModel" :key="index" :label="item.name + (index + 1)">
                                        <div v-if="item.datatype.arrayType == 'string'">
                                            <el-input v-model="model.value" :placeholder="$t('device.running-status.866086-4')" size="mini" disabled></el-input>
                                        </div>
                                        <div v-if="item.datatype.arrayType == 'decimal'">
                                            <el-input v-model="model.value" type="number" :placeholder="$t('device.running-status.866086-7')" disabled size="mini"></el-input>
                                        </div>
                                        <div v-if="item.datatype.arrayType == 'integer'">
                                            <el-input v-model="model.value" type="integer" :placeholder="$t('device.running-status.866086-8')" disabled size="mini"></el-input>
                                        </div>
                                    </el-descriptions-item>
                                </el-descriptions>
                                <el-collapse v-if="item.datatype.arrayType == 'object'">
                                    <el-collapse-item v-for="(arrayParam, index) in item.datatype.arrayParams" :key="index">
                                        <template slot="title">
                                            <span style="color: #666">
                                                <i class="el-icon-tickets"></i>
                                                {{ item.name + (index + 1) }}
                                            </span>
                                        </template>
                                        <el-descriptions :column="1" size="mini" border>
                                            <el-descriptions-item v-for="(param, index) in arrayParam" :key="index" :label="param.name">
                                                <div v-if="param.datatype.type == 'bool'">
                                                    <el-switch
                                                        v-model="param.value"
                                                        active-text=""
                                                        active-value="1"
                                                        disabled
                                                        inactive-text=""
                                                        inactive-value="0"
                                                        style="min-width: 100px"
                                                        @change="mqttPublish(deviceInfo, param)"
                                                    />
                                                </div>
                                                <div v-if="param.datatype.type == 'enum'">
                                                    <el-select v-model="param.value" :placeholder="$t('device.running-status.866086-3')" disabled size="mini" @change="mqttPublish(deviceInfo, param)">
                                                        <el-option v-for="subItem in param.datatype.enumList" :key="subItem.value" :label="subItem.text" :value="subItem.value" />
                                                    </el-select>
                                                </div>
                                                <div v-if="param.datatype.type == 'string'">
                                                    <el-input v-model="param.value" :placeholder="$t('device.running-status.866086-4')" disabled size="mini"></el-input>
                                                </div>
                                                <div v-if="param.datatype.type == 'decimal'">
                                                    <el-input v-model="param.value" type="number" :placeholder="$t('device.running-status.866086-7')" disabled size="mini"></el-input>
                                                </div>
                                                <div v-if="param.datatype.type == 'integer'">
                                                    <el-input v-model="param.value" type="integer" :placeholder="$t('device.running-status.866086-8')" disabled size="mini"></el-input>
                                                </div>
                                            </el-descriptions-item>
                                        </el-descriptions>
                                    </el-collapse-item>
                                </el-collapse>
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
                <div class="main-right flex-between">
                    <el-card v-for="(item, index) in deviceInfo.chartList" :key="index" class="detail-chart" shadow="hover" style="border-radius: 30px; margin-bottom: 20px">
                        <div ref="map" style="height: 240px; width: 230px; margin: 0 auto"></div>
                    </el-card>
                </div>
            </div>
        </el-card>
        <!-- 添加或修改产品固件对话框 -->
        <el-dialog :title="$t('device.running-status.866086-10')" :visible.sync="openFirmware" width="600px" append-to-body>
            <div v-if="firmware == null" style="text-align: center; font-size: 16px">
                <i class="el-icon-success" style="color: #67c23a"></i>
                {{ $t('device.running-status.866086-11') }}
            </div>
            <el-descriptions v-if="firmware != null && deviceInfo.firmwareVersion < firmware.version" :column="1" border size="large" :label-style="{ width: '150px', 'font-weight': 'bold' }">
                <template slot="title">
                    <el-link icon="el-icon-success" type="success" :underline="false">{{ $t('device.running-status.866086-12') }}</el-link>
                </template>
                <el-descriptions-item :label="$t('device.running-status.866086-13')">{{ firmware.firmwareName }}</el-descriptions-item>
                <el-descriptions-item :label="$t('device.device-edit.148398-4')">{{ firmware.productName }}</el-descriptions-item>
                <el-descriptions-item :label="$t('device.device-edit.148398-12')">Version {{ firmware.version }}</el-descriptions-item>
                <el-descriptions-item :label="$t('device.running-status.866086-16')">
                    <el-link :href="getDownloadUrl(firmware.filePath)" :underline="false" type="primary">{{ getDownloadUrl(firmware.filePath) }}</el-link>
                </el-descriptions-item>
                <el-descriptions-item :label="$t('device.running-status.866086-17')">{{ firmware.remark }}</el-descriptions-item>
            </el-descriptions>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="firmware != null && deviceInfo.firmwareVersion < firmware.version" type="success" @click="otaUpgrade">{{ $t('device.running-status.866086-18') }}</el-button>
                <el-button @click="cancel">{{ $t('cancel') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getLatestFirmware } from '@/api/iot/firmware';

import { serviceInvoke } from '@/api/iot/runstatus';

export default {
    name: 'RunningStatus',
    props: {
        device: {
            type: Object,
            default: null,
        },
    },
    data() {
        return {
            // 控制模块标题
            title: '设备控制 ',
            // 未启用设备影子
            shadowUnEnable: false,
            // 控制项标题背景
            statusColor: {
                background: '#67C23A',
                color: '#fff',
                minWidth: '100px',
            },
            // 最新固件信息
            firmware: {},
            // 打开固件对话框
            openFirmware: false,
            // 遮罩层
            loading: true,
            // 设备信息
            deviceInfo: {
                boolList: [],
                enumList: [],
                stringList: [],
                integerList: [],
                decimalList: [],
                arrayList: [],
                thingsModels: [],
                chartList: [],
            },
            // 监测图表
            monitorChart: [
                {
                    chart: {},
                    data: {
                        id: '',
                        name: '',
                        value: '',
                    },
                },
            ],
            remoteCommand: {},
        };
    },
    watch: {
        // 获取到父组件传递的device后，刷新列表
        device: {
            handler(newVal) {
                if (newVal && newVal.deviceId != 0) {
                    if (newVal && newVal.deviceId != 0) {
                        this.deviceInfo = newVal;
                        this.updateDeviceStatus(this.deviceInfo);
                        this.$nextTick(function () {
                            this.MonitorChart();
                        });
                        // 添加message事件监听器
                        this.mqttCallback();
                    }
                }
            },
        },
    },
    created() {},
    methods: {
        /* Mqtt回调处理 */
        mqttCallback() {
            this.$mqttTool.client.on('message', (topic, message, buffer) => {
                const topics = topic.split('/');
                const productId = topics[1];
                const deviceNum = topics[2];
                message = JSON.parse(message.toString());
                if (!message) {
                    return;
                }
                if (topics[3] == 'status') {
                    console.log('接收到【设备状态-运行】主题：', topic);
                    console.log('接收到【设备状态-运行】内容：', message);
                    // 更新列表中设备的状态
                    if (this.deviceInfo.serialNumber == deviceNum) {
                        this.deviceInfo.status = message.status;
                        this.deviceInfo.isShadow = message.isShadow;
                        this.deviceInfo.rssi = message.rssi;
                        this.updateDeviceStatus(this.deviceInfo);
                    }
                }
                // 兼容设备回复
                if (topics[4] == 'reply') {
                    this.$modal.notifySuccess(message);
                }
                if (topic.endsWith('ws/service')) {
                    console.log('接收到【物模型】主题1：', topic);
                    console.log('接收到【物模型】内容：', message);
                    // 更新列表中设备的属性
                    if (this.deviceInfo.serialNumber == deviceNum) {
                        for (let j = 0; j < message.message.length; j++) {
                            let isComplete = false;
                            // 设备状态
                            for (let k = 0; k < this.deviceInfo.thingsModels.length && !isComplete; k++) {
                                if (this.deviceInfo.thingsModels[k].id == message.message[j].id) {
                                    // 普通类型(小数/整数/字符串/布尔/枚举)
                                    if (this.deviceInfo.thingsModels[k].datatype.type == 'decimal' || this.deviceInfo.thingsModels[k].datatype.type == 'integer') {
                                        this.deviceInfo.thingsModels[k].shadow = Number(message.message[j].value);
                                    } else {
                                        this.deviceInfo.thingsModels[k].shadow = message.message[j].value;
                                    }
                                    isComplete = true;
                                    break;
                                } else if (this.deviceInfo.thingsModels[k].datatype.type == 'object') {
                                    // 对象类型
                                    for (let n = 0; n < this.deviceInfo.thingsModels[k].datatype.params.length; n++) {
                                        if (this.deviceInfo.thingsModels[k].datatype.params[n].id == message.message[j].id) {
                                            this.deviceInfo.thingsModels[k].datatype.params[n].shadow = message.message[j].value;
                                            isComplete = true;
                                            break;
                                        }
                                    }
                                } else if (this.deviceInfo.thingsModels[k].datatype.type == 'array') {
                                    // 数组类型
                                    if (this.deviceInfo.thingsModels[k].datatype.arrayType == 'object') {
                                        // 1.对象类型数组,id为数组中一个元素,例如：array_01_gateway_temperature
                                        if (String(message.message[j].id).indexOf('array_') == 0) {
                                            for (let n = 0; n < this.deviceInfo.thingsModels[k].datatype.arrayParams.length; n++) {
                                                for (let m = 0; m < this.deviceInfo.thingsModels[k].datatype.arrayParams[n].length; m++) {
                                                    if (this.deviceInfo.thingsModels[k].datatype.arrayParams[n][m].id == message.message[j].id) {
                                                        this.deviceInfo.thingsModels[k].datatype.arrayParams[n][m].shadow = message.message[j].value;
                                                        isComplete = true;
                                                        break;
                                                    }
                                                }
                                                if (isComplete) {
                                                    break;
                                                }
                                            }
                                        } else {
                                            // 2.对象类型数组，例如：gateway_temperature,消息ID添加前缀后匹配
                                            for (let n = 0; n < this.deviceInfo.thingsModels[k].datatype.arrayParams.length; n++) {
                                                for (let m = 0; m < this.deviceInfo.thingsModels[k].datatype.arrayParams[n].length; m++) {
                                                    const index = n > 9 ? String(n) : '0' + k;
                                                    const prefix = 'array_' + index + '_';
                                                    if (this.deviceInfo.thingsModels[k].datatype.arrayParams[n][m].id == prefix + message.message[j].id) {
                                                        this.deviceInfo.thingsModels[k].datatype.arrayParams[n][m].shadow = message.message[j].value;
                                                        isComplete = true;
                                                    }
                                                }
                                                if (isComplete) {
                                                    break;
                                                }
                                            }
                                        }
                                    } else {
                                        // 整数、小数和字符串类型数组
                                        for (let n = 0; n < this.deviceInfo.thingsModels[k].datatype.arrayModel.length; n++) {
                                            if (this.deviceInfo.thingsModels[k].datatype.arrayModel[n].id == message.message[j].id) {
                                                this.deviceInfo.thingsModels[k].datatype.arrayModel[n].shadow = message.message[j].value;
                                                isComplete = true;
                                                break;
                                            }
                                        }
                                    }
                                }
                            }
                            // 图表数据
                            for (let k = 0; k < this.deviceInfo.chartList.length; k++) {
                                if (this.deviceInfo.chartList[k].id.indexOf('array_') == 0) {
                                    // 数组类型匹配,例如：array_00_gateway_temperature
                                    if (this.deviceInfo.chartList[k].id == message.message[j].id) {
                                        // let shadows = message.message[j].value.split(",");
                                        this.deviceInfo.chartList[k].shadow = message.message[j].value;
                                        // 更新图表
                                        for (let m = 0; m < this.monitorChart.length; m++) {
                                            if (message.message[j].id == this.monitorChart[m].data.id) {
                                                const data = [
                                                    {
                                                        value: message.message[j].value,
                                                        name: this.monitorChart[m].data.name,
                                                    },
                                                ];
                                                this.monitorChart[m].chart.setOption({
                                                    series: [
                                                        {
                                                            data: data,
                                                        },
                                                    ],
                                                });
                                                break;
                                            }
                                        }
                                    }
                                } else {
                                    // 普通类型匹配
                                    if (this.deviceInfo.chartList[k].id == message.message[j].id) {
                                        this.deviceInfo.chartList[k].shadow = message.message[j].value;
                                        // 更新图表
                                        for (let m = 0; m < this.monitorChart.length; m++) {
                                            if (message.message[j].id == this.monitorChart[m].data.id) {
                                                isComplete = true;
                                                const data = [
                                                    {
                                                        value: message.message[j].value,
                                                        name: this.monitorChart[m].data.name,
                                                    },
                                                ];
                                                this.monitorChart[m].chart.setOption({
                                                    series: [
                                                        {
                                                            data: data,
                                                        },
                                                    ],
                                                });
                                                break;
                                            }
                                        }
                                    }
                                }
                                if (isComplete) {
                                    break;
                                }
                            }
                        }
                    }
                }
            });
        },

        // 发送指令
        mqttPublish(device, model) {
            const command = {};
            command[model.id] = model.shadow;
            const data = {
                serialNumber: device.serialNumber,
                productId: device.productId,
                remoteCommand: command,
                identifier: model.id,
                modelName: model.name,
                isShadow: device.status != 3,
                type: model.type,
            };
            serviceInvoke(data).then((response) => {
                if (response.code === 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('device.running-status.866086-25'),
                    });
                }
            });
        },

        /**
         * Mqtt发布消息
         * @device 设备
         * @model 物模型(id/name/type/name/isReadonly/value/shadow)，type 类型(1=属性，2=功能，3=OTA升级，4=实时监测)
         * */
        // mqttPublish(device, model) {
        //     let topic = "";
        //     let message = ""
        //     if (model.type == 1) {
        //         if (device.status == 3) {
        //             // 属性,在线模式
        //             topic = "/" + device.productId + "/" + device.serialNumber + "/property-online/get";
        //         } else if (device.isShadow) {
        //             // 属性,离线模式
        //             topic = "/" + device.productId + "/" + device.serialNumber + "/property-offline/post";
        //         }
        //         message = '[{"id":"' + model.id + '","value":"' + model.shadow + '"}]';
        //     } else if (model.type == 2) {
        //         if (device.status == 3) {
        //             // 功能,在线模式
        //             topic = "/" + device.productId + "/" + device.serialNumber + "/function-online/get";
        //
        //         } else if (device.isShadow) {
        //             // 功能,离线模式
        //             topic = "/" + device.productId + "/" + device.serialNumber + "/function-offline/post";
        //         }
        //         message = '[{"id":"' + model.id + '","value":"' + model.shadow + '"}]';
        //     } else if (model.type == 3) {
        //         // OTA升级
        //         topic = "/" + device.productId + "/" + device.serialNumber + "/ota/get";
        //         message = '{"version":' + this.firmware.version + ',"downloadUrl":"' + this.getDownloadUrl(this.firmware.filePath) + '"}';
        //     } else {
        //         return;
        //     }
        //     if (topic != "") {
        //         // 发布
        //         this.$mqttTool.publish(topic, message, model.name).then(res => {
        //             this.$modal.notifySuccess(res);
        //         }).catch(res => {
        //             this.$modal.notifyError(res);
        //         });
        //     }
        // },

        /** 枚举类型按钮单击 */
        enumButtonClick(device, model, value) {
            model.shadow = value;
            this.mqttPublish(device, model);
        },

        /** 更新设备状态 */
        updateDeviceStatus(device) {
            if (device.status == 3) {
                this.statusColor.background = '#12d09f';
                this.title = this.$t('device.running-status.866086-26');
            } else {
                if (device.isShadow == 1) {
                    this.statusColor.background = '#409EFF';
                    this.title = this.$t('device.running-status.866086-27');
                } else {
                    this.statusColor.background = '#909399';
                    this.title = this.$t('device.running-status.866086-28');
                    this.shadowUnEnable = true;
                }
            }
            this.$emit('statusEvent', this.deviceInfo.status);
        },
        /** 物模型数组元素值改变事件 */
        arrayItemChange(value, thingsModel) {
            let shadow = '';
            for (let i = 0; i < thingsModel.datatype.arrayCount; i++) {
                shadow += thingsModel.datatype.arrayModel[i].shadow + ',';
            }
            shadow = shadow.substring(0, shadow.length - 1);
            thingsModel.shadow = shadow;
        },
        /** 物模型中数组值改变事件 */
        arrayInputChange(value, thingsModel) {
            const arrayModels = value.split(',');
            if (arrayModels.length != thingsModel.datatype.arrayCount) {
                this.$modal.alertWarning(this.$t('device.running-status.866086-29') + thingsModel.datatype.arrayCount + this.$t('device.running-status.866086-30'));
            } else {
                for (let i = 0; i < thingsModel.datatype.arrayCount; i++) {
                    thingsModel.datatype.arrayModel[i].shadow = arrayModels[i];
                }
            }
        },
        /** 用户是否拥有分享设备权限*/
        // hasShrarePerm(permission) {
        //   if (this.deviceInfo.isOwner == 0) {
        //     // 分享设备权限
        //     if (this.deviceInfo.userPerms.indexOf(permission) == -1) {
        //       return false;
        //     }
        //   }
        //   return true;
        // },
        /** 设备升级 */
        otaUpgrade() {
            // OTA升级
            const topic = '/' + this.deviceInfo.productId + '/' + this.deviceInfo.serialNumber + '/ota/get';
            const message = '{"version":' + this.firmware.version + ',"downloadUrl":"' + this.getDownloadUrl(this.firmware.filePath) + '"}';
            // 发布
            this.$mqttTool
                .publish(topic, message, this.$t('device.running-status.866086-31'))
                .then((res) => {
                    this.$modal.notifySuccess(res);
                })
                .catch((res) => {
                    this.$modal.notifyError(res);
                });
            this.openFirmware = false;
        },
        /** 获取最新固件 */
        getLatestFirmware(deviceId) {
            getLatestFirmware(deviceId).then((response) => {
                this.firmware = response.data;
                this.openFirmware = true;
            });
        },
        // 取消按钮
        cancel() {
            this.openFirmware = false;
        },
        // 获取下载路径前缀
        getDownloadUrl(path) {
            return window.location.origin + process.env.VUE_APP_BASE_API + path;
        },
        /** 图表展示*/
        MonitorChart() {
            for (let i = 0; i < this.deviceInfo.chartList.length; i++) {
                this.monitorChart[i] = {
                    chart: this.$echarts.init(this.$refs.map[i]),
                    data: {
                        id: this.deviceInfo.chartList[i].id,
                        name: this.deviceInfo.chartList[i].name,
                        value: this.deviceInfo.chartList[i].shadow ? this.deviceInfo.chartList[i].shadow : this.deviceInfo.chartList[i].datatype.min,
                    },
                };
                var option;
                option = {
                    tooltip: {
                        formatter: ' {b} <br/> {c}' + this.deviceInfo.chartList[i].datatype.unit,
                    },
                    series: [
                        {
                            name: this.deviceInfo.chartList[i].datatype.type,
                            type: 'gauge',
                            min: this.deviceInfo.chartList[i].datatype.min,
                            max: this.deviceInfo.chartList[i].datatype.max,
                            colorBy: 'data',
                            splitNumber: 10,
                            radius: '100%',
                            // 分割线
                            splitLine: {
                                distance: 4,
                            },
                            axisLabel: {
                                fontSize: 10,
                                distance: 10,
                            },
                            // 刻度线
                            axisTick: {
                                distance: 4,
                            },
                            // 仪表盘轴线
                            axisLine: {
                                lineStyle: {
                                    width: 8,
                                    color: [
                                        [0.2, '#409EFF'], // 0~20%
                                        [0.8, '#12d09f'], // 40~60%
                                        [1, '#F56C6C'], // 80~100%
                                    ],
                                    opacity: 0.3,
                                },
                            },
                            pointer: {
                                icon: 'triangle',
                                length: '60%',
                                width: 7,
                            },
                            progress: {
                                show: true,
                                width: 8,
                            },
                            detail: {
                                valueAnimation: true,
                                formatter: '{value}' + ' ' + this.deviceInfo.chartList[i].datatype.unit,
                                offsetCenter: [0, '72%'],
                                fontSize: 16,
                            },
                            data: [
                                {
                                    value: this.deviceInfo.chartList[i].shadow ? this.deviceInfo.chartList[i].shadow : this.deviceInfo.chartList[i].datatype.min,
                                    name: this.deviceInfo.chartList[i].name,
                                },
                            ],
                            title: {
                                offsetCenter: [0, '95%'],
                                fontSize: 16,
                                text: this.deviceInfo.chartList[i].name,
                            },
                        },
                    ],
                };
                option && this.monitorChart[i].chart.setOption(option);
            }
        },
        chartResize() {
            for (let i = 0; i < this.monitorChart.length; i++) {
                console.log('this.monitorChart', this.monitorChart[i]);

                this.monitorChart[i].chart.resize();
            }
        },
    },
};
</script>
<style lang="scss">
@import url('./running-status.css');
/* 重写滑动块样式 */
.el-slider__bar {
    height: 18px;
}

.el-slider__runway {
    height: 18px;
    margin: 5px 0;
}

.el-slider__button {
    height: 18px;
    width: 18px;
    border-radius: 10%;
}

.el-slider__button-wrapper {
    top: -9px;
}

#app .device-detail-page {
    .detail-main {
        width: 100%;
        flex-wrap: wrap;
        align-items: flex-start;
        .main-left {
            width: 600px;
            flex-shrink: 0;
        }
        .main-right {
            flex-shrink: 1;
            flex-wrap: wrap;
            box-sizing: border-box;
            padding: 20px;
            background-color: #f5f7fa;
            .detail-chart {
                margin-bottom: 20px;
                width: 470px;
                flex-shrink: 0;
                flex-grow: 0;
            }
        }
    }
}
</style>
