<template>
  <div class="selected-props-list">
    <ul v-if="list && list.length>0">
      <li v-for="(item,index) in list"
          :key="index"
          :data-val="item.val"
          :class="{'active':activeIndex === index}"
          @click.stop="onItem(item,index)"
          @dblclick.stop="onDbItem(item,index)">
        {{item.name}}
      </li>
    </ul>
    <div v-else>
      <p>暂无相关数据</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "SelectedPropsList",
    components: {},
    props:{
      activeIndex:{
        type:Number,
        default:null
      },
      list:{
        type:Array,
        default: function () {
          return [] // {name,val}
        }
      }
    },
    data() {
      return {}
    },
    computed: { },
    mounted() {
    },
    methods: {
      onItem(item,index){
        this.$emit('item',item,index);
      },
      onDbItem(item,index){
        this.$emit('dbItem',item,index);
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .selected-props-list {
    width: 300px;
    height: 240px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin: 0 auto;
    ul{
      padding: 5px;
      margin: 0;
      list-style: none;
    }
    li{
      list-style: none;
      padding: 0 10px;
      margin: 4px 0;
      cursor: pointer;
      line-height: 24px;
      b{
        font-weight: normal;
      }
      &.active{
        background: #3a8ee6;
        color: #fff;
      }
    }
    p{
      text-align: center;
      margin: 15px auto;
    }
    .col-input-item{
      background: #fff;
    }
  }
</style>
