<template>
  <div class="common-wrapper">
    <el-select v-model="keyword" collapse-tags placeholder="请选择" @click.native="dropDownSearch()" @clear="setValueNull" clearable>
      <div class="el-input" style="width:90%;margin-left:5%;">
        <input type="text" placeholder="请输入" class="el-input__inner" v-model="dropDownValue">
      </div>

      <el-option v-for="(item,index) in optionsMetaShow"
      :value="item" :key="index" :label="item.bucket" ></el-option>
    </el-select>
  </div>
</template>
<script>
import {getBucketList} from '@/api/bucket.js'
export default {
  data () {
    return {
      dropDownValue: '',
      keyword: this.info,
      optionsMetaShow: [],
      defaultList:false,
    }
  },
  props:{
    info:{
      type: String,
      default:''
    },
    category:{
      type: String,
      default:'laws'
    },
    department_id:{
      type: [Number, String],
      default:0
    }
  },
  watch:{
    info( val ){
      if( !val ) return
      this.keyword = this.info;
    },
    keyword( val ){
      if( !val ) return;
      if( !val.id) return;
      this.$emit("select", this.keyword)
      this.keyword = val.name;
    },
    dropDownValue(val){
      this.dropDownSearch( val )
    }
  },
  methods: {
    setValueNull(){
      this.$emit( "select", {id:0, name:''} )
    },

    dropDownSearch ( val ) {
      let bucket = val||this.dropDownValue||'';
      let {department_id, category} = this;
      department_id = +department_id
      if( !department_id || !category) return;
      
      let page = 1
      let pageSize = 100
      getBucketList( {department_id, category, bucket,page,pageSize}).then(res=>{
          if( res.code == 200){
            this.optionsMetaShow = res.data.list;
          }
      })
    }
  }
}
</script>
<style>
.el-scrollbar {
  display: block !important;
}
</style>
