<template>
    <div style="padding: 10px; background-color: #f8f8f8">
        <el-card class="main-card">
            <div>
                <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px"
                    size="small">
                    <el-form-item :label="$t('device.index.105953-0')" prop="serialNumber">
                        <el-select v-model="queryParams.serialNumber" clearable
                            :placeholder="$t('device.index.105953-1')">
                            <el-option v-for="item in options" :key="item.serialNumber" :label="item.deviceName"
                                :value="item.serialNumber"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('index.time.20250324-01')" prop="daterange">
                        <el-date-picker v-model="queryParams.daterange" :end-placeholder="$t('index.time.20250324-03')"
                            :range-separator="$t('index.time.20250324-04')"
                            :start-placeholder="$t('index.time.20250324-02')" type="daterange"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-search" size="mini" type="primary" @click="getlist()">{{ $t('search')
                            }}</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset')
                            }}</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="quanhuan(!open)">{{
                            $t('index.time.20250324-05') }}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card class="main-card">
            <div v-if="this.open" ref="map" style="height: 650px"></div>
            <div v-else>
                <!-- 表格数据-->
                <el-table :border="false" :data="deviceList" style="width: 100%">
                    <el-table-column align="center" :label="$t('device.index.105953-0')"
                        prop="deviceName"></el-table-column>
                    <el-table-column align="center" :label="$t('device.realTime-status.845353-2')" prop="reportTime">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.reportTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" :label="$t('index.time.20250324-06')"
                        prop="latitude"></el-table-column>
                    <el-table-column align="center" :label="$t('index.time.20250324-07')"
                        prop="longitude"></el-table-column>
                </el-table>
                <pagination :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total"
                    @pagination="getlist" />
            </div>
        </el-card>
    </div>
</template>

<script>
import CountTo from 'vue-count-to';
import { loadBMap } from '@/utils/map.js';
//安装的是echarts完整包，里面包含百度地图扩展，路径为 echarts/extension/bmap/bmap.js，将其引入
//ECharts的百度地图扩展，可以在百度地图上展现点图，线图，热力图等可视化
require('echarts/extension/bmap/bmap');
import { listAllDeviceShort, getdevicehis } from '@/api/iot/device';
import moment from 'moment';
import Template from '@/views/iot/template/index.vue';

