<!--
 * @Author       : xh
 * @Date         : 2022-12-05 10:44:04
 * @LastEditors: y001554
 * @FileName     :
-->
<template>
  <div class="gen-search-container">
    <div class="search-card">
      <gen-form ref="form" :inline="true" :form-model="searchModel" :form-data="searchData" :show-label="false" :show-more="showMore" :show-condition-num="moreConditionNum" v-bind="$attrs">
        <template v-for="name in slots" v-slot:[name]="{ item }">
          <slot :name="name" v-bind="item" />
        </template>
        <el-form-item v-if="searchModel.length > 0" class="operation-item">
          <el-button type="primary" :size="$attrs.size || 'small'" @click="$emit('search')"> 搜 索 </el-button>
          <el-button :size="$attrs.size || 'small'" @click="$emit('reset')"> 重 置 </el-button>
          <el-button v-if="searchModel.length > moreConditionNum" :size="$attrs.size || 'small'" type="text" icon="el-icon-s-open" @click="showMoreChange"> 高级筛选 </el-button>
        </el-form-item>
        <div class="rightBars">
          <slot />
        </div>
      </gen-form>
    </div>
    <el-drawer title="高级筛选" :visible.sync="showMore" direction="rtl" :before-close="handleClose" modal-append-to-body size="440px">
      <div class="gen-hiddenForm">
        <div class="gen-hiddenForm-content">
          <gen-form :inline="true" :form-model="searchModel" :form-data="searchData" :show-label="false" :show-more="false" :show-condition-num="100" show-block-label v-bind="$attrs">
            <!-- <div class="rightBars">
              <slot />
            </div> -->
          </gen-form>
        </div>
        <div class="gen-hiddenForm-footer flex">
          <div class="f1" />
          <el-button type="primary" :size="$attrs.size || 'small'" @click="hiddenSubmit"> 搜 索 </el-button>
          <el-button :size="$attrs.size || 'small'" @click="$emit('reset')"> 重 置 </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'GenSearch',
  props: {
    // size: {
    //   type: String,
    //   default: 'small'
    // },
    searchModel: {
      type: Array,
      required: true
    },
    searchData: {
      type: Object
    },
    moreConditionNum: {
      type: Number,
      default: 4
    }
  },
  data() {
    return {
      showMore: false,
      slots: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.slots = Object.keys(this.$scopedSlots).filter((s) => s !== 'default')
    })
  },
  methods: {
    showMoreChange() {
      this.showMore = !this.showMore
      this.$emit('more-show')
    },
    hiddenSubmit() {
      this.showMore = false
      this.$emit('search')
    },
    handleClose() {
      this.showMore = false
    }
  }
}
</script>

<style lang="scss" scoped>
.gen-search-container {
  margin-top: 10px;
  display: flex;
  // 搜索card
  .search-card {
    // margin-bottom: 10px;
    flex: 1;
    width: 100%;
    // display: flex;
    // justify-content: flex-start;
    // flex-wrap: wrap;
    .fr {
      float: right;
    }
    .rightBars {
      float: right;
    }
    .big-input {
      .el-input__inner {
        width: 370px !important;
      }
    }

    .el-form-item__content {
      span {
        display: inline !important;
      }
    }

    .el-date-editor--daterange.el-input__inner {
      width: 272px !important;
      height: 42px !important;
      line-height: 42px !important;
    }

    .el-date-editor {
      .el-input__icon {
        width: 0px !important;
      }

      .el-range-input {
        width: 48% !important;
      }
    }
  }
}
.gen-hiddenForm {
  width: 100%;
  height: 92vh;
  padding: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-right: 0;
  .gen-hiddenForm-content {
    flex: 1;
    width: 100%;
    overflow-y: auto;
  }
  .gen-hiddenForm-footer {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    width: 100%;
  }
}
// 文本框
::v-deep {
  .el-form--inline .el-form-item {
    margin-right: 10px !important;
    margin-bottom: 10px !important;
  }
  .el-input__inner {
    // width: 174px !important;
    // height: 42px !important;
    border: 1px solid #e6e6e6 !important;
    line-height: 42px !important;
    border-radius: 6px !important;
  }
}
</style>
