<template>
  <div>
     <el-select v-model="value"
                style="width:100%"
                collapse-tags
                popper-class="optionStyle"
                multiple
                clearable
                @change="changeFun"
                placeholder="请选择">
      <el-option v-for="(item, key) in options"
                 :key="key"
                 :label="item.fileName"
                 :value="item.keyId"></el-option>
    </el-select>
  </div>
</template>

<script>
import knowledgeBaseApi from '@/api/assetaudit/knowledgeBaseApi'
export default {
  model: {
    prop: 'fileKeyId',
    event: 'cc' // 触发函数
  },
  props: {
    fileKeyId: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      options: [],
      value: []
    }
  },
  created () {
    this.getListData()
  },
  watch: {
    // 监听传入值
    fileKeyId: {
      handler (val) {
        this.value = JSON.parse(JSON.stringify(val))
      },
      deep: true
    }
    // fileKeyId (val) {
    //   console.log(val, '传入值')
    //   this.value = JSON.parse(JSON.stringify(val))
    // }
  },
  methods: {
    // 触发
    changeFun (val) {
      let arr = []
      val.map(res => {
        this.options.map(item => {
          if (item.keyId === res) {
            arr.push(item)
          }
        })
      })
      this.$emit('cc', val)
      this.$emit('selectChanged', arr)
    },
    // 获取列表
    getListData () {
      let data = {}
      knowledgeBaseApi.knowledgeBaseList.getFileName(data).then(res => {
        this.options = res.data
      })
    }
  }

}
</script>

<style lang="scss">
// .optionStyle{
//   width: 2000px;
// }
</style>
