<template>
    <div class="common-container common-container">
        <TitleBar></TitleBar>
        <div class="main-container">
            <div class="search-container TableSelectMain">
                <el-form class="table-select-main" :model="searchForm" label-position="left">
                    <el-row :gutter="15">
                        <el-col :span="4">
                            <el-form-item>
                                <el-select placeholder="请选择卡券类型" v-model="searchForm.type">
                                    <el-option label="折扣卷" :value="1"></el-option>
                                    <el-option label="红包" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-select placeholder="是否使用" v-model="searchForm.usedFlag">
                                    <el-option label="已失效" :value="0"></el-option>
                                    <el-option label="未使用" :value="1"></el-option>
                                    <el-option label="已使用" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-button type="primary" round @click="querySearch">查询</el-button>
                                <el-button type="primary" plain round @click="reset">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <!-- <div class="SearchTitle">
                已选择
                <span class="subject-color">{{ tableSelection.length }}</span> 项
            </div> -->

            <div class="MaintenanceTable">
                <el-table ref="multipleTable" :data="tableData" style="width: 100%" tooltip-effect="dark" class="OutTable" border v-loading="listLoading">
                    <!-- <el-table-column type="selection"></el-table-column> -->
                    <el-table-column prop="userName" label="用户名称"></el-table-column>
                    <!-- <el-table-column prop="userHeadPic" label="用户头像"></el-table-column> -->
                    <el-table-column prop="couponName" label="卡券名称"></el-table-column>
                    <el-table-column prop="couponType" label="卡券类型">
                        <template slot-scope="scope">
                            <span>{{scope.row.couponType | couponTypePipe}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="usedFlag" label="是否使用">
                        <template slot-scope="scope">
                            <span>{{scope.row.usedFlag | couponUsedFlagPipe}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="发放时间">
                        <template slot-scope="scope">
                            <span>{{scope.row.createTime | formatTimePipe }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="updateTime" label="使用时间">
                        <template slot-scope="scope">
                            <span>{{scope.row.updateTime | formatTimePipe }}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="scenario" label="使用范围">
                        <template slot-scope="scope">
                            <span>{{scope.row.scenario | couponUsePipe}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="折扣/面值">
                        <template slot-scope="scope">
                            <span v-if="scope.row.type ===1">{{scope.row.discount }}</span>
                            <span v-if="scope.row.type ===2">{{scope.row.price }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="num" label="数量"></el-table-column>
                    <el-table-column prop="totalPrice" label="总额"></el-table-column>
                    <el-table-column label="满减" prop="fullReduction"></el-table-column>
                    <el-table-column prop="validity" label="截止时间">
                        <template slot-scope="scope">
                            <span>{{scope.row.validity | formatTimePipe }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="checkFalg" label="审核状态">
                        <template slot-scope="scope">
                            <span class="success" v-show="scope.row.checkFalg == 1">通过</span>
                            <span class="warn" v-show="scope.row.checkFalg == 2">待审核</span>
                            <span class="danger" v-show="scope.row.checkFalg == 0">驳回</span>
                            <span class="warn" v-show="scope.row.checkFalg == 3">等待财务审核</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" min-width="180px;">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" plain round @click="audit(scope.row,1)">通过</el-button>
                            <el-button size="mini" type="primary" plain round :disabled="scope.row.checkFalg === 0" @click="audit(scope.row,0)">驳回</el-button>
                        </template>
                    </el-table-column>-->
                </el-table>
                <div class="pagenation">
                    <PageComponent :total="total" @pagination="handlePagination" :pageSize.sync="page.pageSize" :pageNum.sync="page.pageNum"></PageComponent>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import TitleBar from '@/apps/mobile/components/common/TitleBar';
import { queryCardHistoryList } from '@/apps/mobile/api/cardbank/history';
export default {
    components: {
        TitleBar,
    },
    data() {
        return {
            searchForm: {},
            tableData: [],
            page: {
                pageNum: 1,
                pageSize: 5,
            },
            total: 10,
            listLoading: false,
            tableSelection: [],
        };
    },
    created() {
        this.getCardHistoryList();
    },
    methods: {
        getCardHistoryList() {
            this.listLoading = true;
            let obj = {
                ...this.page,
                ...this.searchForm,
                sort: {
                    order: 'desc',
                    orderBy: 'create_time',
                },
            };
            queryCardHistoryList(obj)
                .then((res) => {
                    console.log(res);
                    if (res.statusCode == '10') {
                        this.$router.replace('/login');
                    }
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                    this.listLoading = false;
                })
                .catch();
        },
        querySearch() {
            this.page.pageNum = 1;
            this.getCardHistoryList();
        },
        reset() {
            this.page.pageNum = 1;
            this.searchForm = {};
            this.getCardHistoryList();
        },
        // selectColumn(selection) {
        //     this.tableSelection = selection;
        // },
        // 页码变化时
        handlePagination(val) {
            this.page = val;
            this.getCardHistoryList();
        },
    },
};
</script>
<style lang="stylus" scoped>
.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: 95%;
}
</style>
