
{% extends "base.html" %}{% load static %}
{% load my_filters %}
{% block title %}{{ "分享机器" | translate }}{% endblock %}
{% block link %}<link rel="stylesheet" href="{% static 'layui/css/style.css' %}">{% endblock %}
{% block legend_name %}{{ "分享机器给其他用户" | translate }}{% endblock %}
{% block content %}
 
 
<div class="layui-container">
    <div class="layui-card layui-col-md3-offset2">
        <div class="layui-card-header">{{ "请将要分享的机器调整到右侧" | translate }}</div>
        <div id="showdevice"></div>
        <button id="create" type="button" class="layui-btn padding-5" lay-on="getData">{{ "生成分享链接" | translate }}</button>
    </div> 
    <div class="layui-card">{{ "1、链接有效期为15分钟，切勿随意分享给他人。" | translate }}</div>
    <div class="layui-card">{{ "2、所分享的机器，被分享人享有相同的权限，如果机器设置了保存密码，被分享人也可以直接连接。" | translate }}</div>
    <div class="layui-card">{{ "3、为保障安全，链接有效期为15分钟、链接仅有效1次。链接一旦被（非分享人的登录用户）访问，分享生效，后续访问链接失效。" | translate }}</div>
    
    <div class="layui-card layui-col-md6-offset1">
          <table class="layui-table">
            <colgroup>
              <col width="30">
              <col width="150">
              <col width="200">
              <col>
            </colgroup>
            <thead>
              <tr>
                <th>{{ "链接地址" | translate }}</th>
                <th>{{ "创建时间" | translate }}</th>
                <th>{{ "ID列表" | translate }}</th>
              </tr> 
            </thead>
            <tbody>
            
            {% for one in sharelinks %}
              <tr>
                <td><script> document.write(window.location);</script>/{{one.shash}} </td>
                <td>{{one.create_time}}		</td>
                <td>{{one.peers}}		</td>

              </tr>
              {% endfor %}
            </tbody>
          </table>
    </div> 
    

</div>

 <script>
  layui.use(['transfer', 'jquery', 'layer'], function(){
    var transfer = layui.transfer;
    var $      = layui.jquery;
    var layer  = layui.layer;

    //渲染
    transfer.render({
      elem: '#showdevice'  //绑定元素
      ,title: ['{{ "我的机器" | translate }}', '{{ "分享机器" | translate }}']  //自定义标题
      //,width: 500 //定义宽度
      //,height: 300 //定义高度
      ,data: [//定义数据源
      {%for peer in peers %}
      {"value": "{{peer.id}}", "title": "{{peer.name}}"},
      {%endfor%}

      ]  //disabled 是否禁用  checked 是否选中
      ,id: 'device' //定义索引 重新加载reload或者获取右侧数据时可以用到
    });
    $("#create_bak").click(function(){
        
        var getData = transfer.getData('device');
        alert(JSON.stringify(getData));

    });
    $("#create").click(function(){
        var getData = transfer.getData('device');
        $.ajax({
            url:'/api/share',
            type:'post',
            dataType:'json',
            data:{
                data:JSON.stringify(getData),
            },
            success:function(data){
                if (data.code == 1) {
                   // var myMsg = layer.msg('处理中', {
                    //      shade: 0.4,
                     //     time:false //取消自动关闭
                    // });  
                    //layer.msg('注册成功，请前往登录页登录。');
                    layer.alert('{{ "成功！如需分享，请复制以下链接给其他人：<br>" | translate }}'+ window.location + '/' +data.shash, function (index) {
                        location.reload();});                    
                }else {
                    layer.msg(data.msg);
                }
            }
        });

    });

  });
  </script>
{% endblock %}