<!-- @desc:dk-list组件  @auth:周兴  @time:2023/1/4 9:26 -->
<template>
  <div>
    <div v-if="type==='drag'" class="list-item" draggable  @dragend="dragend($event,listItem)" :class="currentItemIndex === listIndex?'current-item':''" v-for="(listItem,listIndex) in list" :key="listIndex" @click="itemClick(listItem,listIndex)">{{listItem[label]}}</div>
    <div v-if="type==='show'" :style="{marginTop:listIndex>0?'3px':''}" class="list-item-show" v-for="(listItem,listIndex) in list" :key="listIndex" @click="itemClick(listItem,listIndex)">
      <div>{{listItem[label]}}</div>
      <div style="cursor: pointer;" @click="iconCloseClick({item:listItem,index:listIndex})"><Icon type="md-close" color="#3e7cd1"/></div>
    </div>
    <div v-if="list.length<=0" style="height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;font-size: 10px;color: #9d9d9d;">{{emptyMsg}}</div>
  </div>
</template>

<script>

export default {
  name:'DkList',
  props: {
    type:{
      type:String,
      default:'drag'
    },
    list:{
      type:Array,
      default:()=>[]
    },
    label:{
      type:String,
      default:'label'
    },
    emptyMsg:{
      type:String,
      default:'暂无数据'
    }
  },
  data(){
    return{
      currentItemIndex:-1
    }
  },
  methods: {
    itemClick(item,index){
      this.currentItemIndex = index;
      this.$emit('on-click',item,index)
    },
    dragend($event,listItem){
      this.$emit('on-list-dragend',listItem)
    },
    iconCloseClick({item,index}){
      this.$emit('on-icon-close-click',{item,index})
    }
  },
  created() {

  },
  mounted() {

  }
}
</script>
<style scoped>
 .list-item{
    /*background: rgba(136, 167, 246, 0.97);*/
   padding: 0 5px 0 5px;
 }

 .list-item:hover{
    background: #eff3fd;
 }

 .current-item{
   background:#88A7F6;
   color: #fff;
 }
 .current-item:hover{
   background:#5582f3 !important;
 }

 .list-item-show{
   padding: 0 5px 0 5px;
   background: #f3f9ff;
   color: #3e7cd1;
   border: 1px solid #3e7cd1;
   font-size: 10px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
</style>
