<template>
  <div>
    <el-row>
      <el-button type="primary" @click="openTagePanel">从列表中选择数据</el-button>
      <el-button v-if="canAdd" type="primary" @click="creatTage">新建标签</el-button>
    </el-row>
    <template v-for="tag in dynamicTags">
      <el-tag
        v-if="tag[rowKey]"
        :key="tag[rowKey]"
        :disable-transitions="false"
        closable
        style="margin-right: 10px"
        @close="tagHandleClose(tag)">
        {{ tag[rowName] }}
      </el-tag>
    </template>
    <select-label ref="selectLabel" :lazy="lazy" :load-node="loadNode" :limit="limit" :check-strictly="checkStrictly" :title="title" append-to-body @getResult="getChooseTage"/>
    <edit-label ref="editLabel" append-to-body/>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import waves from '@/directive/waves'
import selectLabel from '../Label/components/selectLable.vue'
import editLabel from '../Label/components/editLabel.vue'
export default {
  components: { Pagination, selectLabel, editLabel },
  directives: { waves },
  props: {
    canAdd: {
      type: Boolean,
      default: false
    },
    // 这里有个bug => 这里传入的空数组必须有个 '',但是不会修复，只能这样凑合一下
    dynamicTags: {
      type: Array,
      default: () => ([])
    },
    labels: {
      type: Array,
      default: () => ([])
    },
    lazy: {
      type: Boolean,
      default: false
    },
    loadNode: {
      type: Function,
      default: function() {}
    },
    rowKey: {
      type: String,
      default: ''
    },
    rowName: {
      type: String,
      default: ''
    },
    checkStrictly: {
      type: Boolean,
      default: true
    },
    limit: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: '编辑'
    }
  },
  data() {
    return {
      uuid: ''
    }
  },
  methods: {
    openTagePanel() {
      if (this.labels.length > 0) {
        this.$refs.selectLabel.init({ labels: this.labels })
      } else {
        this.$refs.selectLabel.init({})
      }
    },
    getChooseTage(e) {
      const list = e.e
      const labelList = []
      for (let listKey = 0; list.length > listKey; listKey++) {
        const index = labelList.findIndex(item => { item[this.rowKey] === list[listKey][this.rowKey] })
        if (index < 0) {
          const label = JSON.parse(JSON.stringify(list[listKey]))
          label.label = label.NAME
          label.value = JSON.stringify(list[listKey])
          const index = labelList.findIndex(item => item.value === label.value)
          if (index < 0) {
            labelList.push(label)
          }
        }
      }
      if (labelList.length === 1) {
        this.$emit('getChooseOne', { info: labelList[0] })
      }
      this.$emit('update:dynamicTags', labelList)
    },
    creatTage() {
      this.$refs.editLabel.init({ TYPE: '0' })
    },
    tagHandleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      if (this.dynamicTags.length === 0) this.dynamicTags.push('')
    }
  }
}

</script>

<style scoped>
.information >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
