<template>
  <search-white-board @search="handleSearch">
    <div slot="more">
      <el-row class="toolbar" :gutter="20">
        <el-col class="toolbar-txt txt-right" :span="2">展示状态</el-col>
        <el-col :span="6">
          <el-select
            v-model="form.status"
            placeholder="请选择"
            style="width: 100%;"
          >
            <el-option
              v-for="item in statusOptions"
              :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.type"
            placeholder="请选择"
            style="width: 100%;"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
      </el-row>
    </div>
  </search-white-board>
</template>

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

export default {
  name: 'IndexRecommendToolbar',

  mixins: [mxField()],

  data() {
    return {
      form: {
        status: null,
        type: null
      },
      apiForm: {
        status: 'isShow',
        type: 'type'
      },
      statusOptions: setStatus(['全部状态', '未展示', '已展示'], [null, false, true]),
      typeOptions: setStatus(['全部', '文章', '直播', '其他'], [null, 'ARTICLE', 'LIVE_BROADCAST', 'OTHER'])
    }
  },

  methods: {
  }
}
</script>

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