<!--
 * @Author: your name
 * @Date: 2022-01-06 13:53:10
 * @LastEditTime: 2022-01-19 14:48:01
 * @LastEditors: Please set LastEditors
 * @Description: 搜索组件
 * @FilePath: \goldenPig\src\components\search-cpn\SearchCpn.vue
-->
<template>
  <div class="search-cpn">
    <el-form :label-width="formStyle.labelWidth" :size="formStyle.size">
      <el-row :gutter="formStyle.gutter">
        <template v-for="item in formItemProp">
          <el-col v-bind="formStyle.colLayout" :key="item.label">
            <el-form-item :label="item.label">
              <el-input
                v-if="item.type === 'input'"
                v-model="form[item.field]"
                :placeholder="item.placeholder"
                clearable
              >
              </el-input>

              <el-select
                v-else-if="item.type === 'select'"
                v-model="form[item.field]"
                :placeholder="item.placeholder"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="option in item.options"
                  :key="option.label"
                  v-bind="option"
                >
                </el-option>
              </el-select>

              <el-date-picker
                v-else-if="item.type === 'datePicker'"
                type="daterange"
                range-separator="至"
                :start-placeholder="item.placeholder[0]"
                :end-placeholder="item.placeholder[1]"
                value-format="yyyy-MM-dd"
                v-model="form[item.field]"
                style="width: 100%"
                clearable
              >
              </el-date-picker>

              <!-- 具名插槽，element ui 的表单元素无法包括的 -->
              <slot
                v-else-if="item.type === 'custom'"
                :name="item.slotName"
                :item="item"
              >
              </slot>
            </el-form-item>
          </el-col>
        </template>

        <el-col v-for="i in needBlanks" :key="i" v-bind="formStyle.colLayout">
          <div class="blank"></div>
        </el-col>

        <el-col v-bind="formStyle.colLayout">
          <div :class="{ 'btns-bottom': btnsBottom, btns: true }">
            <el-button
              :size="formStyle.size"
              type="primary"
              @click="handleSearch"
              >查询</el-button
            >
            <el-button :size="formStyle.size" @click="handleClear"
              >重置</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    formStyle: {
      // el-form 的样式
      type: Object,
      default: () => ({
        labelWidth: "140px",
        size: "small",
        gutter: 30,
        colLayout: {
          lg: 8,
          md: 12,
          sm: 24,
        },
      }),
    },
    formItemProp: {
      // el-form-item 的限定
      type: Array,
      required: true,
    },
    searchForm: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      form: {},
      needBlanks: 0,
      btnsBottom: false,
    };
  },
  watch: {
    formItemProp: {
      handler(newVal) {
        // 布局
        this.needBlanks = 3 - ((newVal.length + 1) % 3);
        if (this.needBlanks === 2) {
          this.btnsBottom = true;
        }
        this.form = { ...this.searchForm };
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    handleSearch() {
      this.$emit("handleSearch", this.form);
    },
    handleClear() {
      for (const key in this.form) {
        if (Object.hasOwnProperty.call(this.form, key)) {
          this.form[key] = undefined;
        }
      }
      this.$emit("clearEvent");
    },
  },
};
</script>
<style scoped>
.search-cpn {
  margin: 15px;
  background-color: #fff;
  border-radius: 5px;
  padding: 25px 20px 5px 10px;
}
.blank {
  height: 1px;
}
.btns {
  text-align: right;
}
.btns-bottom {
  margin-bottom: 22px;
}
</style>
