<template>
  <search-white-board @search="handleSearch">
    <div slot="base">
      <el-row class="toolbar">
        <el-col class="toolbar-txt txt-right" :span="2">评价来源</el-col>
        <el-col :span="6">
          <el-select
            v-model="form.sourceStatus"
            placeholder="请选择"
            style="width: 100%;"
          >
            <el-option
              v-for="item in sourceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>

        <el-col class="toolbar-txt txt-right" :span="2">置顶状态</el-col>
        <el-col :span="6">
          <el-select
            v-model="form.topStatus"
            placeholder="请选择"
            style="width: 100%;"
          >
            <el-option
              v-for="item in topOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>

        <el-col class="toolbar-txt txt-right" :span="2">审核状态</el-col>
        <el-col :span="6">
          <el-select
            v-model="form.approve"
            placeholder="请选择"
            style="width: 100%;"
          >
            <el-option
              v-for="item in approveOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </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-col class="toolbar-txt txt-right" :span="0" />
        <el-col :span="6">
          <el-input v-model="form.input" placeholder="请输入评论者名称或手机号搜索" />
        </el-col>

      </el-row>
    </div>
  </search-white-board>
</template>

<script>
import mxField from '@/mixins/field'
import { setStatus } from '@/utils'
import MODULETYPE from '@/const/moduleType'

export default {
  name: 'CommentToolbar',

  mixins: [mxField()],

  data() {
    return {
      form: {
        sourceStatus: null,
        topStatus: null,
        approve: null,
        input: null,
        timeArr: []
      },
      apiForm: {
        sourceStatus: 'moduleType',
        topStatus: 'isTop',
        approve: 'isPassed',
        input: 'searchText'
      },
      sourceOptions: MODULETYPE.COMENT_MODAL_TYPE,
      topOptions: setStatus(['全部状态', '已置顶', '未置顶'], [null, true, false]),
      approveOptions: setStatus(['全部状态', '通过', '拒绝'], [null, true, false])
    }
  },

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

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