<template>
  <div class="app-filter flex-row pt-11">
    <div :class="{ 'auto-h': !hide }" class="form-panl flex-1">
      <el-form ref="elFormRef" :inline="true" :model="model" class="filter" v-bind="$attrs" v-on="$listeners" @submit.native.prevent>
        <div class="form-area">
          <el-row ref="customRowRef" :gutter="15" class="custom-row" flex>
            <slot />
            <!-- <template v-if="!showMore">
              <el-col :span="btnSpan" class="">
                <el-button icon="el-icon-search" size="mini" type="primary" @click="query"> 搜索 </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="reset"> 重置 </el-button>

                <slot name="button" />

                <el-button v-if="showMore" class="more-btn" type="text" @click="handoffForm">
                  更多
                  <i :class="{ rotate: !hide }" class="el-icon-arrow-down" />
                </el-button>
              </el-col>
            </template> -->
          </el-row>
        </div>
      </el-form>
    </div>
    <!-- v-if="!!showMore" -->
    <div class="btn-area pl-10">
      <el-button icon="el-icon-search" size="mini" type="primary" @click="query"> 搜索</el-button>
      <el-button icon="el-icon-refresh" size="mini" @click="reset"> 重置</el-button>
      <slot name="button" />
      <el-button v-if="showMore" class="more-btn" type="text" @click="handoffForm">
        更多
        <i :class="{ rotate: !hide }" class="el-icon-arrow-down" />
      </el-button>
    </div>

    <slot name="tools" />
  </div>
</template>

<script>
const SET_TING = {
  input: {
    group: 'quick',
    operation: 'LIKE',
    relation: 'OR',
  },
  'select,date,dateTime,checkbox,radio': {
    group: 'quick',
    operation: 'EQUAL',
    relation: 'OR',
  },
  dateRange: {
    property: '',
    // value: [beginDate, endDate],
    group: 'time',
    operation: 'BETWEEN',
    relation: 'AND',
  },
};
export default {
  props: {
    model: {
      type: Object,
      default: () => ({}),
    },
    queryText: {
      type: String,
      default: '查询',
    },
    resetText: {
      type: String,
      default: '重置',
    },
    btnSpan: {
      type: Number,
      default: 5,
    },
  },
  data() {
    return {
      height: '32px',
      hide: true,
      showMore: false,
      config: {},
    };
  },
  watch: {
    '$slots.default': {
      immediate: true,
      handler(arr) {
        this.$nextTick(() => {
          arr?.length && this.handleSpan(this.$slots.default);
        });
      },
    },
  },
  // mounted() {
  //   this.$nextTick(() => {
  //     this.$slots.default?.length && this.handleSpan(this.$slots.default);
  //   });
  // },
  methods: {
    handleSpan(vNodes) {
      const span_arr = [];
      vNodes.forEach((o) => {
        const { filterConfig, prop } = o.data.attrs;
        span_arr.push(o.componentInstance.span);
        if (prop) {
          this.config[prop] = {
            filterConfig,
            elType: o.data.attrs['el-type'],
            prop,
          };
        }
      });

      const sum = span_arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
      this.showMore = sum > 24; // - this.btnSpan;
    },
    handoffForm() {
      this.hide = !this.hide;
    },
    handleData(data) {
      const res = {};
      const res_ = [];
      const keys = Object.keys(data) || [];
      const confArr = ['_Range'];
      keys.forEach((key) => {
        res[key] = data[key];
        const item = this.config[key];
        const keys = Object.keys(SET_TING);
        let conf = {};
        keys.forEach((k) => {
          if (k.includes(item?.elType)) {
            conf = SET_TING[k];
          } else {
            const some = ['id', 'ID', 'Id'].some((o) => key.includes(o));
            conf = some
              ? {
                  group: 'quick',
                  operation: 'EQUAL',
                  relation: 'OR',
                }
              : SET_TING.input;
          }
        });

        let val;
        confArr.forEach((k) => {
          if (key.includes(k)) {
            val = data[`${key}${k}`];
            console.log(val);
          } else {
            val = data[key];
          }
        });

        res_.push({
          ...conf,
          ...(item?.filterConfig || {}),
          value: val,
          property: key,
        });
      });

      return {
        res,
        res_: res_.filter((o) => {
          return confArr.every((str) => !o.property.includes(str));
        }),
      };
    },
    query() {
      this.$refs.elFormRef.validate((valid) => {
        if (valid) {
          const { res, res_ } = this.handleData(this.model);

          this.$emit('query', res_, res);
          // this.$emit('query', this.model, this.config);
        }
      });
    },
    reset() {
      const data = this.handleData(this.model);
      this.$emit('reset', data);
    },
  },
};
</script>

<style lang="scss" scoped>
.app-filter {
  //background: #fff;
  .el-form-item {
    margin-bottom: 11px;
  }
}

.form-panl {
  max-height: 42px;
  transition: max-height 0.5s;
  overflow: hidden;

  &.auto-h {
    max-height: 100vh;
  }
}

.more-btn {
  i {
    transition: transform 0.5s;
    transform: rotate(0deg);

    &.rotate {
      transform: rotate(-180deg);
    }
  }
}
</style>
