<template>
  <search-white-board @search="handleSearch">
    <div slot="base">
      <el-row :gutter="20">
        <el-col class="toolbar-txt txt-right" :span="2">手机号码</el-col>
        <el-col :span="6">
          <el-input v-model="form.mobile" placeholder="请输入手机号搜索" />
        </el-col>
        <el-col class="toolbar-txt txt-right" :span="2">昵称</el-col>
        <el-col :span="6">
          <el-input v-model="form.nickName" placeholder="请输入手机号搜索" />
        </el-col>
      </el-row>
    </div>
  </search-white-board>
</template>

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

export default {
  name: 'AccountToolbar',

  mixins: [mxField()],

  data() {
    return {
      form: {
        mobile: null,
        nickName: null
      },
      apiForm: {
        mobile: 'mobileNumber',
        nickName: 'nickname'
      }
    }
  },

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

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