<template>
    <div class="locus-wrp">
        <div class="map-sum-head">
            <span class="title">订单轨迹</span>
            <div class="filter-container">
                <span>订单状态：</span>
                <el-select v-model="listQuery.orderStatus" size="small" placeholder="请选择" class="filter-item">
                    <el-option v-for="item in orderOptions" :key="item.value" :label="item.label" :value="item.value"/>
                </el-select>
                <span>区域：</span>
                <el-select v-model="listQuery.manageAreaId" size="small" placeholder="请选择" class="filter-item">
                    <el-option v-for="item in $root.regionOptions" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
                <el-input placeholder="订单号/车牌号/手机号" v-model="listQuery.keyword" size="small" class="input-item" />
                <el-button class="filter-item" size="small" type="primary" icon="el-icon-search" @click="getList" style="width: 80px">搜索</el-button>
            </div>
        </div>

        <div class="aMap">
            <div id="allmap" ref="allmap"></div>

            <side-list ref="SideList" :orderLoading="orderLoading"
                       :orderList="list.resultList" @showLocus="showLocus">
            </side-list>
        </div>
    </div>
</template>

<script>
    import SideList from './components/sideList'
    import api from '@/api/order'
    import { loadMP } from '@/utils/map'
    export default {
        name: "locus",
        components: {
            SideList
        },
        data() {
            return {
                listQuery: {
                    pageNumber: 1,
                    pageSize: 50,
                    orderStatus: '',
                    manageAreaId: '',
                    keyword: undefined
                },
                orderOptions: [
                    {label: '全部', value: ''},
                    { label: '骑行中', value: '1' },
                    { label: '交易完成', value: '2' },
                    { label: '待支付', value: '4' }
                ],
                aMap: undefined,
                locusPolyline: undefined,
                list: {},
                orderLoading: false,
                beginIcon: require('../../assets/status/begin.png'),
                endIcon: require('../../assets/status/end.png'),
                beginMarker: undefined,
                endMarker: undefined,
                satelliteLayer: undefined,
                pathSimplifierIns: undefined,
                car: require('../../assets/head.png'),
            }
        },
        methods: {
            // 地图初始化
            initMap() {
                this.$refs.allmap.style.height = (document.documentElement.clientHeight || document.body.clientHeight) - 134 + 'px';
                this.aMap = new AMap.Map('allmap', {
                    zoom: 15, // 地图缩放级别
                    resizeEnable: true, // 获取当前位置坐标
                });
                // 异步加载插件
                this.aMap.plugin(["AMap.ToolBar"], () => {
                    let toolBar = new AMap.ToolBar()
                    this.aMap.addControl(toolBar)
                });

                // 卫星图层
                this.satelliteLayer = new AMap.TileLayer.Satellite();

                this.getList()
            },
            getList() {
                this.orderLoading = true
                api.getOrderList(this.listQuery).then(res => {
                    console.log(res)
                    this.orderLoading = false
                    this.list = res.results
                }).catch(err => {
                    console.log(err)
                })
            },
            showLocus(id) {
                console.log(this.pathSimplifierIns)
                api.getRoute({ id }).then(res => {
                    console.log(res)
                    let lineArr = new Array()
                    res.results.locationRecords.forEach((item, i) => {
                        lineArr.push(new AMap.LngLat(item.lon, item.lat))
                    })
                    console.log(lineArr)
                    if(this.beginMarker || this.endMarker) {
                        this.aMap.remove(this.beginMarker)
                        this.aMap.remove(this.endMarker)
                    }

                    this.beginMarker = new AMap.Marker({
                        icon: this.beginIcon,
                        position: lineArr[0],
                        offset: new AMap.Pixel(-14, -35)
                    })
                    this.endMarker = new AMap.Marker({
                        icon: this.endIcon,
                        position: lineArr[lineArr.length-1],
                        offset: new AMap.Pixel(-14, -35)
                    })
                    this.aMap.add([this.beginMarker, this.endMarker])
                    // 绘制轨迹
                    pathSimplifierIns.setData([{ // 设置数据
                        name: '路线0',
                        path: lineArr
                    }])
                    this.locusPolyline = pathSimplifierIns.createPathNavigator(0, {
                        loop: true,     // 循环播放
                        speed: 200      // 巡航速度，单位千米/小时
                    })
                    this.locusPolyline.start()
                    this.aMap.setFitView(lineArr)
                }).catch(err => {
                    console.log(err)
                })
            },
            showSatelliteLayer(bol) {
                bol ? this.aMap.add(this.satelliteLayer) : this.aMap.remove(this.satelliteLayer);
            }
        },
        created() {
            this.$bus.$on('showSatelliteLayer', (bol) => { this.showSatelliteLayer(bol) })
        },
        mounted() {
            this.initMap()

            AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], (PathSimplifier, $) => {
                if (!PathSimplifier.supportCanvas) {
                    alert('当前环境不支持 Canvas！');
                    return;
                }
                var pathSimplifierIns = new PathSimplifier({
                    zIndex: 100,
                    //autoSetFitView:false,
                    map: this.aMap, //所属的地图实例
                    getPath: function(pathData, pathIndex) {
                        return pathData.path;
                    },
                    getHoverTitle: function(pathData, pathIndex, pointIndex) {
                        if (pointIndex >= 0) {
                            //point
                            return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
                        }
                        return pathData.name + '，点数量' + pathData.path.length;
                    },
                    renderOptions: {
                        renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
                    }
                });

                window.pathSimplifierIns = pathSimplifierIns;
                this.pathSimplifierIns = pathSimplifierIns;

                /*var navg1 = pathSimplifierIns.createPathNavigator(0, {
                    loop: true,
                    speed: 1000000,
                    pathNavigatorStyle: {
                        width: 24,
                        height: 24,
                        //使用图片
                        content: PathSimplifier.Render.Canvas.getImageContent(this.car, pathSimplifierIns.renderLater, function (e) {
                            alert('图片加载失败！')
                        }),
                        strokeStyle: null,
                        fillStyle: null,
                        //经过路径的样式
                        pathLinePassedStyle: {
                            lineWidth: 6,
                            strokeStyle: 'black',
                            dirArrowStyle: {
                                stepSpace: 15,
                                strokeStyle: 'red'
                            }
                        }
                    }
                });

                navg1.start();*/
            });
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .map-sum-head {
        padding: 15px 12px;
        border-bottom: 1px solid #ccc;
        position: relative;
        .title {
            color: #409EFF;
        }
        .filter-container {
            float: right;
            margin-top: -5px;
            .filter-item {
                width: 120px;
                margin-right: 10px;
            }
            .input-item {
                width: 200px;
                margin-right: 20px;
            }
        }
    }
    .aMap {
        position: relative;
        #allmap {
            height: 500px;
            overflow: hidden;
            /*background-color: rgba(0,0,0,.2);*/
            .anchorBL {
                display: none;
            }
        }
    }
</style>
