<template>
  <div class="d-flex flex-wrap pb-3">
    <!-- 团队名称 -->
    <div>
      <a-input placeholder="服务名称" style="width: 150px" v-model="name" allow-clear />
      <span class="ml-3"> 服务状态:</span>
      <a-select @change="handleChangeSelect" class="ml-3" style="width: 150px" placeholder="状态" allow-clear>
        <a-select-option :key="item" :value="index" v-for="(item, index) in statusList">{{ item }}</a-select-option>
      </a-select>

      <a-button @click="handleTableChange" class="mx-2" type="primary">搜索</a-button>
    </div>

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

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

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

<script>
import CourseAdd from 'components/Course/CourseAdd.vue';

export default {
  name: 'CourseSearch',
  components: {
    CourseAdd,
  },
  data() {
    return {
      visible: false,
      name: '',
      serviceTypes: [
        { id: 1, value: '创新平台' },
        { id: 2, value: '孵化平台' },
        { id: 3, value: '产业平台' },
      ],
      statusList: ['正常', '禁用'],
      status111: '',
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },

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

    handleChangeSelect(e) {
      // this[type] = value;
      this.status111 = e;
    },

    handleChangeName(value) {
      console.log('value: ', value);
      this.name = value;
    },

    async handleTableChange() {
      const { name, status111 } = this;
      // 传参
      const condition = { name, status111 };
      await this.$emit('getInnovativeServiceSearch', condition);
    },
  },
};
</script>

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