<template>
  <div class="right-list-toobar">
    <el-toolbar>
      <div class="layout-data-search layout-data-search-6">
        <el-button @click="refresh">
          <i class="fa fa-refresh"></i>刷新</el-button>
        <el-input v-model="memberNameValue" @keyup.enter.native="list" style="width:200px" placeholder="名称" ></el-input>
        <el-select  clearable v-model="memberStatusValue" placeholder="状态" class="auto-width">
          <el-option v-for="item in memberStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select  clearable v-model="operateTypeValue" placeholder="操作类型" class="auto-width">
          <el-option v-for="item in operateType" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-date-picker id="memberLoginStat-date-picker" class="auto-width" v-model="dateRangeValue" type="daterange"  format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期范围" @change="dateRangeChange"></el-date-picker>
        <el-button @click="list" class="button" type="primary"><slot name="button">查看</slot></el-button>
      </div>
    </el-toolbar>
    <div>
      <el-table ref="dataTable1" resizable tooltip-effect="dark" style="width: 100%" :data-read-url="getURL" :page-size="10" :default-sort="{prop: 'hitCount', order: 'descending'}">
        <el-table-column type="index" label="序号" width="65"></el-table-column>
        <el-table-column label="会员名称">
          <template slot-scope="scope">
            {{scope.row.userName}}({{scope.row.realName}})
          </template>
        </el-table-column>
        <el-table-column label="会员状态">
          <template slot-scope="scope">
            <i class="fa fa-check icon-success" v-if="scope.row.status === 'Y'"></i>
            <i class="fa fa-times icon-danger" v-else></i>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="来源"></el-table-column>
        <el-table-column prop="operateTypeName" label="操作类型"></el-table-column>
        <el-table-column prop="addTime" label="操作时间">
          <template slot-scope="scope">
            {{scope.row.addTime | fixDateTime}}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'
export default {
  filters: {
    fixDateTime: function(val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      operateType: [], // 操作类型
      memberStatus: [], // 会员状态
      memberNameValue: '', // 搜索框数据
      memberStatusValue: '',
      operateTypeValue: '',
      dateRangeValue: '',
      startDate: '',
      endDate: ''
    }
  },
  methods: {
    dateRangeChange(val) {
      if (val && val.length > 1) {
        this.startDate = val[0]
        this.endDate = val[1]
      } else {
        this.startDate = ''
        this.endDate = ''
      }
    },
    refresh() {
      this.memberNameValue = ''
      this.memberStatusValue = ''
      this.operateTypeValue = ''
      this.startDate = ''
      this.endDate = ''
      this.$refs.dataTable1.getData()
    },
    list() {
      this.$refs.dataTable1.getData()
    },
    getURL() {
      return [
        '/ui/stats/memberLoginStat',
        {
          params: {
            memberName: encodeURI(this.memberNameValue),
            memberStatus: this.memberStatusValue,
            operateType: this.operateTypeValue,
            startDate: this.startDate,
            endDate: this.endDate
          }
        }
      ]
    }
  },
  async created() {
    let memberStatusResp = await axios.get('/ui/platform/codes/Enable')
    this.memberStatus = memberStatusResp.data.data
    let operateTypeResp = await axios.get('/ui/platform/codes/OperateType')
    this.operateType = operateTypeResp.data.data
  }
}
</script>

<style scoped>
.auto-width {
  width: auto;
}
</style>
