<template>
  <div class="search-container">
    <lu-row
      class="lu_row__container"
      v-for="(row, index) in rowColumns"
      :key="index"
      :gutter="20"
    >
      <lu-col
        v-for="(item, index1) in row"
        :span="
          index === rowColumns.length - 1
            ? 24 / (row.length + 1)
            : 24 / row.length
        "
        :key="index1"
      >
        <lu-input
          v-if="item.type === 'input'"
          clearable
          :placeholder="item.placeholder"
          v-model="searchParams[item.prop]"
          style="width:100%"
        ></lu-input>
        <lu-select
          v-if="item.type === 'select'"
          v-model="searchParams[item.prop]"
          clearable
          :placeholder="item.placeholder"
          filterable
          style="width:100%"
        >
          <lu-option
            v-for="(option, index) in item.data"
            :key="index"
            :value="option[item.data_value]"
            :label="option[item.data_label]"
          >
          </lu-option>
        </lu-select>
        <div class="lu_radio_inline" v-if="item.type === 'radio'">
          <span class="lu_spec-title">{{ item.label }}</span>
          <lu-radio-group v-model="searchParams[item.prop]">
            <lu-radio
              v-for="option in item.data"
              :key="option[item.data_value]"
              :label="option[item.data_value]"
              >{{ option[item.data_label] }}</lu-radio
            >
          </lu-radio-group>
        </div>
        <lu-date-picker
          v-if="item.type === 'daterange'"
          v-model="searchParams[item.prop]"
          style="width:100%"
          type="datetimerange"
          range-separator="至"
          :start-placeholder="item.startPlaceholder || '开始日期'"
          :end-placeholder="item.endPlaceholder || '结束日期'"
        >
        </lu-date-picker>
        <lu-date-picker
          v-if="item.type === 'date'"
          v-model="searchParams[item.prop]"
          style="width:100%"
          type="datetime"
          :placeholder="item.placeholder"
        >
        </lu-date-picker>
      </lu-col>
      <lu-col
        style="text-align: right"
        v-if="index === rowColumns.length - 1"
        :span="24 / (row.length + 1)"
      >
        <slot name="custom" :searchParams="searchParams"></slot>
        <div class="lu_serach__button">
          <lu-button style="width: 80px" @click="search" type="primary"
            >查询</lu-button
          >
        </div>
      </lu-col>
    </lu-row>
  </div>
</template>

<script>
import chunk from "lodash/chunk";
import Vue from "vue";
export default {
  name: "luSaasSearch",
  data() {
    return {
      searchParams: {}
    };
  },
  created() {
    this.searchColumns.map(val => {
      Vue.set(this.searchParams, val.prop, val.value || "");
    });
  },
  computed: {
    rowColumns: function() {
      if (this.searchColumns && this.searchColumns.length && this.colCount) {
        return chunk(this.searchColumns, this.colCount);
      } else {
        return [];
      }
    }
  },
  props: {
    searchColumns: {
      type: Array,
      default: () => {
        return [];
      }
    },
    colCount: {
      type: Number,
      default: 4
    }
  },
  methods: {
    search() {
      this.$emit("search", this.searchParams);
    }
  }
};
</script>

<style>
.el-date-editor .el-range-input {
  font-size: 12px !important;
}
.search-container .lu_serach__button .el-button {
  border-radius: 4px;
  font-size: 12px;
}
.search-container .lu_row__container {
  margin-top: 18px;
}
.search-container .el-select {
  height: 36px;
}
.el-select-dropdown__item {
  font-size: 12px !important;
}
.search-container .el-input {
  font-size: 12px !important;
  border-radius: 2px;
}
.search-container .el-input__inner {
  height: 36px;
}
.lu_spec-title {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  margin-right: 6px;
  color: #303030;
  letter-spacing: 0;
}
.el-radio {
  margin-right: 15px !important;
}
.el-radio__label {
  font-size: 12px !important;
}
.lu_radio_inline {
  margin-top: 10px;
}
</style>
