<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link href="/images/pdd_icon.png" rel="icon">
  <title>发货提醒</title>
  <link rel="stylesheet" href="/css/layui.css"/>
  <link rel="stylesheet" href="/css/admin_style.css"/>
  <link rel="stylesheet" href="/css/common.css"/>
  <script type="text/javascript" src="/js/jquery-1.8.1.min.js"></script>
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  {literal}
  <style>
  </style>
  {/literal}
</head>
<body>
<div class="layui-layout layui-layout-admin admin-container-outer deliver_remind_table">
  {include file="include/admin_header.html"}
  {include file="include/admin_leftmenu.html"}
  <div class="layui-body admin-layui-body layui-anim layui-anim-fadein">
    <div class="layui-row">
      <div class="layui-col-lg12 deliver-remind-body-right admin-table-body">
        <div class="admin-table-list-header">
          <div><span>发货提醒/</span></div>
          <div><span>待发货列表</span></div>
          <div><a href="/index/export_wait_deliver_goods_tids"><span>导出待发货列表</span></a></div>
        </div>
        <div id="test"></div>
        <table class="layui-hide" id="deliver_remind_list" lay-filter="deliver-remind-table"></table>
        <div class="admin-blank-table">
          <img src="/images/blank_table.png" alt="">
          <p>暂无数据</p>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="/js/layui.js"></script>
