<template>
  <div class="leo-filter" v-loading="loading">
    <div :class="`filter-item`">
      <el-select v-model="filterModel.decType" placeholder="类型">
        <el-option value="" label="全部"></el-option>
        <el-option value="ZC" label="首购单"></el-option>
        <!--<el-option value="ZG" label="增购单"></el-option>-->
        <!--<el-option value="LS" label="零售单"></el-option>-->
        <!--<el-option value="FX" label="复销单"></el-option>-->
      </el-select>
    </div>
    <div :class="`filter-item`">
      <el-select v-model="filterModel.location" placeholder="区域">
        <el-option value="" label="全部"></el-option>
        <el-option value="1" label="一市场"></el-option>
        <el-option value="2" label="二市场"></el-option>
        <el-option value="3" label="三市场"></el-option>
        <!--<el-option value="4" label="四市场"></el-option>-->
        <!--<el-option value="5" label="五市场"></el-option>-->
      </el-select>
    </div>
    <div :class="`filter-item`">
      <el-input v-model="filterModel.periodNum" placeholder="期数"></el-input>
    </div>
    <div :class="`filter-item filter-date-range-picker`">
      <el-input v-model="filterModel.userName" placeholder="请输入会员编号" @change="handleChkUser">
        <template slot="append">【{{realName}}】</template>
      </el-input>
    </div>
    <el-button class="filter-item filter-filter-btn" type="primary" @click="handleFilter">筛选</el-button>
  </div>
</template>

<script>
  import network from '@/utils/network'

  const hiddenClass = 'filter-hidden'
  export default {
    name: 'trace-down-qy-filter',
    mounted() {
      this.filterModel.decType = this.decTypeDefault
      this.filterModel.location = this.location
      this.filterModel.periodNum = this.periodNumDefault
      this.filterModel.userName = this.userNameDefault
    },
    props: {
      requestPath: {
        type: String,
      },
      decTypeDefault: {
        type: String,
        default: '',
      },
      locationDefault: {
        type: String,
        default: '',
      },
      periodNumDefault: {
        type: String,
        default: '',
      },
      userNameDefault: {
        type: String,
        default: '',
      },
      filter: null,
    },
    data() {
      return {
        filterModel: {
          decType: '',
          location: '',
          periodNum: '',
          userName: '',
        },
        loading: false,
        realName: '-',
      }
    },
    watch: {
      decTypeDefault() {
        this.filterModel.decType = this.decTypeDefault
      },
      locationDefault() {
        this.filterModel.location = this.locationDefault
      },
      periodNumDefault() {
        this.filterModel.periodNumStart = this.periodNumDefault
      },
      userNameDefault() {
        this.filterModel.userName = this.userNameDefault
      },
    },
    methods: {
      handleChkUser() {
        if (this.filterModel.userName) {
          this.loading = true
          network.getData('user/full-info', {userName: this.filterModel.userName}).then(response => {
            this.realName = response.REAL_NAME
            this.loading = false
          }).catch(response => {
            this.loading = false
          })
        }
      },
      handleFilter: function () {
        if (this.filterModel.periodNum === '' || this.filterModel.userName === '') {
          this.$message({
            message: '请填写期数和会员编号',
            type: 'warning'
          })
          return false
        }
        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>