let urlPrefix = getUrlPrefix();
var browser = checkVersion();
var info = {};
if (EnvCheck() === 'test') new VConsole
// 封装layer消息提醒框
let layerIndex
const showLoading = (content = '加載中...') => {
    layer.open({
        type: 2,
        shadeClose: false,
        content,
        success(e) {
            layerIndex = $(e).attr('index')
        }
    })
}
const hideLoading = (index) => {
    layer.close(index)
}
const toastMsg = (content = '操作完成', time = 2) => {
    layer.open({
        content,
        time,
        skin: 'msg'
    })
}

let delayLock = false, newApplyLock = false

let btnStatus = []
// 获取用户铭牌状态
const getUserNameplateInfo = () => {
  showLoading()
  networkRequest({
    type: 'GET',
    url: urlPrefix + '/nameplate/userNameplateInfo',
    data: {
      uid: pubInfo.uid
    },
    success(res){
      hideLoading(layerIndex);
      if(res.code === 200){
        btnStatus = res.data
        renderBtnStatus()
      }else{
        toastMsg(res.message)
      }
    },
    error(){
      hideLoading(layerIndex);
      toastMsg('網絡錯誤')
    }
  })
}

// 渲染首页按钮状态
const renderBtnStatus = () => {
  btnStatus.map( (item,index) => {
      if(index > 1){
        // 进阶款式
        $('.btn').eq(index).find('img').attr('src', `${item > 0 ? './images/apply-btn-basics.png' : './images/disabled-btn.png'}`)
        if(item > 0){
          $('.btn').eq(index).on('click', () => {
            getUserNameplateList(index+1)
          })
        }
      }else{
        // 基础款式
        $('.btn').eq(index).find('img').attr('src', `${item > 0 ? './images/apply-btn-basics.png' : './images/disabled-btn.png'}`)
        if(item > 0){
          $('.btn').eq(index).on('click', () => {
            getUserNameplateList(index+1)
          })
        }
      }
  })
}

let userNameplateList = []
// 获取用户已有铭牌列表
const getUserNameplateList = (type) => {
  showLoading()
  networkRequest({
    type: 'GET',
    url: urlPrefix + '/nameplate/pickUserNameplate',
    data: {
      uid: pubInfo.uid,
      type
    },
    success(res){
      hideLoading(layerIndex)
      if(res.code === 200){
        if(!res.data.length){
          getNewNameplateList(type)
        }else{
          userNameplateList = res.data
          renderNameplateList()
        }
      }else{
        toastMsg(res.message)
      }
    },
    error(){
      hideLoading(layerIndex);
      toastMsg('網絡錯誤')
    }
  })
}

// 渲染铭牌列表(选择弹窗)
const renderNameplateList = () => {
  let str = ''
  userNameplateList.map( item => {
    str += `
      <li data-apply-day=${item.applyDay} data-nameplate-id=${item.nameplateId} data-type=${item.type} data-text=${item.fixedWord}>
        <p>剩余${item.expireDays}天</p>
        <div class="nameplate">
          <img src="${item.nameplateImage}" alt="">
          <span>${item.word}</span>
        </div>
        <div class="delay-btn">
          <img src="./images/delay-btn.png" alt="">
        </div>
      </li>
    `
  })
  $('.select-ul').html(str)

  $('.shade-mask').show().siblings('.shade-mask-delay, .shade-mask-new').hide()
  $('body').css('overflow', 'hidden')
}


let newNameplateList = []
// 获取新铭牌列表
const getNewNameplateList = (type) => {
  showLoading()
  networkRequest({
    type: 'GET',
    url: urlPrefix + '/nameplate/getNameplateList',
    data: {
      uid: pubInfo.uid,
      type
    },
    success(res){
      hideLoading(layerIndex)
      if(res.code === 200){
        if(!res.data.length){
          toastMsg('暂时没有铭牌可申请')
          return
        }
        newNameplateList = res.data
        renderNewNameplateList()
      }else{
        toastMsg(res.message)
      }
    },
    error(){
      hideLoading(layerIndex);
      toastMsg('網絡錯誤')
    }
  })
}

