<template>
  <div class="example-list" v-loading="loading">
    <el-scrollbar style="height:100%;" v-if="exampleList && exampleList.length && queryParams.RelatedInstance">
      <div v-for="item in exampleList" :key="item.ObjectID" :class="{'example-item':true,'active':item.active}" @click="handleChangeExample(item)"
        :title="`${item.ObjectLocalName}（${item.BuildLocalName?item.BuildLocalName:item.BuildId?item.BuildId:'未明确建筑'}-${item.FloorLocalName?item.FloorLocalName:item.FloorId?item.FloorId:'未明确建筑'}）`">
        <span>{{`${item.ObjectLocalName}（${item.BuildLocalName?item.BuildLocalName:item.BuildId?item.BuildId:'未明确建筑'}-${item.FloorLocalName?item.FloorLocalName:item.FloorId?item.FloorId:'未明确建筑'}）`}}</span>
      </div>
    </el-scrollbar>
    <div class="no-data" v-else>
      <div class="position-icon">
        <i class="icon-wushuju iconfont"></i>
        暂无数据
      </div>
    </div>
  </div>
</template>

<script>
import { getTabFunNumObjInstance } from '@/api/scan/request'

export default {
  props: {
    queryParams: {
      type: Object
    }
  },
  data() {
    return {
      loading: false,
      exampleList: [],
    }
  },
  methods:{
    getExampleData() {
      this.loading = true
      if(this.queryParams.MeterFunc && this.queryParams.RelatedInstance){
        getTabFunNumObjInstance({Filters: `MeterFuncid='${this.queryParams.MeterFunc}';Related='true'`}, res => {
          this.loading = false
          this.exampleList = res.Content.map(item => {
            item.active = false
            return item
          })
          if (this.exampleList.length) {
            this.handleChangeExample(this.exampleList[0]);
          }
        })
      } else {
        this.loading = false
      }
    },
    handleChangeExample(example) {
      this.exampleList.map(item => {
        example.ObjectID == item.ObjectID?item.active = true:item.active = false
        return item
      })
      this.$emit('changeExample',example)
    },
  },
  watch: {
    'queryParams.MeterFunc': {
      handler(newdata, olddata) {
        this.exampleList = []
        this.getExampleData()
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.example-list{
  height: 100%;
  line-height: 48px;
  .no-data{
    height: 100%;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    .position-icon{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  }
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .example-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    span {
      margin-left: 10px;
    }
  }
  .example-item.active,
  .example-item:hover {
    background-color: #f5f7fa;
    color: #000;
  }
}
</style>