<template>
  <el-form :inline="true" ref="formInline" :model="formInline" class="demo-form-inline formsearch d_ui_form">
    <el-form-item
      :label="item.label"
      v-for="(item,index) in data"
      :key="index+500"
      :prop="item.key"
    >
      <el-input
        v-if="item.type == 'input'"
        class="d_search_input"
        v-model="formInline[item.key]"
        :placeholder="item.placeholder"
      ></el-input>
      <el-date-picker
        v-if="item.type == 'daterange'"
        v-model="formInline[item.key]"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        :clearable="false"
      ></el-date-picker>
      <el-select
        v-if="item.type == 'select'"
        v-model="formInline[item.key]"
        :placeholder="item.placeholder"
      >
        <el-option v-for="(it,idx) in item.arr" :key="idx+600" :label="it.label" :value="it.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button class="primary_btn" type="primary" @click="onSubmit">查询</el-button>
      <el-button class="defaule_btn" @click="remove_data">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: ["data"],
  components: {},
  data() {
    return {
      formInline: {},
    };
  },
  watch: {},
  computed: {},
  created() {
    var temp = {};
    this.data.forEach((e) => {
      temp[e.key] = "";
    });
    this.formInline = temp;
  },
  mounted() {},
  methods: {
    onSubmit() {
      this.$emit("serach", this.formInline);
    },
    remove_data() {
      this.$refs["formInline"].resetFields();
      this.$emit("serach", "");
    },
  },
};
</script>

<style scoped>
.primary_btn {
  width: 100px;
  background-color: #515fe7;
  color: #e6ebfe;
}
.defaule_btn {
  width: 100px;
  background-color: #c3caf8;
  color: #0f2683;
}
</style>
<style>
.formsearch .el-form-item {
  /* margin-left: 50px; */
  margin-left: 30px;
}
.formsearch .el-form-item:nth-last-of-type(1) {
  position: absolute;
  right: -210px;
}
.formsearch .el-form-item .el-form-item__label {
  color: #242c43;
  font-weight: 600;
}
.d_search_input.el-input {
  width: 200px;
}
</style>
<style scoped>
.formsearch {
  position: relative;
  width: calc(100% - 220px);
}
</style>
<style>
.from_content1 .el-input__inner {
  background-color: #f7f8f9;
}
.el-date-editor.el-range-editor .el-range-input {
  background-color: #f7f8f9;
  width: 80px;
}
.el-date-editor.el-range-editor .el-range-separator {
  width: 40px;
  position: relative;
  top: 2px;
}
.el-date-editor.el-range-editor {
  width: 260px;
  padding: 3px 10px 3px 15px;
}
.el-date-editor .el-range__icon {
  margin-right: 8px;
}
</style>