export default {
    name: 'Index',
    components: {
        Template,
        CountTo,
    },
    data() {
        return {
            // 总条数
            total: 0,
            // 设备列表
            deviceList: [],
            // 版本号
            version: '3.8.0',
            //搜索条件
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                serialNumber: null,
                daterange: null,
            },
            // 显示搜索条件
            showSearch: true,
            options: [],
            open: true,
        };
    },
    created() {
        this.getAllDevice();
        this.loadMap();
    },
    methods: {
        /**查询所有设备 */
        getAllDevice() {
            listAllDeviceShort(this.queryParams).then((response) => {
                this.options = response.rows;
            });
        },
        getlist() {
            if (this.queryParams.serialNumber == null || this.queryParams.serialNumber == '') {
                this.$modal.msgWarning('设备不能为空');
                return;
            }
            if (this.queryParams.daterange == null || this.queryParams.serialNumber == '') {
                this.$modal.msgWarning('日期不能为空');
                return;
            }
            const data = {
                beginDate: moment(this.queryParams.daterange[0]).format('YYYY-MM-DD'),
                endDate: moment(this.queryParams.daterange[1]).format('YYYY-MM-DD'),
                serialNumber: this.queryParams.serialNumber,
                pageNum: this.queryParams.pageNum,
                pageSize: this.queryParams.pageSize,
            };
            getdevicehis(data).then((response) => {
                this.deviceList = response.rows;
                this.total = response.total;
                this.loadMap();
            });
        },
        /**加载地图*/
        loadMap() {
            this.$nextTick(() => {
                loadBMap().then(() => {
                    this.getmap();
                });
            });
        },
        /** 地图 */
        getmap() {
            var myChart = this.$echarts.init(this.$refs.map);
            var option;

            // 格式化数据
            let convertData = function (data, status) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = [data[i].longitude, data[i].latitude];
                    if (geoCoord && data[i].status == status) {
                        res.push({
                            name: data[i].deviceName,
                            value: geoCoord,
                            serialNumber: data[i].serialNumber,
                            status: data[i].status,
                            isShadow: data[i].isShadow,
                            firmwareVersion: data[i].firmwareVersion,
                            networkAddress: data[i].networkAddress,
                            productName: data[i].productName,
                            activeTime: data[i].activeTime == null ? '' : data[i].activeTime,
                            deviceId: data[i].deviceId,
                            locationWay: data[i].locationWay,
                        });
                    }
                }
                return res;
            };
            option = {
                title: {
                    text: this.$t('index.time.20250324-08'),
                    subtext: '',
                    sublink: 'https://iot.yanfankeji.com',
                    target: '_blank',
                    textStyle: {
                        color: '#333',
                        textBorderColor: '#fff',
                        textBorderWidth: 10,
                    },
                    top: 10,
                    left: 'center',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        var htmlStr = '<div style="padding:5px;line-height:28px;">';
                        htmlStr += "设备名称： <span style='color:#409EFF'>" + params.data.name + '</span><br />';
                        htmlStr += '设备编号： ' + params.data.serialNumber + '<br />';
                        htmlStr += '设备状态： ';
                        if (params.data.status == 1) {
                            htmlStr += "<span style='color:#E6A23C'>未激活</span>" + '<br />';
                        } else if (params.data.status == 2) {
                            htmlStr += "<span style='color:#F56C6C'>禁用</span>" + '<br />';
                        } else if (params.data.status == 3) {
                            htmlStr += "<span style='color:#67C23A'>在线</span>" + '<br />';
                        } else if (params.data.status == 4) {
                            htmlStr += "<span style='color:#909399'>离线</span>" + '<br />';
                        }
                        if (params.data.isShadow == 1) {
                            htmlStr += '设备影子： ' + "<span style='color:#67C23A'>启用</span>" + '<br />';
                        } else {
                            htmlStr += '设备影子： ' + "<span style='color:#909399'>未启用</span>" + '<br />';
                        }
                        htmlStr += '产品名称： ' + params.data.productName + '<br />';
                        htmlStr += '固件版本： Version ' + params.data.firmwareVersion + '<br />';
                        htmlStr += '激活时间： ' + params.data.activeTime + '<br />';
                        htmlStr += '定位方式： ';
                        if (params.data.locationWay == 1) {
                            htmlStr += '自动定位' + '<br />';
                        } else if (params.data.locationWay == 2) {
                            htmlStr += '设备定位' + '<br />';
                        } else if (params.data.locationWay == 3) {
                            htmlStr += '自定义位置' + '<br />';
                        } else {
                            htmlStr += '未知' + '<br />';
                        }
                        htmlStr += '所在地址： ' + params.data.networkAddress + '<br />';
                        htmlStr += '</div>';
                        return htmlStr;
                    },
                },
                bmap: {
                    center: [133, 38],
                    zoom: 5,
                    roam: true,
                    mapStyle: {
                        styleJson: [
                            {
                                featureType: 'water',
                                elementType: 'all',
                                stylers: {
                                    color: '#a0cfff',
                                },
                            },
                            {
                                featureType: 'land',
                                elementType: 'all',
                                stylers: {
                                    color: '#fafafa', // #fffff8 淡黄色
                                },
                            },
                            {
                                featureType: 'railway',
                                elementType: 'all',
                                stylers: {
                                    visibility: 'off',
                                },
                            },
                            {
                                featureType: 'highway',
                                elementType: 'all',
                                stylers: {
                                    color: '#fdfdfd',
                                },
                            },
                            {
                                featureType: 'highway',
                                elementType: 'labels',
                                stylers: {
                                    visibility: 'off',
                                },
                            },
                            {
                                featureType: 'arterial',
                                elementType: 'geometry',
                                stylers: {
                                    color: '#fefefe',
                                },
                            },
                            {
                                featureType: 'arterial',
                                elementType: 'geometry.fill',
                                stylers: {
                                    color: '#fefefe',
                                },
                            },
                            {
                                featureType: 'poi',
                                elementType: 'all',
                                stylers: {
                                    visibility: 'off',
                                },
                            },
                            {
                                featureType: 'green',
                                elementType: 'all',
                                stylers: {
                                    visibility: 'off',
                                },
                            },
                            {
                                featureType: 'subway',
                                elementType: 'all',
                                stylers: {
                                    visibility: 'off',
                                },
                            },
                            {
                                featureType: 'manmade',
                                elementType: 'all',
                                stylers: {
                                    color: '#d1d1d1',
                                },
                            },
                            {
                                featureType: 'local',
                                elementType: 'all',
                                stylers: {
                                    color: '#d1d1d1',
                                },
                            },
                            {
                                featureType: 'arterial',
                                elementType: 'labels',
                                stylers: {
                                    visibility: 'off',
                                },
                            },
                            {
                                featureType: 'boundary',
                                elementType: 'all',
                                stylers: {
                                    color: '#999999',
                                },
                            },
                            {
                                featureType: 'building',
                                elementType: 'all',
                                stylers: {
                                    color: '#d1d1d1',
                                },
                            },
                            {
                                featureType: 'label',
                                elementType: 'labels.text.fill',
                                stylers: {
                                    color: '#999999',
                                },
                            },
                        ],
                    },
                },
                series: [
                    {
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        data: convertData(this.deviceList, 1),
                        symbolSize: 15,
                        itemStyle: {
                            color: '#E6A23C',
                        },
                    },
                    {
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        data: convertData(this.deviceList, 2),
                        symbolSize: 15,
                        itemStyle: {
                            color: '#F56C6C',
                        },
                    },
                    {
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        data: convertData(this.deviceList, 4),
                        symbolSize: 15,
                        itemStyle: {
                            color: '#909399',
                        },
                    },
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        data: convertData(this.deviceList, 3),
                        symbolSize: 15,
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke',
                            scale: 5,
                        },
                        label: {
                            formatter: '{b}',
                            position: 'right',
                            show: false,
                        },
                        itemStyle: {
                            color: '#67C23A',
                            shadowBlur: 100,
                            shadowColor: '#333',
                        },
                        zlevel: 1,
                    },
                ],
            };

            option && myChart.setOption(option);
        },
        resetQuery() {
            this.total = 0;
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                serialNumber: null,
                daterange: null,
            };
            this.deviceList = [];
        },
        quanhuan(tab) {
            if (this.total == 0) {
                this.$modal.msgWarning('无数据');
                this.loadMap();
                return;
            }
            this.open = tab;
            if (this.open) {
                this.getlist();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.phone {
    height: 729px;
    width: 370px;
    background-size: cover;
    margin: 0 auto;
}

.phone-container {
    height: 618px;
    width: 343px;
    position: relative;
    top: 46px;
    left: 12px;
    background-color: #fff;
}

.content {
    line-height: 24px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 10px;
}

.description {
    font-size: 12px;

    tr {
        line-height: 20px;
    }
}

.panel-group {
    .card-panel-col {
        margin-bottom: 10px;
    }

    .card-panel {
        height: 68px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        color: #666;
        border: 1px solid #eee;
        border-radius: 5px;
        //box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
        background-color: #fff;

        &:hover {
            .card-panel-icon-wrapper {
                color: #fff;
            }

            .icon-blue {
                background: #36a3f7;
            }

            .icon-green {
                background: #34bfa3;
            }

            .icon-red {
                background: #f56c6c;
            }

            .icon-orange {
                background: #e6a23c;
            }
        }

        .icon-blue {
            color: #36a3f7;
        }

        .icon-green {
            color: #34bfa3;
        }

        .icon-red {
            color: #f56c6c;
        }

        .icon-orange {
            color: #e6a23c;
        }

        .card-panel-icon-wrapper {
            float: left;
            margin: 10px;
            padding: 10px;
            transition: all 0.38s ease-out;
            border-radius: 6px;
        }

        .card-panel-icon {
            float: left;
            font-size: 30px;
        }

        .card-panel-description {
            float: right;
            font-weight: bold;
            margin: 15px;
            margin-left: 0px;

            .card-panel-text {
                line-height: 14px;
                color: rgba(0, 0, 0, 0.45);
                font-size: 14px;
                margin-bottom: 12px;
                text-align: right;
            }

            .card-panel-num {
                font-size: 18px;
            }
        }
    }
}
</style>
