<template>
  <!-- 公用条件筛选组件，使用方式： -->
  <!-- <search-crm @query="doQuery" :searchData="searchConfig" ref="searchRef"></search-crm> -->
  <div class="ls-search-form search-crm">
    <template v-for="(row, index) in searchData">
      <el-row :key="index" :gutter="20" class="search-style" :style="{ display: index >= 2 ? rowShow : 'block' }">
        <el-col v-for="(item, idx) in row" :key="idx" :span="item.span">
          <label>{{ item.label }}</label>
          <el-input
            v-if="item.input"
            v-model="queryParam[item.value]"
            @keyup.enter.native="handleQuery"
            v-inputFilter:trim
            size="mini"
            :placeholder="item.placeHolder || '请输入'"
          />
          <common-select
            v-if="item.select && item.type"
            v-model="queryParam[item.value]"
            :dict-type="item.type"
          ></common-select>

          <el-select
            v-if="item.select && !item.type"
            v-model="queryParam[item.value]"
            placeholder="请选择"
            filterable
            clearable
            size="mini"
          >
            <el-option
              v-for="(ele, i) in item.options"
              :key="i"
              :label="ele.department"
              :value="ele.department"
            ></el-option>
          </el-select>
          <el-date-picker
            v-if="item.date"
            v-model="queryParam[item.value]"
            @change="dateChange"
            type="daterange"
            unlink-panels
            size="mini"
            clearable
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <template slot-scope="scope" v-if="item.slot">
            <slot :name="item.slotName" :data="scope" />
          </template>
        </el-col>
      </el-row>
    </template>
    <btnGroup
      v-bind="$attrs"
      :showExtend="searchData.length > 2"
      @updateExtend="updateExtend"
      @query="handleQuery"
    ></btnGroup>
  </div>
</template>

<script>
import btnGroup from "./btnGroup.vue"
export default {
  name: "searchCrm",
  components: { btnGroup },
  props: {
    searchData: {
      type: Array,
      require: true,
    },
  },
  data() {
    return {
      queryParam: {},
      rowShow: "none",
      isShow: false,
      timer: null,
    }
  },
  methods: {
    dateChange(arr) {
      console.log(33, this.queryParam)
    },

    //查询
    handleQuery() {
      this.$emit("query")
    },
    //重置
    reSet() {
      Object.keys(this.queryParam).forEach((key) => {
        this.queryParam[key] = this.queryParam[key].date ? [] : ""
      })
      this.handleQuery()
    },
    updateExtend() {
      let height = 146
      const wrap = document.querySelector(".search-crm")
      this.isShow = !this.isShow
      this.rowShow = "block"
      wrap.style.maxHeight = this.isShow ? "max-content" : `${height}px`
      this.timer = setInterval(() => {
        if (height >= 42 * this.searchData.length + 32 + 15 || height < 146) {
          if (!this.isShow) {
            wrap.style.height = "146px"
            this.rowShow = "none"
          }
          clearInterval(this.timer)
          this.timer = null
          return
        }
        height = this.isShow ? height + 30 : height - 30
        wrap.style.height = height + "px"
      }, 50)
    },
  },
}
</script>

<style type="text/css" scoped>
.search-crm {
  height: 146px;
  min-height: 146px;
  overflow: hidden;
  transition: "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
}
</style>