{extends file='../layouts/member_list.html'}

{block name=panel_head}
{if ! is_user_panel()}
<header class="panel-heading">
    <ul class="nav nav-tabs pull-left" data-pjax data-load="1">
        <li class="{if element('state',$search) eq 'normal'}active{/if}">
            <a href="{$index_uri|web_url}?state=normal">{_('正常')}</a>
        </li>
        <li class="{if element('state',$search) eq 'near'}active{/if}">
            <a href="{$index_uri|web_url}?state=near">{_('即将过期')}</a>
        </li>
        <li class="{if element('state',$search) eq 'expire'}active{/if}">
            <a href="{$index_uri|web_url}?state=expire">{_('已过期')}</a>
        </li>
        <!--<li class="{if element('state',$search) eq 'end'}active{/if}">
            <a href="{$index_uri|web_url}?state=end">{_('已删除')}</a>
        </li>-->
    </ul>
</header>
{/if}
{/block}

{block name=tip}
<!--<div class="alert alert-info">
    <i class="icon-exclamation-sign"></i>
    <b>购买后，主机状态将处于’创建中‘，最多5分钟内生效，请耐心等待（无须刷新）！</b>
</div>-->
{/block}

{block name=button}
<input type="hidden" name="state" value="{element('state',$search)}" />
{/block}

