<?php 
    require_once './api/api.php';
    use api\SBCApi;
    $api = new SBCApi();

    if(isset($_GET['token']) && !empty($_GET['token'])){
        setcookie("host_id", "", time()-3601);
        setcookie("token"  , "", time()-3601);
        
        $res = $api->loginGname();
        if($res['code'] == 400){
            echo json_encode($res);
        }
        exit;
    }

    if(empty($_COOKIE["token"]) || empty($_COOKIE["host_id"])) { //未登录
        header("Location:/login.php");
    }
    
    require_once './lang/'.$_COOKIE['lang_s'].'.php';
    echo ("<script src='./assets/js/lang/".$_COOKIE['lang_s'].".js'></script>");

    $api->host_id = $_COOKIE["host_id"];
   
    $res = $api->loginSBC();
    $res = $api->dedicatedserver();

    $info = $res['data'];

    echo ("<script>".
        "var baseUrl = 'http://agdow.mkcmp.com/';".
        "var cookie = 'Bearer ".$_COOKIE['token']."';".
        "localStorage.jwt = '".$_COOKIE['token']."';".
        "var host_id = '".$api->host_id."';".
        "var langs = '".$_COOKIE['lang_s']."'".
        "</script>");
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="/js/jquery-min.js"></script>
        <script src="lib/bootstrap-3.4.1-dist/js/bootstrap.bundle.min.js"></script>
        <link rel="stylesheet" href="/assets/css/index.css">
        <script src="/assets/libs/moment/moment.js"></script>
        <script src="/assets/libs/clipboard/clipboard.min.js"></script>
        <link rel="stylesheet" href="/assets/libs/bootstrap-select/css/bootstrap-select.min.css">
        <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
        <link rel="stylesheet" href="/assets/css/icons.min.css">
        <link rel="stylesheet" href="/assets/libs/toastr/build/toastr.min.css">
        <link rel="stylesheet" href="/assets/css/global.css">
        <link rel="stylesheet" href="/lib/layui/css/layui.css">
        <link rel="stylesheet" href="/lib/layer/theme/default/layer.css">
        <script src="/assets/libs/bootstrap-select/js/bootstrap-select.min.js"></script>
        <script src="/assets/libs/toastr/build/toastr.min.js" ></script>
        <script src="/assets/js/public.js"></script>
        <script src="/assets/js/servicedetail.js?id=12312367567555"></script>
        <script src="/assets/js/modal.js"></script>
        <!-- <script src="/assets/js/sweetAlert2.min.js"></script> -->
        <!-- <link rel="stylesheet" href="/css/selectFilter.css"> -->
        <script src="/assets/libs/echarts/echarts.min.js"></script>
        <script src="/lib/layer/layer.js"></script>
        <script src="/lib/layui/layui.js"></script>
        <script>
            // window.onload=function(){
            //     document.onkeydown=function(){
            //         var e=window.event||arguments[0];
            //             if(e.keyCode==123){
            //                 return false;
            //             }else if((e.ctrlKey)&&(e.shiftKey)&&(e.keyCode==73)){
            //                 return false;
            //             }
            //         };
            //         document.oncontextmenu=function(){
            //         return false;
            //     }
            // }

            function lang_t(language){
                const expirationDate = new Date();
                expirationDate.setDate(expirationDate.getDate() + 1);
                document.cookie = 'lang_s='+language+'; expires=${expirationDate.toUTCString()}';

                location.reload()
            }
        </script>
    </head>
    <body>
        <div class="header">
            <div class="name">
            <?php echo $info['host']['type']; ?>
            </div>
            <div class="info">
                <div class="dropdown d-inline-block">
                    <button type="button" class="btn header-item" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <a>
                        <img id="header-lang-img" src="/upload/common/country/<?php echo $_LANG['display_flag'];?>.png" alt="Header Language" height="16">
                        </a>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right">
                        <?php
                            switch ($_COOKIE['lang_s']) {
                                case 'english':
                                    echo "<button class='dropdown-item notify-item language' onclick='lang_t(&quot;chinese&quot;)'>".
                                        "<img src='/upload/common/country/CN.png' alt='user-image' class='mr-1' height='12'><span class='align-middle'>中文</span>".
                                    "</button>";
                                    break;
                                case 'chinese':
                                    echo "<button class='dropdown-item notify-item language' onclick='lang_t(&quot;english&quot;)'>".
                                        "<img src='/upload/common/country/US.png' alt='user-image' class='mr-1' height='12'><span class='align-middle'>English</span>".
                                    "</button>";
                                    break;
                            }
                        ?>
                    </div>
                </div>
                <div class="info-item2 dropdown" style="position: relative;">
                    <div class="el-dropdown dropdown-toggle"  id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        <div class="info-item2 info-item3 el-dropdown-selfdefine" aria-haspopup="list" aria-controls="dropdown-menu-571" role="button" tabindex="0">
                            <div class="info-item-user">
                                <span class="item-user-title"><?php echo $info['host']['host_name'];?></span>
                            </div>
                            <div class="item-user-avatar"> <?php  echo strtoupper(substr($info['host']['host_name'], 0, 1)) ?>
        
                            </div>
                        </div>
                    </div>
                    <ul class="dropdown-menu" style="width: 66%" aria-labelledby="dropdownMenu1">
                        <li class="ml-2"  onclick="loginOut()"><?php echo $_LANG['log_out'];?></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="page-content">
            <div class="container-fluid">
                <div class="container-fluid">
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="row align-items-center server_header_box">
                            <div class="mr-3 power_box">
                                <div class="text-white d-flex">
                                    <!-- 电源状态 -->
                                    <div class="mr-3 pointer">
                                        <div class="powerimg d-flex justify-content-center align-items-center" id="powerBox">
                                            <span id="powerStatusIcon" 
                                            class="" 
                                            data-toggle="popover" 
                                            data-trigger="hover" 
                                            title="" 
                                            data-html="true" 
                                            data-content="开机" 
                                            data-original-title=""></span>
                                        </div>
                                    </div>
                                    <div>
                                        <section class="d-flex align-items-center mb-2">
                                            <h4 class="text-white mb-0 font-weight-bold"><?php echo $info['host']['name']; ?></h4>
                                            <span class="badge badge-pill ml-2 py-1 status-<?php
                                                switch($info['host']['status']){
                                                    case 'Pending': echo 'pending';break;
                                                    case 'Active': echo 'active';break;
                                                    case 'Suspended': echo 'suspended';break;
                                                    case 'Fraud': echo 'suspended';break;
                                                    case 'Completed': echo 'suspended';break;
                                                    case 'Deleted': echo 'deleted';break;
                                                    case 'Verifiy_Active': echo 'suspended';break;
                                                    case 'Overdue_Active': echo 'suspended';break;
                                                    case 'Issue_Active': echo 'suspended';break;
                                                };
                                            ?>">
                                            <?php 
                                            switch($info['host']['status']){
                                                case 'Pending': echo $_LANG['pending'];break;
                                                case 'Active': echo $_LANG['active'];break;
                                                case 'Suspended': echo $_LANG['suspended'];break;
                                                case 'Fraud': echo $_LANG['fraud'];break;
                                                case 'Completed': echo $_LANG['completed'];break;
                                                case 'Deleted': echo $_LANG['deleted'];break;
                                                case 'Verifiy_Active': echo $_LANG['unknown'];break;
                                                case 'Overdue_Active': echo $_LANG['unknown'];break;
                                                case 'Issue_Active': echo $_LANG['unknown'];break;
                                            };
                                            ?>
                                            </span>
                                        </section>
                                        <section>
                                            <span>
                                                <?php echo $info['host']['host_name'];?>
                                            </span>
                                            <span class="btn btn-danger btn-sm rsb ml-2" id="box1" display="none"><?php echo $_LANG['Reinsta'];?></span> 
                                        </section>
                                    </div>
                                </div>
                            </div>
                            <div class="pl-4 mr-3 box_left_wrap osbox">
                                <span class="text-white-50 fs-12"><?php echo $_LANG['oper_system'];?></span>
                                <h5 class="mt-2 font-weight-bold text-white">
                                    <?php 
                                        foreach ($info['configoptions'] as $osv) {
                                            if($osv['option_type'] == 'os'){
                                                echo $osv['subs'][0]['option_name'];
                                            }
                                        }
                                    ?>
                                </h5>
                                <span class="ml-0" id="box2">
                                    <button type="button" class="service_module_button left_wrap_btn fs-12 restall-btn" data-func="reinstall" data-type="default" data-desc="reinstall"
                                        onclick="service_module_button($(this), '<?php echo $api->host_id;?>', 'cloud','<?php echo $_COOKIE['lang_s'];?>')"><?php echo $_LANG['reload_Rein'];?></button>
                                </span>
                            </div>
                            <div class="pl-4 mr-3 box_left_wrap">
                                <span class="text-white-50 fs-12"><?php echo $_LANG['ipaddress'];?></span>
                                <h5 class="mt-2 font-weight-bold text-white">
                                    <span>
                                        <?php
                                            $aips = array_merge(array($info['host']['dedicatedip']),$info['host']['assignedips'] != '' ? explode(',',$info['host']['assignedips']) : []);
                                            $json_ips = json_encode($aips);
                                            echo '<script>'.
                                                'var arr_ips = '.$json_ips
                                                .'</script>';
                                            if(count($aips) > 1){
                                                echo '<span class="tuxian" id="copyIPContent">'.$info['host']['dedicatedip'].'('.count($aips).')</span>';
                                            } else {
                                                echo '<span class="tuxian" id="copyOneIp">'.$info['host']['dedicatedip'].'</span>';
                                            }
                                        ?>
                                    </span>
                                </h5>
                            </div>
                            <?php 
                                foreach ($info['configoptions'] as $item) {
                                    if ($item['option_name'] == 'RAM' || $item['option_name'] == 'CPU'){
                                        // $item['name'] = $_LANG['memory'];
                                        echo "<div class='pl-4 mr-3 box_left_wrap'>".
                            
                                        "<span class='text-white-50 fs-12'>".$item['option_name']."</span>".
                                        "<h5 class='mt-2 font-weight-bold text-white'>".$item['subs'][0]['option_name']."</h5>".

                                        "</div>";
                                    }
                                }
                            ?>
                            <?php 
                                if($info['client_button']['control'] && $info['host']['status']=="Active"){
                                    echo "<div class='btn-group ml-2 mr-2 mt-2'>".

                                        "<button type='button' class='btn btn-primary dropdown-toggle custom-button' data-toggle='dropdown'".
                                            "aria-haspopup='true' aria-expanded='false'>".$_LANG['control']." <i class='mdi mdi-chevron-down'></i></button>".

                                        "<div class='dropdown-menu'>";

                                        foreach($info['client_button']['control'] as $item){
                                            if($item['name'] == '开机'){
                                                $item['name'] = $_LANG['on'];
                                            } elseif($item['name'] == '关机') {
                                                $item['name'] = $_LANG['off'];
                                            } elseif($item['name'] == '重启') {
                                                $item['name'] = $_LANG['restart'];
                                            } elseif($item['name'] == '硬关机') {
                                                $item['name'] = $_LANG['h_shutdown'];
                                            }
                                            
                                            $isdesc = $item['desc'] ?null: $item['name'];
                                            $fn = 'service_module_button($(this), "'.$api->host_id.'", "'.$info['host']['type'].'","'.$_COOKIE['lang_s'].'")';
                                            
                                            echo "<a class='dropdown-item service_module_button' href='javascript:void(0);'".
                                                "onclick='".$fn."'".
                                                "data-func='".$item['func']."' data-type='default'".
                                                "data-desc=''>".$item['name']."</a>";
                                        }
                                        echo "</div>"."</div>";
                                }
                            ?>
                            <div class="btn-group ml-2 mr-2 mt-2">
                                <a class="btn btn-primary service_module_button d-flex align-items-center custom-button"
                                    href="javascript:void(0);"
                                    onclick="service_module_button($(this), '<?php echo $api->host_id;?>', 'cloud','<?php echo $_COOKIE['lang_s'];?>')" data-func="vnc"
                                    data-type="default" data-desc="">VNC</a>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                    <div class="row bottom-box">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12 mb-2">
                                        <div class="bg-light card-body bg-gray">
                                            <p class="text-gray">
                                                <?php echo $_LANG['login_info'];?> <i class="bx bx-user dc"></i>
                                            </p>
                                            <p class="mb-0"><?php echo $_LANG['username'];?>：<?php echo $info['host']['username']; ?></p>
                                            <p class="mb-0"><?php echo $_LANG['user_pwd'];?>：
                                                <!-- <span id="hidePwdBox" class="text-black">***********</span> -->
                                                <span data-toggle="popover" data-placement="top" data-trigger="hover"
                                                    data-content="复制" id="copyPwdContent"
                                                    class="text-black btnCopyPwd pointer dc" data-original-title=""
                                                    title=""><?php echo $info['host']['password']; ?></span>
                                                <!-- <i class="fas fa-eye pointer ml-2 text-black" onclick="togglePwd()"></i> -->
                                                <!-- <i class="bx bx-copy pointer ml-1 btn-copy text-black" id="btnCopyPwd" data-clipboard-action="copy"
                                                data-clipboard-target="#copyPwdContent"></i> -->
        
        
                                                <button type="button" class="service_module_button ml-0 left_wrap_btn fs-12 fr" data-func="crack_pass" data-type="default" data-desc="crack_pass" onclick="service_module_button($(this), '<?php echo $api->host_id;?>', 'cloud','<?php echo $_COOKIE['lang_s'];?>')" style="height:35px;"><?php echo $_LANG['reset_password'];?></button>
        
                                            </p>
                                            <p class="mb-0"><?php echo $_LANG['port'];?>：<?php echo $info['host']['port'];?></p>
        
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <?php 
                                        foreach ($info['configoptions'] as $item) {
                                            if ($item['option_name'] == 'RAM'||$item['option_name'] == 'CPU'||$item['option_type'] == 'os'){
                                                
                                            }else{
                                                echo "<div class='col-md-12 mb-2 configuration configuration_list'>".
                                                        "<div data-toggle='popover' data-placement='top' data-trigger='hover'".
                                                            "data-content='".$item['option_name']."：".$item['subs'][0]['option_name']."' class='bg-light card-body py-2 bg-gray row'>".
                                                            "<p class='text-gray col-md-6 plr-0 text-nowrap'>".
                                                            "".$item['option_name']."".
                                                            "</p>".
                                                            "<p class='mb-0 col-md-6 plr-0 text-nowrap text-right pl-2'>".
                                                            "".$item['subs'][0]['option_name']."".
                                                            "</p>".
                                                        "</div>".
                                                    "</div>";
                                            }
                                        }
                                    ?>
                                    <?php 
                                        foreach ($info['self_defined_field'] as $item) {
                                            echo "<div class='col-md-12 mb-2 configuration configuration_list'>".
                                                "<div data-toggle='popover' data-placement='top' data-trigger='hover'".
                                                    "data-content='".$item['field_name']."：".$item['value']."' class='bg-light card-body py-2 bg-gray row'>".
                                                    "<p class='text-gray col-md-6 plr-0 text-nowrap'>".$item['field_name']."</p>".
                                                    "<p class='mb-0 col-md-6 plr-0 text-nowrap text-right pl-2'>".
                                                    "".$item['value']."".
                                                    "</p>".
                                                "</div>".
                                            "</div>";
                                        }
                                    ?>
                                    <?php
                                        $remarkText = $info['host']['client_notes']?$info['host']['client_notes']:'-';
                                        echo "<div onclick='isShowConfiguration()' class='configuration-btn-down isClick'>".$_LANG['view_m_info']."</div>".
                                        "<div class='col-12 mb-2'>".
                            
                                            "<div data-toggle='popover' data-placement='top' data-trigger='hover'".
                                                "data-content='".$_LANG['memo']."：".$remarkText."'".
                                                "class='bg-light card-body bg-gray row'>".
                            
                                                "<p class='text-gray col-md-3 plr-0 text-nowrap'>".$_LANG['memo']."</p>".
                                
                                                "<p class='mb-0 col-md-9 plr-0 text-nowrap'>".$remarkText."".
                                                "<span class='bx bx-edit-alt pointer ml-2' data-toggle='modal' data-target='#modifyRemarkModal'></span>".
                                                "</p>".
                            
                                            "</div>".
                            
                                        "</div>";
                                    ?>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="card">
                            <div class="card-body">
                                <ul class="nav nav-tabs nav-tabs-custom" role="tablist">
                                    <li class="nav-item" id="chartLi">
                                        <a class="nav-link" data-toggle="tab" href="#home1" role="tab"
                                            aria-selected="false">
                                            <!-- <span class="d-block d-sm-none"><i class="fas fa-home"></i></span> -->
                                            <span><?php echo $_LANG['chart'];?></span>
                                        </a>
                                    </li>
                                    <li class="nav-item" id="SnapLi">
                                        <a class="nav-link" data-toggle="tab" href="#module_client_area_snapshot"
                                            role="tab" aria-selected="true">
                                            <!-- <span class="d-block d-sm-none"><i class="fas fa-cog"></i></span> -->
                                            <span><?php echo $_LANG['snapshot'];?></span>
                                        </a>
                                    </li>
                                    <li class="nav-item" id="SecuLi">
                                        <a class="nav-link" data-toggle="tab" href="#module_client_area_security"
                                            role="tab" aria-selected="true">
                                            <!-- <span class="d-block d-sm-none"><i class="fas fa-cog"></i></span> -->
                                            <span><?php echo $_LANG['security_group'];?></span>
                                        </a>
                                    </li>
                                    <!--<li class="nav-item">-->
                                    <!--    <a class="nav-link" data-toggle="tab" href="#settings1" role="tab"-->
                                    <!--        aria-selected="false">-->
                                            <!-- <span class="d-block d-sm-none"><i class="fas fa-cog"></i></span> -->
                                    <!--        <span><?php echo $_LANG['log'];?></span>-->
                                    <!--    </a>-->
                                    <!--</li>-->
                                </ul>
                                <div class="tab-content p-3 text-muted" style="min-height: 550px;">
                                    <div class="tab-pane active" role="tabpanel" id="home1">
                                        <div class="row">
                                            <?php 
                                               foreach ($info['chart'] as $chartv) {
                                                  switch ($chartv['type']) {
                                                    case 'flow':
                                                        $chart_title = $_LANG['network_t'];
                                                        $chart_value = 0;
                                                        $chart_arr = "{'type': 'flow','title': '网络流量','select': []}";
                                                        break;
                                                    case 'memory':
                                                        $chart_title = $_LANG['memory_u'];
                                                        $chart_value = 1;
                                                        $chart_arr = "{'type': 'memory','title': '内存使用率','select': []}";
                                                        break;
                                                    case 'cpu':
                                                        $chart_title = $_LANG['cpu_usage'];
                                                        $chart_value = 2;
                                                        $chart_arr = "{'type': 'cpu','title': 'CPU使用率','select': []}";
                                                        break;
                                                  }
                                                  echo '<div class="chartbox">'.
                                                       '    <div class="module_chart module_chart_'.$chartv['type'].'" data-type="'.$chartv['type'].'" data-title="'. $chart_title .'">'.
                                                       '        <div style="height: 60px;">'.
                                                       '            <h4 style="float: left;">' . $chart_title . '</h4>'.
                                                       '            <div style="width:200px;float: right;margin-right: 20px;">'.
                                                       '                <select class="module_chart_select_'. $chartv['type'] .' form-control selectpicker_refresh" onchange="getChartDataFn('. $chart_arr .','. $chart_value .')">' .
                                                       '                    <option value="hour:MAX">小时</option>'.
                                                       '                    <option value="day:MAX">天</option>'.
                                                       '                    <option value="week:MAX">周</option>'.
                                                       '                    <option value="month:MAX">月</option>'.
                                                       '                </select>'.
                                                       '            </div>'.
                                                       '        </div>'.
                                                       '    </div>'.
                                                       '    <div class="w-100 h-100">'.
                                                       '        <div style="height: 500px" class="chart_content_box w-100" id="module_chart_'.$chartv['type'].'"></div>'.
                                                       '    </div>'.
                                                       '</div>';
        
                                               }
                                            ?>
                                        </div>
                                        <script>
                                            // 图表tabs
                                            $(document).ready(function () {
                                                var arr = JSON.parse('[{"type":"flow","title":"网络流量","select":[]},{"type":"memory","title":"内存使用率","select":[]},{"type":"cpu","title":"CPU使用率","select":[]}]')
                                                setTimeout(function(){
                                                arr.forEach(function(item){
                                                    getChartDataFn(item)
                                                })
                                                }, 0);
                                            });
        
                                            let switch_id = []
                                            let chartsData = []
                                            let timeArray = []
                                            let name = []
                                            let typeArray = []
                                            let myChart = null
        
                                            $('#chartLi').on('click', function () {
                                                setTimeout(function () {
                                                    myChart.resize()
                                                }, 0);
                                            });
        
                                            // line
                                            function lineChartOption (type, xAxisData, seriesData0, seriesData1, unit, label) {
                                                // 硬盘IO
                                                const myChart = echarts.init(document.getElementById('module_chart_'+type))
                                                myChart.setOption({
                                                backgroundColor: '#fff',
                                                title: {
                                                    subtext: (!xAxisData.length) ? '暂无数据' : '',
                                                    left: 'center',
                                                    textAlign: 'left',
                                                    subtextStyle: {
                                                    lineHeight: 250
                                                    }
                                                },
                                                tooltip: {
                                                    trigger: 'axis',
                                                    axisPointer: {
                                                    type: 'line',
                                                    lineStyle: {
                                                        color: '#7dcb8f'
                                                    }
                                                    },
                                                    backgroundColor: '#fff',
                                                    textStyle: {
                                                    color: '#333',
                                                    fontSize: 12
                                                    },
                                                    padding: [10, 10],
                                                    extraCssText: 'box-shadow: 0px 4px 13px 1px rgba(1, 24, 167, 0.1);',
                                                    formatter: function (params, ticket, callback) {
                                                    // console.log('line:', params)
                                                    const res = `<div>
                                                                    <div>${params[0].marker} ${params[0].seriesName}：${params[0].value}${unit}</div>
                                                                    <div>${params[1] ? params[1].marker : ''} ${params[1] ? params[1].seriesName : ''}${params[1] ? '：' : ''}${params[1] ? params[1].value : ''}${params[1] ? unit : ''}</div>
                                                                    <div style="color: #999999;">${params[0].axisValue}</div>
                                                                </div>`
                                                    return res
                                                    }
                                                },
                                                grid: {
                                                    left: '80',
                                                    top: 30,
                                                    x: 50,
                                                    x2: 50,
                                                    y2: 80
                                                },
                                                dataZoom: [ // 缩放
                                                    {
                                                    type: 'inside',
                                                    throttle: 50
                                                    }
                                                ],
                                                xAxis: [{
                                                    offset: 15,
                                                    type: 'category',
                                                    boundaryGap: false,
                                                    // 改变x轴颜色
                                                    axisLine: {
                                                    lineStyle: {
                                                        type: 'dashed',
                                                        color: '#ddd',
                                                        width: 1
                                                    }
                                                    },
                                                    // data: ['2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00'].map(function (str) {
                                                    //   return str.replace(' ', '\n')
                                                    // }),
                                                    data: xAxisData,
                                                    // 轴刻度
                                                    axisTick: {
                                                    show: false
                                                    },
                                                    // 轴网格
                                                    splitLine: {
                                                    show: false
                                                    },
                                                    axisLabel: {
                                                    show: true,
                                                    textStyle: {
                                                        color: '#999999'
                                                    }
                                                    }
                                                }],
                                                yAxis: [{
                                                    type: 'value',
                                                    axisTick: {
                                                    show: false
                                                    },
                                                    axisLine: {
                                                    show: false
                                                    },
                                                    axisLabel: {
                                                    formatter: '{value}' + unit,
                                                    textStyle: {
                                                        color: '#556677'
                                                    }
                                                    },
                                                    splitLine: {
                                                    lineStyle: {
                                                        type: 'dashed'
                                                    }
                                                    }
                                                }],
                                                series: [{
                                                    name: label[0],
                                                    type: 'line',
                                                    // data: [5, 12, 11, 14, 25, 16, 10, 18, 6],
                                                    data: seriesData0,
                                                    symbolSize: 1,
                                                    symbol: 'circle',
                                                    smooth: true,
                                                    showSymbol: false,
                                                    lineStyle: {
                                                    width: 2
                                                    },
                                                    itemStyle: {
                                                    normal: {
                                                        color: '#75db16',
                                                        borderColor: '#75db16'
                                                    }
                                                    }
                                                }, {
                                                    name: label[1],
                                                    type: 'line',
                                                    // data: [10, 10, 30, 12, 15, 3, 7, 20, 15000],
                                                    data: seriesData1,
                                                    symbolSize: 1,
                                                    symbol: 'circle',
                                                    smooth: true,
                                                    showSymbol: false,
                                                    lineStyle: {
                                                    width: 3,
                                                    shadowColor: 'rgba(92, 102, 255, 0.3)',
                                                    shadowBlur: 10,
                                                    shadowOffsetY: 20
                                                    },
                                                    itemStyle: {
                                                    normal: {
                                                        color: '#5c66ff',
                                                        borderColor: '#5c66ff'
                                                    }
                                                    }
                                                }
                                                ]
                                                })
        
                                                window.addEventListener('resize', function () {
                                                myChart.resize()
                                                })
                                            }
                                            // area
                                            function areaChartOption (type, xAxisData, seriesData, unit, label) {
                                                // CPU使用率
                                                const myChart = echarts.init(document.getElementById('module_chart_'+type ))
                                                myChart.setOption({
                                                grid: {
                                                    left: '80',
                                                    top: 30,
                                                    x: 50,
                                                    x2: 50,
                                                    y2: 80
                                                },
                                                backgroundColor: '#fff',
                                                title: {
                                                    subtext: (!xAxisData.length) ? '暂无数据' : '',
                                                    left: 'center',
                                                    textAlign: 'left',
                                                    subtextStyle: {
                                                    lineHeight: 250
                                                    }
                                                },
                                                tooltip: {
                                                    backgroundColor: '#fff',
                                                    padding: [10, 20, 10, 8],
                                                    textStyle: {
                                                    color: '#333',
                                                    fontSize: 12
                                                    },
                                                    trigger: 'axis',
                                                    axisPointer: {
                                                    type: 'line',
                                                    lineStyle: {
                                                        color: '#7dcb8f'
                                                    }
                                                    },
                                                    formatter: function (params, ticket, callback) {
                                                    // console.log(params, '')
                                                    const res = `<div>
                                                                    <div>${params[0].seriesName}：${params[0].value}${unit} </div>
                                                                    <div style="color: #999999;">${params[0].axisValue}</div>
                                                                </div>`
                                                    return res
                                                    },
                                                    extraCssText: 'box-shadow: 0px 4px 13px 1px rgba(1, 24, 167, 0.1);'
                                                },
                                                dataZoom: [ // 缩放
                                                    {
                                                    type: 'inside',
                                                    throttle: 50
                                                    }
                                                ],
                                                xAxis: {
                                                    offset: 15,
                                                    type: 'category',
                                                    boundaryGap: false,
                                                    // 改变x轴颜色
                                                    axisLine: {
                                                    lineStyle: {
                                                        color: '#999999',
                                                        width: 1
                                                    }
                                                    },
                                                    // data: ['2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00'].map(function (str) {
                                                    //   return str.replace(' ', '\n')
                                                    // }),
                                                    data: xAxisData,
                                                    // 轴刻度
                                                    axisTick: {
                                                    show: false
                                                    },
                                                    // 轴网格
                                                    splitLine: {
                                                    show: false
                                                    },
                                                    axisLabel: {
                                                    show: true,
                                                    // interval: 0, // 横轴信息全部显示
                                                    textStyle: {
                                                        color: '#999999'
                                                    }
                                                    }
                                                },
                                                yAxis: {
                                                    axisTick: {
                                                    show: false // 轴刻度不显示
                                                    },
                                                    max: 100,
                                                    min: 0,
                                                    // 改变y轴颜色
                                                    axisLine: {
                                                    show: false
                                                    },
                                                    // 轴网格
                                                    splitLine: {
                                                    show: true,
                                                    lineStyle: {
                                                        color: '#ddd',
                                                        type: 'dashed'
                                                    }
                                                    },
                                                    // 坐标轴文字样式
                                                    axisLabel: {
                                                    show: true,
                                                    formatter: '{value}' + unit,
                                                    textStyle: {
                                                        color: '#999999'
                                                    }
                                                    }
                                                },
                                                series: [{
                                                    name: label,
                                                    type: 'line',
                                                    areaStyle: {
                                                    opacity: 1,
                                                    color: '#737dff'
                                                    },
                                                    symbol: 'none', // 折线无拐点
                                                    lineStyle: {
                                                    normal: {
                                                        width: 0 // 折线宽度
                                                    }
                                                    },
                                                    smooth: true,
                                                    // data: [5, 25, 20, 50, 10, 40, 18, 25, 0]
                                                    data: seriesData
        
                                                }]
                                                })
        
                                                window.addEventListener('resize', function () {
                                                myChart.resize()
                                                })
                                            }
                                            // bar
                                            function barChartOption (type, xAxisData, seriesData0, seriesData1, unit, label) {
                                                // 内存用量
                                                const myChart = echarts.init(document.getElementById('module_chart_'+type))
                                                myChart.setOption({
                                                backgroundColor: '#fff',
                                                title: {
                                                    subtext: (!xAxisData.length) ? '暂无数据' : '',
                                                    left: 'center',
                                                    textAlign: 'left',
                                                    subtextStyle: {
                                                    lineHeight: 250
                                                    }
                                                },
                                                tooltip: {
                                                    backgroundColor: '#fff',
                                                    padding: [10, 20, 10, 8],
                                                    textStyle: {
                                                    color: '#000',
                                                    fontSize: 12
                                                    },
                                                    trigger: 'axis',
                                                    axisPointer: {
                                                    type: 'line',
                                                    lineStyle: {
                                                        color: '#7dcb8f'
                                                    }
                                                    },
                                                    formatter: function (params, ticket, callback) {
                                                    // console.log('bar:', params)
                                                    const res = `
                                                    <div>
                                                        <div>${params[0].marker}${params[0].seriesName}：${params[0].value}${unit} </div>                
                                                        <div>${params[1] ? params[1].marker : ''} ${params[1] ? params[1].seriesName : ''}${params[1] ? '：' : ''}${params[1] ? params[1].value : ''}${params[1] ? unit : ''}</div>
                                                        <div>${params[0].axisValue}</div>
                                                    </div>`
                                                    return res
                                                    },
                                                    extraCssText: 'box-shadow: 0px 4px 13px 1px rgba(1, 24, 167, 0.1);'
                                                },
                                                grid: {
                                                    left: '80',
                                                    top: 30,
                                                    x: 70,
                                                    x2: 50,
                                                    y2: 80
                                                },
                                                dataZoom: [ // 缩放
                                                    {
                                                    type: 'inside',
                                                    throttle: 50
                                                    }
                                                ],
                                                xAxis: {
                                                    offset: 15,
                                                    axisLabel: {
                                                    show: true,
                                                    textStyle: {
                                                        color: '#999'
                                                    }
                                                    },
                                                    type: 'category',
                                                    // 改变x轴颜色
                                                    axisLine: {
                                                    lineStyle: {
                                                        type: 'dashed',
                                                        color: '#ddd',
                                                        width: 1
                                                    }
                                                    },
                                                    // data: ['2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00', '2020-08-11 11:30:00'].map(function (str) {
                                                    //   return str.replace(' ', '\n')
                                                    // })
                                                    data: xAxisData
                                                },
                                                yAxis: {
                                                    axisTick: {
                                                    show: false // 轴刻度不显示
                                                    },
                                                    axisLine: {
                                                    show: false
                                                    },
                                                    axisLabel: {
                                                    show: true,
                                                    textStyle: {
                                                        color: '#999'
                                                    },
                                                    formatter: '{value}' + unit
                                                    },
                                                    // 轴网格
                                                    splitLine: {
                                                    show: true,
                                                    lineStyle: {
                                                        color: '#ddd',
                                                        type: 'dashed'
                                                    }
                                                    }
        
                                                },
                                                series: [{
                                                    name: label[1],
                                                    type: 'bar',
                                                    stack: '总量',
                                                    barGap: '-100%',
                                                    // data: [136, 132, 101, 134, 90, 230, 210, 100, 300],
                                                    data: seriesData1,
                                                    itemStyle: {
                                                    barBorderRadius: [5, 5, 0, 0],
                                                    color: '#737dff'
                                                    }
                                                },
                                                {
                                                    name: label[0],
                                                    type: 'bar',
                                                    stack: '可用',
                                                    // data: [964, 182, 191, 234, 290, 330, 310, 100, 500],
                                                    data: seriesData0,
                                                    itemStyle: {
                                                    barBorderRadius: [5, 5, 0, 0],
                                                    color: '#ccc',
                                                    opacity: 0.3
                                                    }
                                                } 
                                                ]
                                                })
        
                                                window.addEventListener('resize', function () {
                                                myChart.resize()
                                                })
                                            }
        
                                            async function getChartDataFn(e, index) {
                                                var arr = JSON.parse('[{"type":"flow","title":"网络流量","select":[]},{"type":"memory","title":"内存使用率","select":[]},{"type":"cpu","title":"CPU使用率","select":[]}]')
                                                if(index){e = arr[index]}
                                                var echartTT = echarts.init(document.getElementById('module_chart_'+e.type))
                                                echartTT.showLoading({
                                                    text: '数据正在加载...',
                                                    color: '#999',
                                                    textStyle: {
                                                        fontSize: 30,
                                                        color: '#444'
                                                    },
                                                    effectOption: {
                                                        backgroundColor: 'rgba(0, 0, 0, 0)'
                                                    }
                                                })
                                                const queryObj = {
                                                    id: host_id,
                                                    chart: {
                                                        type: e.type,
                                                        start: 0,
                                                        select: $('.module_chart_select_' + e.type).val()
                                                    }
                                                }
                                                $.ajax({
                                                    type: "POST",
                                                    headers:{'Authorization': cookie},//请求头
                                                    url: baseUrl + '/console/v1/remkcmp_server/host/'+ host_id +'/configoption/chart',
                                                    data: queryObj,
                                                    success: function (data) {
                                                        echartTT.hideLoading()
                                                        if (data.status !== 200) return false
        
                                                        const xAxisData = []
                                                        const seriesData0 = []
                                                        const seriesData1 = [];
        
                                                        (data.data.list || []).forEach((item, index) => {
                                                            (item || []).forEach(innerItem => {
                                                            if (index === 0) {
                                                                xAxisData.push(innerItem.time)
                                                                seriesData0.push(innerItem.value)
                                                            } else if (index === 1) {
                                                                seriesData1.push(innerItem.value)
                                                            }
                                                            })
                                                        })
        
                                                        if (data.data.chart_type === 'area') {
                                                            areaChartOption(e.type, xAxisData, seriesData0, data.data.unit, data.data.label)
                                                            } else if (data.data.chart_type === 'line') {
                                                            lineChartOption(e.type, xAxisData, seriesData0, seriesData1, data.data.unit, data.data.label)
                                                            } else if (data.data.chart_type === 'bar') {
                                                            barChartOption(e.type, xAxisData, seriesData0, seriesData1, data.data.unit, data.data.label)
                                                            }
        
                                                            // 如果初始查询没有时间, 则设置默认时间为返回数据的第一个和最后一个时间
                                                            if (!$('.module_chart_'+e.type+' .startTime').val() || !$('.module_chart_'+e.type+' .endTime').val()) {
                                                            if (data.data.list[0].length) {
                                                                var start = new Date(data.data.list[0][0].time).getTime()
                                                                var end = new Date(data.data.list[0][data.data.list[0].length - 1].time).getTime()
                                                                $('.module_chart_'+e.type+' .startTime').val(moment(start).format('YYYY-MM-DDTHH:mm'))
                                                                $('.module_chart_'+e.type+' .endTime').val(moment(end).format('YYYY-MM-DDTHH:mm'))
                                                            }
                                                            }
                                                        }
                                                });
                                            }    
                                        </script>
                                    </div>
        
                                    <div class="tab-pane" role="tabpanel" id="module_client_area_snapshot">
                                        <div style="min-height: 550px;width:100%" id="module_client_area_snapshot123">
                                           
                                        </div>
                                    </div>
                                    <script>
                                        $('#SnapLi').on('click', function () {
                                            $.ajax({
                                                type: "GET",
                                                headers:{'Authorization': cookie},//请求头
                                                url: baseUrl + '/console/v1/remkcmp_server/host/'+ host_id +'/configoption/area',
                                                data: {
                                                    id: host_id,
                                                    key: 'snapshot',
                                                    lang: langs == 'english' ?  'en-us' : 'zh-cn'
                                                },
                                                success: function (res) {
                                                    if(res.status == 200) {
                                                        $("#module_client_area_snapshot123").html(res.data.html);
                                                    }else {
                                                        $("#module_client_area_snapshot123").html("<p>网络错误</p>");
                                                    }
                                                }
                                            });
                                        });
                                    </script>
        
                                    <div class="tab-pane" role="tabpanel" id="module_client_area_security">
                                        <div style="min-height: 550px;width:100%" id="module_client_area_security123">
                                           
                                        </div>
                                    </div>
                                    <script>
                                        $('#SecuLi').on('click', function () {
                                            $.ajax({
                                                type: "GET",
                                                headers:{'Authorization': cookie},//请求头
                                                url: baseUrl + '/console/v1/remkcmp_server/host/'+ host_id +'/configoption/area',
                                                data: {
                                                    id: host_id,
                                                    key: 'security_group',
                                                    // lang: 'zh-cn'
                                                },
                                                success: function (res) {
                                                    if(res.status == 200) {
                                                        $("#module_client_area_security123").html(res.data.html);
                                                    }else {
                                                        $("#module_client_area_security123").html("<p>网络错误</p>");
                                                    }
                                                }
                                            });
                                        });
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 服务器内页 修改备注 弹窗 -->
            <!-- <div class="modal fade show" id="modifyRemarkModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> -->
            <div class="modal fade" id="modifyRemarkModal">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalCenterTitle"><?php echo $_LANG['ed_remarks'];?></h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label text-right"><?php echo $_LANG['remarks'];?></label>
                                    <div class="col-sm-9">
                                        <div class="input-group">
                                            <input id="remarkInp" type="text" value="" class="form-control api_password"
                                                placeholder="<?php echo $_LANG['enter'];?>">
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-light" data-dismiss="modal"><?php echo $_LANG['cancel'];?></button>
                            <button type="button" class="btn btn-primary" onclick="modifyRemarkSubmit(<?php echo $api->host_id;?>,'<?php echo $_COOKIE['lang_s'];?>')"><?php echo $_LANG['ok'];?></button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 重置密码弹窗 -->
            <!-- <div class="modal fade show" id="moduleResetPass" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> -->
            <div class="modal fade" id="moduleResetPass">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title mt-0"><?php echo $_LANG['reset_password'];?></h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <form id="resetPassword">
                            <div class="modal-body">
                                <div class="form-group row mb-4">
                                    <label for="horizontal-firstname-input"
                                        class="col-md-3 col-form-label d-flex justify-content-end"><?php echo $_LANG['user_pwd'];?></label>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control getPassword" name="password">
                                    </div>
                                    <div class="col-md-1 fs-18 d-flex align-items-center">
                                        <i class="fas fa-dice create_random_pass pointer"
                                            onclick="create_random_pass()"></i>
                                    </div>
                                    <label id="password-error-tip" class="control-label error-tip"
                                        for="password"></label>
                                </div>
                                <div class="alert alert-danger" role="alert">
                                    <?php echo $_LANG['reset_pwdtxt1'];?><br>
                                    <?php echo $_LANG['reset_pwdtxt2'];?><br>
                                    <?php echo $_LANG['reset_pwdtxt3'];?>
                                </div>
                                <div class="form-group row mb-4">
                                    <label for="horizontal-firstname-input"
                                        class="col-md-3 col-form-label d-flex justify-content-end"><?php echo $_LANG['f_down'];?></label>
                                    <div class="col-md-6 pt-9">
                                        <label>
                                            <input type="checkbox" class="mr-1 getForce" id="force" name="force"><?php echo $_LANG['a_to'].$_LANG['f_down'];?>
                                        </label>
                                    </div>
                                    <label id="force-error-tip" class="control-label error-tip"
                                        for="force">请同意强制关机</label>
                                </div>
                            </div>
                            <input type="hidden" name="func" value="crack_pass">
                            <input type="hidden" name="id" value="<?php echo $api->host_id;?>">
                        </form>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal"><?php echo $_LANG['cancel'];?></button>
                            <button type="button" class="btn btn-primary submit"
                                onclick="moduleResetPass($(this),'<?php echo $_COOKIE['lang_s'];?>')"><?php echo $_LANG['ok'];?></button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 重装系统弹窗 -->
            <!-- <div class="modal fade show" id="moduleReinstall" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> -->
            <div class="modal fade" id="moduleReinstall">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title mt-0"><?php echo $_LANG['reload_Rein'];?></h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <form class="servicedetail_form">
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-2  d-flex align-items-center justify-content-end">
                                        <label class="float-right mb-0"><?php echo $_LANG['system'];?></label>
                                    </div>
                                    <div class="col-md-5">
                                        <div class="form-group mb-0">
                                            <div class="dropdown bootstrap-select form-control configoption_os _refresh">
                                                <input type="hidden" name="os_config_id" value="<?php echo $info['os']['id'];?>"> 
                                                <select class="form-control selectpicker configoption_os selectpicker_refresh" data-style="btn-default" name="os_group" onchange="moduleReinstallOsGroupChange($(this))">
                                                    <?php 
                                                        foreach ($info['os']['subs'] as $item) {
                                                            if($item['os'] == "Windows") {
                                                                $os_svg = '1';
                                                            }elseif ($item['os'] == "CentOS"){
                                                                $os_svg = '2';
                                                            }elseif ($item['os'] == "Ubuntu"){
                                                                $os_svg = '3';
                                                            }elseif ($item['os'] == "Debian"){
                                                                $os_svg = '4';
                                                            }else{
                                                                $os_svg = '9';
                                                            }
                                                            $systemIcon = '<img class=&quot;mr-1&quot; src=&quot;/upload/common/system/'.$os_svg.'.svg&quot; height=&quot;20&quot;/>'.$item['os'].'';
                                                            // $systemIcon = "<img class='mr-1' src='/upload/common/system/".$os_svg.".svg' height='20'/>".$item['name']."";
                                                            // echo $systemIcon;
                                                            echo "<option  data-content='".$systemIcon."' value='".$item['os']."'>".$item['os']."</option>";
                                                        }
                                                    ?>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-5">
                                        <div class="form-group">

                                            <select
                                                <?php 
                                                    echo "class='form-control'".
                                                    "name='os'".
                                                    "data-os='".json_encode($info['os']['subs'])."'";
                                                ?>       
                                            >

                                                <?php 
                                                    foreach ($info['os']['subs'][0]['version'] as $versv) {  
                                                        echo "<option value='".$versv['id']."' data-group='".$info['os']['subs'][0]['os']."' ".$disabled.">".$versv['option_name']."</option>";
                                                    }
                                                ?>
                                            </select>

                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <label for="horizontal-firstname-input" class="col-md-2 col-form-label d-flex justify-content-end"><?php echo $_LANG['user_pwd'];?></label>
                                    <div class="col-md-5">
                                        <input type="text" class="form-control" name="password" value="">
                                    </div>
                                    <div class="col-md-1 fs-18 d-flex align-items-center">
                                        <i class="fas fa-dice" onclick="create_random_pass()"></i>
                                    </div>
                                </div>
                                <div class="row">
                                    <label for="horizontal-firstname-input" class="col-md-2 col-form-label d-flex justify-content-end"><?php echo $_LANG['port'];?></label>
                                    <div class="col-md-5">
                                        <input type="text" class="form-control" name="port" value="">
                                    </div>
                                    <div class="col-md-1 fs-18 d-flex align-items-center">
                                        <i class="fas fa-dice module_reinstall_random_port" onclick="module_reinstall_random_port()"></i>
                                    </div>
                                </div>
                                

                                <div class="row">
                                    <div class="col-md-3 offset-md-2 d-flex d-flex-cl justify-content-end">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input"
                                                id="moduleReinstallConfirm" value="1"
                                                onchange="reinstallConfirm($(this))">
                                            <label class="custom-control-label"
                                                for="moduleReinstallConfirm"><?php echo $_LANG['backups'];?></label>
                                        </div>
                                        <div class="reinstallAgreeCheckbox" id="reinstallAgreeCheckbox"></div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-9">
                                        <div id="moduleReinstallMsg"></div>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="func" value="reinstall">
                            <input type="hidden" name="id" value="<?php echo $api->host_id;?>">
                        </form>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal"><?php echo $_LANG['cancel'];?></button>
                            <button type="button" class="btn btn-primary submit"
                                onclick="moduleReinstall($(this),'<?php echo $_COOKIE['lang_s'];?>')"><?php echo $_LANG['ok'];?></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
