{extend name="layout/layout" /}
{block name="title"}阅读打卡记录{/block}
{block name="css"}
<!-- 这里引入css -->
<link href="{:asset('/css/frontend/common.css')}" rel="stylesheet" type="text/css">
<link href="{:asset('/css/frontend/classify.css')}" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{:asset('/css/frontend/subscrip/recordInfo.css')}">
<style type="text/css">
  .wrapper {position: fixed;}
  #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
  .wrapper .copy {
    position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;
  }
  .toast {
    text-align: center;
    min-height: 60px;
    width: 220px;
    color: #e6e6e6;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 25%;
    top: 40%;
    display: none;
  }
  .toast-tip {
    line-height: 60px;
  }
</style>
{/block}
{block name="zepto"}
<!-- 这是zepto插件 -->
{/block}
{block name="menu_title"}阅读打卡记录{/block}
{block name="main"}
<!-- read_recommend_ -->

<div id="record_info">
<!--  <div class="header">-->
<!--    <img src="{:asset('/img/frontend/subscrip/back-white.png')}" class="left">-->
<!--    <div>阅读打卡记录</div>-->
<!--    <img src="{:asset('/img/frontend/subscrip/set-white.png')}" alt="" class="set">-->
<!--  </div>-->
  <div class="back_card"></div>
  <div class="card"></div>
  <div class="inset">
    <div class="official">每一次阅读，都是一份收获</div>
    <div class="down">
      <div class="black">
        <div class="now"><text class="num">{$activity['sort_day']}</text>天</div>
        <div class="present">当前坚持</div>
      </div>
      <div class="line"></div>
      <div class="red">
        <div class="now"><text class="num">{$activity['days']}</text>天</div>
        <div class="present">活动周期</div>
      </div>
    </div>
  </div>


  <div class="detial">
    {if condition="!empty($log)"}
    {foreach($log as $k=>$v)}
    <div class="info">
      <div class="title">第{$v['sort']}天阅读打卡记录</div>
      <div class="time">{$v['d_text']}</div>
      <div class="status">
        {if condition="$v['state'] eq 0"}
        <text class="reissue go_sign">补卡</text>
        {elseif condition="$v['state'] eq -1"}
        <text class="arrow_text">未完成</text>
        {else/}
        <text class="arrow_text">已完成</text>
        {/if}

      </div>
    </div>
    {/foreach}
    {/if}
  </div>
  <div class="wrapper" style="">
    <div class="txt copy">{$con}</div>
    <textarea id="input"></textarea>
  </div>
  <div class="alert_mask" style="display: none">
    <div class="mask_pop"></div>
    <div class="mask_warp">
      <img src="{:asset('/img/frontend/subscrip/info_wrong.png')}" alt="" class="wrong">
      <div class="alert_tit">很遗憾！您昨日未完成打卡</div>
      <div class="alert_info">
        挑战失败，失去 <text class="warn">全额返还报名费资格</text>
        ，您可以邀请任意好友报名该活动，获得1次补签机会。
      </div>
      <div class="btn_rei">立即补签</div>
      <div class="copy_inner">*已帮你自动复制口令，快去贴给他~！</div>
    </div>
  </div>
  <div class="toast"><div class="toast-tip">口令复制成功</div></div>
</div>
<input type="hidden" class="is_sign" value="{$activity['re_sign']}">
{/block}
{block name="js"}
<script>
  (function() {
    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
      handleFontSize();
    } else {
      if (document.addEventListener) {
        document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
      } else if (document.attachEvent) {
        document.attachEvent("WeixinJSBridgeReady", handleFontSize);
        document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
      }
    }
    function handleFontSize() {
      WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
      WeixinJSBridge.on('menu:setfont', function() {
        WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
      });
    }
  })();
  document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
      event.preventDefault();
    }
  }, false);
  $('#record_info .left').click(function (e) {
    window.location.href="/index/activity/subscribe";
  })
  function show_toast(str=''){
    if (str != ''){
      $('.toast div').text(str)
    }
    $('.toast').show();
    setTimeout(function () {
      $('.toast').hide();
    },2000);
  }
  window.onload = function(){
    $('.go_sign').click(function (e) {
      var is_sign = $('.is_sign').val();
      if (is_sign == 1){
        show_toast('很抱歉,本期活动您已补签过')
      }else{
        $('.alert_mask').show();
        var text = $('.wrapper .copy').text();
        var input = document.getElementById("input");
        input.value = text; // 修改文本框的内容
        input.select(); // 选中文本
        document.execCommand("copy"); // 执行浏览器复制命令
      }

    })

    $('.btn_rei').click(function (e) {
      $('.alert_mask').hide();
      show_toast()
    })

    $('.alert_mask .wrong').click(function () {
      $('.alert_mask').hide();
      show_toast()
    })
    $('.reissue').click(function () {
      $('.alert_mask').show();
    })
  }
</script>
{/block}