/**
* @Author: 858834013@qq.com
* @Name: labelList
* @Date: 2022-05-25
* @Desc:
*/
<template>
  <div class="labelList">
    <div class="labelsbody">
      <div class="labels">
        <img src="../assets/icon_search.png" alt="">
        <el-input @change="labelFindList" placeholder="请输入关键词" v-model="name"/>
      </div>
      <div class="pop" @click="show=false" v-if="show"></div>
      <div class="lists scrollBar" v-if="show">
        <p @click="handleSelect(item)" v-for="(item,index) in labelList" :key="index">
          {{ item.name }}
        </p>
      </div>
    </div>
    <p class="tips">*您可添加最多3个作品话题</p>
    <div class="enumeratedValuesList">
      <div class="tag" v-for="(item,index) in list" :key="index">
        <span>#{{ item.value }}</span>
        <img class="cur" @click="handleClose(item)" src="../assets/icon_delete.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import { labelFindList } from '@/api/user'

export default {
  name: 'labelList',
  components: {},
  props: {
    enumerationValue: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      list: [],
      show: false,
      labelList: [],
      name: ''
    }
  },
  mounted () {
    // this.getList()
  },
  methods: {
    handleSelect (items) {
      this.name = ''
      var haskey = false
      var item = {
        value: items.name,
        name: items.id
      }
      this.list.forEach((type) => {
        if (type.name === item.name) {
          haskey = true
        }
      })
      if (haskey) {
        this.$message.error('已添加此关键词')
        return
      }
      if (this.list.length < 3) {
        this.list.push(item)
        this.show = false
      } else {
        this.$message.error('最多可添加3个标签')
      }
      this.getEnumeratedValues()
    },
    getList () {
      if (this.enumerationValue) {
        this.list = this.enumerationValue.split(',')
      }
    },
    getData (data) {
      this.list = data
    },
    // 获取数据
    labelFindList () {
      // var that = this
      labelFindList({
        name: this.name,
        pageNum: 1,
        pageSize: 1000
      }).then(res => {
        if (res.code === 200) {
          this.labelList = res.data.list
          if (this.labelList.length > 0) {
            this.show = true
          }
        }
      })
    },
    handleClose (tag) {
      this.list.splice(this.list.indexOf(tag), 1)
      this.getEnumeratedValues()
    },
    getEnumeratedValues () {
      var list = []
      this.list.forEach((type) => {
        list.push(type.name)
      })
      this.$emit('getdata', list.join(','))
      return list.join(',')
    }
  }
}

</script>
<style lang="scss" scoped>
.enumeratedValuesList {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  width: 480px;
  height: 50px;
  background: #EDEDED;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  border: 1px solid #ACACAC;
  padding-left: 20px;

  .tag {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    height: 50px;
  }
}

.labelList {
  width: 500px;
}

.tips {
  width: 500px;
  text-align: right;
  font-size: 18px;
  font-family: Heiti SC-Light, Heiti SC;
  font-weight: 300;
  color: #7D7D7D;
  margin-bottom: 23px;
  margin-top: 11px;
}

.labels {
  height: 50px;
  background: #FFFFFF;
  border-radius: 20px 20px 20px 20px;
  opacity: 1;
  position: relative;
  z-index: 51;
  border: 1px solid #ACACAC;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  overflow: hidden;
  width: 500px;

  img {
    width: 24px;
    height: 24px;
    margin-left: 22px;
    margin-right: 10px;
  }

  :deep(.el-autocomplete) {
    height: 50px;
    width: 400px;
    outline: none;
    line-height: 50px;
    border: none;
    font-size: 24px;
    resize: none;
    box-shadow: none;
  }

  :deep(.el-input) {
    height: 50px;
    width: 400px;
    outline: none;
    line-height: 50px;
    border: none;
    font-size: 24px;
    resize: none;
    box-shadow: none;
  }

  :deep(.el-input__wrapper) {
    height: 50px;
    width: 400px;
    outline: none;
    line-height: 50px;
    border: none;
    font-size: 24px;
    resize: none;
    box-shadow: none;
  }

  :deep(.el-input__inner) {
    height: 50px;
    width: 400px;
    outline: none;
    line-height: 50px;
    border: none;
    resize: none;
    box-shadow: none;
  }
}

.tag {
  font-size: 24px;
  font-family: Heiti SC-Light, Heiti SC;
  font-weight: 300;
  color: #245EDC;
  margin-right: 10px;

  img {
    width: 20px;
    height: 20px;
    opacity: 1;
  }
}

.labelsbody {
  position: relative;
  z-index: 100;

  .lists {
    position: absolute;
    top: 55px;
    width: 300px;
    height: 345px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.1607843137254902);
    border-radius: 0px 0px 5px 5px;
    opacity: 1;
    left: 0;
    z-index: 100;
    padding-bottom: 0;
    overflow-y: scroll;
    margin-bottom: 0;

    p {
      height: 50px;
      font-size: 20px;
      font-family: Heiti SC-Light, Heiti SC;
      font-weight: 300;
      color: #7D7D7D;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
      padding-left: 20px;
    }
  }
}

.pop {
  position: fixed;
  z-index: 50;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
</style>