<template>
    <div class="my-calendar">
        <el-card class="my-calendar-list">
            <div>
                <ul class="tabs-type">
                    <li :class="['type-item', { 'act': default_tab === tab.key }]" v-for="tab in tabs" :key="tab.key"
                        @click="default_tab = tab.key">{{ tab.label }}</li>

                </ul>
                <el-button style="width:6%; float: right; " type="primary" plain size="medium" @click="exportClick">
                    导出Excel</el-button>
            </div>
            <el-table :data="dataList" v-loading="tableLoading" element-loading-text="数据加载中..."
                style="box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2);margin-top:20px;width:100%" border>
                <el-table-column key="手机号" align="center" prop="Mobile" label="手机号" min-width="8%">
                </el-table-column>
                <el-table-column key="姓名" align="center" prop="Name" label="姓名" min-width="8%">
                </el-table-column>
                <el-table-column key="公司名称" align="center" prop="CompanyName" label="公司名称" min-width="20%">
                    <template slot-scope="scope">
                        <span v-if="default_tab != 3" style="color:#409EFF;cursor:pointer;"
                            @click="goCompanyDetail(scope.row)" class="customName">{{ scope.row.CompanyName }}</span>
                        <span v-else>{{ scope.row.CompanyName }}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="default_tab != 3" key="客户类型" align="center" prop="ProductId" label="客户类型"
                    min-width="5%">
                    <template slot-scope="scope">
                        <span class="time" v-if="scope.row.ProductId == 1">FICC</span>
                        <span v-else-if="scope.row.ProductId == 2">权益</span>
                        <span v-else>FICC/权益</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="default_tab != 3" key="状态" align="center" prop="Status" label="状态"
                    min-width="5%">
                </el-table-column>
                <el-table-column v-if="default_tab != 3" key="销售" align="center" prop="SellerName" label="销售"
                    min-width="5%">
                </el-table-column>
                <el-table-column v-if="default_tab == 3" key="职位" align="center" prop="Occupation" label="职位"
                    min-width="5%">
                </el-table-column>
                <el-table-column key="首次入会时间" align="center" prop="FirstWatchTime" label="首次入会时间" min-width="10%">
                    <template slot-scope="scope">
                        <span class="time">{{
                                formatTimeRange(scope.row.FirstWatchTime)
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column key="最后退出时间" align="center" prop="LastWatchTime" label="最后退出时间" min-width="10%">
                    <template slot-scope="scope">
                        <span class="time">{{
                                formatTimeRange(scope.row.LastWatchTime)
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column key="参与总时长" align="center" prop="JoinTime" label="参与总时长" min-width="10%">
                    <template slot-scope="scope">
                        {{ formatJoinTime(scope.row.JoinTime) }}
                    </template>
                </el-table-column>
                <el-table-column key="参会方式" align="center" prop="JoinType" label="参会方式" min-width="10%">
                    <template slot-scope="scope">
                        <span v-if="scope.row.JoinType == 1">网络</span>
                        <span v-else>电话</span>
                    </template>
                </el-table-column>
                <el-table-column key="参会鉴权" align="center" prop="AuthInfo" label="参会鉴权" min-width="5%">
                </el-table-column>
                <el-table-column key="参会状态" align="center" prop="DataType" label="参会状态" min-width="5%">
                    <template slot-scope="scope">
                        <span v-if="scope.row.DataType == 1">直播</span>
                        <span v-else>回放</span>
                    </template>
                </el-table-column>
                <div slot="empty" style="padding: 150px 0">暂无数据</div>
            </el-table>
            <el-col :span="24" class="toolbar">
                <m-page :total="total" :page_no="page" :pageSize="pageSize" @handleCurrentChange="handlePageChange" />
            </el-col>
        </el-card>
    </div>
</template>

<script>
import { ficcManageInterface } from "@/api/api";
import moment from "moment";
import mPage from "@/components/mPage.vue";

export default {
    components: {
        mPage,
    },
    watch: {
        default_tab(newval) {
            console.info(newval);
            this.default_tab = newval
            this.page = 1
            this.getDataList(newval);
        }
    },
    data() {
        return {
            eventId: 0,
            activeName: 'first',
            dataList: [],
            total: 0,
            pageSize: 10,
            page: 1,
            tabs: [
                {
                    label: 'FICC联系人',
                    key: 1
                },
                {
                    label: '权益联系人',
                    key: 2
                },
                {
                    label: '未知联系人',
                    key: 3
                },
            ],
            default_tab: 1,
            exportBase: process.env.API_ROOT + '/yb/activity/comein/user_list/export',//数据导出接口
        };
    },
    created() {
        this.eventId = this.$route.query.eventId;
        this.getDataList(this.default_tab);
    },
    methods: {
        handlePageChange(e) {
            this.page = e;
            this.getDataList(this.default_tab);
        },
        // 获取进门到会详情列表
        async getDataList(dataType) {
            if (dataType <= 0) {
                dataType = 1
            }
            //1,FICC,2，权益,3,未知
            const res = await ficcManageInterface.jmAttendDetail({
                ComeinEventId: Number(this.eventId),
                DataType: dataType,
                CurrentIndex: this.page,
                PageSize: this.pageSize,
            });
            if (res.Ret === 200) {
                this.total = res.Data.Paging.Totals;
                this.dataList = res.Data.List || [];
            }
        },
        formatTimeRange(time) {
            if (time == "0001-01-01T00:00:00Z") {
                return "";
            }
            return moment(time).format("YYYY.MM.DD HH:mm:ss");
        },
        /* 客户详情页 */
        goCompanyDetail(item) {
            this.$router.push({
                path: '/customDetail',
                query: {
                    id: item.CompanyId
                }
            })
        },
        formatJoinTime(joinTime) {
            let r = '';
            let joinTimeInt = Number(joinTime);
            if (joinTimeInt < 60) {
                r = "00'" + joinTime + "''";
                return r;
            } else {
                console.info(joinTimeInt)
                let m = parseInt(joinTimeInt / 60);
                let s = joinTimeInt - m * 60
                if (m <= 0) {
                    r = joinTime + "''"
                } else {
                    if (m < 10) {
                        if (s < 10) {
                            r = "0" + m + "'" + "0" + s + "''"
                        } else {
                            r = "0" + m + "'" + s + "''"
                        }
                    } else {
                        if (s < 10) {
                            r = m + "'" + "0" + s + "''"
                        } else {
                            r = m + "'" + s + "''"
                        }
                    }
                }
            }
            return r;
        },
        // 对[# ;]转义
        escapeStr(str) {
            return str.replace(/#/g, escape('#')).replace(/;/g, escape(';'))
        },
        /* 数据导出 */
        exportClick() {
            // 数据导出接口
            let urlStr = this.exportBase
            console.info("urlStr")
            console.info(urlStr);
            // token
            urlStr += `?${localStorage.getItem('auth') || ''}`
            // 指标名称参数
            urlStr += `&ComeinEventId=${this.eventId}`
            let exportUrlStr = this.escapeStr(urlStr)
            console.info("exportApi")
            console.info(exportUrlStr)
            const link = document.createElement("a")
            link.href = exportUrlStr
            link.download = ''
            link.click()
        },
    }
};
</script>

<style lang="scss" scoped>
.ficc-activity-list-wrap {
    div {
        box-sizing: border-box;
    }

    .top-wrap {
        background: #ffffff;
        border: 1px solid #ececec;
        border-radius: 4px;
        padding: 20px 30px;

        .el-button {
            background-color: #ecf5ff;
            border: 1px solid #b3d8ff;
            color: #409eff;
        }

        .el-button--primary {
            background-color: #409eff;
            border: none;
            color: #ffffff;
        }
    }

    .content-wrap {
        margin-top: 20px;
        min-height: 70vh;
        background: #ffffff;
        border: 1px solid #ececec;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
        border-radius: 4px;
        padding: 30px;
        padding-bottom: 65px;
        position: relative;

        .pagination-wrap {
            position: absolute;
            bottom: 24px;
            right: 30px;
        }
    }

    .list-wrap {
        margin-top: 40px;

        .title {
            color: #409eff;
            cursor: pointer;
        }

        .opt-btn {
            cursor: pointer;
            color: #409eff;
            margin: 0 5px;
        }
    }
}

.ficc-activity-detail-wrap {
    .table-wrap {
        color: #666;
        width: 100%;
        // text-align: center;
        border-top: 1px solid #dcdfe6;
        border-left: 1px solid #dcdfe6;

        .table-item {
            padding: 14px 30px;
            border-right: 1px solid #dcdfe6;
            border-bottom: 1px solid #dcdfe6;
            position: relative;
        }

        .dark-item {
            background: #f0f2f5;
            text-align: center;
        }
    }
}
</style>


<style lang="scss">
.my-calendar {
    .my-calendar-list {
        .tabs-type {
            display: flex;
            align-items: center;
            width: 90%;
            float: left;
            padding-bottom: 20px;

            .type-item {
                border-bottom: 3px solid transparent;
                font-size: 16px;
                margin-right: 40px;
                padding: 4px 0;
                cursor: pointer;

                &.act {
                    font-size: 18px;
                    color: #000;
                    font-weight: 600;
                    border-color: #409EFF;
                }
            }
        }
    }

    .my-calendar-context {
        margin-top: 20px;

        .left-title {
            font-weight: 700;
            line-height: 40px;
            font-size: 16px;
        }
    }
}

.company-tip-poper {
    max-width: 400px;
}
</style>