<template>
  <div class="k-wordpane">
    <ul class="k-word-row clearfix" ref="word" @click="changeIndex">
      <li class="active">ABCDE</li>
      <li>FGHIJ</li>
      <li>KLMNO</li>
      <li>PQRST</li>
      <li>UVXYZ</li>
    </ul>
    <div class="k-word-list-wrap">
      <ul class="k-word-list" v-if="showList && showList.length">
        <li class="k-word-item" v-for="(item, index) in showList" :key="index">
          <label class="k-word-item_label">{{item.label}}</label>
          <ul class="clearfix">
           <li class="k-word-item_name" v-for="(subitem, subindex) in item.names"
             :key="subindex"
             :class="{'active': selectedTags.indexOf(subitem.id) != -1}"
             @click="toSelector(subitem, $event)">
            {{subitem.name}}
            </li>
          </ul>
        </li>
      </ul>
      <div v-else class="k-word-nodata">暂无数据</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "KWordpane",
  props: {
    label: {
      type: String,
      default: ''
    },
    selectedTag: {
      type: Array,
      default: []
    }
    // data: {
    //   type: Array,
    //   default: []
    // }
  },
  watch: {

  },
  data() {
    return {
      // list: this.data, // 所有数据
      showList: [] // 要显示面板的数据
    }
  },
  mounted() {
    this.changeIndex({target: this.$refs.word.querySelector('li'), currentTarget: this.$refs.word})
  },
  computed: {
    selectedTags () {
      let arr = []
      this.selectedTag.forEach(item => {
        arr.push(item.id)
      })
      return arr
    }
  },
  methods: {
    changeIndex (events) { // 改变检索引
      events.currentTarget.querySelectorAll('li').forEach(item => {
        item.className = ''
      })
      let target = events.target
      let word = target.textContent
      target.className = 'active'
      // 远程
      this.$parent.remoteMethod(word, (data) => {
        let arr = []
        data.forEach(item => {
          if (word.indexOf(item.label) !== -1) {
            arr.push(item)
          }
        })
        this.showList = arr
      })
    },
    // 输出到selector
    toSelector (subitem, events) {
      let clsname = events.target.className
      if (clsname.indexOf('active') !== -1) return
      events.target.className = clsname + ' active'
      this.$emit('toSelector', subitem.name, subitem.id)
    }
  }
}
</script>
<style lang="less">
@import '../styles/src/global.less';
.k-wordpane ul{
  padding-left: 0;
  list-style: none;
}
.k-word-nodata{
  padding: 10px 0;
  text-align: center;
}
.k-wordpane{
  width: 452px;
  max-height: 306px;
  border: 1px solid @ccc;
  border-radius: 2px;
}
.k-word-row{
  display: flex;
  width: 100%;
  height: 35px;
  font-size: 12px;
  border-bottom: 1px solid  #E0E0E0;
  li{
    flex: 1;
    -webkit-flex: 1;
    height: 100%;
    line-height: 36px;
    color: @999;
    text-align: center;
    cursor: pointer;
    &.active{
      color: @primary;
      border-bottom: 2px solid @primary;
    }
  }
}
.k-word-list-wrap{
  max-height: 270px;
  overflow-y: auto;
}
.k-word-list{
  height: auto;
  padding-bottom: 19px;
}
.k-word-item{
  position: relative;
  margin: 10px 0 -17px 10px;
  padding-left: 22px;
  font-size: 12px;
  .k-word-item_label{
    position: absolute;
    left: 0;
    display: inline-block;
    color: @primary;
  }
  &>ul{
    display: inline-block;
    width: 100%;
  }
  .k-word-item_name{
    float: left;
    width: 25%;
    line-height: 24px;
    cursor: pointer;
    &.active, &:hover{
      color: @primary;
      font-weight: bold;
    }
  }
}
</style>

