<template>
  <div class="d-flex flex-wrap pb-3">
    <!-- 中文名称 -->
    <div>
      <a-input
        @change="handleChangeChineseName"
        placeholder="姓名"
        style="width: 150px"
        v-model="name"
      />
      <!-- <a-input
        @change="handleChangeEnglishName"
        class="ml-3"
        placeholder="英文名称"
        style="width: 150px"
        v-model="englishName"
      />
      <a-select @change="getCategory" class="ml-3" placeholder="分类" style="width: 200px">
        <a-select-option
          :key="index"
          :value="category.name"
          v-for="(category, index) in categories"
        >{{ category.name }}</a-select-option>
      </a-select> -->
      <a-button @click="handleTableChange" class="ml-3" type="primary">搜索</a-button>
    </div>

    <div class="flex-1"></div>

    <a-button @click="showModal" class="editable-add-btn">增加</a-button>

    <!-- 添加 -->
    <institute-add :visible="visible" @closeModal="closeModal" />
  </div>
</template>

<script>
import InstituteAdd from "components/Institute/InstituteAdd.vue";

export default {
  name: "InstituteSearch",
  components: {
    InstituteAdd,
  },
  data() {
    return {
      visible: false,
      name: "",
    }
  },
  methods: {
    showModal(){
      this.visible = true;
    },

    closeModal(){
      this.visible = false;
    },

    handleChangeChineseName(value) {
      console.log('value: ', value);
      this.chineseName = value;
    },

    handleChangeEnglishName(value) {
      console.log('value: ', value);
      this.englishName = value;
    },

    getCategory(value) {
      console.log('value: ', value);
      this.category = value;
    },

    async handleTableChange() {
      console.log('搜索');
      const { name} = this;
      // 传参
      const condition = {
       name
      }
      await this.$emit('getInstituteSearchBack',condition)
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus"></style>