{block name=list}
{form_open('','id="formList" class="m-b-none" target="iframeNew"')}
<div class="pull-out {if !is_user_panel()}m-t-small{/if} text-small">
    <div class="table-responsive">
        <table class="table table-hover table-server m-b-none">
            <thead>
            <tr class="active">
                {if ! is_user_panel()}
                <td width="20"><input type="checkbox"></td>
                <td nowrap>{_('编号')}/{_('别名')}</td>
                {/if}
                <td nowrap>{_('地域')}/{_('可用区')}</td>
                <td nowrap>{_('线路')}/{_('规格')}</td>
                <td nowrap style="padding-left:0;">{_('配置')}</td>
                <td nowrap style="padding-left:0;">{_('硬盘')}</td>
                <td nowrap style="padding-left:0;">{_('带宽')}</td>
                <td nowrap>IP/MAC</td>
                <td nowrap>{_('开通时间')}/{_('到期时间')}</td>
                {if ! is_user_panel()}
                <td nowrap class="text-center">{_('自动续费')}</td>
                {/if}
                <td nowrap class="text-center">{_('订单状态')}</td>
                <td nowrap class="text-center">{_('管理操作')}</td>
            </tr>
            </thead>
            <tbody id="kvmList" class="text-black">
                  
            <tr class="kvm_item" :id="'kvmItem'+m.id_sn" v-for="(m,i) in list">
                {if ! is_user_panel()}
                <td><input type="checkbox" name="ids[]" :value="m.id" /></td>
                <td><icon v-if="m.is_safety_lock==1" class="icon-lock text-primary"></icon></td>
                <td>
                    <a v-if="$.inArray('autoLoginPanel',m.module_disable)>=0 && $.inArray('orderDetail',m.module_disable)<0" class="text-info" :data-modal="'{'server/panel/'|web_url}'+m.id_sn" :data-modal-title="'{_('管理面板')} #'+m.id_sn" data-modal-class="col-lg-6 col-offset-3">
                        #<span v-text="m.id_sn"></span>
                    </a>
                    <a v-else-if="$.inArray('remotePanel',m.module_disable)>=0 && $.inArray('orderDetail',m.module_disable)<0" class="text-info" :href="'{'server/panel/'|web_url}'+m.id_sn" target="_blank">
                        #<span v-text="m.id_sn"></span>
                    </a>
                    <a v-else class="text-info modal_uri" data-toggle="modal" data-target="#serverModal" :data-uri="detail_uri+m.id_sn">
                        #<span v-text="m.id_sn"></span>
                    </a>
                    <div class="word-break" style="max-width:100px;">
                        <a class="server_name text-muted" :id="'serverName'+i" @click="load_popover_server_name(i)"
                           data-toggle="popover" data-html="true" data-placement="right" data-content="<input class='form-control input-small' value=''></div>">
                            <i class="icon-edit"></i><span v-text="m.server_name"></span>
                        </a>
                    </div>
                </td>
                {/if}
                <td>
                    <span v-text="m.column_name"></span>
                    <span v-if="m.vir_type != 'mcsm'">
                        <br>
                        <span v-text="m.cluster_name"></span>
                    </span>
                    <br><span class="badge bg-info" v-if="m.is_agent==1">{_('代理')}</span>
                </td>
                <td>
                    <span v-text="m.specs_name"></span><br>
                    <span v-text="m.server_title"></span>
                </td>
                <td style="padding-left:0;">
                    <span data-toggle="tooltip" data-placement="top" data-html="true"
                          :title="'<div class=&quot;text-left&quot;>'+($.inArray('deSys',m.module_disable)<0?'{_('操作系统')}：'+m.system_name+'<Br>':'')+'CPU：'+m.cpus+'{_('核')}<br>{_('内存')}：'+mem_format(m.mem,2,'MB')+($.inArray('deDef',m.module_disable)<0?('<br>{_('防御')}：'+mem_format(m.def,2,'GB')):'')+'</div>'">
                        <i :class="m.os_icon" v-if="m.os_icon"></i><br>
                        <span v-text="m.cpus+'{_('核')}'+mem_format(m.mem,2,'MB')"></span>
                    </span>
                </td>
                <td style="padding-left:0;">
                    <span v-if="m.vir_type == 'mcsm'">-</span>
                    <span v-text="m.disk_size_str" v-else></span>
                </td>
                <td style="padding-left:0;">
                    <span v-if="m.vir_type == 'mcsm'">-</span>
                    <div v-else>
                        <div v-if="$.inArray('deBw',m.module_disable)<=0">
                            <span v-text="m.net+'Mbps'"></span>
                            <span v-if="m.net_mod==2||m.net_mod==3">（{_('峰值')}）</span>
                        </div>
                        <div>
                            <span v-if="m.net_mod==3" v-text="'{_('流量包')}：'+m.flows+'GB/{_('月')}'"></span>
                            <span v-else-if="m.net_mod==2" v-text="'{_('按流量计费')}：'+m.flow_amount+'{'suf'|currency}/GB'"></span>
                        </div>
                    </div>
                </td>
                <td>
                    <span data-toggle="tooltip" data-placement="top" data-html="true" :title="m.ip_list.join('<br>')">
                        <span v-text="m.ip_ip"></span><span v-if="m.outer_port" v-text="':'+m.outer_port"></span>
                        <span class="text-danger" v-if="parseInt(m.is_nat)==1">(NAT)</span>
                        <span class="text-gray" v-else-if="parseInt(m.other_dhcp)==1">({_('动态')})</span>
                        <span class="text-gray" v-else>({_('公网')})</span>
                    </span>
                    <div>
                        <span class="text-muted mac" v-text="m.mac"></span>
                    </div>
                </td>
                <td>
                    <div v-text="m.time_add_format"></div>
                    <span class="text-gray" v-text="m.time_end_format"></span>
                    （<span v-text="m.time_end_diff"></span>）
                    <b class="text-danger" v-if="m.time_end_expire">{_('已到期')}</b>
                </td>
                {if ! is_user_panel()}
                <td class="text-center">
                    <span class="text-success" v-if="m.auto_renew==1"><i class="icon-ok"></i></span>
                    <span class="text-muted" v-else><i class="icon-remove"></i></span>
                </td>
                {/if}
                <td class="text-center">
                    <div v-if="m.cron_status==0" @click="reset_cron(m.cron_log_id)">
                        <b class="text-danger">
                            <i class="icon-circle"></i> {_('任务失败')}
                        </b>
                        <div>
                            <a class="btn btn-link btn-mini">[ {_('重启任务')} ]</a>
                        </div>
                    </div>
                    <div class="status" v-else>
                        <b v-if="m.status==1" class="text-success">
                            <i class="icon-circle"></i> {_('正常')}
                        </b>
                        <b v-else :class="m.status_info.class">
                            <i :class="m.status_info.icon"></i>
                            <span v-text="m.status_info.name"></span>
                        </b>
                        <span class="status_net text-warning" v-if="m.status_key=='cancel' && m.stop_desc.length>0" data-toggle="tooltip" data-placement="top" data-html="true" :title="m.stop_desc">
                            <i class="icon-exclamation-sign"></i>
                        </span>
                    </div>
                    <div :class="'status_net text-'+m.status_other_color" v-if="m.status_other_msg.length>0">
                        <b><i class="icon-exclamation-sign"></i> <span v-html="m.status_other_msg"></span></b>
                    </div>
                </td>
                <td class="text-center">
                    <div class="word-nowrap" v-if="m.status_key=='start'">
                        {if ! is_user_panel()}
                        <a class="dcy-info" :data-modal="detail_uri+m.id_sn+'/renew?type=list'" :data-modal-title="m.kvm_name+'{_e()}{_('续费')} #'+m.id_sn" data-modal-class="col-lg-6 col-offset-3">{_('续费')}</a><span class="text-gray" style="padding:0 5px;"> | </span>
                        <a class="dcy-info" :data-modal="detail_uri+m.id_sn+'/upgrade?type=list'" :data-modal-title="m.kvm_name+'{_e()}{_('升级配置')} #'+m.id_sn" data-modal-class="col-lg-6 col-offset-3">{_('升级')}</a>
                        {/if}
                    </div>
                    <div class="word-nowrap">
                        <a v-if="$.inArray('autoLoginPanel',m.module_disable)>=0 && $.inArray('orderDetail',m.module_disable)<0" class="dcy-info" :data-modal="'{'server/panel/'|web_url}'+m.id_sn" :data-modal-title="'{_('管理面板')} #'+m.id_sn" data-modal-class="col-lg-6 col-offset-3">{_('管理')}</a>
                        <a v-else-if="$.inArray('remotePanel',m.module_disable)>=0 && $.inArray('orderDetail',m.module_disable)<0" class="dcy-info" :href="'{'server/panel/'|web_url}'+m.id_sn" target="_blank">{_('管理')}</a>
                        <a v-else class="dcy-info btn_detail modal_uri" data-toggle="modal" data-target="#serverModal" :data-uri="detail_uri+m.id_sn">{_('管理')}</a>
                        {if ! is_user_panel()} 
                           
                        <div class="btn-group" style="top: -2px;">
                            <a class="dcy-info dropdown-toggle" data-toggle="dropdown">更多 <i class="caret" style="border-top-color:#999;"></i></a>
                            <ul class="dropdown-menu text-small pull-right">
                                <li v-if="$.inArray('deBuySame',m.module_disable)<0"><a @click="buy_same_order(m.id_sn)">购买相同配置</a></li>
                            </ul>
                        </div>
                        {/if}
                    </div>
                </td>
            </tr>
         
            
            <tr v-if="Object.keys(list).length==0">
                                <td colspan="10" align="center">
                                    <div class="text-muted">
                                      <img style="width:7%;" src="{asset_url('@skin@images/empty.svg')}"></br></br>
                                        <i class="icon-exclamation-sign"></i>
                                        
                                        <b style="color:#666">没有查询到符合条件的【{$mod.title}】记录  <a style="color:#2468f2" href="{web_url('server/purchase')}">创建实例</a></b>
                                    </div>
                                </td>
                            </tr>
                            
            </tbody>
        </table>
    </div>
