<template>
        <el-dialog title="活动邀请详情"  width="70%" :visible.sync="visible">
            <div class="filters-container">
                <el-form :model="formData" :inline="true" @keyup.enter.native="initData">
                    <el-form-item label="创建时间">
                        <created-at-picker v-model="formData.createdAt" @input="initData" name="创建"></created-at-picker>
                    </el-form-item>
                    <el-form-item label="邀请者">
                        <user-search v-model="formData.inviterUserId"></user-search>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="formData.status" :clearable="true" @change="initData">
                            <el-option
                                v-for="(value, key) in statusMap"
                                :label="value"
                                :value="key"
                                :key="key"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button @click="initData"  type="primary" > 搜索</el-button>

                    <el-button @click="download('/inviteDate/excel')" :disabled="downloading" >导出数据</el-button>

                </el-form>
            </div>
            <el-table
                :data="tableData"
                row-key="id"
                ref="table"
                header-row-class-name="table-header-row"
                header-cell-class-name="table-header-cell"
                row-class-name="table-row"
                cell-class-name="table-cell"
                height="480px"
                v-loading="fetchingData"
            >
                <el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
                <el-table-column prop="id" label="ID" width="100"> </el-table-column>
                <el-table-column prop="name" label="名称"> </el-table-column>
                <el-table-column prop="inviterUserId" label="邀请者ID" min-width="80" show-overflow-tooltip></el-table-column>
                <el-table-column prop="inviterPhone" label="邀请者电话" min-width="100" show-overflow-tooltip></el-table-column>

                <el-table-column prop="inviteeUserId" label="被邀请者ID"  min-width="80"> </el-table-column>
                
                <el-table-column prop="airDropAward" label="空投奖励数量" width="140"></el-table-column>

                <el-table-column prop="inviteIntegral" label="奖励积分" min-width="100"></el-table-column>

                <el-table-column prop="status" label="状态" width="140">
                    <template v-slot="{row}">
                        {{statusMap[row.status]}}
                    </template>
                </el-table-column>

                <el-table-column prop="remark" label="备注" width="140"></el-table-column>

                <el-table-column prop="automaticRewards" label="发放奖励" width="100">
                    <template v-slot="{ row }">
                        <el-tag  type="warning" v-if="row.automaticRewards">待发放</el-tag>
                        <el-tag  type="info" v-else>已发放</el-tag>
                    </template>
                </el-table-column>

                

                <el-table-column prop="createdAt" label="创建时间" width="140">
                    <template v-slot:header="{ column }">
                        <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"> </sortable-header>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-wrapper">
                <el-pagination
                    background
                    @size-change="onSizeChange"
                    @current-change="onCurrentChange"
                    :current-page="page"
                    :page-sizes="[10, 20, 30, 40, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalElements"
                >
                </el-pagination>
            </div>
        </el-dialog>
</template>
<script>
import pageableTable from '@/mixins/pageableTable';
import SortableHeader from '../components/SortableHeader.vue';



export default {
    components: { SortableHeader },
    name: 'InviteDateList',
    mixins: [pageableTable],
    data() {
        return {
            multipleMode: false,
            search: '',
            url: '/inviteDate/all',
            downloading: false,
            formData: {
                activityId:null,
                createdAt: '',
                inviterUserId: '',
            },
            statusMap:{
                    0:"成功邀请",// SUCCESSFULLY("成功邀请"),
                    1: "银行卡号重复",//DUPLICATE_BANK("银行卡号重复"),
                    2: "邀请人未实名认证", //CERTAIN("邀请人未实名认证"),
                    3:"邀请人未绑定银行卡", //UNBOUND_BANK("邀请人未绑定银行卡"),
                    4:"邀请人未持有指定藏品", //SPECIFIED_COLLECTION("邀请人未持有指定藏品");
            },
            visible:false
        };
    },
    computed: {
        selection() {
            return this.$refs.table.selection.map(i => i.id);
        }
    },
    methods: {
        beforeGetData() {
            return {
                search: this.search,
                query: { del: false, ...this.formData }
            };
        },
        afterGetData(res) {
            
        },
        init(activityId) {
            this.visible = true;
            this.formData.activityId = activityId;
            this.initData();
        },
    }
};
</script>
