<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.userId"></user-search>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="formData.status" clearable="" @input="initData">
                            <el-option v-for="(value,key) in receiveStatusMap" :key="key" :value="key" :label="value"></el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-button @click="initData"  type="primary" > 搜索</el-button>

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

                    <el-button @click="batchDeliver" :disabled="downloading"  type="warning">批量发货</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"
                @selection-change="handleSelectionChange"
            >
                <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="userId" label="用户ID"> </el-table-column>
                <el-table-column prop="phone" label="手机号" min-width="100" show-overflow-tooltip></el-table-column>
                <el-table-column prop="userName" label="用户昵称" min-width="100" show-overflow-tooltip></el-table-column>
                <el-table-column prop="activityId" label="活动ID"> </el-table-column>
                
                <el-table-column prop="type" label="抽奖类型"  min-width="80"> </el-table-column>
                
                <el-table-column prop="awardId" label="奖品ID" width="80"></el-table-column>
                <el-table-column prop="awardType" label="奖品类型" width="80">
                    <template v-slot="{row}">
                            {{typeMap[row.awardType]}}
                    </template>
                </el-table-column>
                <el-table-column prop="awardName" label="奖品名称" min-width="100" show-overflow-tooltip></el-table-column>

                <el-table-column prop="status" label="状态" width="100">
                    <template v-slot="{ row }">
                        <el-tag :type="row.status == 'NOT_RECEIVE' ? 'info' : ''" >{{receiveStatusMap[row.status]}}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="issueTime" label="领取有效期" width="140"></el-table-column>
        
                <el-table-column prop="trackingNumber" label="物流订单" width="140"></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-column label="操作" align="center" fixed="right" width="120">
                    <template v-slot="{ row }">
                        <el-button @click="deliver(row)" type="success" size="mini"  v-if="row.awardType == 'MATERIAL' " plain>发货</el-button>
                    </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: 'PointRewardDetail',
    mixins: [pageableTable],
    data() {
        return {
            multipleMode: true,
            search: '',
            url: '/pointActivity/activityAwards',
            downloading: false,
            formData: {
                activityId:null,
                createdAt: '',
                userId: '',
                status: '',
            },
            receiveStatusMap:{
                 NOT_RECEIVE:"未领取",
                 RECEIVED:"已领取",
            },
            typeMap:{
                "MATERIAL":"实物",
                "ASSET":"藏品",
                "EMPTY":"空奖品",
            },
            visible:false,
            multipleSelection:[],
        };
    },
    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.formData.createdAt = "";
            this.formData.userId = "";
            this.formData.status = "";
            this.initData();
        },
        deliver(row){
            let id = row.id;
            this.$prompt('请输入发货订单', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^\w+$/,
                    inputErrorMessage: '订单格式不正确'
                }).then(({ value }) => {
                    //执行发货
                    this.$http.post("/pointActivity/updateReceiveAwards", {id:id, trackingNumber: value}, {body:"json"}).then((res) => {
                        this.$message.success("发货成功");
                        this.initData();
                    }).catch(e => {
                        this.$message.error(e.error || e.message);
                    });

                });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        batchDeliver(){
            if (this.multipleSelection == null || this.multipleSelection.length == 0) {
                this.$message.error("请至少选择一条记录");
                return;
            }

            this.$prompt('请输入批量发货订单', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^\w+$/,
                    inputErrorMessage: '订单格式不正确'
            }).then(({ value }) => {
                var successCount = 0;
                var list = [];
                var loading = this.$loading({
                    text:"正在批量处理中",
                });

                this.multipleSelection.forEach(item => {
                    //执行发货
                    if(item.awardType == 'MATERIAL'){
                        var res = this.$http.post("/pointActivity/updateReceiveAwards", {id: item.id, trackingNumber: value}, {body:"json"}).then((res) => {
                            successCount++;
                        });
                        list.push(res);
                    }
                });

                Promise.all(list).then((res) => {
                    this.$message.success("批量发货成功,影响数量：" + successCount);
                    this.initData();
                }).catch((e) => {
                    this.$message.error(e.error || e.message);
                }).finally(() => {
                    loading.close();
                });

            });

        }

    }
};
</script>
