(function() {
  var MVC = MVC || {};

  var formatString = function (str, data) {
    return str.replace(/{#(\w+)#}/g, function(match, key) {
      return typeof data[key] === undefined ? '' : data[key]
    })
  }

  // 数据层模型 
  // 自执行函数 返回一个数据模型层对象操作方法
  MVC.model = (function() {
    var M = {};
    M.data = {
      // 左侧导航栏展示相关的数据
      slideBar: [
        {
          text: '动漫',
          title: '动漫title',
          content: '动漫content',
          href: 'https://www.baidu.com'
        },
        {
          text: '电竞',
          title: '电竞title',
          content: '电竞content',
          href: 'https://www.baidu.com'
        },
        {
          text: '新闻',
          title: '新闻title',
          content: '新闻content',
          href: 'https://www.baidu.com'
        },
      ],
    };

    return {
      getData: function(key) {
        return M.data[key];
      },
      setData: function(key, value) {
        M.data[key] = value;
        return this;
      },
    }
  }());

  // 视图层模型
  // 自执行函数 返回一个根据视图名称返回视图的函数
  MVC.view = (function() {
    var model = MVC.model;
    // 视图对象
    var views = {
      createSlideBar: function() {
        var html = '';
        var data = model.getData('slideBar');
        if (!data || !data.length) {
          return;
        }

        var dom = document.createElement('div');

        var tpl = {
          container: [
            '<div><ul>{#content#}</ul></div>',
          ].join(''),
          item: [
            '<li style="display: flex; height: 100px;">',
              '<a class="icon" href="{#href#}" style="display: inline-block">',
                '<span>{#text#}</span>',
              '</a>',
              '<div class="box" style="display: none;">',
                '<p>',
                  '{#title#}',
                '</p>',
                '<p>',
                  '{#content#}',
                '</p>',
              '</div>',
            '</li>'
          ].join('')
        };

        for (var i = 0, len = data.length; i < len; i++) {
          html += formatString(tpl.item, data[i]);
        }

        dom.innerHTML = formatString(tpl.container, { content: html })
        document.body.appendChild(dom);
      }
    };

    return function(name) { 
      views[name]();
    }
  }());

  // 控制器层
  MVC.ctrl = (function() {
    var view = MVC.view;

    var controller = {
      initSlideBar: function() {
        // 渲染视图
        view('createSlideBar');
        var ul = document.getElementsByTagName('ul')[0];
        ul.addEventListener('mouseover', function(e) {
          console.log(e.target);
          if (e.target.nodeName === 'LI') {
            var box = e.target.getElementsByClassName('box')[0];
            box.style.display = 'block';
          }
        });

        ul.addEventListener('mouseout', function(e) {
          if (e.target.nodeName === 'LI') {
            var box = e.target.getElementsByClassName('box')[0];
            box.style.display = 'none';
          }
        });
      }
    };
    controller.initSlideBar();
  }());
}())