<template>
  <el-form :model="form" ref="form" class="form-wrapper">
    <my-row class="row" :gutter="10">
      <template v-for="(item, index) of search">
        <my-col
          v-if="
            !item.hasOwnProperty('showFormItem') ||
            (item.hasOwnProperty('showFormItem') && item.showFormItem)
          "
          :span="item.col"
          :offset="0"
          :key="index"
        >
          <el-form-item
            :label-width="item.labelWidth || '80px'"
            :label="item.label"
          >
            <slot :name="item.slot" v-if="item.slot" />
            <template v-else>
              <el-input
                :ref="item.ref"
                clearable
                :disabled="item.disabled || false"
                v-if="item.type === 'input'"
                v-model="form[item.value]"
                :placeholder="item.placeholder"
                @change="
                  (value) => {
                    handleChange(value, item, index);
                  }
                "
              >
                <template v-if="item.append" slot="append">{{
                  item.append
                }}</template>
              </el-input>
              <el-select
                :ref="item.ref || 'select'"
                :disabled="item.disabled || false"
                :remote="false"
                filterable
                clearable
                reserve-keyword
                :multiple="
                  item.multiple == null || typeof item.multiple == 'underfined'
                    ? false
                    : item.multiple
                "
                v-if="item.type === 'select'"
                v-model="form[item.value]"
                :placeholder="item.placeholder"
                @change="
                  (value) => {
                    handleChange(value, item, index);
                  }
                "
                @focus="
                  (value) => {
                    handleFocus(value, item);
                  }
                "
              >
                <el-option
                  v-for="(ops, key) of item.options"
                  :key="key"
                  :label="item.itemLabel ? ops[item.itemLabel] : ops"
                  :value="item.itemValue ? ops[item.itemValue] : key"
                />
              </el-select>
              <el-date-picker
                :ref="item.ref"
                v-if="item.type === 'month'"
                :disabled="item.disabled || false"
                :clearable="
                  typeof item.clearable == 'underfined' ? true : item.clearable
                "
                :editable="
                  typeof item.editable == 'underfined' ? true : item.editable
                "
                v-model="form[item.value]"
                type="month"
                placeholder="选择年月"
                value-format="yyyy-MM"
                @change="
                  (value) => {
                    handleChange(value, item, index);
                  }
                "
              >
              </el-date-picker>
              <el-date-picker
                :ref="item.ref"
                v-if="item.type === 'year'"
                :disabled="item.disabled || false"
                :clearable="
                  typeof item.clearable == 'underfined' ? true : item.clearable
                "
                :editable="
                  typeof item.editable == 'underfined' ? true : item.editable
                "
                v-model="form[item.value]"
                type="year"
                placeholder="选择年份"
                value-format="yyyy"
                @change="
                  (value) => {
                    handleChange(value, item, index);
                  }
                "
              >
              </el-date-picker>
              <el-date-picker
                :ref="item.ref"
                clearable
                v-if="item.type === 'date'"
                :disabled="item.disabled || false"
                v-model="form[item.value]"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                @change="
                  (value) => {
                    handleChange(value, item, index);
                  }
                "
              >
              </el-date-picker>
              <el-date-picker
                :ref="item.ref"
                clearable
                v-if="item.type === 'daterange'"
                :disabled="item.disabled || false"
                v-model="form[item.value]"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                @change="
                  (value) => {
                    handleChange(value, item, index);
                  }
                "
              >
              </el-date-picker>
              <el-date-picker
                :ref="item.ref"
                clearable
                v-if="item.type === 'datetimerange'"
                :disabled="item.disabled || false"
                v-model="form[item.value]"
                type="datetimerange"
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="
                  (value) => {
                    handleChange(value, item, index);
                  }
                "
              >
              </el-date-picker>
              <slot v-if="item.type == 'selectTree'" name="selectTree"></slot>
              <template v-if="item.type == 'searchBtn'">
                <el-button
                  type="primary"
                  v-if="item.isShowSearch"
                  icon="el-icon-search"
                  @click="onSubmit"
                  >查询</el-button
                >
                <el-button
                  type="primary"
                  v-if="item.isShowReset"
                  icon="el-icon-refresh"
                  @click="onReset"
                  >重置</el-button
                >
              </template>
              <template v-if="item.type === 'otherBtn'">
                <slot name="btn"></slot>
              </template>
            </template>
          </el-form-item>
        </my-col>
      </template>
    </my-row>
  </el-form>
</template>

<script>
export default {
  name: "index",
  props: {
    searchBtnCol: {
      type: Number,
      default: 6,
    },
    search: {
      type: Array,
      default: [],
    },
    searchLoading: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    isLeft: {
      type: Boolean,
      default: false,
    },
    left: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {},
      loading: false,
    };
  },
  created() {
    if (this.search) {
      this.search.forEach((res) => {
        if (res.value) {
          this.$set(this.form, res.value, res.default || null);
        }
      });
    }
  },
  methods: {
    resetForm() {
      this.form = this.resetFormData(this.form);
    },
    async onSubmit() {
      this.$emit("handleSearch", this.form);
    },
    onExport() {
      this.$emit("handleExport", this.form);
    },
    async onReset() {
      if (this.search) {
        this.search.forEach((res) => {
          if (res.value) {
            this.$set(this.form, res.value, res.default || null);
          }
        });
      }
      this.onSubmit();
    },
    // 搜索栏下拉框检索
    async filterMethod(query, index) {
      if (!this.search[index].filterMethod) {
        return;
      }
      this.search[index].options = null;
      const prop = {};
      prop[this.search[index].filterName] = query;
      if (this.search[index].ortherParam) {
        prop[this.search[index].ortherParam.name] =
          this.form[this.search[index].ortherParam.value];
      }
      this[this.search[index].optionsType] = await this.$store.dispatch(
        this.search[index].filterMethod,
        prop
      );
      if (this[this.search[index].optionsType].length) {
        this.search[index].options = this[this.search[index].optionsType];
      }
    },
    // 下拉框联动提醒
    handleFocus(value, item) {
      if (item.focusTrue) {
        this.srFocus({ ref: item.ref });
      }
    },
    handleChange(value, obj, index) {
      if (obj.changeTrue) {
        obj.prop.value = value;
        this.form[this.search[index + 1].value] = null;
        const data = { prop: obj.prop, fn: obj.changeFn, num: index + 1 };
        this.$emit("srChange", data);
      } else {
        this.$emit("handleChange", this.form);
      }
    },
    handleClickLeft() {
      this.$emit("handleClickLeft");
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-form-item {
  margin-bottom: 20px !important;
}
.row {
  width: 100%;
}
.form-wrapper {
  width: 100%;
  display: flex;

  > div {
    margin-right: 18px;

    &:last-child {
      margin-right: 0;
    }
  }
}
.searchBtn {
  height: 100%;
  display: flex;
  align-items: center;
}

::v-deep {
  .el-range-editor.el-input__inner {
    width: 100%;
  }
}
// .btn {
//   padding: 6px 10px 6px 2px;
//   font-size: 24px;
//   cursor: pointer;
//   color: #acb1ba;
// }
</style>