<script src="/js/clipboard.min.js"></script>
{literal}
<script>
layui.use(['element', 'layer', 'util', 'table'], function(){
  var element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,table = layui.table
  ,$ = layui.$;

  //清除翻页后上一页遗漏的定时器
  var intervalsMap = new Map();

  util.event('lay-header-event', {
    menuLeft: function(othis){
      var btn = $("#leftEnumIcon");
      if (btn.hasClass('layui-icon-spread-left')) {
        menuShow(btn);
      } else if (btn.has('layui-icon-shrink-right')) {
        menuHide(btn);
      }

      function menuShow(btn) {
        btn.removeClass('layui-icon-spread-left').addClass('layui-icon-shrink-right');
        $('.layui-layout-admin').find('.layui-side').animate({left: '0'});
        btn.parent().next().css('opacity', 1);
      }

      function menuHide(btn) {
        btn.removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');
        $('.layui-layout-admin').find('.layui-side').animate({left: '-300'});
        btn.parent().next().css('opacity', 0);
      }
    }
    ,menuRight: function(){
      layer.open({
        type: 1
        ,title: '更多'
        ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
        ,area: ['260px', '100%']
        ,offset: 'rt'
        ,anim: 5
        ,shadeClose: true
        ,scrollbar: false
      });
    }
  });

  var showTips = null;
  table.render({
    elem: '#deliver_remind_list'
    ,url:'/index/ajax_get_wait_deliver_list'
    ,toolbar: false
    ,title: '用户数据表'
    ,totalRow: false
    ,className:'deliver_remind_list_table_class'
    ,limit:20
    ,cols: [[
      {field:'goods_name', title:'商品名称',
       templet: function(d){
        return '<a href="https://mobile.yangkeduo.com/goods.html?goods_id='+d.goods_id+'&sku_id='+d.sku_id+'" target="_blank">'+d.goods_name+'</a>';
      }}
      ,{field:'order_sn', title:'订单号'
      ,templet: function(d){
        return '<span data-clipboard-text="'+d.order_sn+'" title="点击复制" class="admin-table-td-outter admin-table-td-outter-'+d.order_sn+'">'+ d.order_sn +'&nbsp;<span class="icon-uniE90E admin-table-td-outter-font admin-table-td-outter-font-'+d.order_sn+'"></span></span>';
      }}
      ,{field:'pay_time', title:'销售时间/倒计时'
      ,templet: function(d){
        if(d.is_show_count_down == true) return '<label id="count_down_wait_'+d.order_sn+'" content="'+d.pay_time+'" class="count_down_wait"><span id="count-down-time-'+d.order_sn+'">倒计时:'+d.count_down+'</span></label>';
        return '<span>'+d.pay_time+'</span>';
      }}
      ,{field:'pay_amount', title:'支付金额(元)'}
      ,{field:'status', title:'顾客催发'
      ,templet: function(d){
        if(d.is_urge) return '<span class="remained_status" content="'+d.urge_shipping_time+'" id="remind_time_'+d.order_sn+'"><span class="icon--3"></span>&nbsp;已催</span>';
        return '<span class="icon--"></span>&nbsp;<span class="remained_status_wait">未催</span>';
      }}
    ]]
    ,page: true
    ,response: {
      statusCode: 200 //重新规定成功的状态码为 200,table 组件默认为 0
    }
    ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
      return {
        "code": 200, //解析接口状态
        "msg": res.info, //解析提示文本
        "count": res.data.total, //解析数据长度
        "data": res.data.data //解析数据列表
      };
    },
    done: function(res, curr, count){
      //删除翻页遗漏的定时器,避免内存泄露
      for(let key of intervalsMap.keys()){
        clearInterval(intervalsMap.get(key));
        intervalsMap.delete(key);
      }

      var data = res.data;
      try {
        if(data == undefined || data.length<=0){
          $('.deliver_remind_list_table_class').hide();
          $('.admin-blank-table').show();
        }else{
          $('.deliver_remind_list_table_class').show();
          $('.admin-blank-table').hide();
        }
      } catch (error) {
        $('.deliver_remind_list_table_class').hide();
        $('.admin-blank-table').show();
      }

      var countDownList = new Array();
      for(var i=0; i<data.length; i++){
        if(data[i].is_show_count_down == true){
          countDownList.push(data[i]);
        }
      }

      for(var i=0; i<data.length; i++){
        var tid = data[i].order_sn;
        var clipboard = new ClipboardJS('.admin-table-td-outter-'+tid);
        clipboard.on('success', function(e) {
          layer.msg('复制成功', {time:1500});
          if(i < (data.length-2)){
            clipboard.destroy();
            e.clearSelection();
          }
        });

        clipboard.on('error', function(e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
        });

        if(data[i].is_show_count_down == true){
          $('#count_down_wait_'+data[i].order_sn).hover(function(){
            var hid = $(this).attr('id');
            var hcontent = $(this).attr('content');
            showTips = layer.tips('销售时间<br>'+hcontent, '#'+hid, {
              area: ['131px', '42px'],
              tips:[3,'#FAF8EB'],//显示方向以及背景颜色(1.上 2右 3下 4左)
              time:3000,//4秒后销毁
              skin:'count-down-class'
            });
          },function(){
              layer.close(showTips);
          });
        }

        if(data[i].is_urge == true){
          $('#remind_time_'+data[i].order_sn).hover(function(){
            var hcontent = $(this).attr('content');
            var hid = $(this).attr('id');
            showTips = layer.tips('催促时间<br>'+hcontent, '#'+hid, {
              area: ['131px', '42px'],
              tips:[3,'#FAF8EB'],//显示方向以及背景颜色(1.上 2右 3下 4左)
              time:3000,//4秒后销毁
              skin:'count-down-class'
            });
          },function(){
              layer.close(showTips);
          });
        }

        var orderSnObjec = new Object();
        orderSnObjec.order_sn = data[i].order_sn;
        if(data[i].is_show_count_down == true){
          var coumtTimeList = data[i].count_down.split(':');
          var countDownTime = (parseInt(coumtTimeList[0]) * 3600 + parseInt(coumtTimeList[1]) * 60 + parseInt(coumtTimeList[2])) * 1000;
          var startTime = new Date(2099,1,1).getTime();
          var endTime = startTime+countDownTime;
          util.countdown(endTime, startTime, data[i].order_sn, function(date, st, timer, order_sn){
            var remainTimeStr = (date[0]*24 + date[1]) + ':' +  date[2] + ':' + date[3];
            var countDownId = '#count-down-time-'+order_sn;
            intervalsMap.set(order_sn, timer);
            if(remainTimeStr == '0:0:0'){
              var order_pay_time = $('#count_down_wait_'+order_sn).attr('content');
              $('#count_down_wait_'+order_sn).hide();
              $('#count_down_wait_'+order_sn).after('<span>'+order_pay_time+'</span>');
            }else{
              layui.$(countDownId).html('倒计时:'+ remainTimeStr);
            }
          });
        }
      }
    }
  });
});


</script>
{/literal}
</body>
</html>