<template>
  <el-form ref="form" :size="size" :label-width="labelWidth" :inline="isInline" :model="searchData" :rules="rules">
    <el-form-item v-for="item in searchForm" :label="item.label" :key="item.prop" :prop="item.prop">
      <!-- 输入框 -->
      <el-input v-if="item.type==='input'" v-model.trim="searchData[item.prop]" :size="size" :placeholder="item.placeholder" :style="{width: item.width}" :disabled="item.disabled" clearable maxlength="30"></el-input>
      <!-- 下拉框 -->
      <el-select v-if="item.type==='select'" :placeholder="item.placeholder" v-model="searchData[item.prop]" :style="{width: item.width}" :size="size" clearable @change="item.change(searchData[item.prop])">
        <el-option v-for="op in item.options" :label="op.name" :value="op.id" :key="op.id"></el-option>
      </el-select>
      <!-- 单选 -->
      <el-radio-group v-if="item.type==='radio'" v-model="searchData[item.prop]" style="margin-right: 80vh;">
		  
        <el-radio v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ ra.label }}</el-radio>
      </el-radio-group>
      <!-- 时间选择器 -->
      <el-date-picker v-if="item.type==='dateTime'" v-model="searchData[item.prop]" :disabled="item.disable && item.disable(searchData[item.prop])" type="datetime" placeholder="选择时间"></el-date-picker>
      <!-- SLOT -->
      <template v-if="item.type==='slot'">
        <slot :name="'form-'+item.name"></slot>
      </template>
    </el-form-item>
    <div v-if="isHandle" class="handle">
      <el-button v-for="item in searchHandle" :type="item.type" :size="item.size || size" :key="item.label" @click="item.handle()">{{ item.label }}</el-button>
    </div> 
  </el-form>
</template>
<script>
export default {
  props: {
    isHandle: {
      type: Boolean,
      default: true
    },
    isInline: {
      type: Boolean,
      default: false
    },
    labelWidth: {
      type: String,
      default: '100px'
    },
    size: {
      type: String,
      default: 'medium'
    },
    searchForm: {
      type: Array,
      default() {
        return []
      }
    },
    searchHandle: {
      type: Array,
      default() {
        return []
      }
    },
    searchData: {
      type: Object,
      default() {
        return {}
      }
    },
    rules: {
	  type: Object,
	  default() {
	    return {}
	  }
    }
  },
  data() {
    return {
	
    }
  },
  created() {
  
  },
  methods: {
    rest() {
      this.$refs.form.resetFields()
    }
  }
}

</script>
<style scoped>
	.handle{
 display: flex;
 align-items: center;
 justify-content: flex-end;
 border-top: 1px solid #C0CCDA;
 box-sizing: border-box;
 padding-top:20px
	}

</style>
