<template>
  <el-form :model="searchData"
           ref="searchForm"
           class="template-search-form"
           :size="config.size || ''"
           :label-width="config.labelWidth || '110px'">
    <el-row :gutter="config.gutter||100">
      <el-col v-for="(obj, key) in this.config.hiddenMore && !isOpen ? shortForm : config.form"
              :span="obj.colSpan || 6"
              :key="key">
        <el-form-item v-show="handleShow(obj.show)"
                      :label="obj.label"
                      :prop="key"
                      :label-width="obj.labelWidth || config.labelWidth"
                      :rules="handleRules(obj.rules)">
          <!-- :rules="obj.validate" -->
          <!-- <span v-if="" slot="label"
                class="label-mini">{{obj.label}}</span> -->
          <el-input v-if="obj.type === 'input'"
                    v-model="searchData[key]"
                    :placeholder="obj.placeholder || '请输入'"
                    :clearable="handleClearable(obj.clearable)"
                    :onkeyup="obj.onkeyup"
                    :disabled="obj.disabled"
                    @keyup.enter.native="handleSearchForm"
                    @input="typeof obj.inputFunc === 'function' && obj.inputFunc($event)">
            <span v-if="obj.suffix"
                  slot="suffix">{{ obj.suffix }}</span>
          </el-input>
          <el-select v-else-if="obj.type === 'select'"
                     v-model="searchData[key]"
                     :disabled="obj.disabled"
                     :placeholder="obj.placeholder || '请选择'"
                     :clearable="handleClearable(obj.clearable)"
                     @change="typeof obj.changeFunc === 'function' && obj.changeFunc($event)">
            <el-option v-for="item in handleOptions(obj.options)"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
          <!-- 时间范围 -->
          <el-date-picker v-else-if="obj.type === 'date-picker'"
                          v-model="searchData[key]"
                          :style="obj.style||{}"
                          :type="obj.datePickerType || 'datetime'"
                          :placeholder="obj.placeholder || '选择日期时间'"
                          :start-placeholder="obj.startPlaceholder || '开始时间'"
                          :end-placeholder="obj.endPlaceholder || '结束时间'"
                          :clearable="handleClearable(obj.clearable)"
                          :value-format="obj.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
                          :default-time="obj.defaultTime || [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
                          @change="typeof obj.changeFunc === 'function' && obj.changeFunc($event)"></el-date-picker>
          <!-- 时间 -->
          <el-date-picker v-else-if="obj.type === 'date-norange'"
                          class="date-norange"
                          v-model="searchData[key]"
                          :type="obj.datePickerType || 'date'"
                          :placeholder="obj.placeholder || '选择日期时间'"
                          :clearable="handleClearable(obj.clearable)"
                          :value-format="obj.valueFormat || 'YYYY-MM-DD'"
                          @change="typeof obj.changeFunc === 'function' && obj.changeFunc($event)">
          </el-date-picker>
          <el-radio-group v-else-if="obj.type === 'radio'"
                          v-model="searchData[key]">
            <el-radio v-for="item in handleOptions(obj.options)"
                      :key="item.value"
                      :label="item.value"
                      @change="typeof obj.changeFunc === 'function' && obj.changeFunc($event)">{{ item.label }}</el-radio>
          </el-radio-group>
          <!-- :show-all-levels="!!obj.show-all-levels" -->
          <el-cascader v-else-if="obj.type === 'cascader'"
                       v-model="searchData[key]"
                       :props="obj.props"
                       :placeholder="obj.placeholder || '请选择'"
                       :disabled="obj.disabled"
                       :clearable="handleClearable(obj.clearable)"
                       :options="handleOptions(obj.options)"
                       @change="typeof obj.changeFunc === 'function' && obj.changeFunc($event)"></el-cascader>
          <span v-else>{{obj.value}}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 本组件的按钮组 支持俩种布局方式  
      一种是在默认按钮组[重置、查询]之前插槽其他按钮  
      一种是在默认按钮组[重置、查询]之后插槽其他按钮
      （ 动态class目前支持 'space-between' 对应 justify-content: space-between） -->
    <div v-if="showBtn"
         :class="config.btnsClass || 'text-right'">
      <slot name="btns-before"></slot>
      <span>
        <el-button v-if="config.hiddenMore"
                   :size="config.size || 'medium'"
                   type="text"
                   @click="openMore">
          {{isOpen ? '收起选项' : '展开选项'}}
          <i :class="isOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
        </el-button>
        <el-button :size="config.size || 'medium'"
                   @click="handleResetForm">重置</el-button>
        <el-button type="primary"
                   :size="config.size || 'medium'"
                   @click="handleSearchForm">查询</el-button>
      </span>
      <slot name="btns"></slot>
    </div>
  </el-form>
</template>

<script>
export default {
  name: "template-search-form",
  data() {
    return {
      isOpen: false,
      shortForm: {},
    };
  },
  props: {
    searchData: {
      required: true,
      type: Object,
    },
    config: {
      type: Object,
      default: () => ({}),
    },
    showBtn: {
      type: Boolean,
      default: true,
    },
  },
  mounted() {
    if (this.config.hiddenMore && this.config.form) {
      console.log(this.config.form);
      let Arr = Object.keys(this.config.form);
      let shortArr = Arr.slice(0, this.config.hiddenMore);
      shortArr.forEach((item) => {
        this.shortForm[item] = this.config.form[item];
      });
    }
  },
  methods: {
    openMore() {
      this.isOpen = !this.isOpen;
    },
    handleShow(condition) {
      if (typeof condition === "function") {
        return condition();
      } else if (condition === undefined) {
        return true;
      } else {
        return !!condition;
      }
    },
    handleClearable(condition) {
      if (typeof condition === "function") {
        return condition();
      } else if (condition === undefined) {
        return true;
      } else {
        return !!condition;
      }
    },
    handleOptions(options) {
      if (typeof options === "function") {
        return options();
      }
      return options || [];
    },
    handleRules(rules) {
      if (typeof rules === "function") {
        return rules();
      }
      return rules || [];
    },
    handleSearchForm() {
      this.$emit("searchForm");
    },
    handleResetForm() {
      this.$refs.searchForm.resetFields();
      this.$emit("resetForm");
    },
  },
};
</script>

<style lang="less">
.template-search-form {
  .el-form-item--mini {
    width: 100%;

    .label-mini,
    .el-radio__label {
      font-size: 12px;
    }

    .el-form-item__content {
      // width: calc(100% - 110px);
      height: 28px;
    }

    .el-input,
    .el-select,
    .el-date-picker,
    .date-norange {
      width: 100%;
      // width: calc(100% - 10px);
    }

    .el-date-editor.el-input__inner {
      width: 100%;
      // width: calc(100% - 10px);
    }

    .el-select {
      .el-input {
        width: 100%;
      }
    }

    .el-radio {
      margin-right: 15px;
    }
  }

  .text-right {
    text-align: right;
  }
  .space-between {
    display: flex;
    justify-content: space-between;
  }
}
</style>
