<template>
    <div class="container-box">
        <el-table ref="multipleTable" v-loading="loading" element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.6)"
            :data="tableData" tooltip-effect="dark" :border="true" size="small" :lazy="true" height="570"
            :empty-text="$i18n.locale == 'en' ? 'Sorry no data!' : '暂无数据'" @selection-change="handleSelectionChange">
            <el-table-column prop="meetingId" :label="$i18n.locale == 'en' ? 'Events' : '会议名称'" header-align="center">
                <template slot-scope="scope">{{ meetingNameMap[scope.row.meetingId] }}</template>
            </el-table-column>


            <el-table-column :label="$i18n.locale == 'en' ? 'Date' : '会议时间'" width="100" header-align="center">
                <template slot-scope="scope">{{ formatDate(meetingStartDateMap[scope.row.meetingId]) }}</template>
            </el-table-column>


            <el-table-column prop="name" :label="$i18n.locale == 'en' ? 'Name' : '嘉宾姓名'" width="100" header-align="center">
            </el-table-column>
            <el-table-column prop="auditStatusDict" :label="$i18n.locale == 'en' ? 'Status' : '状态'" width="100"
                header-align="center">
                <template>{{ $i18n.locale == 'en' ? 'Registered' : '报名成功' }}</template>
            </el-table-column>
        </el-table>
        <div style="width: 100%;text-align: center;">
            <el-pagination style="margin-top: 20px" layout="prev, pager, next" @current-change="currentChange"
                :total="totalNum">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getApplyHistory, getMeetingInfo, getMeetingApproveHistory, getOnlineApplyHistory } from '@/api/meeting/meetingApply'
import { getDicts } from "@/api/dict";
export default {
    data() {
        return {
            tableData: [],
            multipleSelection: [],
            meetingInfoArray: [],
            statusArray: [],
            statusEnArray: [],
            cureentPage: 1,
            userId: JSON.parse(localStorage.getItem('user')).userId,
            totalNum: 0,
            loading: true
        }
    },
    mounted() {
        this.getApplyHistory();
        getMeetingInfo().then(res => {
            this.meetingInfoArray = res.data.meetingBasicInfos
            //debugger
        });
        getDicts('APPROVAL_STATUS').then(res => {
            this.statusArray = res.data[0];
            this.statusEnArray = [{ "label": "UnderApproval", "value": "2" },
            { "label": "Registration Failed", "value": "3" },
            { "label": "Registration Successful", "value": "4" }];
        })
    },
    computed: {
        meetingNameMap: function () {
            if (this.$i18n.locale == "en") {
                return this.meetingInfoArray.array2Obj('id', 'meetingNameEn');
            } else {
                return this.meetingInfoArray.array2Obj('id', 'meetingName');
            }
        },
        meetingStartDateMap: function () {
            return this.meetingInfoArray.array2Obj('id', 'meetingStartDate');
        },
        approvalStatus: function () {
            if (this.$i18n.locale == "en") {
                return this.statusEnArray.array2Obj('value', 'label');
            } else {
                return this.statusArray.array2Obj('value', 'label');
            }

        }
    },
    methods: {
        currentChange(p) {
            this.cureentPage = p;
            this.getApplyHistory();
        },
        getApplyHistory() {
            getOnlineApplyHistory({ pageNo: this.cureentPage, createBy: this.userId }).then(res => {
                let that = this;
                if (res.data) {
                    if (res.data.page) {
                        this.totalNum = Number(res.data.page.totalCount);
                    }
                    if (res.data.meetingApplyOnlines) {
                        that.tableData = res.data.meetingApplyOnlines;
                    } else {
                        that.tableData = []
                    }
                    this.loading = false
                } else {
                    that.tableData = []
                }
            }).catch(() => {
                this.loading = false
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        formatDate(t) {
            if (!t) {
                return ''
            } else {
                var original = new Date(t);
                var year = original.getFullYear();
                var month = original.getMonth() + 1;
                var date = original.getDate();
                var hour = original.getHours();
                var minute = original.getMinutes();
                var second = original.getSeconds();
                // return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
                return year + "/" + month + "/" + date;
            }
        },
        toView(router, json) {
            this.$router.push({ name: router, params: { key: json } });
        },
    }
}
</script>

<style scoped>
.container-box {
    padding: 20px;
}
</style>