const $ = require('jquery');
require("../css/itemManager.less");
require('./../resource/jquery-ui/jquery-ui.min.js');
const {api} = require('./api.js')
const {post} = require('./utils.js')

let casesId="", name="", isReject ="", isUsed =""

//获取表格数据
function getTabData(activePage){
    const param = {
        current:activePage,
        casesId: casesId,
        name: name, //条目名
        isReject: isReject, //1-单项否决 0-非
        isUsed: isUsed //0-未启用 1-启用
    }
    post(api.getQcCasesEntryAll,param).then(res =>{
        if(res.data.code == '0'){
            const data = res.data.data.records
            const totalPage = res.data.data.pages
            const totalNum = res.data.data.total
            renderTab(data,activePage)
            renderPagination(totalPage,activePage,totalNum)

        }else{}
    }).catch((e) =>{
    
    })
}
$(".moduleItemInp").on("input", function(e){
    const val = $(this).val().trim()
    name = val
})
$(".filter").on("click", function(e){
    getTabData(1)
})
$('.selectModuleType').on("click", function(e){
    e.stopPropagation()
    $(".rejectList ").css("display","none")
    $(".usedList ").css("display", "none")
    const showList =  $(".moduleTypeList ").css("display")
    if(showList == "none" ||!showList){
        $(".moduleTypeList ").css("display","block")
    }else{
        $(".moduleTypeList ").css("display", "none")
    }
})
    
$('.selectReject').on("click", function(e){
    e.stopPropagation()
    $(".moduleTypeList ").css("display", "none")
    $(".usedList ").css("display", "none")
    const showList =  $(".rejectList ").css("display")
    if(showList == "none" ||!showList){
        $(".rejectList ").css("display","block")
    }else{
        $(".rejectList ").css("display", "none")
    }
})
$('.selectUsed').on("click", function(e){
    e.stopPropagation()
    $(".moduleTypeList ").css("display", "none")
    $(".rejectList ").css("display","none")
    const showList =  $(".usedList ").css("display")
    if(showList == "none" ||!showList){
        $(".usedList ").css("display","block")
    }else{
        $(".usedList ").css("display", "none")
    }
})
bindRejectSelect()
bindUsedSelect()
getTabData(1)
getmoduleTypeList()
function renderTab(data,activePage){
    let str = ``
    for(let i = 0; i < data.length; i++){
        const item = data[i]
        str += `
            <tr data-id=${item.id} data-index=${i}>
                <td>${(activePage-1)*10 + i+1}</td>
                <td>${item.casesName}</td>
                <td>${item.name}</td>
                <td>${item.msg}</td>
                <td>${item.score}</td>
                <td>${item.isReject}</td>
                <td>${item.isUsed}</td>
                <td class="editItem">修改</td>
            </tr>
        `
    }
    $('tbody').html(str)
    bindEdit(data,activePage)
}

function bindEdit(data,activePage){
    $('.editItem').click(function(e){
        const index = $(this).parent().attr('data-index') 
        editItem(data[index],activePage)
    })
}

//修改
function editItem(item,activePage){
    const itemCpoy = JSON.parse(JSON.stringify(item))
    $('.pop-box').remove()
    $('.container').append('<div class="pop-box"></div>')
    const str = `
        <div><span>提示信息:</span> <input class="itemTipMsg" value=${itemCpoy.msg} /></div>
        <div><span>分值:</span> <input class="itemScore"  type="number" value=${itemCpoy.score} /></div>
        <div><span>单项否决</span><span class="itemReject">${itemCpoy.isReject}</span></div>
        <div><span>启用</span><span class="itemUsed">${itemCpoy.isUsed}</span></div>
        <div class="confirmEdit">确定</div>
    `
    $('.pop-box').html(str)
    $(".itemTipMsg").on("input", function(e){
        const val = $(this).val()
        itemCpoy.msg = val
    })
    $(".itemScore").on("input", function(e){
        const val = $(this).val()
        itemCpoy.score = val
    })
    $(".itemReject").on("click", function(e){
        itemCpoy.isReject = itemCpoy.isReject == 1 ? 0 : 1
        $('.pop-box').remove()
        editItem(itemCpoy,activePage)
    })
    $(".itemUsed").on("click", function(e){
        itemCpoy.isUsed = itemCpoy.isUsed == 1 ? 0 : 1
        $('.pop-box').remove()
        editItem(itemCpoy,activePage)
    })
    
    $(".confirmEdit").on("click", function(){
        saveEdit(itemCpoy,activePage)
        $('.pop-box').remove()
    })
   
    
}

//保存修改
function saveEdit(item,activePage){
    const param = {
        id: item.id,
        isReject: item.isReject,
        isUsed: item.isUsed,
        msg: item.msg,
        score: item.score
    }

    post(api.updataQcCasesEntry,param).then(res =>{
        if(res.data.code == '0'){
            const data = res.data.data
            getTabData(activePage)
        }else{}
    }).catch((e) =>{
    
    })
}

