<template>
  <div style="width: 100%;height: auto;display: flex;flex-wrap: wrap;align-items: flex-end;">
    <el-form :model="forms.form" ref="ruleForm" :rules="forms.rules">
      <el-form-item :label="item.lable" :prop="item.prop" v-for="(item,index) in forms.items">
        <el-input v-if="item.type=='input'" v-model="object[item.prop]" :placeholder="'请选择'+item.lable" :type="item.inputType"></el-input>
        <el-select v-model="value" placeholder="请选择" v-if="item.type=='select'">
          <el-option
            v-for="(a,i) in item.options"
            :key="item.value"
            :label="a.label"
            :value="a.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "searchBar",
  props: ['forms','submit'],
  data() {
    return {
        object:{},
        color:'#1372bb',
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
    };
  },

  computed: {},
  mounted() {
    if (localStorage.getItem("theme")) {
      this.color = localStorage.getItem("theme");
    }
  },
  methods: {
    onSubmit(){
       this.submit(this.object);
    },
    changePay(val){
     this.$forceUpdate();
    },
    search(){
       this.handleSearch(this.object);
    },
    change(val){
      this.appoint_change(val)
    },
  }
};
</script>

<style  scoped></style>
