<template>
    <div class="main-contain">
        <div class="position">
            <bread-crumb :crumbs="crumbs"></bread-crumb>
        </div>
        <div class="app-container" style="padding-top: 0; background-color: #f6f8f9;">
            <div style="display: flex;">
                <div style="flex: 1;">
                    <router-link to="/activity/list">
                        <el-button type="primary">返回列表</el-button>
                    </router-link>
                </div>
                <el-button type="primary" @click="printAction">导出</el-button>
            </div>
            <div style="margin-top: 10px;" id="table-panel">
                <el-table id="table" border :data="signup_users" empty-text="暂无人报名">
                    <el-table-column label="报名号" align="center" prop="id"></el-table-column>
                    <el-table-column label="手机号" align="center" prop="mobile"></el-table-column>
                    <el-table-column label="客户姓名" align="center" prop="real_name"></el-table-column>
                    <el-table-column label="报名时间" align="center">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.ctime, "{y}-{m}-{d} {h}:{i}") }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="margin-top: 10px;">
                <el-pagination :total="total" :current-page.sync="current_page" :page-size="10" layout="total, prev, pager, next" @current-change="getActivities()"></el-pagination>
            </div>
            <div id="print-table" style="width:960px; display: none;">
                <el-table border :data="signup_users" empty-text="暂无人报名">
                    <el-table-column label="报名号" align="center" prop="id"></el-table-column>
                    <el-table-column label="手机号" align="center" prop="mobile"></el-table-column>
                    <el-table-column label="客户姓名" align="center" prop="real_name"></el-table-column>
                    <el-table-column label="报名时间" align="center">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.ctime, "{y}-{m}-{d} {h}:{i}") }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import BreadCrumb from "@/scrm_pages/components/bread-crumb"
import { fetchActivitySignupUsers } from "@/api/activity/activity"
import { parseTime } from "@/utils"
import printJS from "print-js"

export default {
    name: "ActivitySignupUsers",
    components: {
        BreadCrumb,
    },
    data() {
        return {
            crumbs: [
                { path: false, name: "活动详情" },
                { path: false, name: "报名列表" },
            ],

            activity_id: 0,

            signup_users: [],
            loading_search: false,
            total: 0,
            current_page: 1,
        }
    },
    mounted() {
        this.activity_id = this.$route.query.id

        this.fetchSignupUsers()
    },
    methods: {
        parseTime,
        fetchSignupUsers: function() {
            this.loading_search = true
            fetchActivitySignupUsers(this.activity_id, "", this.current_page).then(rs => {
                this.loading_search = false
                var resp = rs.data
                if (resp.state == 1) {
                    this.signup_users = resp.data.users
                    this.total = resp.data.total
                } else {
                    this.$message.error(resp.msg)
                }
            }).catch(err => {
                this.loading_search = false
                this.$message.error(err)
            })
        },
        printAction: function() {
            printJS({
                printable: 'table',
                type: "html",
                scanStyles: false,
                css: ['https://unpkg.com/element-ui/lib/theme-chalk/index.css'],
                // maxWidth: 960,
            })
        },
    },
}
</script>

