<template>
  <section class="equip-list">
    <div v-for="item in items" :key="item.sbid" :title="item.sbmc" @click="selectClick(item)">{{ item.sbmc }}</div>
  </section>
</template>

<script>
import ThgisLocation from '../common/ThgisLocation'

export default {
  name: 'ThgisEquipList',
  props: {
    items: { type: Array, default: () => [] },
    itemClick: { type: Function, default: () => {} }},
  data() {
    return { rs: {}}
  },
  mounted() {
  },
  methods: {
    selectClick(item) {
      if (this.itemClick) {
        this.itemClick.call(null, item)
      } else {
        ThgisLocation.clearLayerByName('ThgisEquipList')
        if (typeof item.shape === 'string') {
          item.shape = JSON.parse(item.shape)
        }
        const effect = { color: 'red', istransform: 0, iscenter: false, width: 5 }
        const events = { click: this.itemClick }
        this.rs = ThgisLocation.locationGraphics('ThgisEquipList', [item], events, effect)
      }

    }
  }
}
</script>

<style scoped>
.equip-list{
  padding:10px 20px 10px 20px;
  line-height: 30px;
}
.equip-list div{
  border: 1px solid #c0c4cc;
  border-radius: 6px;
  /* line-height: 30px; */
  white-space: nowrap;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  cursor: pointer;
  margin-top: 5px;
  padding-left: 5px;
}
</style>
