<style lang="scss">
@import '@/styles/index.scss'; //导入样式

.btstopology {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    min-height: calc(100vh - 50px); //最小高度
    background-color: #808080;

    &__search {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        background-color: #B0B0B0;
    }

    &__scatterChart {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px;
        width: 100%;
        overflow: auto;

        &-leftBts {
            position: fixed;
            top: calc(50vh);
            left: 210px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border-radius: 3px;
            width: 21px;
            height: 25px;
            line-height: 25px;
            background-color: $menuActiveText;
            color: #ffffff;
            font-size: 15px;
            font-weight: bold;
        }

        &-rightBts {
            position: fixed;
            top: calc(50vh);
            right: 0px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding-left: 6px;
            border-radius: 3px;
            width: 21px;
            height: 25px;
            line-height: 25px;
            background-color: $menuActiveText;
            color: #ffffff;
            font-size: 15px;
            font-weight: bold;
        }
    }
}
</style>

<template>
    <div class="btstopology">
        <div class="btstopology__search">
            <app-search>
                <el-form :inline="true" :size="controlSize">
                    <el-form-item label="大楼编号">
                        <el-select v-model="tableData.listData.search.build_id" clearable placeholder="请选择"
                            style="width:120px">
                            <el-option v-for="(item, index) in mainData.buildIdList" :key="index" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="楼层编号">
                        <el-select v-model="tableData.listData.search.layer_id" clearable placeholder="请选择"
                            style="width:120px">
                            <el-option v-for="(item, index) in mainData.layerIdList" :key="index" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="hGetBaseParam">查询</el-button>
                        <el-button type="success" @click="openAddBaseParamDlg"
                            v-icanvisit="'add_topology_bts'">新增基站</el-button>
                    </el-form-item>
                </el-form>
            </app-search>
        </div>
        <!--画布-->
        <div class="btstopology__scatterChart" id="scrollContainer">
            <div class="btstopology__scatterChart-leftBts" @click="hLeftMove">《 </div>
            <div class="btstopology__scatterChart-rightBts" @click="hRightMove">》</div>
            <canvas ref="scatterChart" id="myCanvas" @click="hScatterChartClick" width="600" height="400"></canvas>
        </div>

        <!--基站基本参数-->
        <el-dialog width="55%" top="40px" :title="dialogData.editData.title" center
            :visible.sync="dialogData.editData.show" :modal-append-to-body="false" custom-class="editDataDialog"
            :close-on-click-modal="false" :close-on-press-escape="false">
            <base-param-dlg :isUpdate="dialogData.editData.isUpdate" :id="dialogData.editData.id"
                @get="hGetDataBaseParam" @close="hCloseBaseParamDlg" v-if="dialogData.editData.show" />
        </el-dialog>
    </div>
</template>


<script>
import BaseParamDlg from "./component/baseparamdlg.vue"

