<template>
    <div class="paymentList tableWrap">
        <el-table
            :data="tableList"
            :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        >
            <el-table-column align="center"
                           label="缴费单号">
                <template slot-scope="scope">
                    <copy-text>{{ scope.row.musicGroupPaymentCalenderId }}</copy-text>
                </template>
            </el-table-column>
            <el-table-column align="center"
                           label="缴费开始日期">
                <template slot-scope="scope">
                <div>
                    {{ scope.row.startPaymentDateMgpc | formatTimer }}
                </div>
                </template>
            </el-table-column>
            <el-table-column align="center"
                            label="缴费截止日期">
                <template slot-scope="scope">
                <div>
                    {{ scope.row.deadlinePaymentDateMgpc | formatTimer }}
                </div>
                </template>
            </el-table-column>
            <el-table-column align="center"
                           prop="expectAmount"
                           label="预计缴费金额">
                <template slot-scope="scope">
                    {{ scope.row.expectAmount | moneyFormat }}
                </template>
            </el-table-column>
            <el-table-column align="center"
                            label="是否开启缴费">
                <template slot-scope="scope">
                <div>
                    {{ scope.row.open ? '是' : '否' }}
                </div>
                </template>
            </el-table-column>
            <el-table-column align="center"
                            label="缴费状态">
                <template slot-scope="scope">
                <div>
                    {{ scope.row.paymentStatus | paymentStatusDetall }}
                </div>
                </template>
            </el-table-column>
            <el-table-column align="center"
                            prop="studentId"
                            width="150px"
                            label="支付时间">
                <template slot-scope="scope">
                <div>
                    {{ scope.row.payTime | dateForMinFormat }}
                </div>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            :total.sync="pageInfo.total"
            :page.sync="pageInfo.page"
            :limit.sync="pageInfo.limit"
            :page-sizes="pageInfo.page_size"
            @pagination="getDetail"
        />
    </div>
</template>

<script>
import { getmusicGroupPaymentCalenderDetail } from '@/api/buildTeam'
import pagination from "@/components/Pagination/index";
export default {
    name: 'paymentList',
    props: [ 'paymentDetail' ],
    components: { pagination },
    data() {
        return {
            tableList: [], //
            pageInfo: {
                // 分页规则
                limit: 10, // 限制显示条数
                page: 1, // 当前页
                total: 0, // 总条数
                page_size: [10, 20, 40, 50], // 选择限制显示条数
            },
        }
    },
    mounted() {
        this.getDetail()
        // console.log(this.paymentDetail)
    },
    methods: {
        async getDetail() {
            const paymentDetail = this.paymentDetail
            await getmusicGroupPaymentCalenderDetail({
                musicGroupId: paymentDetail.musicGroupId,
                userId: paymentDetail.userId,
            }).then(res => {
                console.log(res)
                this.tableList = res.data.rows
                this.pageInfo.total = res.data.total
            })
        }
    }
}
</script>