<template>
  <el-card :shadow="shadow" class="card-body card_padding" :style="{ 'margin-bottom': marginBottom, 'border': border }">
    <el-row :gutter="0" type="flex" v-if="showSearch">
      <el-form ref="queryForm" id="searchForm" class="query_form" :inline="true" :model="model" :label-width="labelWidth"
               label-suffix=":"
               :size="itemSize">
        <slot name="default" ></slot>
        <el-col :xl="{ span: buttonSpan, offset: buttonOffSet }"
                :lg="{ span: lgButtonSpan, offset: lgButtonOffSet }"
                :md="{ span: mdButtonSpan, offset: mdButtonOffSet }"
                :sm="{ span: smButtonSpan, offset: smButtonOffSet }"
                :xs="{ span: xsButtonSpan, offset: xsButtonOffSet }" id="buttonCol" ref="button">
          <div class="searchClass2">
            <el-button type="primary" style=" background:#E70618;border-color :#E70618" icon="el-icon-search"
                       :size="buttonSize" @click="normalQuery">
              {{ searchLabel }}
            </el-button>
            <el-button icon="el-icon-refresh" class="refreshButton" :size="buttonSize"
                       @click="resetQuery">{{
                restLabel
              }}
            </el-button>
          </div>
        </el-col>
      </el-form>
    </el-row>
    <slot name="operate"></slot>
  </el-card>
</template>

<script>

export default {
  props: {
    labelWidth: {
      type: String,
      default: '80px'
    },
    model: {
      type: Object,
      required: true
    },
    buttonSize: {
      type: String,
      default: 'small'
    },
    itemSize: {
      type: String,
      default: 'small'
    },
    whiteBackground: {
      type: Boolean,
      default: true
    },
    showSearch: {
      type: Boolean,
      default: true
    },

    //设置按钮的左边距
    marginLeft: {
      type: String,
      default: '60px'
    },
    //阴影显示方式
    shadow: {
      type: String,
      default: 'never'
    },
    marginBottom: {
      type: String,
      default: '16px'
    },
    marginLeftValue: {
      type: Number,
      default: 15
    },
    border: {
      type: String,
      default: ''
    },
    searchLabel: {
      type: String,
      default: '搜索'
    },
    restLabel: {
      type: String,
      default: '重置'
    },

    //设置按钮的span ≥1920px
    buttonSpan: {
      type: Number,
      default: 6
    },
    buttonOffSet: {
      type: Number,
      default: 0
    },
    xlMarginLeftValue: {
      type: Number,
      default: 15
    },
    //设置按钮的span ≥1200px
    lgButtonSpan: {
      type: Number,
      default: 8
    },
    lgButtonOffSet: {
      type: Number,
      default: 0
    },
    lgMarginLeftValue: {
      type: Number,
      default: 15
    },

    //设置按钮的span ≥992px
    mdButtonSpan: {
      type: Number,
      default: 8
    },
    mdButtonOffSet: {
      type: Number,
      default: 0
    },
    mdMarginLeftValue: {
      type: Number,
      default: 15
    },

    //设置按钮的span ≥768px
    smButtonSpan: {
      type: Number,
      default: 12
    },
    smButtonOffSet: {
      type: Number,
      default: 12
    },
    smMarginLeftValue: {
      type: Number,
      default: 15
    },


    //设置按钮的span  <768px
    xsButtonSpan: {
      type: Number,
      default: 24
    },
    xsButtonOffSet: {
      type: Number,
      default: 0
    },
    xsMarginLeftValue: {
      type: Number,
      default: 15
    },
    /**
     * 重置后是否立即查询
     * */
    afterReset: {
      type: Boolean,
      default: false
    },
    /**
     * 搜索后 是否 清空 选择
     * */
    afterClear: {
      type: Boolean,
      default: true
    },
    /**
     *  区分 searchForm 与 Form
     * */
    isSearchForm: {
      type :Boolean,
      default:true
    }

  },
  computed: {},
  data() {
    return {
      modelForm: this.model,
      windowWidth: window.innerWidth
    }
  },
  mounted() {

  },
  methods: {
    normalQuery() {
      if (this.afterClear) {
        this.$parent.$refs.table.$refs.innerTable.clearSelection();
      }

      this.$emit('query')
    },
    async resetQuery() {
      this.modelForm = {}
      await this.resetForm('queryForm')
      if (this.afterReset) {
        if (this.$parent.$refs.table) {
          await this.$parent.$refs.table.search();
        }
        this.$emit('query')
      }
      if (this.$parent.$refs.table) {
        this.$parent.$refs.table.clearModalData();
      }
      await this.$emit('clear')
    },
  }

}
</script>

<style scoped>
.query_form {
  padding: 5px;
}

.refreshButton {
  color: #E70618;
  border-color: #E70618
}

.refreshButton:hover {
  background-color: rgba(222, 147, 20, 0.1);
  color: #E70618;
  border-color: #E70618;
}

.refreshButton:focus {
  background-color: rgba(222, 147, 20, 0.1);
  color:  #E70618;
  border-color:  #E70618;
}

.card_padding .el-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.card_padding .el-row .query_form >>> .el-col {
  height: 50px;
}

.searchClass {
  height: 51px;
  margin-top: 2px;
  display: inline;
  float: right;
  text-align: right;
  margin-right: calc(3%);
  width: 100%;
}

.searchClass2 {
  height: 49px;
  margin-top: 2px;
  display: inline;
  float: right;
  text-align: right;
  margin-right: calc(2.5%);
  width: 100%;
}

.whiteBackground {
  background-color: white;
  padding: 17px 20px 1px 20px;
}

::v-deep .small .el-input__inner {
  width: 120% !important;
}

::v-deep .el-date-editor {
  width: 100% !important;
}


::v-deep .small .el-date-editor {
  width: 115% !important;
}

::v-deep .el-card__body {
  padding-bottom: 0px !important;
}

.card_padding {
  padding-bottom: 0px !important;
}
</style>
