<template>
  <search-white-board @search="handleSearch">
    <div slot="base">
      <el-row :gutter="20">
        <el-col class="toolbar-txt txt-right" :span="2">文章Id</el-col>
        <el-col :span="6">
          <article-select v-model="form.articleId" />
        </el-col>

        <el-col class="toolbar-txt txt-right" :span="2">时间</el-col>
        <el-col :span="8">
          <el-date-picker
            v-model="form.timeArr"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-col>
      </el-row>
    </div>
  </search-white-board>
</template>

<script>
import mxField from '@/mixins/field'

export default {
  name: 'TagToolbar',

  mixins: [mxField()],

  data() {
    return {
      form: {
        articleId: null,
        timeArr: []
      },
      apiForm: {
        articleId: 'articleId'
      }
    }
  },

  methods: {
    handleSearch() {
      const result = {}
      for (const i in this.form) {
        if (i === 'timeArr') {
          result.startDate = this.form[i] ? this.form.timeArr[0] : null
          result.endDate = this.form[i] ? this.form.timeArr[1] : null
        } else {
          result[this.apiForm[i]] = this.form[i]
        }
      }
      this.$emit('onSearch', result)
    }
  }
}
</script>

<style scoped>
.toolbar-txt {
  font-size: 13px;
  padding: 5px;
  line-height: 1.7;
}
.txt-right {
  text-align: right;
}
</style>
