<template>
  <search-white-board @search="handleSearch">
    <div slot="base">
      <el-row>
        <el-col class="toolbar-txt txt-right" :span="2">使用状态</el-col>
        <el-col :span="6">
          <el-select v-model="form.usedStatus" placeholder="请选择" style="width: 100%;">
            <el-option v-for="item in usedOptions" :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.showStatus" placeholder="请选择" style="width: 100%;">
            <el-option v-for="item in showOptions" :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: 'TagToolbar',

  mixins: [mxField()],

  data() {
    return {
      form: {
        usedStatus: 'ALL',
        showStatus: null
      },
      apiForm: {
        usedStatus: 'status',
        showStatus: 'isShow'
      },
      usedOptions: setStatus(['全部状态', '未使用', '已使用'], ['ALL', 'NOT_USED', 'USED']),
      showOptions: setStatus(['全部状态', '展示中', '未展示'], [null, true, false])
    }
  },

  methods: {
  }
}
</script>

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