<template>
  <div class="d-flex flex-wrap pb-3">
    <div>
      <!-- 标题 -->
      <a-input class="ml-3" placeholder="标题" style="width: 150px" v-model="title" />
      <!-- 发帖类别 -->
      <a-select
        @change="handleChangeSelect('category',$event)"
        allow-clear
        class="ml-3"
        placeholder="发帖类别"
        style="width: 150px"
      >
        <a-select-option :key="state.id" :value="state.id" v-for="state in status">{{ state.value }}</a-select-option>
      </a-select>
      <!-- 帖子状态 -->
      <a-select
        @change="handleChangeSelect('comStatus',$event)"
        allow-clear
        class="ml-3"
        placeholder="帖子状态"
        style="width: 150px"
      >
        <a-select-option
          :key="index"
          :value="state.id"
          v-for="(state, index) in items"
        >{{ state.value }}</a-select-option>
      </a-select>
      <a-button @click="handleTableChange" class="ml-3" type="primary">搜索</a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ForumSearch',
  data() {
    return {
      title: '',
      items: [
        { id: 0, value: '正常' },
        { id: 1, value: '禁用' },
      ],
      comStatus: '',
      status: [
        { id: 0, value: '主题论坛' },
        { id: 1, value: '创新社区' },
        { id: 2, value: '孵化社区' },
        { id: 3, value: '产业社区' },
      ],
      category: '',
    };
  },
  methods: {
    handleChangeSelect(type, value) {
      this[type] = value;
    },

    // 搜索
    async handleTableChange() {
      const { title, comStatus, category } = this;
      // 传参
      const condition = {
        title,
        comStatus,
        category,
      };
      await this.$emit('getSelectTeam', condition);
    },
  },
};
</script>

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