<!--
 * @Description: 查询结果列表项
 * @Author: 王晓颖
 * @Date: 2021-03-08 09:48:26
 -->
<template>
  <div class="list-item" @click="itemClick">
    <div class="list-item-left">
      <div class="item-count"> {{ index + 1 }}</div>
      <img src="@/assets/global_images/point.png" class="item-icon">
    </div>
    <div class="list-item-right">
      <div class="list-item-right-row"><div>名称：</div><div :title="data.feature.properties.小类名称" class="content">{{ data.feature.properties.小类名称 }}</div></div>
      <div class="list-item-right-row"><div>编码：</div><div :title="data.feature.properties.编码" class="content">{{ data.feature.properties.编码 }}</div></div>
      <div class="list-item-right-row"><div>地址：</div><div :title="data.feature.properties.编码" class="content">{{ data.feature.properties.编码 }}</div></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchItem',
  props: {
    index: {
      type: Number,
      required: true
    }, // 序号
    data: {
      type: Object,
      required: true
    } // 数据
  },
  // mounted() {
  //   debugger
  //   console.log(this.data.feature)
  // },
  methods: {
    // 点击数据项
    itemClick() {
      console.log('点击item')
      this.$emit('click', this.data)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.list-item{
  width:100%;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin: 10px 2px;
  border:1px solid #d9d9d9;
  border-radius: 3px;
  .list-item-left{
    width:30px;
    height: 100%;
    position: relative;
    .item-count{
      position:absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
      z-index: 100001;
      color:#fff;
    }
    .item-icon{
      position:absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
    }
  }
  .list-item-right{
    flex:1;
    padding-left:10px;
    .list-item-right-row{
      width: 220px;
      height:18px;
      line-height: 15px;
      display: flex;
      justify-content: start;
      .content{
        flex: 1;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
    }
  }
}
  .list-item:hover{
    cursor: pointer;
    /*background-color: #f0f0f0;*/
    -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */
    box-shadow: 0px 1px 3px #d9d9d9;
  }
</style>