<template>
    <div class='monitor-warning-container'>
        <div class="list-container">
            <div class="list-item" v-for="(item,index) in showList" :key="index">
                <p class="item-address">{{ item.detailed_address}}</p>
                <div class="nav"></div>
                <p class="item-time">{{ item.start_time }}
                    <el-button size="mini" type="primary" @click="lookDetail(item)" style="float:right;position: relative;right:8px;top:-24px;" round>查看</el-button>
                </p>
            </div>
            <div class="more-button" @click="listQuery.pageIndex++;getList('add');">加载更多>>></div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { getMethodCommon } from '../../../api/common';
export default {
   components: {},
   props:[],
   data() {
        return {
            listQuery:{
                county:"费县",
                pageIndex:1,
                pageSize:10
            },
            showList:[],
            list:[],
            imageToken:null,
        };
   },
   computed: {

   },
   watch: {

   },
   methods: {
        getImageToken(){
            axios({
                method:"get",
                url:"http://221.2.83.254:9001/api/YingJiJu/QueryFireToken?username=test&password=Bsh4oyWqURA57%2FKcppKqf2knhoUVI3sjGcZuTwUiVZmorKPbOYMkTpchoULYv1OnWVmMGq%2FtaKT9Z7UZBuGcZO%2BYnm33tWhTMQQFKS1k71d99GinTaJje%2FV9MDksDP%2B6Rj35mKvLGnFdbvdAxfOdyKodaIEdKjgIjUiSi5kpoiSn%2BwZ8knYpgTHsWHjWPL8j7zDJKOcBQUpyMyHFdMUOg6%2BGhp9dIrk98AqbdXy8owaQGdjmbcz0TyvfCWCiA53PQDGKH3qjSHHipUGHD2jWaMnx7gSV4ytMaH3X8P%2Bw7QxoZIVCDTB24E9OWNeopb53FAJOTnvO%2FK0JLg2K%2Buonlw%3D%3D"
            }).then(res=>{
                this.imageToken = res.data;
                this.getList('add');
            })
        },  
        getList(type){
            if(type == 'update'){
                this.listQuery.pageIndex = 1;
            }else if(type=="add"){
                
            }

            getMethodCommon("/YingJiJu/LoadInfo",this.listQuery).then(res=>{
                if(res.code == 200){
                    this.list = res.data;
                    this.list.forEach((item,index)=>{
                        let images = JSON.parse(item.images_path)
                        let newImages = [];
                        if(images && images.length > 0){
                            images.forEach((it,idx)=>{
                                let img = it.replace("10.176.126.121:8087","221.2.83.254:7011")
                                newImages.push(img+"?token="+this.imageToken);
                            })
                        }
                        this.list[index].images = newImages;
                    })

                    if(type == 'update'){
                        this.showList = this.list;
                    }else if(type=="add"){
                        this.showList =  this.showList.concat(this.list);
                    }
                }
            })

        },
        lookDetail(item){
            this.$emit("lookDetail",item);
            let lngLat = [item.longitude,item.latitude]
            window.globalmap.flyToPoint(lngLat,{radius:2000,"pitch":-90});
        }
   },
   created() {
        this.getImageToken();
   },
   mounted() {
        let _this = this;
        setInterval(function(){
            _this.getList("update");
        },10000);
   },
   destroyed() {
   
   },
}
</script>

<style scoped>
    .monitor-warning-container{
        width:100%;
        height:100%;
    }

    .list-container{
        padding:0px 10px 20px 20px;
        width:100%;
        height:100%;
        overflow:auto;
    }

    .list-container .list-item{
        background:#082929;
        padding:12px 0px 12px 40px;
        margin-bottom:12px;
        border:1px dashed #666;
    }

    .list-container .list-item .item-address{
        font-size: 15px;
        color:#fff;
        margin:0px;
        padding-bottom:8px;
        position:relative;
    }

    .list-container .list-item .item-address::before{
        content:"";
        height:8px;
        width:8px;
        position:absolute;
        top:8px;
        left:-24px;
        background:#0C68E1;
        border-radius: 50%;
    }

    .list-container .list-item .nav{
        width:80%;
        height:1px;
        border: 1px solid;
        border-image: linear-gradient(90deg, rgba(18, 109, 109, 1), rgba(86, 254, 254, 0)) 1 1;
    }

    .list-container .list-item .item-time{
        font-size: 14px;
        color:#999;
        margin:0px;
        margin-top:8px;
    }

    .more-button{
        width:100%;
        height:20px;
        line-height:20px;
        color:#fff;
        text-align: center;
        cursor:pointer;
    }




    ::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0;
}

::-webkit-scrollbar {
  height: 10px;
  width: 10px;
  background: transparent;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  padding-top: 100px;
  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.4);
  min-height: 28px;
  border-radius: 4px;
  background-clip: padding-box;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0;
}

::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
    inset -1px -1px 0 rgba(0, 0, 0, 0.07);
  background-color: #797979;
}

::-webkit-scrollbar-thumb:active {
  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
  background-color: rgba(0, 0, 0, 0.5);
}
</style>