<template>
  <div class="rcs-search">
    <el-form
      ref="form"
      :model="form"
      label-position="left"
      :inline="true"
      :rules="customRules || rules"
      @submit.native.prevent
    >
      <template v-for=" (item,index) in search">
        <template v-if="item.type === 'input'">
          <el-form-item
            :key="item.name"
            :prop="item.name"
            :label="item.label"
            :label-width="item.labelWidth?item.labelWidth + 'px':labelWidth + 'px'"
          >
            <el-input
              v-model.trim="form[item.name]"
              :placeholder="item.placeholder||'请输入'"
              :title="item.placeholder"
              :maxlength="item.maxLength"
              clearable
              :style="item.styleWidth || defaultWidth"
              @keyup.enter.native="doEnter(item.type)"
            />
          </el-form-item>
        </template>
        <template v-if="item.type === 'select'">
          <el-form-item
            :key="item.name"
            :prop="item.name"
            :label="item.label&&(!item.isNoSign)?item.label+'：':item.label"
            :label-width="item.labelWidth?item.labelWidth + 'px':labelWidth + 'px'"
          >
            <el-select
              v-model.trim="form[item.name]"
              :disabled="item.disabled"
              :placeholder="item.placeholder||'请选择'"
              :filterable="item.filterable||true"
              :multiple="item.multiple"
              :collapse-tags="item.collapseTags"
              :clearable="item.clearable||true"
              :remote="item.remote||false"
              :remote-method="(query)=>remoteMethod(query,item.name)"
              :style="item.styleWidth || defaultWidth"
            >
              <el-option
                v-for="inner in item.options"
                :key="inner.value"
                :label="inner.text"
                :value="inner.value"
              />
            </el-select>
          </el-form-item>
        </template>
        <template v-if="item.type === 'date'">
          <el-form-item
            :key="item.name"
            :prop="item.name"
            :label="item.label&&(!item.isNoSign)?item.label+'：':item.label"
            :label-width="item.labelWidth?item.labelWidth + 'px':labelWidth + 'px'"
          >
            <el-date-picker
              v-model.trim="form[item.name]"
              type="date"
              :value-format="item.format||'yyyy-MM-dd'"
              :placeholder="item.placeholder||'请选择'"
            />
          </el-form-item>
        </template>
      </template>
      <el-form-item v-if="isShowExpandParams">
        <el-button
          v-if="!isExpand"
          type="text"
          @click="updateExpandParams(1)"
        >+更多筛选</el-button>
        <el-button
          v-else
          type="text"
          @click="updateExpandParams(0)"
        >-收起筛选</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="dosearch()"
        >
          查 询
        </el-button>
      </el-form-item>
      <el-form-item v-if="isShowReset">
        <el-button @click="reset()">
          重 置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'SearchForm',
  props: {
    search: {
      type: Array,
      default: () => [],
      required: true,
    },
    labelWidth: {
      type: [Number, String],
      default: () => '70',
      required: false,
    },
    defaultValues: {
      type: Array,
      default: () => [],
    },
    customRules: {
      type: Object,
      default: null,
    },
    isShowExpandParams: { // 扩展展开/收起功能   默认值false:没有展开收起功能
      type: Boolean,
      default: false,
    },
    isShowReset: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      form: null,
      rules: {},
      defaultWidth: {
        width: '200px',
      },
      isExpand: false,
    };
  },
  watch: {
    defaultValues: {
      handler(val) {
        this.defaultValues.forEach(item => {
          this.$set(this.form, item.key, item.value);
        });
      },
      deep: true,
    },
  },
  created() {
    const obj = {};
    for (const item of this.search) {
      obj[item.name] = undefined;
      if (item.isValid) { // 校验必选条件
        const message = item.type === 'input' ? '请输入' : '请选择';
        this.rules[item.name] = [
          { required: true, message: item.message ? item.message : message, trigger: 'change' },
        ];
      } else if (item.regex) {
        this.rules[item.name] = [
          { required: item.required ?? true, validator: item.validator || this.validator, trigger: 'change' }, // 规则校验：默认是必填，有配置required用配置的值
        ];
      }
    }
    this.defaultValues.forEach(item => {
      obj[item.key] = item.value;
    });
    this.form = obj;
  },
  mounted() {
    console.log('this.form, this.rules------', this.form, this.rules);
  },
  methods: {
    updateExpandParams(val) {
      // val：1 展开  0 收起
      this.isExpand = !this.isExpand;
    },
    remoteMethod(query, prop) {
      this.$emit('onRemote', query, prop);
    },
  },
};
</script>

<style lang="scss" scoped>
    .rcs-search{
        ::v-deep .el-date-editor .el-input__inner{
            padding-left: 30px;
        }
    }
</style>
