$(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
    }
  };

  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()
  });

  // 下一步确认
  $('.nextButton').click(function () {
    if ($('.business_list li').has('.reserved').length) {
      layui.use('layer', function () {
        layer.open({
          type: 1,
          title: '请确认以下信息',
          shadeClose: true,
          area: ['500px', '320px'],
          scrollbar: false,
          skin: 'confimInfo',
          content: '<div class="infoContent">'
            + '<ul>'
            + '<li><span>姓名</span>：任超</li>'
            + '<li><span>身份证号</span>：610124193335522</li>'
            + '<li><span>联系电话</span>：18740677386</li>'
            + '</ul>'
            + '<div class="listItem"><h3>大厅名称：</h3>碑林区不动产办事中心</div>'
            + '<div class="listItem"><h3>预约业务：</h3>' + appuintText + '</div>'
            + '<div class="listItem"><h3>预约时间：</h3>' + Date +'&nbsp;&nbsp;'+bustime+'</div>'
            + '<div class="confimButton"><button type="button" class="layui-btn cancel layui-btn-primary">取消</button><button type="button" class="layui-btn confim layui-btn-normal">确定</button></div>'
            + '</div>'
        });
      })
    } else {
      layui.use('layer', function () {
        layer.alert('请先选择相应业务', {
          skin: 'layui-layer-molv' //样式类名
          , closeBtn: 0
        }, function () {
          layer.closeAll()
        });
      })
    }

  })
  $(document).on('click', '.cancel', function () {
    layer.closeAll()
  })
  $(document).on('click', '.confim', function () {
    window.location.href = "../yyjg/index.html"
  })
});
function modleClose() {
  $('.layui_anim_content').hide()
  $('.layui-anim').hide()
  $('html,body').removeClass('ovfHiden');
}