<template>
<div class="vInputCom">
    <el-form ref="form" :model="form" label-width="0px" label-position="left" :inline="true" @submit.native.prevent>
        <el-form-item v-for="(item,index) in list" :key="index" :prop="item.props">

            <!-- date -->
            <el-date-picker v-if="item.type==='date'" v-model="date" type="daterange" class="date" size="small" :style="item.style" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" :placeholder="item.placeholder">
            </el-date-picker>

            <!-- select -->
            <el-select class="select" v-else-if="item.type==='select'" v-model="form[item.props]" :style="item.style" clearable size="small" :placeholder="item.placeholder">
                <el-option v-for="child in item.options" :key="child.value" :label="child.label" :value="child.value">
                </el-option>
            </el-select>

            <!-- input -->
            <el-input v-else :maxlength="item.max" size="small" @keyup.enter.native="search" prefix-icon="el-icon-search" v-model.trim="form[item.props]" :placeholder="item.placeholder" :style="item.style">
            </el-input>

        </el-form-item>

        <!-- <span class="input_btn">
        <el-button
        class="search_btn"
        @click="search()"
        type="primary">查询</el-button>
        <el-button
        class="reset_btn"
        @click="reset()"
        type="primary">重置</el-button>
      </span> -->
        <!-- btnGroup -->
        <el-form-item>
            <span class="tool" v-for="(item,index) in btn" :key="index">
                <el-button :icon="item.icon" size="small" :type="item.type" @click="btnMethods(item)">{{item.name}}
                </el-button>
                <span class="prompt" v-if="item.message">{{item.message}}</span>
            </span>
        </el-form-item>

    </el-form>
</div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    btn: {
      type: Array,
      default: () => []
    },
    sortRule: Object
  },
  data () {
    return {
      form: {},
      date: null
    }
  },
  mounted () {
    this.list.forEach(el => {
      this.$set(this.form, el.props, '')
    })
  },
  methods: {
    reset () {
      this.$refs['form'].resetFields()
      this.search()
    },
    search () {
      let reqdata = JSON.parse(JSON.stringify(this.form))
      delete reqdata.date
      reqdata.beginTime = (this.date && this.date.length) ? this.date[0] : ''
      reqdata.endTime = (this.date && this.date.length) ? this.date[1] : ''
      this.$emit('search', reqdata)
    },
    btnMethods (item) {
      let reqdata = JSON.parse(JSON.stringify(this.form))
      delete reqdata.date
      this.date && this.date.length && (reqdata.beginTime = this.date[0])
      this.date && this.date.length && (reqdata.endTime = this.date[1])
      this.$emit(item.method, reqdata)
    }
  }
}
</script>

<style lang="scss" scoped>
// .date{
//   width: 250px!important;
// }
// .select{
//   width: 170px!important;
// }
// @import './vInput.scss';
.prompt {
    // display: block;
    width: 100px;
    line-height: 18px;
    word-wrap: break-word !important;
    word-break: break-all;
    color: #bbb;
    background-color: #fff;
    font-size: 10px;
}

.tool {
    padding: 0 5px;
}
</style>
