<template>
  <div class="d-flex flex-wrap pb-3">
    <div>
      <!-- 板块 -->
      <a-input
        @change="handleChange('plate',$event)"
        placeholder="板块"
        style="width: 150px"
        v-model="plate"
      />
      <!-- 标题 -->
      <a-input
        @change="handleChange('title',$event)"
        class="ml-3"
        placeholder="标题"
        style="width: 150px"
        v-model="title"
      />
      <!-- 置顶 -->
      <a-select
        @change="handleChangeSelect('topping',$event)"
        class="ml-3"
        default-value="置顶"
        style="width: 150px"
      >
        <a-select-option
          :key="index"
          :value="topping"
          v-for="(topping, index) in items"
        >{{ topping }}</a-select-option>
      </a-select>
      <!-- 审核 -->
      <a-select
        @change="handleChangeSelect('state',$event)"
        class="ml-3"
        default-value="审核通过"
        style="width: 150px"
      >
        <a-select-option
          :key="state.id"
          :value="state.value"
          v-for="state in status"
        >{{ state.value }}</a-select-option>
      </a-select>
      <!-- 发布时间 -->
      <a-range-picker @change="onChange" class="ml-3" format="YYYY/MM/DD HH:mm:ss" show-time />
      <a-button @click="handleSearch" class="ml-3" type="primary">搜索</a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "ForumSearch",
  data() {
    return {
      plate: '',
      title: '',
      items: ['置顶','不置顶'],
      topping: '',
      status: [
        { id:1, value:'审核通过' },
        { id:2, value:'审核未通过' }
      ],
      state: '',
    }
  },
  methods: {
    handleChange(type, e) {
      this[type] = e.target.value;
    },

    handleChangeSelect(type, value) {
      this[type] = value;
    },

    // 发布时间
    onChange(dates, dateStrings) {
      console.log('From: ', dates[0], ', to: ', dates[1]);
      console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
    },

    // 搜索
    handleSearch(){
      console.log('搜索');
      console.log('plate',this.plate);
      console.log('title',this.title);
      console.log('topping',this.topping);
      console.log('state',this.state);
    }
  },
};
</script>

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