// 好处！！
// 1: 使用自执行函数，让函数自己运行
// 2: 使用局部作用域避免变量和方法的污染
(function (){

  let lists = classDaras.result;
  console.log(lists)

  /**
   * 1：只为了渲染页面
   */
  function RenderLeftMenu() {
    lists.forEach(function(val,index) {
      $(".view-left ul").append(`<li class="${ index == 0 ? 'active':'' }">${val.name}</li>`)
    })
  }

  /**
   * 绑定点击事件
   */
  function BindClick() {
    $(".view-left ul li").on('click',function(){
      
      $(this).addClass('active').siblings().removeClass('active')
      RenderRightMenu( $(".view-left ul li").index($(this)) )
    })
  }

  /**
   * 渲染右边对应的子分类
   * @param {*} id 
   */
  function RenderRightMenu(id) {
    $(".view-right ul").empty();
    lists[id].list.forEach(val =>{
      $(".view-right ul").append(`<li>
                                    <a href="./list.html?id=${val.id}&status=true">${val.name}</a>
                                  </li>`)
    })
  }

  RenderLeftMenu()
  BindClick()
  RenderRightMenu(0)


})()