<template>
    <div>
        <div class="sfdsc-search-container">
            <a-input-search
                placeholder="搜索车辆"
                enter-button="搜索"
                @search="onSearchResult"
                style="width: 300px"
            />
        </div>
        <div class="sfdsc-map-container">
            <el-amap
                vid="amap"
                ref="map"
                :resizeEnable="map.resizeEnable"
                :bubble="map.bubble"
                :zoom="map.zoom"
                :center="map.center"
            >
                <template v-for="(marker, index) in markers">
                    <el-amap-marker
                        v-if="marker.offset"
                        :key="index"
                        :position="marker.position"
                        :offset="marker.offset"
                        :draggable="true"
                        :icon="marker.icon ? marker.icon : markerIcon"
                        :label="marker.markerLabel||''"
                    ></el-amap-marker>
                    <el-amap-marker
                        v-else
                        :key="index"
                        :position="marker.position"
                        :draggable="true"
                        :icon="marker.icon ? marker.icon : markerIcon"
                        :label="marker.markerLabel||''"
                    ></el-amap-marker>
                </template>
            </el-amap>
        </div>
        <div class="sfdsc-tabContainer">
            <div class="title">监控车辆</div>
            <a-radio-group v-model="tabValue" button-style="solid">
                <a-radio-button value="0">全部 {{ tableData.length }}</a-radio-button>
                <a-radio-button value="1">运行 {{ runTableList.length }}</a-radio-button>
                <a-radio-button value="2">停车 {{ stopTableList.length }}</a-radio-button>
            </a-radio-group>
        </div>

        <!-- 全部车辆表格 start-->
        <standard-table
            :bordered="false"
            :loading="tableLoading"
            :columns="tableColumns"
            :dataSource="tableData"
            :pagination="false"
            rowKey="id"
            v-show="tabValue === '0'"
        ></standard-table>
        <!-- 全部车辆表格 end -->

        <!-- 运行中车辆表格 start-->
        <standard-table
            :bordered="false"
            :loading="tableLoading"
            :columns="tableColumns"
            :dataSource="runTableList"
            :pagination="false"
            rowKey="id"
            v-show="tabValue === '1'"
        ></standard-table>
        <!-- 运行中车辆表格 end -->

        <!-- 停止车辆表格 start-->
        <standard-table
            :bordered="false"
            :loading="tableLoading"
            :columns="tableColumns"
            :dataSource="stopTableList"
            :pagination="false"
            rowKey="id"
            v-show="tabValue === '2'"
        ></standard-table>
        <!-- 停止车辆表格 end -->
    </div>
</template>

<script>
import StandardTable from "@/components/table/StandardTable";
import { request } from "../../utils/request";

