<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('培训人员详情')" />
    <link th:href="@{/ruoyi/css/meeting.css}" rel="stylesheet"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content meeting-content">
    <!--    <ul class="nav head_top" id="tab">-->
    <!--        <div class="text-right hidden-print" style="float: right">-->
    <!--            <button class="btn btn-unite" >打印签到表</button>-->
    <!--        </div>-->

    <!--    </ul>-->
    <form class="form-horizontal m meeting-content" id="form-information-view" style="margin: 10px;" th:object="${rwkMeeting}">
        <div>
            <h1 style="font-size: 25px">[[*{meetingName}]]</h1>
        </div>
        <hr>
        <div class="meeting-introdution meeting-add-font">
            <div style="width:100%;height:auto;white-space: pre-wrap;">[[*{meetingContent}]]</div>
            <div>培训时间：[[*{meetingDate}]]</div>
        </div>
        <hr>
        <div class="inline-meeting-div meeting-edit-files">
            <table id="bootstrap-table-file">
            </table>
        </div>
        <div class="inline-meeting-div" style="float: left;width: 33%">
            <table id="bootstrap-table" ></table>
        </div>
        <div class="inline-meeting-div meeting-pieChart1" >
            <div id="pieChart1" class="pieChart1"></div>
        </div>

    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
    var prefix = ctx + "system/meeting";
    var rwkMeetingStaffList = [[${rwkMeeting.rwkMeetingStaffList}]];

    init();
    //初始化加载
    function init(){
        peopleShow(rwkMeetingStaffList);
        pieShow(rwkMeetingStaffList);
    }

    //统计饼图展示
    function pieShow(data){
        var totalInvited = data.length; // 受邀人员总数
        var signedInCount = data.filter(person => person.isSign == 1).length; // 签到人数
        var pieChart = echarts.init(document.getElementById('pieChart1'));
        var option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '1%',
                left: 'center'
            },
            series: [
                {
                    name: '签到情况',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 15,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: signedInCount, name: '签到人数' },
                        { value: totalInvited-signedInCount, name: '未签到人数' }
                    ]
                }
            ]
        };
        pieChart.setOption(option);
    }

    //受邀人员展示
    function peopleShow(data){
        const options = {
            height: 325,
            pagination:false,
            sidePagination: "client",
            virtualScroll: true,
            data:data,
            columns: [
                {
                    field: 'id',
                    title: '主键id',
                    visible: false
                },
                {
                    field: 'personnelName',
                    title: '姓名'
                },
                {
                    field: 'isSign',
                    title: '签到情况',
                    formatter: function (value, row, index) {
                        if (value == 1) {
                            return '<span class="badge badge-primary">已签到</span> ';
                        } else {
                            return '<span class="badge badge-danger">未签到</span> ';
                        }
                    }
                },
                {
                    field: 'mobilePhone',
                    title: '手机号'
                }]
        };
        $.table.init(options);
    }

    $(function() {
        const options = {
            id: 'bootstrap-table-file',
            height: 325,
            pagination:false,
            sidePagination: "client",
            showFooter: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            virtualScroll: true,
            data:[
                {id:1,name:"<<关于**********教育文件>>"},
                {id:2,name:"<<关于**********活动文件>>"},
                {id:4,name:"<<关于**********活动文件>>"},
                {id:5,name:"<<关于**********活动文件>>"},
                {id:5,name:"<<关于**********活动文件>>"},
                {id:5,name:"<<关于**********活动文件>>"},
            ],
            columns: [
                {
                    field: 'id',
                    title: '主键id',
                    visible: false
                },
                {
                    field: 'name',
                    title: '文件标题'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-unite btn-xs " href="javascript:void(0)" onclick="" >下载</a> ');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);

    });
</script>
</body>
</html>