<template>
  <div class="advance-search-form table-search" :style="{marginBottom: btnLength==0&&searchModel.length%4!==0? '20px': '0'}">
    <Form :label-width="100" ref="advanceSearchForm">
      <Row>
        <i-col :span="6" v-for="(item) in searchModel" :key="item.prop">
          <FormItem :label="item.label">
            <DatePicker
              v-if="item.type==='date'"
              v-model="item.value"
              :format="item.format?item.format:'yyyy-MM-dd HH:mm:ss'"
              :type="item.elemType?item.elemType:'datetimerange'"
              :placeholder="item.placeholder"
            ></DatePicker>
            <Input
              v-if="!item.type||item.type==='text'"
              v-model="item.value"
              :type="item.elemType?item.elemType:'text'"
              :placeholder="item.placeholder"
            ></Input>
            <i-select
              v-if="item.type==='select'"
              v-model="item.value"
              :multiple="item.elemType=='multiple'"
            >
              <i-option v-for="(key,value) in processData(item)" :value="value" :key="key">{{key}}</i-option>
            </i-select>
          </FormItem>
        </i-col>
        <i-col :span="searchModel.length%4==0?24:6" >
          <div class="table-search-btns" :style="{margin: searchModel.length%4==0? '10px 0': '0'}">
            <Button type="primary" icon="ios-search" @click="searchEvent">搜索</Button>
            <Button type="primary"  icon="ios-refresh" @click="resetSearch" style="margin-left:10px">重置</Button>
          </div>
        </i-col>
      </Row>
    </Form>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";

@Component
export default class AdvanceSearchForm extends Vue {
  @Prop() searchModel: any;

  @Prop() searchEvent: any;

  @Prop() btnLength: any;

  /**
   * 处理下拉框数据
   */
  processData(item) {
    let dataMap = {};
    if (!item.data) {
      console.error("please set select data");
      return dataMap;
    }
    if (Array.isArray(item.data)) {
      item.data.forEach(d => {
        if (_.isObject(d)) {
          dataMap[d[item.keyProp]] = d[item.valueProp];
        } else {
          dataMap[d] = d;
        }
      });
    } else {
      dataMap = item.data;
    }
    return dataMap;
  }
  resetSearch() {
    this.searchModel
      .forEach(item => {
        item.value = null;
      })(this.$refs.advanceSearchForm as any)
      .resetFields();
  }
}
</script>
<style scoped>
.table-search-btns {
  /* margin-top:10px; */
  text-align: center;
}
</style>