export default {
    name: "GpsRTMS",
    props: {},
    components: {
        StandardTable
    },
    data() {
        return {
            tabValue: "0",
            /**
             * 高德地图相关参数配置
             * */
            markers: [],
            markerIcon: require("@/assets/img/car.png"),
            map: {
                resizeEnable: true,
                bubble: true,
                zoom: 15,
                center: [116.478935, 39.997761]
            },
            /**
             * 表格相关
             */
            tableColumns: [
                {
                    title: "状态",
                    customRender: (text) => {
                        return (
                            <span>
                                <a-tag color={text.speed === 0 ? "red" : "green"}>
                                    {text.speed === 0 ? "停车" : "运行"}
                                </a-tag>
                            </span>
                        )
                    }
                },
                {
                    title: "车牌号",
                    dataIndex: "licenceNumber"
                },
                {
                    title: "定位时间",
                    dataIndex: "pt",
                    customRender: (text) => {
                        //时间戳转换
                        return <span> {this.transformDateTime(text)} </span>;
                    }
                },
                {
                    title: "行驶速度(km/h)",
                    dataIndex: "speed"
                },
                {
                    title: "探头1温度(℃)",
                    dataIndex: "t1"
                },
                {
                    title: "探头2温度(℃)",
                    dataIndex: "t2"
                },
                {
                    title: "探头3温度(℃)",
                    dataIndex: "t3"
                },
                {
                    title: "探头4温度(℃)",
                    dataIndex: "t4"
                },
                {
                    title: "经度",
                    dataIndex: "lng"
                },
                {
                    title: "纬度",
                    dataIndex: "lat"
                },
                {
                    title: "当前地址信息",
                    dataIndex: "addr"
                },
                {
                    title: "车辆状态",
                    dataIndex: "status"
                },
                {
                    title: "累计行驶里程(km)",
                    dataIndex: "miles"
                }
            ],
            tableData: [],
            tableLoading: false,
            runTableList: [], //运行
            stopTableList: [] //停车
        };
    },
    watch: {},
    mounted() {},
    methods: {
        reset() {
            this.markers = [];
            this.map = {
                resizeEnable: true,
                    bubble: true,
                    zoom: 15,
                    center: [116.478935, 39.997761]
            };
            this.tableData = [];
            this.tableLoading = false;
            this.runTableList = [];
            this.stopTableList = [];
        },
        addMarker(arr) {
            if(arr.length) {
                this.markers = arr.map(item=>{
                    let {
                        marker: {id,position,icon,offset},
                        label: {offset: label_offset, content}
                    } = item;
                    return {
                        id,position,icon,offset,
                        markerLabel: {offset: label_offset, content}
                    }
                });
                console.log(this.markers)
            }else {
                this.markers = [];
            }
        },
        subMarker(arr) {
            if(arr.length) {
                arr.forEach(item=>{
                    let index = this.markers.findIndex(i=>i.id==item.id);
                    if(index !== -1) {
                        this.markers.splice(index,1);
                    }
                })
            }
        },
        cleanMarkers() {
            this.markers = [];
        },
        /**
         * 地图搜索
         * */
        onSearchResult(e) {
            const value = e;
            let list = this.tableData;
            let vehicleData = [];
            if (list && list.length > 0) {
                vehicleData = list.filter((item) => {
                    return item.licenceNumber === value;
                });
                if (vehicleData && vehicleData.length > 0) {
                    // 自动定位到搜索区域
                    const { lng, lat } = vehicleData[0];
                    this.map.center = [lng, lat];
                }
            }
        },
        transformDateTime(time) {
            if (time) {
                let date = new Date(time);
                const Y = date.getFullYear() + "-";
                const M =
                    (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) +
                    "-";
                const D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                const h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
                const m =
                    (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":";
                const s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                return Y + M + D + " " + h + m + s;
            } else {
                return "-";
            }
        },
        /*
 {
    deviceIds:["GPS设备ID1"，"GPS设备ID2"],
    licenceNumbers:["车牌号1","车牌号2"],
    deviceNumbers:["设备号1","设备号2"],
    deviceProvider:"供应商""
}
    */
        realtimePosition(paramsObj,isParam) {
            // let deviceIds = paramsObj.deviceIds;
            // let deviceProvider = paramsObj.deviceProvider;
            // if (deviceIds && deviceIds.length > 0 && !deviceProvider) {
            //     this.$message.warn("请输入供应商");
            //     return;
            // }
            // if ((!deviceIds || deviceIds.length == 0) && deviceProvider) {
            //     this.$message.warn("请输入设备号");
            //     return;
            // }

            request({
                url: "/gpsData/selectLastGpsData",
                data: paramsObj
            }).then((res) => {
                this.tableLoading = false;
                if (res.code == "20000") {
                    let data = res.data;
                    let markers = [];
                    let list = [];
                    list = data.filter((item) => {
                        if (item.lng && item.lat) {
                            return item;
                        }
                    });
                    markers = list.map((ele) => {
                        let { lng, lat, licenceNumber } = ele;
                        return {
                            position: [lng, lat],
                            markerLabel: {
                                content: licenceNumber,
                                offset: [10, -20]
                            }
                        };
                    });
                    this.markers = markers;
                    //动态设置地图中心点,方便看到小车
                    if (markers.length > 0) {
                        const { position } = this.markers[0];
                        this.map.center = position;
                    }

                    this.runTableList = data.filter((item) => {
                        return item.speed > 0;
                    });
                    this.stopTableList = data.filter((item) => {
                        return item.speed === 0;
                    });
                    // 前端造唯一id
                    this.tableData = data.map((item, index) => {
                        let value = item;
                        value.id = index;
                        return value;
                    });

                    if (isParam === "router") {
                        let vehicleData = this.tableData.find(item=>item.licenceNumber==this.form.selectedVehicleKeys[0]);
                        if(vehicleData) {
                            this.map.center = [vehicleData.lng, vehicleData.lat];
                        }
                    }
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
/deep/.amap-marker-label {
    border: none;
    font-weight: bold;
}
</style>
