$(function () {
  var Date = undefined;
  var appuintText = undefined
  var bustime = undefined;
  // 国有房屋无业点击选中记录
  var busIndex = undefined
  var data = {
    'dateList': [
      {
        week: '星期一',
        date: '10月15号',
        isSelect: true
      },
      {
        week: '星期二',
        date: '10月16号'
      },
      {
        week: '星期三',
        date: '10月17号'
      },
      {
        week: '星期二',
        date: '10月18号'
      },
      {
        week: '星期五',
        date: '10月19号'
      },
      {
        week: '星期六',
        date: '10月19号'
      }
    ],
    "list": ['上午：09:00-10：00', '上午：10:00-11：00', '上午：11:00-12：00', '下午：14:00-15：00', '下午：15:00-16：00'],
    "appint_detail": [
      {
        'total': 2
      },
      {
        'total': 2
      },
      {
        'total': 0
      },
      {
        'total': 0
      },
      {
        'total': 1
      }
    ]
  };

  // 获取当前选中的日期
  // for (var i = 0; i < data.dateList.length; i++) {
  //   if (data.dateList[i].isSelect) {
  //     Date = data.dateList[i].date
  //     break
  //   }
  // };

  layui.use('element', function () {
    let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
    //监听导航点击
    element.on('nav(demo)', function (elem) {
      layer.msg(elem.text());
    });
  });
  function a(i) {
    Date = data.dateList[i].date
    $(".swiper-slide").eq(i).addClass('active').siblings().removeClass('active');
  }

  $('.business_list li').click(function () {
    // 获取元素
    appuintText = $(this).find('a').text()
    

    $('.layui_anim_list').removeClass('disnone')
    $('.layui_anim_content').show()
    var demo = $('.layui-anim')
    $('html,body').addClass('ovfHiden');
    var othis = demo, anim = othis.data('anim');
    othis.removeClass(anim);
    setTimeout(function () {
      demo.show()
      othis.addClass(anim);
    });

    // 获取当前点击li 的下标
    let index = $(this).index()
    busIndex = index
  })

  layui.use('laytpl', function () {
    laytpl = layui.laytpl;


    var getTpl = document.getElementById('date').innerHTML
      , view = document.getElementById('swiperDate');
    laytpl(getTpl).render(data, function (html) {
      view.innerHTML = html;
    });

    var getTpl = document.getElementById('appoint_timeList').innerHTML
      , view = document.getElementById('view');
    laytpl(getTpl).render(data, function (html) {
      view.innerHTML = html;
    });

    var getTpl = document.getElementById('appint_detail').innerHTML
      , view = document.getElementById('view1');
    laytpl(getTpl).render(data, function (html) {
      view.innerHTML = html;
    });
  });
  var swiper = new Swiper('.swiper-container', {
    slidesPerView: 5,
    spaceBetween: 20,
    slidesPerGroup: 1,
    observer: true,
    observeParents: true,
    on: {
      click: function (swiper) {
        var index = swiper['clickedIndex'];
        a(index);
      }
    },
    loopFillGroupWithBlank: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
  $(document).on('click', '.able_appint', function () {
    $('.able_appint').removeClass("able_appintActive")
    $(this).addClass("able_appintActive")

    let index = $(this).index()
    // 获取当前选中的日期
    bustime = data.list[index]
    modleClose()
    $(".business_list li .allowedMask").remove()
    $(".business_list li .reserved").remove()
    var str = "<div class='reserved'> <i class='layui-icon layui-icon-log'></i> <div><p>" + appuintText + "</p><p>" + bustime + "</p></div>  <i class='layui-icon appintDel  layui-icon-reduce-circle'></i></div>"
    $(".business_list li").append('<div class="allowedMask"></div>');
    $(".business_list li:eq(" + busIndex + ") a").removeClass('not-allowed')
    $(".business_list li").eq(busIndex).append(str);
    $(".business_list li:eq(" + busIndex + ") a").hide()
  });

  // 删除预约记录
  $(document).on('click', '.appintDel', function (event) {
    $('.layui_anim_list').addClass('disnone')
    $('.able_appint').removeClass('able_appintActive')
    layui.use('layer', function () {
      var layer = layui.layer;
      layer.confirm('此操作将删除预约记录，是否继续', {
        btn: ['取消', '继续'] //按钮
      }, function () {
        layer.closeAll();
        modleClose()
      }, function () {
        modleClose()
        $(".business_list li a").show()
        $(".business_list li .allowedMask").remove()
        $(".business_list li .reserved").remove()
      });
    });
  });


  $(document).on('click', '.allowedMask', function () {
    $('.layui_anim_list').addClass('disnone')
    modleClose()
  });
});
function modleClose() {
  $('.layui_anim_content').hide()
  $('.layui-anim').hide()
  $('html,body').removeClass('ovfHiden');
}