</div>
{if ! is_user_panel()}
<footer class="panel-footer">
    <div class="row" style="padding-top:5px;">
        <div class="form-inline col-lg-4 col-sm-4 text-center-sm">
            <a onclick="batchRenew()" class="btn btn-mini btn-white">批量续费</a>

            {if 'member_renew_auto'|get_config_item:'server'}
            <a class="btn btn-mini btn-white batch_action"
               data-submit="auto_renew"
               data-uri="{'server/get_data/batch'|web_url}"
               data-confirm="{_('确认批量开启自动续费吗？')}">{_('自动续费')}</a>
            {/if}

            {if !$game}
            <a class="btn btn-mini btn-white batch_action"
               data-submit="run"
               data-uri="{'server/get_data/batch'|web_url}"
               data-confirm="{_('确认批量开机吗？')}"><i class="icon-play-circle text-success"></i> {_('开机')}</a>

            <a class="btn btn-mini btn-white batch_action"
               data-submit="stop"
               data-uri="{'server/get_data/batch'|web_url}"
               data-confirm="{_('确认批量关机吗？')}"><i class="icon-off text-danger"></i> {_('关机')}</a>
            {/if}
            {if $user.api_key}
            <a class="btn btn-mini btn-white batch_action"
               data-submit="del_agent"
               data-uri="{'server/get_data/batch'|web_url}"
               data-confirm="{_('确认批量清除代理？')}">{_('清除代理')}</a>
            {/if}
        </div>
        <div class="col-lg-8 col-sm-8 text-right text-center-sm">
            {$html_page}
        </div>
    </div>
