<template>
    <el-dialog class="ltk_dialog" :visible.sync="dialogVisible" top="10vh" width="70%" :before-close="handleClose">

        <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- <el-tab-pane label="边坡测量" name="first">
                <div class="first">
                    <div class="charts" v-for="(item, index) in firstList" :key="index">
                        <div ref="myCharts" class="charts-div charts_bg"></div>
                        <div ref="myCharts2" class="charts-div charts_bg2"></div>
                    </div>
                </div>

            </el-tab-pane> -->

            <el-tab-pane label="车辆轨迹" name="second" class="second_page">
                <div id="container" class="second"></div>

                <el-radio-group class="right" v-model="secondRadio" @change="secondChangeGroup">
                    <el-radio v-for="(item, index) in secondLineObj" :key="index" :label="item.name" border size="medium"></el-radio>
                </el-radio-group>

            </el-tab-pane>

            <el-tab-pane label="人员定位" name="third" class="third_page">
                <div id="container_2" class="third"></div>

                <div class="right">
                    <div class="title">人员当前位置</div>

                    <div class="right_div">
                        <div class="right_div_line">
                            <span>徐建成</span>
                            <span>6风门</span>
                        </div>

                        <div class="right_div_line">
                            <span>李振玉</span>
                            <span>6风门</span>
                        </div>

                        <div class="right_div_line">
                            <span>张键康</span>
                            <span>办公室</span>
                        </div>

                        <div class="right_div_line">
                            <span>王勇财</span>
                            <span>926分层</span>
                        </div>
                    </div>
                </div>
            </el-tab-pane>

            <el-tab-pane label="车辆信息" name="fourth">
                <div class="fourth">
                    <el-table :data="fourthTable" tooltip-effect="dark" height="90%" style="width: 100%">
                        <el-table-column label="状态" align="center">
                            <template slot-scope="scope">
                                <span class="zai_xian" v-if="scope.row.status">在线</span>
                                <span class="li_xian" v-if="!scope.row.status">离线</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="car_number" label="车牌号" align="center"></el-table-column>
                        <el-table-column prop="car_type" label="车辆类型" align="center"></el-table-column>
                        <el-table-column prop="terminal_type" label="终端类型" align="center"></el-table-column>
                        <el-table-column prop="terminal_id" label="终端标识" align="center"></el-table-column>
                        <!-- <el-table-column prop="type_name" label="品牌" align="center"></el-table-column> -->
                        <el-table-column prop="gvwr" label="载重" align="center"></el-table-column>
                        <el-table-column prop="last_online_time" label="最后登录时间" align="center"></el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
            
        </el-tabs>

    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            activeName: 'first',
            dataX: [45, 45],
            dataZ: [40, 35],
            firstList: [],

            secondRadio: '蒙AF6332',
            secondLineObj: [], // 车辆轨迹对象

            fourthTable: [
                {
                    car_number: "蒙AF6332",
                    car_type: "运输车",
                    terminal_type: "BSJM11-2",
                    terminal_id: "014146496720",
                    gvwr: 1,
                    last_online_time: "2020-10-02 20:29:57"
                },

                {
                    car_number: "蒙AF6332",
                    car_type: "运输车",
                    terminal_type: "BSJM11-4",
                    terminal_id: "014146434560",
                    gvwr: 3,
                    last_online_time: "2020-11-12 20:29:57"
                }
            ],
        }
    },

    methods: {

        core() {
            this.dialogVisible = true

            if (this.activeName == 'first') {
                this.firstList = [
                    {
                        sensorName: "DB-01",
                        disX: 0.00061,
                        disY: 0.00061,
                        disZ: 0.00122,
                    },

                    {
                        sensorName: "DB-02",
                        disX: 0.00061,
                        disY: 0.00061,
                        disZ: 0.00122,
                    },

                    {
                        sensorName: "DB-03",
                        disX: 0.00061,
                        disY: 0.00061,
                        disZ: 0.00122,
                    }
                ]
                setTimeout(() => {
                    for (let i in this.firstList) {
                        let item = document.getElementsByClassName("charts")[i];
                        let echartsItem = item.getElementsByClassName("charts-div");
                        let myChart = echarts.init(echartsItem[0]);
                        let myChart_2 = echarts.init(echartsItem[1]);
                        let params = this.firstList[i];
                        this.myCharts(myChart, params);
                        this.myCharts2(myChart_2, params);
                    }
                }, 1000);
            }

            if (this.activeName == 'second') {

                this.secondLineObj = [

                    {
                        name: '蒙AF6332',
                        path: [[116.968382, 45.490625], [116.986055, 45.499431], [117.000647, 45.509176], [117.003565, 45.512905], [116.99893, 45.526135]]
                    },

                    {
                        name: '蒙ABB159',
                        path: [[116.700986, 45.988673], [116.701307, 45.98874], [116.702219, 45.988784], [116.702734, 45.988482], [116.702413, 45.988207], [116.701431, 45.988285]]
                    },


                    {
                        name: '蒙AX9061',
                        path: [[116.968382, 45.490625], [116.986055, 45.499431], [117.000647, 45.509176], [117.003565, 45.512905], [116.99893, 45.526135]]
                    },

                ]


                let params = this.secondLineObj[0]
                setTimeout(() => {
                    this.secondMap(params.path)
                }, 1000);
            }

            if (this.activeName == 'third') {
                setTimeout(() => {
                    this.thirdMap()
                }, 1000);
            }
        },

        handleClose() {
            this.dialogVisible = false
        },

        handleClick(e) {
            this.activeName = e.name
            this.core()
        },

        myCharts(myChart, event) {
            const THAT = this;
            let option = {
                title: {
                    text: "传感器边坡水平位移" + event.sensorName + "号",
                    textStyle: {
                        align: "center",
                        fontSize: 16
                    },
                    top: "3%",
                    left: "1%"
                },

                legend: {
                    data: [
                        `传感器边坡水平位移${event.sensorName}号(左右${event.disX}) (前后${event.disY})`
                    ],
                    top: "3%",
                    right: "2%",
                },

                tooltip: {
                    formatter: function (params) {
                        if (params.data[0] == THAT.dataX[0]) {
                            return `传感器边坡水平位移${event.sensorName}号(左右${event.disX}) (前后${event.disY})  毫米`;
                        }
                    }
                },

                grid: {
                    bottom: "5%",
                    top: "8%"
                },

                xAxis: {
                    min: 0,
                    max: 100,
                    type: "value",
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    min: 0,
                    max: 100,
                    type: "value",
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }
                },
                series: [
                    {
                        name: `传感器边坡水平位移${event.sensorName}号(左右${event.disX}) (前后${event.disY})`,
                        data: [this.dataX],
                        type: "line",
                        symbol: "triangle",
                        symbolSize: 30,
                        symbol() {
                            return `image://data:image/png;base64,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`;
                        },
                        lineStyle: {
                            color: "green",
                            width: 4,
                            type: "dashed"
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: "yellow",
                            color: "blue"
                        }
                    }
                ]
            };
            myChart.setOption(option);
        },

        myCharts2(myChart, event) {
            const THAT = this;
            let option = {
                title: {
                    text: "传感器边坡竖向位移" + event.sensorName + "号",
                    textStyle: {
                        align: "center",
                        fontSize: 16
                    },
                    top: "3%",
                    left: "2%"
                },

                legend: {
                    data: [
                        `传感器边坡竖向位移${event.sensorName}号(沉降大小${event.disZ})`
                    ],
                    top: "3%",
                    right: "2%",
                },

                tooltip: {
                    formatter: function (params) {
                        if (params.data[0] == THAT.dataZ[0]) {
                            return `传感器边坡竖向位移${event.sensorName}号(沉降大小${event.disZ})  毫米`;
                        }
                    }
                },

                grid: {
                    bottom: "5%",
                    top: "8%"
                },

                xAxis: {
                    min: 0,
                    max: 100,
                    type: "value",
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    min: 0,
                    max: 100,
                    type: "value",
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }
                },
                series: [
                    {
                        name: `传感器边坡竖向位移${event.sensorName}号(沉降大小${event.disZ})`,
                        data: [this.dataZ],
                        type: "line",
                        symbol: "triangle",
                        symbolSize: 30,
                        symbol() {
                            return `image://data:image/png;base64,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`;
                        },
                        lineStyle: {
                            color: "green",
                            width: 4,
                            type: "dashed"
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: "yellow",
                            color: "blue"
                        }
                    }
                ]
            };
            myChart.setOption(option);
        },

        // 车辆轨迹
        secondMap(lineArr) {
            // 地图
            var map = new AMap.Map("container", {
                center: lineArr[0],//中心点坐标
            })

            map.clearMap()

            setTimeout(() => {

                var marker = new AMap.Marker({
                    map: map,
                    icon: 'http://jingkongyun.com:8090/a.png',
                    offset: new AMap.Pixel(-26, -13),
                    autoRotation: true,
                    angle: -90,
                })

                // 绘制轨迹
                var polyline = new AMap.Polyline({
                    map: map,
                    path: lineArr,
                    showDir: true,
                    strokeColor: "#28F", //线颜色
                    strokeWeight: 6, //线宽
                })

                var passedPolyline = new AMap.Polyline({
                    map: map,
                    strokeColor: "#AF5", //线颜色
                    strokeWeight: 6, //线宽
                })

                marker.moveAlong(lineArr, 1000);

                map.setFitView()

            }, 1000);

        },

        // 点击查看各个车辆轨迹
        secondChangeGroup(e) {
            for (let i of this.secondLineObj) {

                if (i.name == e) {
                    this.secondMap(i.path)
                    break
                }
            }
        },

        thirdMap() {
            // 地图
            var map = new AMap.Map("container_2", {

            });


            const arrPosition = [
                {
                    name: '',
                    position: [115.85402, 44.261389],
                },

                {
                    name: '',
                    position: [115.854052, 44.261515],
                },

                {
                    name: '',
                    position: [115.854776, 44.261043],
                },

                {
                    name: '',
                    position: [115.854342, 44.260129],
                },
            ]

            var polygonArr = [
                [115.854569, 44.262449],
                [115.8537, 44.261523],
                [115.852842, 44.260751],
                [115.853158, 44.260098],
                [115.853169, 44.259495],
                [115.854075, 44.258704],
                [115.855003, 44.258999],
                [115.855712, 44.259795],
                [115.855476, 44.260936],
                [115.854998, 44.261762],
                [115.85458, 44.262426],
            ];
            var polygon = new AMap.Polygon({
                map: map,
                path: polygonArr,//设置多边形边界路径
                strokeColor: "#FF33FF", //线颜色
                strokeOpacity: 0.2, //线透明度
                strokeWeight: 3,    //线宽
                fillColor: "#1791fc", //填充色
                fillOpacity: 0.35,//填充透明度
                // draggable: true
            });


            setTimeout(() => {
                // 遍历数组
                arrPosition.forEach(item => {
                    var Marker = new AMap.Marker({
                        map: map,
                        icon: "/image/ding_wei.png",
                        position: item.position,
                        offset: new AMap.Pixel(-13, -30),
                        title: item.name,
                        label: item.name,
                        size: 5
                    });
                });

            }, 1000);

            map.setFitView();
        },

    },

    computed: {
        isLtkDialog() {
            return this.$store.state.isLtkDialog;
        }
    },

    watch: {
        isLtkDialog(e) {
            var a = this.$store.state.compony_info
            this.activeName = e.params
            this.core()
        }
    }
}
</script>

