<template>
    <div id="map_div">
        <iframe id="i_map" name="i_map" frameborder="0" style="width: 100%; height: 100%;"></iframe>
        <div id="timeSliderDiv">

        </div>
        <div id="tool_div">
            <button @click="fullExtent()">全景</button>
            <button @click="clearMap()">清除</button>
            <button @click="calculation('distance')">测距</button>
            <button @click="calculation('area')">侧面积</button>
            <button @click="test('初始视角')">初始视角</button>
            <button @click="test('视频融合视角')">视频融合视角</button>
            <button @click="test('浦江游览码头')">浦江游览码头</button>
            <button @click="test('对江轮渡码头')">对江轮渡码头</button>
            <button @click="test('浦江游览航线')">浦江游览航线</button>
            <button @click="test('对江轮渡航线')">对江轮渡航线</button>
            <button @click="test('企业定位')">企业定位</button>
            <button @click="test('船舶定位')">单船定位</button>
            <button @click="test('历史航班轨迹')">历史航班轨迹</button>
            <button @click="test('船舶撒点')">船舶</button>
            <button @click="test('码头泊位')">码头泊位</button>
            <button @click="test('航道')">航道</button>
            <button @click="test('锚地')">锚地</button>
            <button @click="test('掉头区')">掉头区</button>
            <button @click="test('警戒区')">警戒区</button>
            <button @click="test('水上综合服务器')">水上综合服务器</button>
            <button @click="test('航标')">航标</button>
            <button @click="test('水下地形')">水下地形</button>
            <button @click="test('淤积预警')">淤积预警</button>
            <button @click="test('疏浚前')">疏浚前</button>
            <button @click="test('疏浚后')">疏浚后</button>
            <button @click="test('白膜')">白膜</button>
            <button @click="test('危险品码头')">危险品码头</button>
            <button @click="test('关闭全部图层')">关闭全部图层</button>
            <button @click="test('基础地图')">基础地图</button>
            <button @click="test('遥感地图')">遥感地图</button>
            <button @click="test('开启模拟驾驶')">开启模拟驾驶</button>
            <button @click="test('关闭模拟驾驶')">关闭模拟驾驶</button>
            <button @click="test('绘制轨迹回放区域')">绘制轨迹回放区域</button>
            <button @click="test('查询区域轨迹')">查询区域轨迹</button>
            <button @click="test('轨迹回放')">轨迹回放</button>
            <button @click="test('结束回放')">结束回放</button>
            <button @click="test('水深剖面线')">水深剖面线</button>
            <button @click="test('维护水深面')">维护水深面</button>
            <button @click="test('维护水深面-定位')">维护水深面-定位</button>
        </div>
    </div>
</template>

