<template>
  <div class="d-flex flex-wrap pb-3">
    <div>
      <!-- 活动标题 -->
      <a-input class="ml-3" placeholder="标题" style="width: 150px" v-model="titleKey" />

      <!-- 地点 -->
      <a-input class="ml-3" placeholder="地点" style="width: 150px" v-model="site" />

      <!-- 发布部门 -->
      <a-input class="ml-3" placeholder="标题" style="width: 150px" v-model="spreadDepartment" />

      <!-- 发布时间 -->
      <a-range-picker @change="onChange" class="ml-3" format="YYYY-MM-DD HH:mm:ss" show-time />

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

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

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

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

<script>
import ActivityAdd from 'components/IndustryInfo/ActivityAdd.vue';

export default {
  name: 'ActivitySearch',
  components: {
    ActivityAdd,
  },
  data() {
    return {
      visible: false,
      titleKey: '',
      site: '',
      spreadDepartment: '',
      startTime: '',
      endTime: '',
    };
  },

  methods: {
    showModal() {
      this.visible = true;
    },

    async closeModal() {
      this.visible = false;
      await this.$emit('getBackendSearch');
    },

    // 发布时间
    onChange(dates, dateStrings) {
      this.startTime = dateStrings[0];
      this.endTime = dateStrings[1];
    },

    async handleTableChange() {
      const { titleKey, site, spreadDepartment, startTime, endTime } = this;
      // 传参
      const condition = {
        titleKey,
        site,
        spreadDepartment,
        startTime,
        endTime,
      };
      await this.$emit('getBackendSearch', condition);
    },
  },
};
</script>

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