// 形成独立作用于
(function () {

  // 顶部导航菜单
  var headerMenu = [
    { title: '头条', type: 'top' },
    { title: '社会', type: 'shehui' },
    { title: '国内', type: 'guoji' },
    { title: '娱乐', type: 'yule' },
    { title: '体育', type: 'tiyu' },
    { title: '军事', type: 'junshi' },
    { title: '科技', type: 'keji' },
    { title: '财经', type: 'caijing' },
    { title: '时尚', type: 'shishang' }
  ];

  // ajax 获取数据 type 分类的拼音名
  function GetData(type) {
    ajax({
      data: {
        type: type
      },
      success: function (res) {
        RenderList(res.result.data)
      }
    })
  }

  /**
   * 根据你传递过来的数据，帮你渲染新闻列表页面
   * @param {*} list 
   */
  function RenderList (list) {
    document.querySelector(".content").innerHTML = ""
    list.forEach(function(val){
      // 如果是两张图和三张图的情况统一使用三张图的html布局
      if(val.hasOwnProperty("thumbnail_pic_s02")) {
        document.querySelector(".content").innerHTML +=`
          <div class="list-item-two">
            <div class="item-text">
              <h3>${val.title}</h3>
            </div>
            <div class="img-list">
              <img src="${val.thumbnail_pic_s}">
              <img src="${val.thumbnail_pic_s02}">
              ${val.hasOwnProperty("thumbnail_pic_s03") ? `<img src="${val.thumbnail_pic_s03}">` : ''}
            </div>
            <p>${val.author_name} ${val.category} ${val.date}</p>
          </div>
        `

      // 一张图的布局  
      } else {
        document.querySelector(".content").innerHTML +=`
        <div class="list-item">
          <div class="item-text">
            <h3>${val.title}</h3>
            <p>${val.author_name} ${val.category} ${val.date}</p>
          </div>
          <img src="${val.thumbnail_pic_s}" alt="${val.title}">
        </div>`
      }
    })

  }

  /**
   * 渲染顶部横向的菜单
   */
  function RenderMenu () {
    headerMenu.forEach(function(val,index){
      document.querySelector(".header_menu ul").innerHTML += `
        <li class="${index == 0 ? 'active': ''}">${val.title}</li>
      `
    })
  }

  /**
   * 菜单被点击的时候切换激活样式，并请求对应数据。
   */
  function changeMenu() {
    var MenuLi = document.querySelectorAll(".header_menu ul li");
    MenuLi.forEach(function(val,index){
      val.onclick = function () {
        MenuLi.forEach(function(vas){
          vas.className = ""
        })
   
        GetData(headerMenu[index].type)
        val.className = "active"
      }
    })
  }

  RenderMenu()
  changeMenu()
  GetData('top')
  
})()