<template>
  <el-dialog title="活动统计" :visible.sync="dialogVisible" width="800px" @close="close">
    <div class="mb20">
      <el-select v-model="appCodes" class="mr10" style="width:180px" multiple placeholder="全部应用" clearable collapse-tags @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>
    <div class="statistics">
      <el-table max-height="500" 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="180"> </el-table-column>
        <el-table-column prop="remainedStock" label="可用库存" min-width="120"> </el-table-column>
        <el-table-column prop="preStock" v-if="type == 1 || type == 2" label="待履约库存" min-width="120"> </el-table-column>
        <el-table-column prop="outStock" label="历史履约库存" min-width="120"> </el-table-column>
        <template slot="empty">
          <div class="no-data-wrap">
            <div class="no-data-icon">
              <img width="50" height="50" src="../../assets/images/no-data_icon1.png" />
            </div>
            <p style="font-size:12px">暂无数据</p>
          </div>
        </template>
      </el-table>
    </div>
    <!-- <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
    },
    type: {
      type: [ Number, String ], // 1实物礼品 2虚拟礼品 3卡券 4卡券包
      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;
        let tableList = res.result.page.result || [];
        if(tableList.length) {
          const count = res.result.page.result.reduce((total, current) => {
            total.remainedStock += current.remainedStock;
            total.preStock += current.preStock;
            total.outStock += current.outStock;
          }, {
            'appName': '合计',
            'activityName': '',
            'remainedStock': 0,
            'preStock': 0,
            'outStock': 0,
          });
          tableList = tableList.unshift(count); // 追加
        }
        this.tableList = tableList; // 无分页
      }).catch(() => {
        this.loading = false;
      });
    }
  },
  watch: {
    dialogVisible(val) {
      if(val) {
        this.getTableList();
        this.getAppList();
      }
    }
  }
};
</script>
<style>
.statistics .el-table__empty-block .el-table__empty-text::before{
  /* width: 50px;
  height: 50px; */
  /* font-size: 50px; */
  display: none;
}
</style>
