<template>
   <div>
       <div style="height: 60px; text-align: center; font-size: 20px; display: block; font-weight: bold; background-color: #0071a9; color: #fff; line-height: 60px; ">
                        <span class="lib_title">{{dataxself.title}}</span>
        </div>      
        
         <input type="text" v-model="search" style="height: 24px; text-align: center;  line-height: 24px; width:95%;margin: 5px;">
         <div style="height: calc(100% - 84px);overflow-y:auto">
            
                <div>
                    <div class="layui-colla-item" v-for="(item,index) in data_filter" style="width:100%;height:100%;">
                        <h4 class="layui-colla-title" v-bind:style="{backgroundColor:item.color}" >
                          <div lass="layui-colla-item"   @click="locate(item,index,$event)" style="float:left">  {{item.name}}</div>
                          <img  style="height:25px;width:26px;margin-top: 10px;float: right;margin-right: 10px;" src="img/zfy.png" @click="locus(item,index,$event)">
                          <img v-show="item.deviceId.indexOf('PU_')>-1" style="height:25px;width:26px;margin-top: 10px;float: right;margin-right: 5px;" src="img/photo.png" @click="open(item,index,$event)">
                        </h4>                 
                    </div>
                </div>
            </div>
   </div>
</template>

<script>
  module.exports = {
        data: function() {
            return {
                  search:"",
            }
        }, 
        props:["dataxself"],
        methods:{
             locate:function(item){
                 parent.vue_left.locate(item);
             },open:function(item){
                layui_open_option = {
                    type: 2,
                    title:  '<span class="layer_span9">执法记录仪</span>',
                    area: ['977px', '678px'], //宽高
                    content: "/intercom?device_id="+item.deviceId
                };
                layerOpen(layui_open_option);
             },
             locus:function(item){
                 parent.vue_left.playPaths(item);
            }
        },
        computed:{
            datax:{
                    set:function(value){
                    },get:function(){
                      return this.dataxself.data[0].data;
                    }
            },data_filter: function () {
                  var _search = this.search;
                    if (_search) {
                            var temp = [];
                        if(this.datax){
                            for (var i = 0; i < this.datax.length; i++) {
                                if (this.datax[i].name&&this.datax[i].name.strcontains(_search)) {
                                    console.log(this.datax[i]);
                                    temp.push(this.datax[i]);
                                }
                            }
                            return temp;
                        }
                    }
                    return this.datax;
           }
        },
        mounted(){//挂载的时候执行
        }
  }
</script>
<style >
  @import "../../js/jquery-2.2.3.js";

</style>