</footer>
{/if}
{form_close()}
{/block}

{block name=modal}
<div id="serverModal" class="modal fade" data-backdrop="static">
    <div class="modal-dialog modal-large">
        <div class="modal-content" id="serverModalPjax"></div>
    </div>
</div>
<script type="text/javascript">
    var list = {$list|json_encode};
    var detail_uri = "{'server/detail/'|web_url}";
    var index_uri = "{$index_uri}";
    var id_sn = "{$id_sn}";
    var state = "{element('state',$search)}";
    var renew_batch = "{web_url('server/renew_batch')}";
    var kvm_type = "{$kvm_type}";

    var serverListVue;
    var is_load_modal = false; // 是否加载模态窗
    var timeOutTmp;
    var lang = {
        'confirm_reset_cron': '确定重启任务吗？'
    };

    // 详情页弹窗函数
    function load_modal() {
        var server_modal = '#serverModal';
        var server_modal_pjax = '#serverModalPjax';
        var uri = "";
        $('.modal_uri').on('click',function(){
            uri = $(this).data('uri');
            $(server_modal_pjax).html('<div class="spinner"><div class="double-bounce1"></div><div class="double-bounce2"></div></div>');
        });
        $(server_modal).on('show.bs.modal', function () {
            is_load_modal = true;
            pjaxApp('url',uri,server_modal_pjax,{ replace:false });
        });
        $(server_modal).on('hide.bs.modal', function () {
            location.reload();
            /*clearTimeOutTime();
            is_load_modal = false;*/
        });
    }
