<template>
  <el-dialog title="活动统计" :visible.sync="dialogVisible" width="800px" @close="close">
    <div class="mb20">
      <el-select class="mr10 w140" clearable v-model="listParams.appCode" placeholder="全部应用" @change="refresh">
        <el-option label="福利调整(手动)" :value="1"></el-option>
        <el-option label="福利调整(同步)" :value="2"></el-option>
        <el-option label="积分商城" :value="3"></el-option>
      </el-select>
      <el-input class="mr10 w300" v-model="listParams.activityName" clearable placeholder="请输入活动名称搜索" @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
    </div>
    <el-table tooltip-effect="dark" :data="tableList" style="width:100%">
      <el-table-column prop="couponCode" label="活动应用名称" min-width="120"> </el-table-column>
      <el-table-column prop="couponCode" label="活动名称" min-width="120"> </el-table-column>
      <el-table-column prop="couponCode" label="可用库存" min-width="120"> </el-table-column>
      <el-table-column prop="couponCode" label="历史履约库存" min-width="120"> </el-table-column>
    </el-table>
    <div class="clearfix">
      <dm-pagination class="fr mb0" v-if="tableList.length" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></dm-pagination>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { page } from '@/mixins/table.js';
export default {
  mixins: [ page ],
  props: {
    dialogVisible: {
      default: false,
      type: Boolean
    },
    welfareId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      listParams: {
        appCode: '',
        activityName: '',
        currentPage: 1,
        pageSize: 20
      },
      total: 0,
      tableList: [],
    };
  },
  methods: {
    close() {
      this.$emit('update:dialogVisible', false);
    },
    getTableList() {
      return;
    }
  },
  watch: {
    dialogVisible(val) {
      val && this.getTableList();
    }
  }
};
</script>