let newNameplateId  //只有一个可选时，默认选中
// 渲染申请新铭牌弹窗
const renderNewNameplateList = () => {
  let str = '';
  newNameplateList.map( item => {
    str += `
      <li data-apply-day=${item.applyDay} data-nameplate-id=${item.id} data-type=${item.type}>
        <div>
          <img src="${item.iconPic}" alt="">
        </div>
      </li>
    `
  })
  $('.apply-new-ul').html(str)
  if(newNameplateList.length === 1){
    let onlyLi = $('.apply-new-ul').find('li').eq(0);
    newNameplateId = onlyLi.data('nameplateId');
    onlyLi.addClass('active')
  }
  $('.shade-mask-new .delay-time div p span').html(newNameplateList[0].applyDay)
  $('.shade-mask-new').show().siblings('.shade-mask, .shade-mask-delay').hide()
  $('body').css('overflow', 'hidden')
}

// 确认延长期限
const delayNamaplateConfirm = (params) => {
  showLoading()
  networkRequest({
    type: 'POST',
    url: urlPrefix + '/nameplate/applyUserNameplate',
    data: {
      uid: pubInfo.uid,
      type: params.type,
      nameplateId: params.nameplateId,
      applyDay: params.applyDay,
      applyType: params.applyType,
      text: params.text
    },
    success(res){
      hideLoading(layerIndex)
      if(res.code === 200){
        toastMsg('申请成功')
        $('.shade-mask-delay').hide()
        $('body').css('overflow', 'auto')
        delayLock = false
        setTimeout(()=>{
          location.reload()
        }, 500)
      }else{
        toastMsg(res.message)
      }
    },
    error(){
      hideLoading(layerIndex);
      toastMsg('網絡錯誤')
    }
  })
}

// 确认申请新铭牌
const applyNewNamaplateConfirm = (params) => {
  showLoading()
  networkRequest({
    type: 'POST',
    url: urlPrefix + '/nameplate/applyUserNameplate',
    data: {
      uid: pubInfo.uid,
      type: params.type,
      nameplateId: params.nameplateId,
      applyDay: params.applyDay,
      applyType: params.applyType,
      text: params.text
    },
    success(res){
      hideLoading(layerIndex)
      if(res.code === 200){
        toastMsg('申请成功')
        $('.shade-mask-new').hide()
        $('body').css('overflow', 'auto')
        newApplyLock  = false
        setTimeout(()=>{
          location.reload()
        }, 500)
      }else{
        newApplyLock  = false
        toastMsg(res.message)
      }
    },
    error(){
      hideLoading(layerIndex);
      toastMsg('網絡錯誤,請退出重進')
    }
  })
}