<script>
    var Userinfo_allow_second_verify = '0'
        , Userinfo_user_second_verify = '0'
        , Userinfo_second_verify_action_home = [""], Login_allow_second_verify = ''
        , Login_second_verify_action_home = null;

    var clipboard = null
    var clipboardpoppwd = null
    $(document).on('click', '#copyIPContent', function () {
      $('#popModal').modal('show')
      $('#popTitle').text(lang_obj.common.ipaddress)
      var iplist = ''
      if (clipboard) {
        clipboard.destroy()
      }
      for(let item in arr_ips) {
        iplist += `
          <div>
            <span class="copyIPContent${item}">${arr_ips[item]}</span>
            <i class="bx bx-copy pointer text-primary ml-1 btn-copy btnCopyIP${item}" data-clipboard-action="copy" data-clipboard-target=".copyIPContent${item}"></i>
          </div>
        `
    
        // 复制IP
        clipboard = new ClipboardJS('.btnCopyIP'+item, {
          text: function (trigger) {
            return $('.copyIPContent'+item).text()
          },
          container: document.getElementById('popModal')
        });
        clipboard.on('success', function (e) {
          toastr.success(lang_obj.common.re_cating_s);
        })
      }
    
      $('#popContent').html(iplist)
    });

    var showPWd = true
    $(function () {
        $(".nav-tabs-custom").find('.nav-item').find("a").removeClass('active')
        $(".nav-tabs-custom").find('.nav-item').eq(0).find("a").addClass('active')
        // 暂停状态悬浮原因
        $('.container-fluid').on('mouseover', '.status-suspended', function () {
            $('.xf-bg').show();
        })
        $('.container-fluid').on('mouseout', '.status-suspended', function () {
            $('.xf-bg').hide();
        })
        // 复制IP
        var clipboard1 = new ClipboardJS('#btnCopyIP', {
          text: function (trigger) {
            return $('#copyIPContent').text()
            // return $("#copyIPOne").text()
          }
        });
        
        clipboard1.on('success', function (e) {
          toastr.success(lang_obj.common.re_cating_s);
        })
        // 一个ip时，不弹框，复制ip
        var clipboard = new ClipboardJS('#copyOneIp', {
            text: function (trigger) {
                return $('#copyOneIp').text()
            }
        });
        clipboard.on('success', function (e) {
            toastr.success(lang_obj.common.re_cating_s);
        })

        // 查看密码
        // $('#copyPwdContent').hide()
        $('#hidePwdBox').hide()

        // 复制密码
        var clipboard2 = new ClipboardJS('.btnCopyPwd', {
            text: function (trigger) {
                return $('#copyPwdContent').text()
            }
        });
        clipboard2.on('success', function (e) {
            toastr.success(lang_obj.common.re_cating_s);
        })
    })

    function togglePwd() {
        showPWd = !showPWd

        if (showPWd) {
            $('#copyPwdContent').show()
            $('#hidePwdBox').hide()
        }
        if (!showPWd) {
            $('#copyPwdContent').hide()
            $('#hidePwdBox').show()
        }
    }
    //点击更多信息
    function isShowConfiguration(first = true) {
        let time = 0
        if (first) {
            time = 500
        }
        for (let i = 0; i < 99; i++) {
            if (i > 3) {
                $('.configuration').eq(i).toggle(time)
            }
        }
        $('.configuration-btn-down').toggleClass('isClick')
        $('.configuration-btn-down').html(lang_obj.common.view_m_info)
        $('.configuration-btn-down.isClick').html(lang_obj.common.put_m_info)
        if ($('.configuration_list').length < 4) {
            $('.configuration-btn-down').hide()
        }
    }
    isShowConfiguration(false)
    // 远程地址 建站解析
    // 复制授权码
    var clipboardnat_aclBox = new ClipboardJS('#btnCopyaclBox', {
        text: function (trigger) {
            return $('#nat_aclBox').text()
        }
    });
    clipboardnat_aclBox.on('success', function (e) {
        toastr.success(lang_obj.common.re_cating_s);
    })

    // 复制授权码
    var clipboardnat_webBox = new ClipboardJS('#btnCopywebBox', {
        text: function (trigger) {
            return $('#nat_webBox').text()
        }
    });
    clipboardnat_webBox.on('success', function (e) {
        toastr.success(lang_obj.common.re_cating_s);
    })

    document.getElementById('box1').style.display="none";
    document.getElementById('box2').style.display="none";
    timeInterval = setInterval(() => {
        $.ajax({
            type: "get",
            url: baseUrl+'/ntgp/v1/host_details',
            headers:{'Authorization': cookie}, //请求头
            data: {
                hostid: host_id,
                type: 'cs'
            },
            success: function (resd) {
                if(resd.status == 200){
                    if(resd.data.vmdomain.no_execute == 'pveremove_clone' || resd.data.vmdomain.no_execute == 'pveremove_clone_line' || resd.data.vmdomain.no_execute == 'pveremove_done' || resd.data.vmdomain.no_execute == 'pveagain_Clone') {
                        document.getElementById('box1').style.display="none";
                        document.getElementById('box2').style.display="none";
                    } else if(resd.data.host.status == 'Reinstalling'){
                        document.getElementById('box1').style.display="block";
                        document.getElementById('box2').style.display="none";
                    } else {
                        document.getElementById('box1').style.display="none";
                        document.getElementById('box2').style.display="block";
                    }
                }
            }
        });
    }, 800);

    var showPowerStatus = '1';
    var powerStatus = {
        status: '',
        des: ''
    }

    $(function () {
        if (showPowerStatus == '1') {
            getPowerStatus(host_id)
        }

        $('#powerBox').on('click', function () {
            getPowerStatus(host_id)
        });
    })

    // 获取电源状态
    function getPowerStatus() {

        $('#powerStatusIcon').removeClass()
        $('#powerStatusIcon').addClass('bx bx-loader')

        $.ajax({
            type: "POST",
            url: baseUrl+'console/v1/remkcmp_server/host/' + host_id + '/provision/status',
             
            headers:{'Authorization': cookie},//请求头
            success: function (data) {
                $('#powerStatusIcon').attr('data-content', data.data ? data.data.des : data.msg)
                $('#powerStatusIcon').removeClass()
                if (data.status != 200) {
                    powerStatus.status = 'unknown'
                    powerStatus.des = data.msg
                    $('#powerStatusIcon').addClass('sprite unknown')
                } else {
                    powerStatus.status = data.data ? data.data.status : 'unknown'
                    powerStatus.des = data.data ? data.data.des : '未知'
                    // 

                    if (powerStatus.status === 'process') {
                        $('#powerStatusIcon').addClass('bx bx-loader')
                    } else if (powerStatus.status === 'on') {
                        $('#powerStatusIcon').addClass('sprite start')
                    } else if (powerStatus.status === 'off') {
                        $('#powerStatusIcon').addClass('sprite closed')
                    } else if (powerStatus.status === 'waiting') {
                        $('#powerStatusIcon').addClass('sprite waitOn')
                    } else if (powerStatus.status === 'suspend') {
                        $('#powerStatusIcon').addClass('sprite pause')
                    } else if (powerStatus.status === 'wait_reboot' || powerStatus.status === 'wait') {
                        $('#powerStatusIcon').addClass('sprite waiting')
                    } else if (powerStatus.status === 'cold_migrate') {
                        $('#powerStatusIcon').addClass('iconfont icon-shujuqianyi')
                    } else if (powerStatus.status === 'hot_migrate') {
                        $('#powerStatusIcon').addClass('iconfont icon-shujuqianyi')
                    } else {
                        $('#powerStatusIcon').addClass('sprite unknown')
                    }

                    if (data.data.status !== 'process') { // 状态改变, 清除定时器
                        clearInterval(timeInterval)
                    }
                }
            }
        });
    }

    var timeOut = null
    var timeInterval = null

    $('#moduleReinstall input[name="port"]').val(Math.floor(10000 + Math.random() * 10000));

    // 重置密码密码校验规则
    var passwordRules = { "len_num": 12, "upper": "1", "lower": "1", "num": "1", "special": "0" };
    $('#moduleReinstall input[name="password"]').val(createRandPassword(Number(passwordRules.len_num), Number(passwordRules.num), Number(passwordRules.upper), Number(passwordRules.lower), Number(passwordRules.special)));
    var setting_web_url = baseUrl;
    //console.log('passwordRules',passwordRules)
    $(document).on('blur', '.getPassword', function () {
        veriPassword()

    })
    function veriPassword() {
        let result = checkingPwd1($(".getPassword").val(), passwordRules.num, passwordRules.upper, passwordRules.lower, passwordRules.special)

        if (result.flag) {
            $('#password-error-tip').css('display', 'none');
            $('.getPassword').removeClass("is-invalid");
        } else {
            $("#password-error-tip").html(result.msg);
            $(".getPassword").addClass("is-invalid");
            $('#password-error-tip').css('display', 'block');
        }
    }
    $(function () {
        $("#resetPassword").on('click', ".create_random_pass", function (e) {
            veriPassword()
        })
        $('.qd_cancel').on('click', function () {
            $('.contract_mc,.modal').hide()
        })
    })

    $(".getForce").change(function () {
        if ($(this).is(':checked')) {
            $('#force-error-tip').css('display', 'none');
        } else {
            $("#force-error-tip").html(lang_obj.common.f_down);
            $('#force-error-tip').css('display', 'block');
        }
    });

    function loginOut() {// 退出登录
        $.ajax({
            url: '/loginout.php?type=loginout',
            type: 'GET',
            data:{},
            success: function (res) {

                if(res.status==0) {
                    
                    location.href = location.origin + '/login.php'
                }

            }
        })
        
    }

    $('.page-content').on('click',function(){ //有操作延长cookie
        $.ajax({
            url: '/loginout.php?type=refreshCookie',
            type: 'GET',
            data:{},
            success: function (res) {

                

            }
        })
    })
</script>
