import { Modal, CATEGORIES } from '../../configuration/constants';

export default {

  // 组件名称
  name: Modal,

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${Modal}" class="${Modal}">
      </div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${Modal} {
          bottom: 0!important;
          left: 0!important;
          width: 100%;
          height: 0;
        }
        .${Modal} .hidden {
          display: none!important;
        }
        .${Modal}-mask {
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          height: 100%;
          z-index: 999;
          overflow: auto;
          outline: 0;
          background-color: rgba(0, 0, 0, 0.45);
        }
        .${Modal}-wrap {
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 1000;
          overflow: auto;
          outline: 0;
        }
        .${Modal}-wrap::-webkit-scrollbar {
          width: 8px;
          height: 1px;
        }
        .${Modal}-wrap::-webkit-scrollbar-thumb {
          border-radius: 4px;
          background-color: rgba(0, 0, 0, 0.3);
        }
        .${Modal}-wrap::-webkit-scrollbar-track {
          background-color: transparent;
        }
        .${Modal}-content {
          position: relative;
          top: 100px;
          width: 520px;
          margin: 0 auto;
          background-color: #fff;
          border-radius: 2px;
          color: rgba(0, 0, 0, 0.65);
          box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
          overflow: hidden;
        }
        .${Modal}-close {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 10;
          padding: 0;
          color: rgba(0, 0, 0, 0.45);
          font-weight: 700;
          line-height: 1;
          text-decoration: none;
          background: transparent;
          border: 0;
          outline: 0;
          cursor: pointer;
          -webkit-transition: color 0.3s;
          transition: color 0.3s;
        }
        .${Modal}-close:hover, .${Modal}-close:focus {
          color: rgba(0, 0, 0, 0.75);
          text-decoration: none;
        }
        .${Modal}-close > .fa {
          display: block;
          width: 56px;
          height: 56px;
          font-size: 16px;
          font-style: normal;
          line-height: 56px;
          text-align: center;
          text-transform: none;
          text-rendering: auto;
        }
        .${Modal}-header {
          padding: 16px 24px;
          background-color: #fff;
          border-bottom: 1px solid #f0f0f0;
          border-radius: 2px 2px 0 0;
        }
        .${Modal}-title {
          margin: 0;
          color: rgba(0, 0, 0, 0.85);
          font-weight: 500;
          font-size: 16px;
          line-height: 22px;
          word-wrap: break-word;
        }
        .${Modal}-body {
          padding: 24px;
          font-size: 14px;
          line-height: 1.5715;
          word-wrap: break-word;
          overflow: auto;
        }
        .${Modal}-footer {
          padding: 10px 16px;
          text-align: right;
          background: transparent;
          border-top: 1px solid #f0f0f0;
          border-radius: 0 0 2px 2px;
        }
        .${Modal}-footer .btn {
          margin: 0;
          position: relative;
          display: inline-block;
          height: 32px;
          padding: 4px 15px;
          font-size: 14px;
          font-weight: 400;
          line-height: 1.5715;
          text-align: center;
          white-space: nowrap;
          border: 1px solid #d9d9d9;
          border-radius: 2px;
          color: rgba(0, 0, 0, 0.65);
          background-color: #fff;
          box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
        }
        .${Modal}-footer .btn:hover, .${Modal}-footer .btn:focus {
          color: #40a9ff;
          border-color: #40a9ff;
        }
        .${Modal}-footer .btn-primary {
          color: #fff;
          background-color: #1890ff;
          border-color: #1890ff;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
        }
        .${Modal}-footer .btn-primary:hover,
        .${Modal}-footer .btn-primary:focus {
          color: #fff;
          background-color: #40a9ff;
          border-color: #40a9ff;
        }
        .${Modal}-footer .btn + .btn {
          margin-left: 8px;
        }
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      label: `
        <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M18.6,4.6H9.8c-1.4,0-2.6,1.2-2.6,2.6H5.1c-0.8,0-1.5,0.7-1.5,1.5v6.6c0,0.8,0.7,1.5,1.5,1.5h2.3c0.4,1,1.3,1.7,2.4,1.7h8.7c1.4,0,2.6-1.2,2.6-2.6V7.2C21.2,5.8,20,4.6,18.6,4.6z M19.9,15.2c0,1.2-1,2.1-2.1,2.1h-7.1c-0.5,0-0.9-0.2-1.3-0.5h3.8c0.8,0,1.5-0.7,1.5-1.5V8.7c0-0.8-0.7-1.5-1.4-1.5H8.7c0.3-0.8,1.1-1.3,2-1.3h7.1c1.2,0,2.1,1,2.1,2.1V15.2z"/>
        </svg>
        <div class="gjs-block-label">模态框</div>
      `
    };
  },

  spOptions() {
    return {
      author: '秋水',
      email: 'qiushui.smy@xuelangyun.com',
      docUrl: 'https://xuelangyun.yuque.com/docs/share/2abded5f-c54e-43ff-b066-6c506ab4ca2e?# 《模态框》'
    }
  },

  // 组件属性
  componentOptions() {
    return {
      resizable: true,
      traits: [{
        name: 'isShow',
        label: '默认显示',
        changeProp: 1,
        type: 'checkbox'
      }, {
        name: 'mask',
        label: '遮罩',
        changeProp: 1,
        type: 'checkbox'
      }],
      isShow: true,
      mask: true
    }
  },

  onModelScript() {
    const isShow = Boolean('{[ isShow ]}');
    const mask = Boolean('{[ mask ]}');
    const self = this;
    const _id = self.getAttribute('id');
    
    const $btnClose = $(self).find('.btn-close');
    const $btnCancel = $(self).find('.btn-cancel');
    const $btnConfirm = $(self).find('.btn-confirm');
    const $form = $(self).find('form');
    const $mask = $(self).children('.modal-comp-mask');
    const $wrap = $(self).children('.modal-comp-wrap');
    if (mask) {
      $mask.removeClass("hidden");
    } else {
      $mask.addClass("hidden");
    }

    const onToggle = function(param) {
      if (param) {
        $mask.css('display', 'block');
        $wrap.css('display', 'block');
        if ($form.length) {
          const forms = self.getElementsByTagName('form');
          for (let i=0; i<$form.length; i++) {
            forms[i].reset();
          }
        }
      } else {
        $mask.css('display', 'none');
        $wrap.css('display', 'none');
      }
    };

    const onCancel = function() {
      onToggle(false);
    };
    const onConfirm = function() {
      if ($form.length) {
        $form.submit();
      }
      onToggle(false);
    }

    $btnClose.on('click', onCancel);
    $btnCancel.on('click', onCancel);
    $btnConfirm.on('click', onConfirm);

    window.ee && window.ee.on('modal-' + _id, function(show) {
      onToggle(Boolean(show));
    });

    onToggle(isShow);
  },

  onViewInit() {
    const comps = this.model.get('components');
    if (!comps.length) {
      comps.reset();
      comps.add(`
        <div class="${Modal}-mask"></div>
        <div class="${Modal}-wrap">
          <div class="${Modal}-content">
            <button class="${Modal}-close btn-close" type="button"><i class="spicon icon-close"></i></button>
            <div class="${Modal}-header">
              <h4 class="${Modal}-title">
                模态框（Modal）标题
              </h4>
            </div>
            <div class="${Modal}-body">
              <p>在这里添加模态框内容</p>
              <p>在这里添加模态框内容</p>
            </div>
            <div class="${Modal}-footer">
              <button type="button" class="btn btn-cancel">取 消</button>
              <button type="button" class="btn btn-primary btn-confirm">确 认</button>
            </div>
          </div>
        </div>
      `)
    }
    const evn = "change:isShow change:mask"
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
