<template>
  <el-dialog title="活动统计" :visible.sync="dialogVisible" width="800px" @close="close">
    <div class="mb20">
      <el-select v-model="appCodes" class="w140 mr10" multiple placeholder="全部来源" clearable @change="changeAppCode">
        <el-option v-for="item in appList" :key="item.appCode" :label="item.appName" :value="item.appCode"></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" v-loading="loading" :data="tableList" style="width:100%">
      <el-table-column prop="appName" label="活动应用名称" min-width="120"> </el-table-column>
      <el-table-column prop="activityName" label="活动名称" min-width="120"> </el-table-column>
      <el-table-column prop="remainedStock" label="可用库存" min-width="120"> </el-table-column>
      <el-table-column prop="outStock" 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 commonApi from '@/api/common.js';
const { getStockActivityStatistics, getAppList } = commonApi;
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: [],
      appList: [],
      appCodes: ''
    };
  },
  methods: {
    close() {
      this.$emit('update:dialogVisible', false);
      this.tableList = [];
      this.appCodes = '';
      this.listParams.appCode = '';
      this.listParams.activityName = '';
      this.listParams.currentPage = 1;
    },
    changeAppCode(ids) {
      this.listParams.appCodes = ids.join(',');
      this.refresh();
    },
    getAppList() {
      getAppList().then(res => {
        this.appList = res.result || [];
      });
    },
    getTableList() {
      this.loading = true;
      getStockActivityStatistics({
        welfareId: this.welfareId,
        ...this.listParams
      }).then(res => {
        this.loading = false;
        this.tableList = res.total || [];
      }).catch(() => {
        this.loading = false;
      });
    }
  },
  watch: {
    dialogVisible(val) {
      if(val) {
        this.getTableList();
        this.getAppList();
      }
    }
  }
};
</script>