<template>
  <div class="leo-filter">
    <div :class="`filter-item`">
      <el-input v-model="filterModel.periodNum" placeholder="期数"></el-input>
    </div>
    <div :class="`filter-item`">
      <el-input v-model="filterModel.userName" placeholder="请输入会员编号"></el-input>
    </div>
    <el-button class="filter-item filter-filter-btn" type="primary" @click="handleFilter">筛选</el-button>
  </div>
</template>

<script>
const hiddenClass = 'filter-hidden'
export default {
  name: 'trace-down-yc-filter',
  mounted () {
    this.filterModel.periodNum = this.periodNumDefault
    this.filterModel.userName = this.userNameDefault
  },
  props: {
    requestPath: {
      type: String,
    },
    periodNumDefault: {
      type: String,
      default: '',
    },
    userNameDefault: {
      type: String,
      default: '',
    },
    filter: null,
  },
  data () {
    return {
      filterModel: {
        periodNum: '',
        userName: '',
      },
    }
  },
  watch: {
    periodNumDefault () {
      this.filterModel.periodNumStart = this.periodNumDefault
    },
    userNameDefault () {
      this.filterModel.userName = this.userNameDefault
    },
  },
  methods: {
    handleFilter: function () {
      this.filter(this.filterModel)
    }
  }
}
</script>

<style scoped>
  .leo-filter {
    padding: 0 0 15px 0;
  }

  .leo-filter .filter-hidden {
    display: none;
  }

  .filter-item {
    margin-right: 10px;
  }

  @media (min-width: 768px) {
    .leo-filter {
    }

    .leo-filter .filter-item {
      display: inline-block;
      max-width: 200px;
    }

    .leo-filter .filter-item.filter-date-month-picker {
      display: inline-block;
      max-width: 220px;
    }

    .leo-filter .filter-item.filter-date-range-picker {
      display: inline-block;
      max-width: 380px;
    }

    .leo-filter .filter-item.filter-filter-btn {
      height: 38px;
      width: 80px;
    }

    .leo-filter .filter-hidden {
      display: none;
    }
  }
</style>