<script>
    import {initBridge, fullExtent, calculation, clearMap, changeMap, draw} from "@/utils/map/ArcgisUtil"
    import {pjylLine, djldLine,djldLineAll,onePjylPortLocation,oneDjldPortLocation} from '@/utils/map/WaterPassenger'
    import {locationUnit} from '@/utils/map/OperationSupervision'
    import {setBoat, setBoatPath, onLocationBoat, locationBoat, boatDriving, drawArea, setMultiBoatHistory, playAreaBoatHistory,djldBoatHistory} from '@/utils/map/Boat'
    import {setCenter, setVideoCamera} from '@/utils/map/Common'
    import {addDefaultServer,addLayerByName,closeAllLayer} from '@/utils/map/Layer'
    import {compareSjBeforeAfter, locationOneWhss, showWhss} from '@/utils/map/Channel'

    export default {
        name: "MapHome",
        data(){
            return{
                mapExtent:'',
                calculateFinish: false,
                showBoat: false,
                isShowPjylPort:false,
                isShowDjldPort:false,
                isShowPjylLine:false,
                isShowDjldLine:false,
                isShowBoat:false,
                isShowHistoryBoat:false,
                isShowUnit:false,
                isShowPortLayer:false,
                isShowJjqLayer:false,
                isShowDtqLayer:false,
                isShowMdLayer:false,
                isShowSsfwqLayer:false,
                isShowHbLayer:false,
                isShowHdLayer:false,
                isShowDangerPortLayer:false,
                isShowDbsLayer:false,
                isShowYjyjLayer:false,
                isShowBmLayer:false,
                isSspmx:false,
                isWhss:false,
            }
        },
        mounted(){
            //加载地图控件
            initBridge();
            addDefaultServer();
            setCenter();
        },
        methods:{
            fullExtent(){fullExtent()},
            calculation(type){calculation(type)},
            clearMap(){
                // clearMap()
                clearMap({is_draw: false, is_search:true, layers: []})
            },
            // 测试方法
            test(value){
                switch (value) {
                    case '浦江游览码头':
                        this.isShowPjylPort = !this.isShowPjylPort
                        onePjylPortLocation({
                            'portName':'金陵东路轮渡码头',
                            'mapx':'2360.10554497',
                            'mapy':'794.13869415'
                        },this.isShowPjylPort)
                        break
                    case '对江轮渡码头':
                        this.isShowDjldPort = !this.isShowDjldPort
                        oneDjldPortLocation({
                            'portName':'闵行轮渡站',
                            'mapx':'-4562.25034385326',
                            'mapy':'-26256.4229700345'
                        },this.isShowDjldPort)
                        break
                    case '浦江游览航线':
                        this.isShowPjylLine = !this.isShowPjylLine
                        pjylLine(this.isShowPjylLine)
                        break
                    case '对江轮渡航线':
                        this.isShowDjldLine = !this.isShowDjldLine
                        // djldLine('歇宁线',this.isShowDjldLine)
                        djldLineAll(this.isShowDjldLine)
                        break
                    case '企业定位':
                        this.isShowUnit = !this.isShowUnit
                        locationUnit({
                            name: '上海东方明珠游乐有限公司',
                            certNumber:'（沪外）港经证（1390）号',
                            mapx: "2360.105499999595",
                            mapy: "794.1387000000105"
                        },this.isShowUnit)
                        break
                    case '船舶撒点':
                        this.isShowBoat = !this.isShowBoat
                        setBoat(this.isShowBoat)
                        break
                    case '船舶轨迹':
                        setBoatPath()
                        break
                    case '船舶定位':
                        locationBoat('412374820')
                        break
                    case '历史航班轨迹':
                        this.isShowHistoryBoat = !this.isShowHistoryBoat
                        djldBoatHistory({routeTypeId:1,mmsi:413863314,startTime:'2023-09-13 20:25:00'},this.isShowHistoryBoat)
                        break
                    case '初始视角':
                        setCenter();
                        break
                    case '视频融合视角':
                        setVideoCamera();
                        break
                    case '视频融合视角':
                        setVideoCamera();
                        break
                    case '码头泊位':
                        this.isShowPortLayer = !this.isShowPortLayer
                        addLayerByName('mt',this.isShowPortLayer)
                        break
                    case '警戒区':
                        this.isShowJjqLayer = !this.isShowJjqLayer
                        addLayerByName('jjq',this.isShowJjqLayer)
                        break
                    case '掉头区':
                        this.isShowDtqLayer = !this.isShowDtqLayer
                        addLayerByName('dtq',this.isShowDtqLayer)
                        break
                    case '锚地':
                        this.isShowMdLayer = !this.isShowMdLayer
                        addLayerByName('md',this.isShowMdLayer)
                        break
                    case '水上综合服务器':
                        this.isShowSsfwqLayer = !this.isShowSsfwqLayer
                        addLayerByName('sszh',this.isShowSsfwqLayer)
                        break
                    case '航标':
                        this.isShowHbLayer = !this.isShowHbLayer
                        addLayerByName('hb',this.isShowHbLayer)
                        break
                    case '航道':
                        this.isShowHdLayer = !this.isShowHdLayer
                        addLayerByName('hd',this.isShowHdLayer)
                        break
                    case '危险品码头':
                        this.isShowDangerPortLayer = !this.isShowDangerPortLayer
                        addLayerByName('wxpmt',this.isShowDangerPortLayer)
                        break
                    case '水下地形':
                        this.isShowDbsLayer = !this.isShowDbsLayer
                        addLayerByName('sxdx',this.isShowDbsLayer)
                        break
                    case '淤积预警':
                        this.isShowYjyjLayer = !this.isShowYjyjLayer
                        addLayerByName('yjyj',this.isShowYjyjLayer)
                        break
                    case '疏浚前':
                        compareSjBeforeAfter('2022LjzAfter',false)
                        compareSjBeforeAfter('2022LjzBefore',true)

                        break
                    case '疏浚后':
                        compareSjBeforeAfter('2022LjzBefore',false)
                        compareSjBeforeAfter('2022LjzAfter',true)

                        break
                    case '白膜':
                        this.isShowBmLayer = !this.isShowBmLayer
                        addLayerByName('bm',this.isShowBmLayer)
                        break
                    case '关闭全部图层':
                        closeAllLayer()
                        break
                    case '基础地图':
                        changeMap('baseMap')
                        break
                    case '遥感地图':
                        changeMap('airMap')
                        break
                    case '开启模拟驾驶':
                        boatDriving(true)
                        break
                    case '关闭模拟驾驶':
                        boatDriving(false)
                        break
                    case '绘制轨迹回放区域':
                        drawArea('2023-9-9 19:00:00','2023-9-9 19:15:00')
                        break
                    case '查询区域轨迹':
                        setMultiBoatHistory()
                        break
                    case '轨迹回放':
                        playAreaBoatHistory('start')
                        break
                    case '结束回放':
                        playAreaBoatHistory('stop')
                        break
                    case '水深剖面线':
                        this.isSspmx = !this.isSspmx
                        addLayerByName('sspmx',this.isSspmx);
                        break
                    case '维护水深面':
                        this.isWhss = !this.isWhss
                        showWhss(this.isWhss);
                        break
                    case '维护水深面-定位':
                        this.isWhss = !this.isWhss
                        locationOneWhss('H44-H71',this.isWhss);
                        break
                    default:
                }
            },
        }
    }
</script>

<style scoped>
    #map_div{
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    #tool_div {
        display: none;
        background-color: #cccccc;
        z-index: 10;
        position: absolute;
        top: 10px;
        left: 10px;
        width: 100px;
        height: 500px;
    }

    #timeSliderDiv{
        display: none;
        position: absolute;
        bottom: 145px;
        left: 340px;
        width: calc(100% - 680px);

    }
</style>