<template>
  <a-dropdown :trigger="['click']" v-model="visible" style="margin-left: 10px;">
    <a v-if="fontColor" class="ant-dropdown-link" href="#">
      {{changeName}}
      <a-icon type="down" />
    </a>
    <a v-else class="ant-dropdown-link" href="#" style="color: #5c6065;">
      {{changeName}}
      <a-icon type="down" />
    </a>
    <a-menu slot="overlay">
      <a-menu-item>
        <a-input placeholder="搜索" v-model="keyword" @change="searchQuery" ></a-input>
      </a-menu-item>
      <a-menu-item v-if="QueryListLoad[0].id !== 999" key="0" @click="clickList">全部</a-menu-item>
      <a-menu-item v-for="item in QueryListLoad" :key="item.id" @click="clickList">
        {{item.name}}
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>
<script>
export default {
  name: 'DropDownSearch',
  data () {
    return {
      visible: false,
      changeName: undefined,
      fontColor: false,
      keyword: null,
      QueryListLoad: {},
    }
  },
  computed: {
    style () {
      return {
        left: this.left + 'px',
        top: this.top + 'px'
      }
    }
  },
  created () {
     
  },
  props: ['menuName','QueryList','QueryReset'],
    watch: {
      QueryList: {
        immediate: true,
        handler() {
          this.changeName = this.menuName;
          this.QueryListLoad = this.QueryList;
        },
      },
      QueryReset: {
        immediate: true,
        handler() {
          this.changeName = this.menuName;
          this.QueryListLoad = this.QueryList;
          this.keyword = null;
          this.fontColor = false;
          this.visible = false;
        },
      },
      visible: {
        immediate: true,
        handler() {
          if(this.visible) { //完美 有延迟动画不能关闭的时候刷新
            this.keyword = null;
            this.QueryListLoad = this.QueryList;
          }
        }
      }
    },
  methods: {
    clickList(e) {
      if(String(e.key) === "999"){
        this.visible = false;
        this.keyword = null;
      }
      else if(String(e.key) === "0") {
        this.changeName = this.menuName;
        this.fontColor = false;
        //向父类传值
      } 
      else {
        this.fontColor = true;
        this.changeName = this.QueryList.find(item => {return item.id == e.key }).name;
        //向父类传值
      }
      this.visible = false;
      //动画有延迟，点击无时间  服了 看来只能watch了
      
    },
    searchQuery() { //模糊查询
      let listTemp = [];
      if(this.keyword !== null && this.keyword !== "" && this.keyword !== " " ) {
        listTemp = this.QueryListLoad.filter((p)=>{
          return p.name.indexOf(this.keyword) !==-1
        })
        if(listTemp.length === 0) {
          this.QueryListLoad = [{"id": 999 , "name": "暂无数据"}];
        } else {
          this.QueryListLoad = listTemp;
        }
      } else {
        this.QueryListLoad = this.QueryList;
      }
    }
  }
}
</script>