<template>
  <div style="width: 100%;height: auto;display: flex;flex-wrap: wrap;align-items: flex-end;">
      <div v-for="(item,index) in list" :key="index" :style="index>2? index%3==0?'width: 25%;margin-top:10px':'width: 25%;margin-left: 15px;margin-top:10px':index==0?'width: 25%;':'width: 25%;margin-left: 15px;'">
        <el-input
        :placeholder="item.placeholder"
        v-model="object[item.prop]"
        v-if="item.type=='input'"
      ></el-input>
      <el-select
          v-model="object[item.prop]"
          :placeholder="item.placeholder"
          style="width: 100%;"
          filterable
          @change="changePay"
          v-if="item.type=='select'"
        >
          <el-option v-for="(a,i) in item.options" :key="i" :label="a.name" :value="a.value"> </el-option>
        </el-select>
        <el-select
          v-model="object[item.prop]"
          :placeholder="item.placeholder"
          multiple
          style="width: 100%;"
          v-if="item.type=='multiple_select'"
        >
          <el-option v-for="(a,i) in item.options" :key="i" :label="a.name" :value="a.value"> </el-option>
        </el-select>
        <el-select
          v-model="object[item.prop]"
          :placeholder="item.placeholder"
          style="width: 100%;"
          filterable
          @change="change"
          v-if="item.type=='appoint_select'"
        >
          <el-option v-for="(a,i) in item.options" :key="i" :label="a.name" :value="a.value"> </el-option>
        </el-select>
        <el-date-picker
          v-model="object[item.prop]"
          :type="item.dateType"
          style="width: 100%;"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          v-if="item.type=='date_select'"
          :picker-options="pickerOptions">
        </el-date-picker>
        <br v-if="index%3==0">
      </div>
      <el-button type="primary" @click="search" :style="'margin-left: 15px;height: 40px;background:'+color"
      >查询</el-button
    >
  </div>
</template>

<script>
export default {
  name: "searchBar",
  props: ['list','handleSearch','appoint_change'],
  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: {
    changePay(val){
     this.$forceUpdate();
    },
    search(){
       this.handleSearch(this.object);
    },
    change(val){
      this.appoint_change(val)
    },
  }
};
</script>

<style  scoped></style>
