<template lang="html">
    <div id="pop{{index}}" class="pop ddd {{customClass}}" data-pop data-index="{{index}}">
        <section id="popup{{index}}" class="hides popup" data-popup
                 style="width:{{width}}px;height:{{height}}px;top:{{top}}px;background:{{background}};">
            <div id="popbox{{index}}" class="popbox" data-popbox>
                <span id="popClose{{index}}" class="popClose" data-popclose></span>
                {{content}}
            </div>
        </section>
        <section id="popbg{{index}}" class="popbg" data-popbg></section>
    </div>
</template>


<style lang="sass">
   @import "../../styles/core/base.scss" ;

   .pop {
     ul, li, div, span, p, i, b, a, section, table, figcaption, header, nav, h1, h2, h3, h4 {
         -webkit-touch-callout: auto;
         -webkit-user-select: auto;
         -moz-touch-callout: auto;
         -moz-user-select: auto;
     }

     input {
         -webkit-user-select: auto;
         -moz-user-select: auto;
     }

     .popup {
         -webkit-transition: 0.3s ease-out all 0s;
         -moz-transition: 0.3s ease-out all 0s;
         transition: 0.3s ease-out all 0s;
         background-color: #fff;
         border-radius: 2px;
         background-clip: padding-box;
         overflow: hidden;
         width: 80%;
         position: fixed;
         z-index: 99999;
         left: 0;
         right: 0;
         margin: auto;
         top: 15%;

       &.hides {
           -moz-transform: scale(1.1, 1.2);
           -webkit-transform: scale(1.1, 1.2);
           transform: scale(1.1, 1.2);
           opacity: 0;
       }

       .popbox {
           position: relative;
           width: 100%;
           height: 100%;
           min-height: 300px;
           overflow: hidden;

         .popClose {
             display: block;
             width: 40px;
             height: 40px;
             background-image: url("../../../public/images/close-bold-white.png");
             background-repeat: no-repeat;
             background-size: 20px 20px;
             background-position: center center;
             background-color: #e5e7ea;
             overflow: hidden;
             position: absolute;
             right: 0;
             top: 0;
             z-index: 9999;
             cursor: pointer;

             &:hover {
               background-color: #C5C5C5;
             }
         }
       }
     }
     .popbg {
         position: absolute;
         z-index: 9998;
         width: 100%;
         height: 100%;
         top: 0;
         background-color: rgba(0, 0, 0, .5);
     }
   }
 </style>


<script>

 if(!$.tv){
   $.tv = {};
 }

 $.tv.popup = function(options){
   this.init(options);
 }

 $.tv.popup.prototype = {

   init : function(options){
     var self = this;
     options = options || {};
     this.options = options;

     //默认白色背景
     if(!options.background){
       options.background = '#fff';
     }

     var index = options.index;
    //  var index = $('body').data('popIndex');
    //  if(typeof index ==='undefined'){
    //    index=0;
    //  }else{
    //    index++;
    //  }
    //  $("body").data("popIndex",index);
     //$('body').append(tpls.popup($.extend({}, options, {index:index,custom:options.customClass})));
     var o = {
       pop : $('#pop'+index),
       popbox : $('#popbox'+index),
       popup : $('#popup'+index),
       popbg : $('#popbg'+index),
       popClose : $('#popClose'+index)
     };

     if(options.central){
       o.popup.css({
         top:'50%',
         left:'50%',
         transform:'translate(-50%,-50%)'
       })
     }

     // 方便外界获取
     this.index = index;
     this.o = o;
     this.content = options.content;
     o.popbox.append(options.content);
     if(options.hideClose){
       o.popClose.hide();
     }
     if(!options.bgIgnore){
       self.bgClose();
     }
     // 定位
     // IOS会默认忽略scrollTop
     var s = 0,
       d = $(document).height(),
       h = o.pop.height(),
       w = $(window).height();

     o.popup.removeClass('hides');


     //o.popbg.height($('body')[0].scrollHeight);

     options.fn && options.fn(this);
     // 关闭按钮事件
     o.popClose.on('click',function(){
       options.closeback && options.closeback(self);
       self.close();
     });
   },

   getContent:function(){
     return this.content;
   },

   showCloseBtn:function(){
     this.o.popClose.show();
   },

   bgClose:function(){
     var self = this;
     this.o.popbg.on('click',function(){
       self.close();
     });
   },

   resize:function(width,height){
     this.o.popup.css({
       width:width,
       height:height
     });
   },

   close:function(){
     // 使用this.o,方便外界调用this.close方法
     var self = this;

     this.options.beforeClose && this.options.beforeClose.call(this)

     this.o.popup.addClass('hides');
     this.o.pop.fadeOut(300, function() {
       self.o.pop.remove();
     });
   }
 };

 var propsFn = (onlyKey)=>{

   var arr = ['width',
     'height',
     'background',
     'top',
     'content',
     'hideClose',
     'bgIgnore',
     'customClass',
     'central',
     'fn',
   ];

   return arr;
 }


 var index = 0;

 export default $.tv.popup;
 </script>
