<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.changeType" clearable=""  @input="initData">
                            <el-option v-for="(value,key) in integralChangeTypeMap" :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('/userIntegralChangeLog/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="userId" label="用户ID"> </el-table-column>
                <el-table-column prop="changeType" label="变动类型" min-width="80" show-overflow-tooltip>
                    <template v-slot="scope">
                        <el-tag :type="integralChangeTypeMap[scope.row.changeType].type" v-if="integralChangeTypeMap[scope.row.changeType]">
                            {{integralChangeTypeMap[scope.row.changeType]}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="flag" label="出入账标识" min-width="80" show-overflow-tooltip> 
                     <template v-slot="scope">
                        <el-tag :type="integralFlagMap[scope.row.flag].type" v-if="integralFlagMap[scope.row.flag]">
                            {{integralFlagMap[scope.row.flag]}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="integral" label="变动积分" min-width="100" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="restIntegral" label="剩余积分" min-width="100" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="description" label="描述" min-width="100" show-overflow-tooltip>
                </el-table-column>

                <el-table-column prop="sourceId" label="变动来源ID"  min-width="120"> </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';

import {integralChangeTypeMap,integralFlagMap} from "@/utils/constant.js";


export default {
    components: { SortableHeader },
    name: 'UserIntegralDetail',
    mixins: [pageableTable],
    data() {
        return {
            multipleMode: false,
            search: '',
            url: '/userIntegralChangeLog/all',
            downloading: false,
            formData: {
                createdAt: '',
                userId: '',
                changeType:'',
            },
            integralChangeTypeMap,
            integralFlagMap,
            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(userId) {
            this.visible = true;
            this.formData.userId = userId;
            this.initData();
        },
    }
};
</script>