<style lang="scss">
@import '@/assets/scss/var.scss';

.ltk_dialog {
    .el-dialog .el-dialog__body {
        height: 70vh;
    }

    .first {
        overflow-y: auto;
        @include scrollbar;

        .charts {
            display: flex;
            justify-content: space-between;
            margin-right: 0.3vw;

            .charts-div {
                width: 49%;
                height: 30vh;
                background-size: 100% 100%;
                margin-bottom: 2%;
                border: 1px solid #767676;
                border-radius: 5px;
            }

            .charts_bg {
                background-image: url('~@/assets/images/ltk_2.png');
            }

            .charts_bg2 {
                background-image: url('~@/assets/images/ltk_1.png');
            }
        }
    }

    .first,
    .second,
    .third,
    .fourth {
        height: 60vh;
    }

    .second_page {
        display: flex;

        .second {
            width: 90%;
        }

        .right {
            width: 9%;
            display: flex;
            flex-direction: column;
            margin-left: 1%;

            .el-radio {
                margin: 0;
                margin-bottom: 1vh;
            }
        }
    }

    .third_page {
        display: flex;

        .third {
            width: 85%;
            margin-right: 1%;
        }

        .right {
            width: 14%;
            .title {
                font-size: 20px;
                color: #333;
            }

            .right_div_line {
                line-height: 2.5;
                display: flex;
                justify-content: space-between;
            }
        }
    }

    .fourth {
        .one {
            color: #096bfc;
            cursor: pointer;
        }

        .two {
            color: #d61d50;
            margin: 0 1vw;
            cursor: pointer;
        }
    }
}
</style>