</script>
{literal}
<script type="text/javascript">
    var each_count = 0; // 轮询次数
    var is_sync = false; // 是否需要轮询
    $(function() {
        serverListVue = new Vue({
            el: '#APPLIST'
            ,data: {
                status: 0
                ,list: list
                ,detail_uri: detail_uri
            }
            ,created: function(){
                this.status=1;
                this.get_data();
                this.$nextTick(function(){
                    this.load_js();
                    load_modal();
                    batch_action();
                    if(id_sn.length>0){
                        // 打开一个云主机弹窗（临时）
                        $('#kvmItem'+id_sn+' .btn_detail').eq(0).click();
                    }
                })
            }
            ,methods: {
                get_data: function(){
                    // 轮询所有数据
                    var runAsync = function(){
                        var defer = $.Deferred();
                        defer.resolve();
                        if(is_load_modal == true){
                            return defer;
                        }
                        // 打开详情页时，暂停异步
                        is_sync = false;
                        $.each(this.list,function(key,value){
                            // 已取消、已删除、已过期，不再轮询
                            defer = defer.then(function(){
                                if(parseInt(value.api_order_id) > 0 && each_count == 0){ // 代理订单轮询一次
                                    is_sync = true;
                                }else if(value.status == 0){ // 创建中的订单一直轮询
                                    is_sync = true;
                                }else{ // 其他正常订单不轮询
                                    return true;
                                }
                                return $.get(app.host+'server/get_data/get_list_row',{ id:value.id_sn },function(response){
                                    if(Object.keys(serverListVue.list[key]).length>0){
                                        serverListVue.list[key] = response.row;
                                    }
                                },'json');
                            })
                        });
                        return defer;
                    }
                    runAsync().then(function(){
                        each_count += 1;
                        if(location.href.indexOf('/'+index_uri) > -1){
                            if(is_sync){
                                timeOutTmp = setTimeout(function(){
                                    serverListVue.get_data();
                                },5000)
                            }
                        }
                    });
                }
                ,load_popover_server_name: function(key){
                    // 加载别名弹窗
                    $('#serverName'+key).off('shown.bs.popover').on('shown.bs.popover',function(){
                        $(".server_name:not('#serverName"+key+"')").popover('hide');
                        $(this).parent().find('input.form-control').val(serverListVue.list[key].server_name).blur(function(){
                            // 修改后input失去焦点，提交修改
                            var server_name = $.trim(serverListVue.list[key].server_name);
                            var value = $(this).val().trim();
                            var id = serverListVue.list[key].id_sn;
                            if(value != server_name){
                                $.post(detail_uri+id+'/edit_field',{ 'submit':'1','field':'server_name','value':value },function(response){
                                    alertApp(response);
                                    if(response.code == 0){
                                        serverListVue.list[key].server_name = value;
                                    }
                                },'json');
                            }
                        })
                    });
                }
                ,open_vnc: function(id_sn, vnc_type){
                    openVnc(id_sn, vnc_type);
                }
                ,reset_cron: function(cron_log_id){
                    // 重启任务
                    ajaxConfirm({
                        'href': app.host+index_uri,
                        'confirm_msg': lang.confirm_reset_cron,
                        'ajax_params': 'submit=reset_cron&id='+cron_log_id
                    })
                }
                ,buy_same_order: function(id_sn){
                    // 购买相同配置
                    $.get(app.host+'server/get_data/get_buy_same',{ 'order_sn':id_sn },function(response){
                        if(response.code > 0){
                            layer.confirm(response.msg, {
                                icon: 0, title: app.lang.app_goto_buy,
                                btn: [app.lang.app_confirm,app.lang.app_cancel]
                            }, function(){
                                location.href=app.host+'server/purchase?order_sn='+id_sn;
                            });
                        }else{
                            location.href=app.host+'server/purchase?order_sn='+id_sn;
                        }
                    },'json');
                }
                ,load_js: function(){
                    $("[data-toggle=tooltip]").tooltip();
                    $('[data-toggle="popover"]').popover();
                }
            }
        })
    })
    function openVnc(id_sn, vnc_type) {
        // 远程连接窗口
        vnc_type = vnc_type ? vnc_type : 'novnc';
        var load = layer.load(0, { shade:0.3 });
        $.post(detail_uri+id_sn+"/kvm",{ 'submit':1,'vnc_type':vnc_type },function(response){
            layer.close(load);
            if(response.code > 0){
                layer.msg(response.msg, { icon:0,shade:0.3,closeBtn:true,time:5000 });
            }else{
                window.open(response.openUrl,'_black','width:1024,height:800,status=no,location=no');
            }
        },'json')
    }

    // 批量续费
    function batchRenew(){
        let ids = [];
        $('input[name="ids[]"]').each(function (){
            if($(this).is(':checked')){
                ids.push($(this).val());
            }
        })
        if(ids.length<=0){
            alertApp({ text:'请选择要续费的订单',icon:'error' });
            return false;
        }

        confirmModal({
            href: renew_batch + "/" + kvm_type + '?ids=' + ids,
            title:"批量续费",
            class:'col-lg-10 col-offset-1'
        });
    };
</script>
{/literal}
{/block}