<template>
  <div>
      <el-form ref="searchData" :model="searchData" label-width="80px" :rules="searchRules" :inline="inline" label-position="left">
        <el-form-item :label="item.label" v-for="(item,index) in formData" :key="index">
          <el-input v-model="searchData[item.model]"
          v-if="item.type=='input'"
          :size="size || item.size"
          :placeholder="item.placeholder"
          :style="{width:item.width+'px'}"
          :disabled="item.disable && item.disable(searchData[item.prop])"
          :clearable="item.clearable"></el-input>
          <!-- select -->
          <el-select v-model="searchData[item.model]"
          :placeholder="item.placeholder"
          class="slesd"
          v-if="item.type=='select'"
          :size="item.size"
          :style="{width:item.width+'px'}"
          :disable="item.disable"
          :clearable="item.clearable">
            <el-option
              v-for="itemChild in item.options"
              :key="itemChild.value"
              :label="itemChild.label"
              :value="itemChild.value">
            </el-option>
          </el-select>
          <el-date-picker
            v-model="searchData[item.model]"
            :size="item.size"
            v-if="item.type==='datetimerange'||item.type==='daterange'"
            :type="'daterange'||'daterange'"
            :style="{width:item.width+'px'}"
            :range-separator="item.rangeSeparator"
            :start-placeholder="item.startPlaceholder"
            :end-placeholder="item.endPlaceholder">
          </el-date-picker>
          <el-button :type="item.typeStatus"
          v-if="item.type=='button'&&item.text=='搜索'"
          icon="el-icon-search"
          :disable="item.disable" :size="item.size" @click="clickfn(searchData)">{{item.text}}</el-button>

          <el-button
          v-if="item.type=='button'&&item.text=='重置'"
          icon="el-icon-refresh"
          :disable="item.disable" :size="item.size" @click="resetForm('searchData')">{{item.text}}</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
export default{
    name: 'WSearch',
    props: {
      formData:{
        type: Array,
        default:() => [],
      },

    },
    data () {
      return {
        searchData:{},
        width:"180",
        inline:true,
        size:"medium",
        searchRules:{},
      }
    },
    mounted(){
      var arr={}
      this.formData.map(items=>{
          if(items.model!=undefined){
            arr[items.model]=""
          }
      })
      this.searchData =Object.assign({}, arr)
      console.log(this.searchData)
    },
    methods:{
      clickfn(item){
          this.$emit("search",this.searchData)
      },
      resetForm() {
        this.formData.map(items=>{
          console.log(items.model)
            if(items.model!=undefined){
              this.searchData[items.model]=""
            }
        })
        console.log(this.searchData)

      }
    }
  }
</script>

<style scoped>
  /deep/ .slesd .el-icon-arrow-up{
    bottom:2px;
    position: relative;
  }
  /deep/ .slesd .el-icon-circle-close{
    bottom:2px;
    position: relative;
  }
</style>
