<template>
    <div class="riskPoint">
        <md-tab-bar
                v-model="current"
                :items="itmeList"
                :maxLength="5"
                @change="onTabChange"
                class="my-bar-item"
        >
            <template slot="item" slot-scope="{ item, currentName, index, items }">
                <div class="tab-bar-item">
                    <div class="text">
                        <span v-text="item.mapName"></span>
                    </div>
                </div>
            </template>
        </md-tab-bar>
        <div class="map-box"  v-if="mapArr.length > 0">
            <map2box1 @showVideoBox="goVideo" v-for="(item, index) in itmeList" :key="index" v-if="activeClass == index" :mapImg="item.mapRasterLayer" :mapArr="mapArr[index]"/>
        </div>

        <md-dialog
                title="直播"
                :closable="true"
                v-model="slotDialogVideo"
        >
            <!--<div class="dialog-banner" slot="header">
                <img src="http://img-hxy021.didistatic.com/static/strategymis/insurancePlatform_spu/uploads/27fb7f097ca218d743f816836bc7ea4a" alt="">
            </div>-->
            <div class="dialogVideo" id="video">

            </div>

        </md-dialog>
    </div>
</template>

<script>
    import map2box1 from './mapbox';
    import {TabBar, Dialog, Button, Toast} from 'mand-mobile';
    import {getMapList, getRiskPointList} from '@/api/risk_point';
    import {mapGetters} from 'vuex';

    export default {
        name: "",
        components: {
            [TabBar.name]: TabBar,
            [Dialog.name]: Dialog,
            [Button.name]: Button,
            map2box1
        },
        data() {
            return {
                current: 1,
                /*items: [
                    {name: 1, label: '精选'},
                    {name: 2, label: '全部'},
                    {name: 3, label: '满减券'},
                    {name: 4, label: '立减券'},
                    {name: 5, label: '免息券'},
                    {name: 6, label: '校园专享'},
                    {name: 7, label: '夜间优惠'},
                    {name: 8, label: '红包'},
                ],*/
                itmeList: [], //地图导航数据
                mapArr: [], //地图里面的点
                activeClass: 0,
                slotDialogVideo: false,
                slotDialogbtns: [
                    {
                        text: '关闭',
                    },
                ],
                videoUrl: ''
            }
        },
        created() {
        },
        computed: {
            ...mapGetters([
                'job_ticket_gId',
                'job_ticket_cId',
            ])
        },
        mounted(){
            if(this.$route.query.fromUrl){
                this.$store.dispatch('request_config/setBaseUrl', this.$route.query.fromUrl)
            }else{
                this.$store.dispatch('request_config/setBaseUrl', location.host)
            }
            // 所以接口传 aId=294，cId=1
            if(this.$route.query.aId && this.$route.query.cId){
                this.$store.dispatch('job_ticket/setReqConfig', {
                    aId: this.$route.query.aId,
                    cId: this.$route.query.cId,
                    gId: this.$route.query.gId,
                })
                this.getMapArrList()
            }else{
                this.$store.dispatch('job_ticket/setReqConfig', {
                    aId: '',
                    cId: '',
                    cgIdId: ''
                })
            }
        },
        methods: {
            goVideo(data){
                console.dir(data)
                /*this.$router.push({
                    path: '/video_playing',
                    query: {
                        ...this.$route.query,
                        url: data
                    }
                });*/

                this.videoUrl = data;
                // this.videoUrl = 'rtmp://58.200.131.2:1935/livetv/dftv';
                this.slotDialogVideo = true;
                var that = this
                setTimeout(function () {
                    var videoObject = {
                        container: "#video", //“#”代表容器的ID，“.”或“”代表容器的class
                        variable: "player", //该属性必需设置，值等于下面的new chplayer()的对象
                        autoplay: true, //自动播放
                        live: true,
                        // loaded: 'loadHandler',
                        // poster: '',  //定义播放器默认暂停时显示的一张图片地址。
                        rotation: 90,
                        html5m3u8: true, //是否使用hls，默认不选择，如果此属性设置成true，则不能设置flashplayer:true,
                        video: data //视频地址(必填)
                    }
                    // 定义一个对象
                    var player = new ckplayer(videoObject);
                    console.log(player)
                }, 1000)

            },
            onTabChange(item, index, prevIndex){
                console.log(index);
                this.activeClass = index;
            },
            async getMapArrList(){
                await getMapList({
                    gId: this.job_ticket_gId,
                    // aId: this.$route.query.aId,
                    cId: this.job_ticket_cId
                }).then(res => {
                    const {code, data, count, limit, page} = res;
                    if (code === 1) {
                        this.itmeList = data;
                        for(var i=0; i<this.itmeList.length; i++){
                            this.itmeList[i].name = i+1
                        }
                        console.log(this.itmeList)
                        //  获取地图里面的点、线、面
                        this.getRiskPointListFn();
                    }
                }).catch(err => {
                })
            },
            async getRiskPointListFn(){
                await getRiskPointList({
                    gId: this.job_ticket_gId,
                    // aId: this.$route.query.aId,
                    cId: this.job_ticket_cId
                }).then(res => {
                    const {code, data, count, limit, page} = res;
                    if (code === 1) {
                        this.itmeList.forEach((item)=>{
                            let arr = [];
                            data.forEach((itemChild)=>{
                                if(item.mapId == itemChild.entMapId){
                                    arr.push(itemChild);
                                }
                            })
                            this.mapArr.push(arr);
                        });
                    }
                }).catch(err => {
                })
            }
        }
    }
</script>

<style  lang="scss" type="text/scss">
    .riskPoint{
        .my-bar-item{
            height: 1.03rem;
        }
        .md-tab-bar-item{
            height: 1.03rem;
        }
        .dialogVideo{
            height: 20vh;
        }
    }
</style>