import { genBuildIdList, genLayerIdList } from "./basestaticdata.js"
import { getBtsBaseParamList } from "@/api/bparam"
export default {
    name: 'btstopology',
    components: {
        BaseParamDlg
    },
    data: function () {
        return {
            tableData: {
                listData: {
                    loading: false,
                    disabled: false,
                    search: {
                        build_id: 1,
                        layer_id: 1,
                    },
                    columns: [
                    ],
                    formatter: {
                    },
                    items: []
                }
            },
            dialogData: {
                editData: {
                    show: false,
                    title: '修改基站基本参数',
                    isUpdate: false,
                    id: 0,
                }
            },
            mainData: {
                buildIdList: genBuildIdList(),//大楼编号列表
                layerIdList: genLayerIdList(),//楼层列表
                freqColor: ["#DE000B", "#F76625", "#FFF701", "#00BE02", "#019CFE", "#070083", "#B106E0", "#000000", "#FFFFFF"],
                slotColor: ["#FFA7A7", "#CAE8AA", "#81C9FF", "#FFFF9B"],
                coordScale: 20,//坐标缩放比例
                offset: {//坐标偏移
                    xOffset: 0,
                    yOffset: 0
                }
            }
        }
    },
    watch: {
        updateTime(val, old) { //监听到改变后，重新初始化组件
            this.init()
        }
    },
    computed: {
        controlSize() {
            return this.$store.getters.controlSize
        }
    },
    beforeMount() {
    },
    mounted() {
        this.$nextTick(function () {
            this.init()
        })
    },
    methods: {
        init() {
            this.getBtsBaseParamList()
        },
        //重新设置画布大小
        reSetCanvasSize(size) {
            // 获取canvas元素  
            var canvas = document.getElementById('myCanvas')

            // 设置canvas的宽度和高度，单位像素
            canvas.width = size.gapX
            canvas.height = size.gapY
        },
        //画散点图
        drawScatterChart(dataList, offset) {
            // 绘制散点和注释  
            let xOffset = offset.xOffset
            let yOffset = offset.yOffset
            let coordX = 0
            let coordY = 0
            let strText = ""

            ////画画布
            const ctx = this.$refs.scatterChart.getContext('2d')//获得画布上下文
            ctx.clearRect(0, 0, this.$refs.scatterChart.width, this.$refs.scatterChart.height)//画个矩形框

            ////画散点图与注释
            dataList.forEach(point => {
                coordX = parseFloat(point.coord_x) / this.mainData.coordScale + xOffset
                coordY = parseFloat(point.coord_y) / this.mainData.coordScale + yOffset

                //画半圆，表示频率
                ctx.beginPath();
                ctx.arc(coordX, coordY, 13, Math.PI, 2 * Math.PI)
                ctx.fillStyle = this.mainData.freqColor[point.carrier_id - 1]
                ctx.fill();
                //画定位类型
                ctx.fillStyle = "#FFFFFF"
                ctx.font = "11px Arial"
                strText = point.location_type//定位类型
                ctx.fillText(strText, coordX - 3, coordY - 3)

                //画半圆，表示时隙
                ctx.beginPath();
                ctx.arc(coordX, coordY, 13, 0, Math.PI)
                ctx.fillStyle = this.mainData.slotColor[point.timeslot - 1]
                ctx.fill();
                //画定位类型
                ctx.fillStyle = "#FFFFFF"
                ctx.font = "11px Arial"
                strText = point.location_type//定位类型
                ctx.fillText(strText, coordX - 3, coordY + 10)

                //// 标注注释  
                ctx.fillStyle = "#FFFFFF"
                ctx.font = "11px Arial"
                //基站ID
                strText = "ID" + point.bts_id
                ctx.fillText(strText, coordX - 18, coordY + 30)
                //坐标
                strText = "[" + parseFloat(point.coord_x) / 100 + ", " + parseFloat(point.coord_y) / 100 + "]"
                ctx.fillText(strText, coordX - 18, coordY + 46)

                //频率
                strText = "F" + point.carrier_id
                ctx.fillStyle = this.mainData.freqColor[point.carrier_id - 1]
                ctx.fillText(strText, coordX + 15, coordY - 3)
                //时隙
                strText = "T" + point.timeslot
                ctx.fillStyle = this.mainData.slotColor[point.timeslot - 1]
                ctx.fillText(strText, coordX + 15, coordY + 12)
            })
        },
        //散点图点击事件处理函数
        hScatterChartClick(event) {
            //获得点击屏幕坐标
            const rect = this.$refs.scatterChart.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;

            //将屏幕坐标换算成基站安装坐标
            const xOffset = this.mainData.offset.xOffset
            const yOffset = this.mainData.offset.yOffset
            const coordX = parseInt((x - xOffset) * this.mainData.coordScale)
            const coordY = parseInt((y - yOffset) * this.mainData.coordScale)

            // 查找被点击的散点  
            let btsData = {}
            const existFlag = this.tableData.listData.items.find(bts => {
                btsData = bts
                const distance = Math.sqrt(Math.pow(bts.coord_x - coordX, 2) + Math.pow(bts.coord_y - coordY, 2))
                return distance < 100 // 假设点击半径为100 
            })

            //找到了点击的基站
            if (existFlag) {
                this.dialogData.editData.id = parseInt(btsData.id)
                this.dialogData.editData.isUpdate = true
                this.dialogData.editData.show = true
            }
        },
        hGetDataBaseParam() {
            this.getBtsBaseParamList()
        },
        openAddBaseParamDlg() {
            this.dialogData.editData.isUpdate = false
            this.dialogData.editData.title = '新增基站参数'
            this.dialogData.editData.show = true
        },
        hCloseBaseParamDlg() {
            this.dialogData.editData.show = false
        },
        //往左移动
        hLeftMove() {
            var container = document.getElementById('scrollContainer');
            container.scrollLeft += 100; // 每次点击向左滚动100px  
        },
        //往右移动
        hRightMove() {
            var container = document.getElementById('scrollContainer');
            container.scrollLeft -= 100; // 每次点击向右滚动100px  
        },
        hGetBaseParam() {
            this.getBtsBaseParamList()
        },
        getBtsBaseParamList() {//获得基站基本参数数据
            let search = {}
            let itemId = 0

            itemId = parseInt(this.tableData.listData.search.build_id)
            if (itemId > 0) {
                search.build_id = itemId
            }

            itemId = parseInt(this.tableData.listData.search.layer_id)
            if (itemId != 0) {
                search.layer_id = itemId
            }

            let param = { search: search }
            let resultData = {}

            //查询数据
            this.tableData.listData.loading = true
            getBtsBaseParamList(param).then((res) => {
                this.tableData.listData.items = res.data
                this.tableData.listData.loading = false

                resultData = this.findMinCoordValue(this.tableData.listData.items);

                //重新设置画布大小
                this.reSetCanvasSize(resultData.gap)

                //画基站散点图
                this.drawScatterChart(this.tableData.listData.items, resultData.offset)
            }).catch(() => {
                this.tableData.listData.loading = false
            })
        },
        //找出X和Y坐标的最小值
        findMinCoordValue(dataList) {
            let minX = 10000000
            let minY = 10000000
            let maxX = -10000000
            let maxY = -10000000
            let offset = {}
            for (let i = 0; i < dataList.length; i++) {
                if (dataList[i].coord_x < minX) {
                    minX = dataList[i].coord_x
                }
                if (dataList[i].coord_x > maxX) {
                    maxX = dataList[i].coord_x
                }

                if (dataList[i].coord_y < minY) {
                    minY = dataList[i].coord_y
                }
                if (dataList[i].coord_y > maxY) {
                    maxY = dataList[i].coord_y
                }
            }

            //计算坐标偏移
            offset.xOffset = 0
            if (minX <= 0) {
                offset.xOffset = -1 * parseFloat(minX) / this.mainData.coordScale + 30
            }
            offset.yOffset = 0
            if (minY <= 0) {
                offset.yOffset = -1 * parseFloat(minY) / this.mainData.coordScale + 30
            }
            this.mainData.offset = offset//保存偏移值

            //计算画布大小
            let gap = {}
            let gapX = (maxX - minX) / this.mainData.coordScale + 60
            let gapY = (maxY - minY) / this.mainData.coordScale + 100
            gap.gapX = gapX
            gap.gapY = gapY

            let data = {}
            data.offset = offset
            data.gap = gap
            return data
        }
    }
}

</script>
