<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('培训人员详情')" />
    <link th:href="@{/css/use/css1.css}" rel="stylesheet"/>
    <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">
    <form class="form-horizontal m" id="form-information-view" style="margin: 10px;" th:object="${rwkMeeting}">
        <div class="col-md-12">
            <div class="daj_middle">
                <label class="daj_left_two control-label"><span class="specialSign">*</span>活动标题</label>
                <div class="daj_right_two">
                    <input name="meetingName" class="form-control daj_frame" th:field="*{meetingName}" placeholder="请填写培训活动标题" readonly>
                </div>
            </div>
        </div>
        <div class="col-md-12"><div class="black_line"></div></div>
        <div class="col-md-12">
            <div class="daj_middle">
                <label class="daj_left_two control-label">活动简介</label>
                <div class="daj_right_two">
                    <div style="width:100%;height:auto;white-space: pre-wrap;">[[*{meetingContent}]]</div>
                    <div>培训时间：[[*{meetingDate}]]</div>
                </div>
            </div>
        </div>
        <div class="col-md-12"><div class="black_line"></div></div>
        <div class="col-md-12">
            <div class="daj_middle">
                <label class="daj_left_two control-label">其他</label>
                <div class="daj_right_two">
                    <div style="display: flex;margin-bottom: 20px;">
                        <div>签到人数</div>
                        <div class="progress" style="width: 50%;margin-left: 15px;margin-top: 4px;margin-bottom:0;">
                            <div style="width: 50%;" aria-valuemax="100" aria-valuemin="0" role="progressbar" class="progress-bar progress-bar-success">
                                <span id="now">50</span>
                            </div>
                        </div>
                        <div id="total">100</div>
                    </div>
                    <div style="display: flex;">
                        <div style="width: 50%;margin-right: 20px;">
                            <table class="userTable">
                                <tr>
                                    <th>姓名</th>
                                    <th>签到情况</th>
                                    <th>手机号</th>
                                </tr>
                                <tr>
                                    <td>张三</td>
                                    <td>已签到</td>
                                    <td>手机号测试</td>
                                </tr>
                            </table>
                        </div>
                        <div style="width: 50%;border: 1px solid #d7dff2;">
                            <table id="table-show" class="table table-hover"  style="margin-bottom: 10px;">
                                <tbody>
                                <tr>
                                    <td style="width: 80%;"><img src="/img/use/filelook.png" />厨房零配件维修清单及报价(三月至五月).docx</td>
                                    <td>
                                        <a style='margin-right: 10px;'><img src="/img/use/xiazai.png"/></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 80%;"><img src="/img/use/filelook.png" />厨房零配件维修清单及报价(二月).docx</td>
                                    <td>
                                        <a style='margin-right: 10px;'><img src="/img/use/xiazai.png"/></a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </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 userList = [[${rwkMeeting.rwkMeetingStaffList}]];

    init();
    //初始化加载
    function init(){
        peopleShow(userList);
        numShow(userList);
    }

    //统计饼图展示
    function numShow(data){
        var totalInvited = data.length; // 受邀人员总数
        var signedInCount = data.filter(person => person.isSign == 1).length; // 签到人数
        $("#now").text(signedInCount);
        $("#total").text(totalInvited);
        $(".progress-bar.progress-bar-success").css("width",Math.floor((signedInCount/totalInvited)*100)+"%");
    }

    //受邀人员展示
    function peopleShow(data){
        var html = "<tr>\n" +
            "    <th>姓名</th>\n" +
            "    <th>签到情况</th>\n" +
            "    <th>手机号</th>\n" +
            "</tr>";
        data.some(function (item,index){
            html += "<tr>\n" +
                "    <td>"+item.personnelName+"</td>\n" +
                "    <td class=\""+(item.isSign == 1?'signNormal':'signFail')+"\">" +
                "<span>"+(item.isSign == 1?'√':'×')+"</span><span>"+(item.isSign == 1?'已签到':'未签到')+"</span>" +
                "</td>\n" +
                "    <td>"+item.mobilePhone+"</td>\n" +
                "</tr>"
        });
        $(".userTable").html(html);
    }
</script>
</body>
</html>