$(function () {
  getInfoFromClient()
  setTimeout( () => {
    getUserNameplateInfo()
  }, 50)

  if (browser.app) {
    _hmt.push(['_trackEvent', 'client', 'click', "act_nameplate"]);
  }

  // 点击申请记录按钮
  $('.record').on('click', function(){
    window.location.href = './record.html'
  })

  // 关闭弹窗
  $('.shade-mask .close').on('click', () => {
    $('.shade-mask').hide()
    $('body').css('overflow', 'auto')
  })
  $('.shade-mask-delay .close').on('click', () => {
    $('.shade-mask-delay').hide()
    $('body').css('overflow', 'auto')
  })
  $('.shade-mask-new .close').on('click', () => {
    $('.shade-mask-new').hide()
    $('body').css('overflow', 'auto')
    newNameplateId = ''
    $(this).find('input').val('')
  })

  let maxApplyDay, nameplateId, type, text
  // 监听 延长期限 按钮点击事件
  $('.select-ul').on('click', '.delay-btn', function() {
    let li = $(this).parent();
    let src = li.find('.nameplate img').attr('src');
    let desc = li.find('.nameplate span').html();
    maxApplyDay = li.data('applyDay');
    nameplateId = li.data('nameplateId');
    type = li.data('type');
    text = li.data('text');
    
    $('.shade-mask-delay .nameplate-style img').attr('src', src);
    $('.shade-mask-delay .nameplate-style p span').html(desc);
    $('.shade-mask-delay .delay-time p span').html(maxApplyDay);

    $('.shade-mask-delay').show().siblings('.shade-mask, .shade-mask-new').hide()
  })

  // 延期弹窗 点击减按钮
  $('.shade-mask-delay').on('click', '.decrease', function(){
    let applyDay = parseInt( $(this).parent().find('span').html() );
    if(applyDay > 7){
      applyDay -= 7;
    }else{
      toastMsg('铭牌至少申请7天')
    }
    $('.shade-mask-delay .delay-time p span').html(applyDay);
  })
  //延期弹窗 点击加按钮
  $('.shade-mask-delay').on('click', '.increase', function(){
    let applyDay = parseInt( $(this).parent().find('span').html() );
    if(applyDay >= maxApplyDay){
      toastMsg('已达最大申请时长')
    }else{
      applyDay += 7;
    }
    $('.shade-mask-delay .delay-time p span').html(applyDay);
  })
  // 监听申请延期确定按钮点击事件
  $('.shade-mask-delay').on('click', '.apply-btn', function(){
    // applyType 1申请新铭牌，2延长
    if(!delayLock){
      delayLock = true
      let params = {
        type,
        nameplateId,
        applyDay: parseInt( $(this).parent().find('.delay-time div p span').html() ),
        applyType: 2,
        text
      };
      delayNamaplateConfirm(params)
    }
  })

  /*************************           ******************************/

  // 监听 申请新铭牌 按钮点击事件
  $('.shade-mask').on('click', '.apply-btn', function(){
    let type = $(this).parent().find('.select-ul li').eq(0).data('type');
    getNewNameplateList(type)
  })

  // 申请新铭牌弹窗 点击减按钮
  $('.shade-mask-new').on('click', '.decrease', function(){
    let applyDay = parseInt( $(this).parent().find('span').html() );
    if(applyDay > 7){
      applyDay -= 7;
    }else{
      toastMsg('铭牌至少申请7天')
    }
    $('.shade-mask-new .delay-time p span').html(applyDay);
  })
  // 申请新铭牌弹窗 点击加按钮
  $('.shade-mask-new').on('click', '.increase', function(){
    let applyDay = parseInt( $(this).parent().find('span').html() );
    let maxApplyDay = parseInt( $(this).parent().parent().parent().find('.apply-new-ul li').eq(0).data('applyDay') );
    if(applyDay >= maxApplyDay){
      toastMsg('已达最大申请时长')
    }else{
      applyDay += 7;
    }
    $('.shade-mask-new .delay-time p span').html(applyDay);
  })
  
  // 申请新铭牌弹窗 点击铭牌列表事件
  $('.shade-mask-new').on('click', 'li', function(){
    $(this).addClass('active').siblings('li').removeClass('active');
    newNameplateId = $(this).data('nameplateId');
  })

  // 申请新铭牌弹窗 确定申请 按钮点击事件
  $('.shade-mask-new').on('click', '.apply-btn', function(){
    let content = $(this).parent();
    let ipt = content.find('input.new-nameplate-desc').val()
    if(!newNameplateId){
      toastMsg('请选择样式');
      return
    }
    if(!ipt){
      toastMsg('请添加铭牌文字');
      return
    }else{
      if(ipt.length !== 4){
        toastMsg('请添加4个字的铭牌文字');
        return
      }
    }
    
    // applyType 1申请新铭牌，2延长
    if(!newApplyLock){
      newApplyLock = true
      let params = {
        applyType: 1,
        nameplateId: newNameplateId,
        text: ipt,
        type: parseInt( content.find('ul.apply-new-ul li').eq(0).data('type') ),
        applyDay: parseInt( content.find('.delay-time div p span').html() )
      }
      applyNewNamaplateConfirm(params)
    }
  })

});