//获取模块类型
function getmoduleTypeList(){
    post(api.getQcCasesAll).then(res =>{
        if(res.data.code == '0'){
           const  moduleTypeList = res.data.data
           renderModuleTypeList(moduleTypeList)
        }else{}
    }).catch((e) =>{
    
    })
}


function renderModuleTypeList(moduleTypeList){
    let str = `<li class="modeTypeItem" data-id=" " data-name="全部">全部</li>`
    for(let i = 0; i < moduleTypeList.length; i++){
        str += `<li class="modeTypeItem" data-id=${moduleTypeList[i].id} data-name=${moduleTypeList[i].name}> ${moduleTypeList[i].name}</li>`
    }
    $('.moduleTypeList').html(str)
    bindModuleTypeSelect()
}

//模块类型选择
function bindModuleTypeSelect(){
    $('.modeTypeItem').on("click",function(){
        const modeTypeItemName = $(this).attr("data-name")
        const modeTypeItemId = $(this).attr("data-id")
        casesId=modeTypeItemId
        $('.selectModuleType').html(modeTypeItemName)
        $(".moduleTypeList ").css("display", "none")
    })
}
//单项否决选择
function bindRejectSelect(){
    $('.rejectItem').on("click",function(){
        const rejectItemName = $(this).attr("data-name")
        const rejectItemId = $(this).attr("data-id")
        isReject=rejectItemId
        $('.selectReject').html(rejectItemName)
        $(".rejectList ").css("display", "none")
    })
}
//是否启用选择
function bindUsedSelect(){
    $('.usedItem').on("click",function(){
        const usedItemName = $(this).attr("data-name")
        const usedItemItemId = $(this).attr("data-id")
        isUsed=usedItemItemId
        $('.selectUsed').html(usedItemName)
        $(".usedList").css("display", "none")
    })
}




//分页渲染
function renderPagination(totalPage,activePage,totalNum){
    let str = `<span class="totalNum">共${totalPage}页/${totalNum}条数据</span><span class="prePage">前一页</span>`
    if(totalPage <= 6){
        for(let i = 1; i <= totalPage; i++){
            str += `<span class="pageNum ${'page'+i}" data-page=${i}>${i}</span>`
        }
    }else{
        if(activePage <= 3){ //选中页数小于4
            for(let i = 1; i <= 4; i++){
                str += `<span class="pageNum ${'page'+i}" data-page=${i}>${i}</span>`
            }
            str += `<span class="more" >...</span>`
        str += `<span class="pageNum ${'page'+totalPage}" data-page=${totalPage}>${totalPage}</span>`

        } else if(activePage > totalPage -3){
            str += `<span class="pageNum page1" data-page=1>1</span>`
            str += `<span class="more" >...</span>`
            str += `<span class="pageNum ${'page'+(totalPage-3)}" data-page=${totalPage -3}>${totalPage -3}</span>`
            str += `<span class="pageNum ${'page'+(totalPage-2)}" data-page=${totalPage -2}>${totalPage -2}</span>`
            str += `<span class="pageNum ${'page'+(totalPage-1)}" data-page=${totalPage -1}>${totalPage -1}</span>`
            str += `<span class="pageNum ${'page'+totalPage}" data-page=${totalPage}>${totalPage}</span>`
        } else {
            str += `<span class="pageNum page1" data-page=1>1</span>`
            str += `<span class="more" >...</span>`
            str += `<span class="pageNum ${'page'+(activePage -1)}" data-page=${activePage -1}>${activePage -1}</span>`
            str += `<span class="pageNum ${'page'+activePage}" data-page=${activePage}>${activePage}</span>`
            str += `<span class="pageNum ${'page'+(activePage +1)}" data-page=${activePage +1}>${activePage +1}</span>`
            str += `<span class="more" >...</span>`
            str += `<span class="pageNum ${'page'+totalPage}" data-page=${totalPage}>${totalPage}</span>`
        }
       
    }
    str += `<span class="nextPage">后一页</span>`
    $('.pagination').html(str)
    $('.page' + activePage).addClass('activePage')
    $(".pageNum").on("click", function(e){
        const activePageNow = Number($(this).attr('data-page'))
        getTabData(activePageNow)
        // renderPagination(totalPage,activePageNow,totalNum)
    })
    $(".prePage").on("click", function(e){
        let activePageNow = Number($(".activePage").attr('data-page'))
        if(activePageNow > 1){
            activePageNow--
            getTabData(activePageNow)
            // renderPagination(totalPage,activePageNow,totalNum)
        }
    })
    $(".nextPage").on("click", function(e){
        let activePageNow = Number($(".activePage").attr('data-page'))
        if(activePageNow < totalPage){
            activePageNow++
            getTabData(activePageNow)
            // renderPagination(totalPage,activePageNow,totalNum)
        }
    })
    
}

$(document).on("click", function(){
    $(".moduleTypeList ").css("display", "none")
    $(".rejectList ").css("display","none")
    $(".usedList ").css("display", "none")
})