root
/
xugu_license


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>License 分发管理</title>
    <style>
        /* 保持样式不变 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8f8f8;
            margin: 0;
            padding: 0;
            display: flex;
        }
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #1169ff;
    color: white;
    width: 100%;
    margin: 0; /* 移除上下左右的空隙 */
    box-sizing: border-box; /* 确保padding不会影响元素的宽度 */
    border: 4px solid #1169ff; /* 确保红框颜色填满 */
    border-width: 4px 0 4px 0; /* 只显示上下的红框颜色 */
    border-radius: 10px; /* 设置圆角 */
  
}

h1 {
            font-size: 24px;
            font-weight: 600;
            margin: 0;
        }

    .CaptureLicenseOnce-button {
   background-color: white;
    color: #007aff;
    border: 2px solid #007aff;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    box-shadow: none;
    transition: background-color 0.3s, color 0.3s;
    float: right; /* 将按钮移动到左侧 */
}

.CaptureLicenseOnce-button:hover {
    background-color: #0eb3ff;
    color: white;
}
        
      
/* 扁平风格的选择框 */
.flat-select {
    background-color: transparent; /* 背景色透明 */
    border: 1px solid #007aff; /* 边框颜色与按钮一致 */
    border-radius: 15px; /* 圆角边框 */
    padding: 5px 10px; /* 内边距 */
    font-size: 16px; /* 字体大小 */
    color: #007aff; /* 文字颜色 */
    outline: none; /* 移除默认的焦点样式 */
    appearance: none; /* 移除默认的下拉箭头样式 */
    -webkit-appearance: none; /* 对部分浏览器的兼容性处理 */
    -moz-appearance: none; /* 对部分浏览器的兼容性处理 */
    cursor: pointer; /* 鼠标指针样式 */
    margin-left: 10px; /* 添加左边距，使选择框与前面的元素有些距离 */
    box-shadow: none; /* 移除阴影效果 */
    transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
}

/* 选择框在悬停时的效果 */
.flat-select:hover {
    background-color: #007aff; /* 背景色变为蓝色 */
    color: white; /* 文字颜色变为白色 */
}

/* 选择框在聚焦时的效果 */
.flat-select:focus {
    background-color: #e0f7ff; /* 聚焦时的背景颜色 */
    border-color: #0056b3; /* 聚焦时的边框颜色 */
}

/* 添加下拉箭头的样式 */
.flat-select::after {
    content: '▼'; /* 使用字符作为下拉箭头 */
    position: absolute;
    right: 10px;
    pointer-events: none; /* 确保下拉箭头不会遮挡选择框 */
}


/* 扁平圆角风格的按钮样式 */
.flat-rounded-button {
    background-color: white;
    color: #007aff;
    border: 2px solid #007aff;
    padding: 10px 20px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    box-shadow: none; /* 移除阴影效果 */
    transition: background-color 0.3s, color 0.3s;
    margin: 5px; /* 添加按钮之间的间距 */
}

/* 悬停时的效果 */
.flat-rounded-button:hover {
    background-color: #0eb3ff;
    color: white;
}

/*lic 展示页 主行展开后变化*/
.expanded-row {
    background-color: #0eb3ff; /* 展开时的背景颜色 */
    border-color: #04aa9c; /* 展开时的边框颜色 */
    border-width: 4px; /* 边框宽度 */
    border-radius: 35px; /* 边框圆角 */
    transition: all 0.2s ease; /* 添加过渡效果 */
}

/*苹果风格模态框*/
.apple-modal-content {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    padding: 20px;
    border-radius: 12px;
    background-color: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    min-width: 250px; /* 添加最小宽度 */
}

.apple-modal-title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.apple-modal-subtitle {
    font-size: 20px;
    font-weight: 500;
    color: #555;
    margin-top: 20px;
    margin-bottom: 10px;
}
/* 苹果风格的文字样式 */
.apple-modal-text {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 10px;
    
}

/* 强调部分 */
.apple-modal-text strong {
    color: #333;
}

/* 苹果风格的模态框关闭按钮 */

.apple-close {
    color: #aaa;
    font-size: 24px; /* 调整字体大小 */
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.apple-close:hover {
    color: black;
}

/* 苹果风格的退出按钮 */
.apple-logout-button {
    background-color: #007aff; /* 苹果风格的蓝色 */
    color: white;
    border: none;
    padding: 8px 16px; /* 减小内边距，使按钮更小 */
    border-radius: 10px; /* 圆角稍微减小 */
    font-size: 14px; /* 调整字体大小 */
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.apple-logout-button:hover {
    background-color: #005bb5; /* 悬停时按钮颜色变深 */
    transform: scale(1.05); /* 悬停时按钮略微放大 */
}

.apple-logout-button:active {
    background-color: #003e7e; /* 点击时按钮颜色更深 */
    transform: scale(0.98); /* 点击时按钮略微缩小 */
}


.upload-button, .user-button {
            background-color: white;
            color: #007aff;
            border: none;
            padding: 10px 20px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s;
        }
 .upload-button:hover, .user-button:hover {
            background-color: #f0f0f0;
        }
        .sidebar {
            width: 200px;
            background-color: #f1f1f1;
            padding: 20px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            height: 100vh;
            transition: transform 0.3s ease;
        }
        .sidebar.hidden {
            transform: translateX(-100%);
        }
        .sidebar button {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            background-color: white;
            color: #007aff;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s;
        }
        .sidebar button:hover {
            background-color: #e0e0e0;
        }
        .content {
            flex-grow: 1;
            padding: 20px;
            transition: margin-left 0.3s ease;
        }
        .content.expanded {
            margin-left: -200px;
        }
        .toggle-sidebar {
    position: fixed;
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 调整为居中对齐 */
    left: 0; /* 靠左对齐 */
    background-color: #007aff;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 0 10px 10px 0; /* 右侧圆角，左侧保持平直 */
    width: 30px; /* 长条形箭头的宽度 */
    height: 60px; /* 长条形箭头的高度 */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease; /* 添加动效 */
}

.sidebar.hidden + .content .toggle-sidebar {
            left: 0;
            transform: translateX(0) translateY(-50%);
        }


/* 按钮容器的样式 */
.button-container {
    display: inline-flex; /* 确保按钮在同一行 */
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; /* 设置按钮之间的间距为10px，可以根据需要调整 */
}

/* 统一按钮的样式 */


 /* 通用按钮样式 */
.license-status-btn {
    display: inline-block;
    padding: 5px 15px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    text-align: center;
    border-radius: 15px; /* 圆角样式 */
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    transition: background-color 0.3s;
    border: none; /* 移除按钮边框 */
}

/* 查看详情按钮的特定样式 */
.license-status-btn.view-details {
    background-color: #add8e6; /* 浅蓝色背景 */
    color: white;
}

/* 下载lic按钮的特定样式 */
.license-status-btn.download-lic {
    background-color: #4CAF50; /* 绿色背景 */
    color: white;
}


/* 分发按钮样式 */
.license-status-btn.distribute {
    background-color: #007bff; /* 蓝色背景 */
}

.license-status-btn.distribute:hover {
    background-color: #0056b3; /* 悬停时的颜色 */
}

/* 生成按钮样式 */
.license-status-btn.generate {
    background-color: #ffc107; /* 黄色背景 */
}

.license-status-btn.generate:hover {
    background-color: #e0a800; /* 悬停时的颜色 */
}

/* 默认状态下的箭头图标 */
.arrow-icon {
    width: 10px;
    height: 10px;
    border: solid #007aff;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg); /* 初始方向向下 */
    transition: transform 0.3s ease; /* 添加旋转过渡效果 */
    cursor: pointer;
}

/* 当行展开时旋转箭头图标 */
.rotate-arrow {
    transform: rotate(-135deg); /* 旋转方向向上 */
}


/*分发历史样式*/
#distributionHistoryModal .centered-modal-content {
    background-color: #ffffff;
    border: none;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 30%;  /* 设置宽度为屏幕的80% */
    max-width: 90%;  /* 最大宽度设置为90%屏幕宽度 */
    height: auto;  /* 高度自适应内容 */
    max-height: 80vh;  /* 设置最大高度为屏幕的80% */
    overflow-y: auto;  /* 如果内容超出则添加垂直滚动条 */
    overflow-x: hidden;  /* 水平不出现滚动条 */
    margin: 0 auto;  /* 居中显示 */
}

/* lic查看详细按钮样式 */
.license-status-btn.view-details {
    background-color: #add8e6; /* 浅蓝色背景 */
    color: white; /* 白色文字 */
    border: none; /* 移除按钮边框 */
    padding: 8px 16px; /* 调整内边距，与“生成”按钮保持一致 */
    border-radius: 20px; /* 调整圆角，确保形状一致 */
    cursor: pointer;
    font-size: 14px; /* 调整字体大小，确保一致 */
    font-weight: 500; /* 字体权重，确保一致 */
    margin-left: 10px; /* 与其他按钮的间隔 */
    transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
}

.license-status-btn.view-details:hover {
    background-color: #87ceeb; /* 悬停时颜色变深 */
}


/* 表格样式 */
/* 表格容器 */
/* 表格容器 */

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px; /* 设置行间距为4px */
   /*  background-color: transparent; 使表格背景透明，突出行间距效果 */
    margin: 20px 0;
}

th, td {
    padding: 15px 20px; /* 设置单元格内边距 */
    text-align: left;
    font-size: 16px;
  /*   background-color: white; 单元格背景色 */
   
}


/* 鼠标悬停时改变边框颜色 */
tr:hover {
    background-color: #e6f7ff; /* 设置悬停时的背景颜色 */
    border-color: #1169ff; /* 设置悬停时的边框颜色 */
    border-width: 4px; /* 设置悬停时的边框大小 */
    border-radius: 15px; /* 设置悬停时的圆角 */
}
th {
    background-color: #f8f8f8; /* 表头背景色 */
    font-weight: bold;
    color: #333;
}

td {
    color: #555;
}

/* 表格行样式 */
tr {
    background-color: white; /* 每行背景色 */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* 设置阴影效果 */
    border-radius: 10px; /* 设置每行的圆角 */
    overflow: hidden; /* 确保圆角效果生效 */
    border: 2px solid transparent; /* 默认边框为透明 */
    transition: all 0.3s ease; /* 添加过渡效果 */
    
}
/* 确保单元格也适应行的圆角 */
tr:first-child td:first-child {
    border-top-left-radius: 10px;
}
tr:first-child td:last-child {
    border-top-right-radius: 10px;
}
tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}
tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}


/*添加用户样式*/
.flat-rounded-input {
    width: calc(100% - 40px); /* 与其他输入框一致的宽度 */
    padding: 15px 20px;  /* 更大的内边距 */
    font-size: 18px;  /* 更大的字体 */
    border: 2px solid #e0e0e0;  /* 边框颜色 */
    border-radius: 25px;  /* 圆角边框 */
    box-sizing: border-box;
    margin-bottom: 20px;
    background-color: #f8f8f8;  /* 背景色 */
    transition: border-color 0.3s, box-shadow 0.3s;  /* 添加动画效果 */
}

.flat-rounded-input:focus {
    border-color: #007aff;  /* 聚焦时的边框颜色 */
    box-shadow: 0 0 8px rgba(0, 122, 255, 0.2);  /* 聚焦时的阴影效果 */
    outline: none;  /* 去掉默认的聚焦样式 */
}

.flat-rounded-button {
    background-color: #007aff;
    color: white;
    border: none;
    padding: 15px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    box-shadow: none; /* 移除阴影效果 */
    transition: background-color 0.3s, color 0.3s;
}

.flat-rounded-button:hover {
    background-color: #005bb5;
}
.form-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.form-group label {
    flex: 0 0 80px; /* 固定标签宽度 */
    text-align: right;
    margin-right: 10px; /* 标签与输入框之间的间距 */
}

.form-group input {
    flex: 1; /* 输入框占据剩余空间 */
}


/* 分页按钮样式 */
.pagination button {
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    border: none;
    border-radius: 15px;
    background-color: #007aff;
    color: white;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s;
}

.pagination button:disabled {
    background-color: #b0c4de;
    cursor: not-allowed;
}

.pagination button:not(:disabled):hover {
    background-color: #005bb5;
}


        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }
.modal-content {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fefefe;
            padding: 20px;
            border: 1px solid #888;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            max-width: 100%;
            max-height: 90%;

            overflow-y: auto;
        }


/*修改license信息的样式*/
.modify-license-modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fefefe;
    padding: 50px;
    border: 1px solid #888;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 400px;
    height: 80%; /* 设置为你希望的高度 */
    overflow-y: auto;
    text-align: center;
}

.modify-license-modal-content input[type="number"],
.modify-license-modal-content input[type="date"],
.modify-license-modal-content input[type="text"],
.modify-license-modal-content input[type="email"],
.modify-license-modal-content input[type="password"],
.modify-license-modal-content textarea,
.modify-license-modal-content select {
    width: calc(100% - 40px);
    padding: 15px 20px;  /* 更大内边距 */
    font-size: 18px;  /* 更大字体 */
    border: 2px solid #e0e0e0;  /* 边框颜色 */
    border-radius: 25px;  /* 圆形边框 */
    box-sizing: border-box;
    margin-bottom: 20px;
    background-color: #f8f8f8;  /* 背景色更浅 */
    transition: border-color 0.3s, box-shadow 0.3s;  /* 添加动画效果 */
}

.modify-license-modal-content input[type="number"]:focus,
.modify-license-modal-content input[type="date"]:focus,
.modify-license-modal-content input[type="text"]:focus,
.modify-license-modal-content input[type="email"]:focus,
.modify-license-modal-content input[type="password"]:focus,
.modify-license-modal-content textarea:focus,
.modify-license-modal-content select:focus {
    border-color: #007aff;  /* 聚焦时的边框颜色 */
    box-shadow: 0 0 8px rgba(0, 122, 255, 0.2);  /* 聚焦时的阴影效果 */
    outline: none;  /* 去掉默认的聚焦样式 */
}

.modify-license-modal-content button {
    width: 100%;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background-color: #007aff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.modify-license-modal-content button:hover {
    background-color: #005bb5;  /* 鼠标悬停时的颜色变化 */
}

.modify-license-modal-content .close {
    color: #aaa;
    float: right;
    font-size: 30px;
    font-weight: bold;
}

.modify-license-modal-content .close:hover,
.modify-license-modal-content .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modify-license-modal-content .extra-info {
    padding: 20px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-top: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1.5; /* 增加行高，保证字段间距 */
}


.modal-content input[type="number"] {
    width: calc(100% - 40px);
    padding: 15px 20px;  /* 与其他输入框的内边距一致 */
    font-size: 18px;  /* 与其他输入框的字体大小一致 */
    border: 2px solid #e0e0e0;  /* 与其他输入框的边框颜色一致 */
    border-radius: 25px;  /* 与其他输入框的圆角一致 */
    box-sizing: border-box;
    margin-bottom: 20px;
    background-color: #f8f8f8;  /* 与其他输入框的背景色一致 */
    transition: border-color 0.3s, box-shadow 0.3s;  /* 与其他输入框的过渡效果一致 */
}

.modal-content input[type="number"]:focus {
    border-color: #007aff;  /* 与其他输入框获得焦点时的边框颜色一致 */
    box-shadow: 0 0 8px rgba(0, 122, 255, 0.2);  /* 与其他输入框获得焦点时的阴影效果一致 */
    outline: none;  /* 移除默认的焦点轮廓 */
}


.modal-content input[type="date"] {
    width: calc(100% - 40px);
    padding: 15px 20px;  /* 与其他输入框的内边距一致 */
    font-size: 18px;  /* 与其他输入框的字体大小一致 */
    border: 2px solid #e0e0e0;  /* 与其他输入框的边框颜色一致 */
    border-radius: 25px;  /* 与其他输入框的圆角一致 */
    box-sizing: border-box;
    margin-bottom: 20px;
    background-color: #f8f8f8;  /* 与其他输入框的背景色一致 */
    transition: border-color 0.3s, box-shadow 0.3s;  /* 与其他输入框的过渡效果一致 */
}

.modal-content input[type="date"]:focus {
    border-color: #007aff;  /* 与其他输入框获得焦点时的边框颜色一致 */
    box-shadow: 0 0 8px rgba(0, 122, 255, 0.2);  /* 与其他输入框获得焦点时的阴影效果一致 */
    outline: none;  /* 移除默认的焦点轮廓 */
}


        /* 输入框样式 */
.modal-content input[type="text"],
.modal-content input[type="email"],
.modal-content input[type="password"],
.modal-content textarea,
.modal-content select {
    width: calc(100% - 40px);
    padding: 15px 20px;  /* 更大内边距 */
    font-size: 18px;  /* 更大字体 */
    border: 2px solid #e0e0e0;  /* 边框颜色 */
    border-radius: 25px;  /* 圆形边框 */
    box-sizing: border-box;
    margin-bottom: 20px;
    background-color: #f8f8f8;  /* 背景色更浅 */
    transition: border-color 0.3s, box-shadow 0.3s;  /* 添加动画效果 */
}

/* 输入框聚焦时的样式 */
.modal-content input[type="text"]:focus,
.modal-content input[type="email"]:focus,
.modal-content input[type="password"]:focus,
.modal-content textarea:focus,
.modal-content select:focus {
    border-color: #007aff;  /* 聚焦时的边框颜色 */
    box-shadow: 0 0 8px rgba(0, 122, 255, 0.2);  /* 聚焦时的阴影效果 */
    outline: none;  /* 去掉默认的聚焦样式 */
}


/* 按钮样式 */
.modal-content button {
    width: 100%;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background-color: #007aff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.modal-content button:hover {
    background-color: #005bb5;  /* 鼠标悬停时的颜色变化 */
}

        .close {
            color: #aaa;
            float: right;
            font-size: 30px;
            font-weight: bold;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        }
        .close:hover {
    color: #000; /* 悬停时颜色变为黑色 */
    transform: scale(1.1); /* 悬停时稍微放大 */
}

        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        .extra-info {
    padding: 20px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-top: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1.5; /* 增加行高，保证字段间距 */
}
.extra-info p {
    margin: 10px 0; /* 每个字段的间距 */
    word-wrap: break-word; /* 允许在单词内断行 */
    word-break: break-all; /* 允许在任何字符处断行 */
    white-space: pre-wrap; /* 保持空格和换行符 */
    border-bottom: 1px solid #f0f0f0; /* 每个字段下方加上细线 */
    padding-bottom: 8px; /* 加大下方内边距 */
}

/* 修改运维邮箱和销售邮箱的勾选框样式 */
#emailInputs {
    display: flex;
    flex-direction: column; /* 确保每一行都垂直排列 */
    gap: 10px; /* 增加每行之间的间距 */
}

#emailInputs div {
    display: flex;
    align-items: center; /* 垂直居中 */
}

#emailInputs input[type="checkbox"] {
    appearance: none;
    background-color: #fff;
    margin: 0;
    font: inherit;
    color: #007aff;
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid #007aff;
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}

#emailInputs input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 22%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: transform 0.15s ease-in-out;
    box-shadow: inset 1em 1em #007aff;
    /* 使用淡蓝色与主题颜色匹配 */
    background-color: CanvasText;
}

#emailInputs input[type="checkbox"]:checked::before {
    transform: scale(1);
}


        .user-info {
            position: absolute;
            width: 300px;
            background-color: white;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: none;
        }
        .user-info .close {
            position: absolute;
            top: 10px;
            right: 10px;
            color: #aaa;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
        }
        .user-info .close:hover,
        .user-info .close:focus {
            color: black;
            text-decoration: none;
        }
        .centered-modal-content {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fefefe;
            padding: 50px;
            border: 1px solid #888;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 400px;
            height: 400px;
            overflow-y: auto;
            text-align: center;
        }
        .ios-button {
            width: 100%;
            padding: 10px;
            margin: 0;
            border: none;
            border-radius: 0;
            font-size: 16px;
            font-weight: 600;
            color: #007aff;
            background-color: transparent;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .ios-button:active {
            background-color: rgba(0, 122, 255, 0.1);
        }
        .email-modal-label {
            font-size: 18px;
            margin-bottom: 10px;
            display: block;
        }
        .email-modal-input {
            width: calc(100% - 20px);
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        .email-modal .modal-content {
    width: 90%; /* 修改宽度 */
    max-width: 600px; /* 最大宽度 */
    height: auto; /* 自适应高度 */
    max-height: 80%; /* 最大高度，防止内容溢出屏幕 */
    overflow-y: auto; /* 添加垂直滚动条，如果内容超出 */
}


        .add-email-button {
            display: block;
            width: 100%;
            padding: 10px 20px;
            margin-bottom: 10px;
            background-color: #007aff;
            color: white;
            border: none;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        .add-email-button:hover {
            background-color: #005bb5;
        }
        .action-modal-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        .action-modal-content button {
            width: auto;
            padding: 10px 20px;
            margin: 5px 0;
            background-color: white;
            color: black;
            border: none;
            text-align: left;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        .action-modal-content button:hover {
            background-color: #f0f0f0;
        }
        .sort-button {
            background-color: transparent;
            border: none;
            color: #007aff;
            font-size: 16px;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 15px;
            transition: background-color 0.3s;
        }
        .sort-button:hover {
            background-color: rgba(0, 122, 255, 0.1);
        }
        #confirmGenerateModal .centered-modal-content {
            background-color: #ffffff;
            border: none;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        #confirmGenerateModal .centered-modal-content button {
            background-color: #007aff;
            color: white;
            border: none;
            border-radius: 10px;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px;
            transition: all 0.3s;
        }
        #confirmGenerateModal .centered-modal-content button:hover {
            background-color: #005bb5;
            border: 1px solid #007aff;
        }

        #role-management {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 角色项的默认样式 */
.role-item {
    background-color: white; /* 默认背景色 */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    border-radius: 10px; /* 圆角效果 */
    overflow: hidden; /* 确保圆角效果生效 */
    border: 2px solid transparent; /* 默认边框为透明 */
    transition: all 0.3s ease; /* 过渡效果 */
    margin-bottom: 20px; /* 每个角色之间的间距 */
    padding: 10px; /* 内边距 */
}

/* 置顶角色的样式 */
.role-item.top-role {
    background-color: #d3d3d3; /* 灰色背景 */
}

/* 鼠标悬停时的样式 */
.role-item:hover {
    background-color: #e6f7ff; /* 悬停时背景色 */
    border-color: #1169ff; /* 悬停时边框颜色 */
    border-width: 4px; /* 悬停时边框大小 */
    border-radius: 15px; /* 悬停时的圆角 */
}

/* 置顶角色在悬停时的样式 */
.role-item.top-role:hover {
    background-color: #d3d3d3; /* 保持灰色背景不变 */
    border-color: #1169ff; /* 悬停时边框颜色 */
    border-width: 4px; /* 悬停时边框大小 */
    border-radius: 15px; /* 悬停时的圆角 */
}


.role-item h3 {
    margin-top: 0;
}

.role-item ul {
    padding-left: 20px;
}

.create-role-button {
    background-color: #007aff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s;
    margin-left: 20px; /* 与标题之间的间距 */
}
.create-role-button:hover {
    background-color: #005bb5;
}

    </style>
</head>
<body>
    <div class="sidebar" id="sidebar">
        <button onclick="showTable()">License 管理</button>
        <button onclick="showUserManagement()">用户管理</button>
        <button onclick="showRoleManagement()">角色管理</button>
    </div>
    <div class="content" id="content">
        <button class="toggle-sidebar" onclick="toggleSidebar()">←</button>
        <header>
            <h1>XUGU License 管理平台</h1>
            <div>
             <!--   <button class="upload-button" onclick="window.location.href='/static/upload_xlsx/index.html'" style="display: none;">Upload File</button> --> <!-- 默认隐藏 -->
                <button class="user-button" onclick="toggleUserInfo()" id="username">User</button>
             
            </div>
            
        </header>
        
        <div id="table-container">
            <table id="applications-table">
                <thead>
                    <tr>
                        <th>创建人</th>
                        <th>申请日期 <button class="sort-button" onclick="sortTableByDate()">排序</button></th>
                        <th>关联项目</th>
                        <th>销售人员</th>
                        <th>技服人员</th>
                        <th>总节点数</th>
                        <th>使用单位</th>
                        <th>产品名称</th>
                        <th>版本</th>
                        <th>节点数</th>
                        <th>License状态</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <div class="pagination">
                <button id="prev-page">上一页</button>
                <button id="next-page">下一页</button>
                <select id="page-selector" class="flat-select"></select>
                <span id="pagination-info">第 1 页，共 0 页</span> <!-- 新增信息显示区域 -->
                <div id="capture-license-button-container">
                    <!-- 按钮将在这里插入 -->
                </div>
             <!--   <button class="CaptureLicenseOnce-button" onclick="CaptureLicenseOncefunc()">获取最新license</button>   动态插入按钮的容器 -->
            </div>
        </div>
<!-- License 详细信息的模态框 -->
<div id="detailsModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('detailsModal')">&times;</span>
        <h3>License 详细信息</h3>
        <div id="detailsContent"></div>
        <button class="close-button" onclick="closeModal('detailsModal')">关闭</button>
    </div>
</div>


 <!-- 用户管理的添加用户 -->
<div id="user-management" style="display: none;">
    <div style="display: flex; align-items: center; justify-content: space-between;">
        <h2>用户管理</h2>
        <button id="addUserButton" class="create-role-button" style="display: none;">添加用户</button> <!-- 默认隐藏 -->
    </div>
    <table id="users-table">
        <thead>
        
            <tr>
                <th>用户名</th>
                <th>电话</th>
                <th>邮箱</th>
                <th>权限</th>
                <th>账号</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

        
            <!-- 新增的角色管理容器 -->
    <div id="role-management" style="display: none;">
        <div style="display: flex; align-items: center; justify-content: space-between;">
            <h2>角色管理</h2>
            <button id="createRoleButton" class="create-role-button">创建角色</button>
        </div>
        <div id="roles-container"></div>
    </div>
    </div>

    <!-- License 管理的弹出菜单 -->
    <div id="licenseActionModal" class="modal">
        <div class="modal-content action-modal-content" id="licenseActionModalContent">
            <span class="close" onclick="closeModal('licenseActionModal')">&times;</span>
            <!-- <button onclick="showExtraInfo()">查看额外信息</button>
            <button onclick="modifyLicenseInfo()">修改信息</button> 新增的修改信息按钮 -->
            <!-- <button onclick="showDistributionHistory()">分发历史</button>
            <button onclick="confirmDelete()">删除</button> -->
        </div>
    </div>

<!-- 修改信息的表单框 -->
<div id="modifyLicenseModal" class="modal">
    <div class="modify-license-modal-content">
        <span class="close" onclick="closeModal('modifyLicenseModal')">&times;</span>
        <h3>修改License信息</h3>
        <form id="modifyLicenseForm">
            <label for="creator">创建人:</label>
            <input type="text" id="creator" name="creator" required><br><br>

            <label for="applicationDate">申请日期:</label>
            <input type="date" id="applicationDate" name="applicationDate" class="form-control" required><br><br>
            

            <label for="associatedProject">关联项目:</label>
            <input type="text" id="associatedProject" name="associatedProject" required><br><br>

            <label for="salesPerson">销售人员:</label>
            <input type="text" id="salesPerson" name="salesPerson" required><br><br>

            <label for="salesEmail">销售邮箱:</label>
            <input type="email" id="salesEmail" name="salesEmail" required><br><br>

            <label for="supportPerson">技服人员:</label>
            <input type="text" id="supportPerson" name="supportPerson" required><br><br>

            <label for="supportEmail">技服邮箱:</label>
            <input type="email" id="supportEmail" name="supportEmail" required><br><br>

            <label for="totalNodes">总节点数:</label>
            <input type="number" id="totalNodes" name="totalNodes" class="form-control" required><br><br>

            <label for="company">使用单位:</label>
            <input type="text" id="company" name="company" required><br><br>

            <label for="productName">产品名称:</label>
            <input type="text" id="productName" name="productName" required><br><br>

            <label for="version"> 数据库版本: </label>
            <input type="text" id="version" name="version" required><br><br>

            <label for="nodeCount">节点数:</label>
            <input type="number" id="nodeCount" name="nodeCount" class="form-control" required><br><br>

            <button type="button" onclick="saveLicenseChanges()">保存</button>
        </form>
    </div>
</div>


    <!-- 用户管理的弹出菜单 -->
    <div id="userActionModal" class="modal">
        <div class="modal-content action-modal-content" id="userActionModalContent">
            <span class="close" onclick="closeModal('userActionModal')">&times;</span>
            <button onclick="showMoreUserInfo()">更多用户信息</button>
            <button onclick="showUserLicenseHistory()">查看license分发记录</button>
            <button onclick="modifyUser()">修改用户</button>
        </div>
    </div>

<!-- 用户管理的添加用户 -->
<div id="addUserModal" class="modal">
    <div class="centered-modal-content" style="height: 50vh; overflow-y: auto;">
        <span class="close" onclick="closeModal('addUserModal')">&times;</span>
        <h3>添加用户</h3>
        <form id="addUserForm">
            <div class="form-group">
                <label for="addUsername">用户名:</label>
                <input type="text" id="addUsername" name="username" class="flat-rounded-input" required>
            </div>

            <div class="form-group">
                <label for="addPassword">密码:</label>
                <input type="password" id="addPassword" name="password" class="flat-rounded-input" required>
            </div>

            <div class="form-group">
                <label for="addAccount">账号:</label>
                <input type="text" id="addAccount" name="account" class="flat-rounded-input" required>
            </div>

            <div class="form-group">
                <label for="addTelephone">电话:</label>
                <input type="text" id="addTelephone" name="telephone" class="flat-rounded-input" required>
            </div>

            <div class="form-group">
                <label for="addEmail">邮箱:</label>
                <input type="email" id="addEmail" name="email" class="flat-rounded-input" required>
            </div>

            <button type="button" onclick="saveNewUser()" class="flat-rounded-button">保存</button>
        </form>
    </div>
</div>


    <!-- 邮箱和用户选择弹出框 -->
    <div id="emailModal" class="modal">
        <div class="modal-content centered-modal-content" style="height: 45vh; overflow-y: auto;">
            <span class="close" onclick="closeModal('emailModal')">&times;</span>
    
            <!-- 邮箱输入部分 -->
            <label for="emailInput1" class="email-modal-label">选中要发送的邮箱:</label>
            <div id="emailInputs">
                <input type="text" id="emailInput1" class="email-modal-input">
            </div>
            <br>
            <button onclick="addEmailInput()" class="add-email-button">添加邮箱</button>
    
            <!-- 用户选择部分 -->
            <label for="userSelect1" class="email-modal-label">选择要分发的用户:</label>
            <div id="userInputs"></div>
            <button onclick="addUserInput()" class="add-email-button">添加用户</button>
    
            <!-- 发送按钮 -->
            <button onclick="sendEmail()" class="ios-button">发送</button>
        </div>
    </div>
    
    
    <!-- 其他模态框不变 -->
    <div id="extraInfoModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('extraInfoModal')">&times;</span>
            <div id="extraInfoContent" class="extra-info"></div>
        </div>
    </div>

    <div id="userModal" class="user-info">
        <span class="close apple-close" onclick="closeUserInfo()">&times;</span> <!-- 关闭按钮 -->
        <div id="userInfoContent"></div>
        <br>
        <button class="apple-logout-button" onclick="logout()">退出</button>
    </div>
    

        <!-- license删除模态框-->
    <div id="confirmDeleteModal" class="modal">
        <div class="centered-modal-content">
            <span class="close" onclick="closeModal('confirmDeleteModal')">&times;</span>
            
        </div>
    </div>
    
    
    <div id="confirmGenerateModal" class="modal">
        <div class="centered-modal-content" style="height: 15vh; overflow-y: auto;">
            <span class="close" onclick="closeModal('confirmGenerateModal')">&times;</span>
            <p>确认生成License吗？</p>
            <button id="confirm-generate-button">确认</button>
            <button onclick="closeModal('confirmGenerateModal')">取消</button>
        </div>
    </div>

    <div id="distributionHistoryModal" class="modal">
        <div class="centered-modal-content">
            <span class="close" onclick="closeModal('distributionHistoryModal')">&times;</span>
            <h3>分发历史</h3>
            <div id="distributionHistoryContent" class="extra-info"></div>
        </div>
    </div>

<script>
    //翻页有关，还需优化
        let currentPage = 1;
        let pageSize = 10;
        let LisOffset = 1;
        let totalPages = 0; // 存储总页数
        let selectedPage =1;
        let nextPage =1;
        let prevPage = 10;
//用户token
        const token = localStorage.getItem('Authorization');
//选中行的数据
        let selectedRowData = null;//选中行的数据
        let isAscending = true;
        let userMap = {}; // 用于存储用户名和用户ID的映射
        let currentUserRole = ''; // 新增变量存储当前用户的权限
        let currentUserName = ''; // 新增变量存储当前用户的名字
        let userPermissions = [];// 全局变量，用于存储用户权限
        let LicApplicationData = []; // 全局变量存储数据
        let currentRolePermissions = []; // 这是您获取的当前角色的权限列表

        
function checkPermission(permission) {
            console.log(`检查权限: ${permission} - ${hasPermission ? '有权限' : '无权限'}`);
    return userPermissions.includes(permission);
}

async function initialize() {
    await fetchUsername(); // 确保 fetchUsername 完成
    fetchApplications(1, 10); // 然后再调用 fetchApplications


}
  
//获取license展示信息
function fetchApplications(page, size) {
    
    fetch(`http://127.0.0.1:8080/api/admin/GetAllLicenseInfo?page=${page}&pageSize=${size}`, {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
      //selectedRowData = data.data;
        LicApplicationData = data.data; // 将接收到的数据存储到全局变量
        console.log("lic数据",data); // 输出获取的数据结构
        console.log("z该死的权限数组",userPermissions); 
        const hasGeneratePermission = userPermissions.includes("generate_license");
        const hasDistributePermission = userPermissions.includes("dispat_license");

    
 // 更新总页数
 //totalPages = Math.ceil(data.total / 10);
        // 在控制台打印权限结果
        console.log(`hasGeneratePermission: ${hasGeneratePermission}, hasDistributePermission: ${hasDistributePermission}`);
        totalPages = Math.ceil(data.total / 10);
        const tableBody = document.querySelector('#applications-table tbody');
        const tableHead = document.querySelector('#applications-table thead tr');

        tableBody.innerHTML = '';
        tableHead.innerHTML = `
            <th></th> <!-- 添加一个空的表头用于放置下拉按钮 -->
            <th>创建人</th>
            <th>申请日期 </th> 
               <!--   <th>申请日期 <button class="sort-button" onclick="sortTableByDate()">排序</button></th>-->
            <th>关联项目</th>
            <th>销售人员</th>
            <th>技服人员</th>
            <th>总节点数</th>
            <th>使用单位</th>
            <th>操作</th> <!-- 新增的表头用于显示操作按钮 -->
        `;

        data.data.forEach(applicationArray => {
            const firstApplication = applicationArray[0];
            let showGenerateButton = false;

            // Check if any child row has LicenseFlage as "未生成"
            applicationArray.forEach(detail => {
                if (detail.LicenseFlage === "未生成") {
                    showGenerateButton = true;
                }
            });

            // 创建主行
            const row = document.createElement('tr');
            const dropdownButton = document.createElement('button');
        // 使用CSS创建一个箭头图标
            dropdownButton.innerHTML = '';
            dropdownButton.classList.add('arrow-icon');
            dropdownButton.style.cursor = 'pointer';

            row.innerHTML = `
                <td></td> <!-- 空的单元格用于放置下拉按钮 -->
                <td>${createEllipsisText(firstApplication.Creator)}</td>
                <td>${createEllipsisText(firstApplication.ApplicationDate)} ${firstApplication.ApplicationTime}</td>
                <td>${createEllipsisText(firstApplication.GlxmName)}</td>
                <td>${createEllipsisText(firstApplication.SalesPerson)}</td>
                <td>${createEllipsisText(firstApplication.SupportPerson)}</td>
                <td>${firstApplication.TotalNodes}</td>
                <td>${createEllipsisText(firstApplication.Company)}</td>
            `;
            row.querySelector('td').appendChild(dropdownButton);

    // 添加 License 状态按钮 (父级行)
    if (hasGeneratePermission || hasDistributePermission) {
        const licenseStatusCell = document.createElement('td');

        if (hasGeneratePermission && showGenerateButton) {
            licenseStatusCell.innerHTML += `<button class="license-status-btn generate" onclick="confirmGenerateLicense('${firstApplication.oa_request_id}', true)">生成</button>`;
        } else if (hasDistributePermission && firstApplication.LicenseFlage === "已生成") {
            licenseStatusCell.innerHTML += `<button class="license-status-btn distribute" onclick="showEmailModal('${firstApplication.SupportEmail}', '${firstApplication.SalesEmail}','','${firstApplication.oa_request_id}')">分发</button>`;
        }

        // 添加一个分隔符
        licenseStatusCell.innerHTML += `<span style="margin: 0 10px; display: inline-block; width: 1px; height: 20px; background-color: #ccc;"></span>`;

        // 在这里添加“查看详情”按钮
        licenseStatusCell.innerHTML += `<button class="license-status-btn view-details" onclick="showDetailsModal('${firstApplication.UniqueID}', false)">查看详情</button>`;


        row.appendChild(licenseStatusCell);
}


            tableBody.appendChild(row);

            // 多行内容及表头 (子行)
            const detailRow = document.createElement('tr');
            const detailCell = document.createElement('td');
            detailCell.colSpan = 11; // 占满所有列
            detailCell.style.display = 'none';
            const detailTable = document.createElement('table');

            // 添加表头
            const detailTableHeader = document.createElement('tr');
            detailTableHeader.innerHTML = `
                <th>产品名称</th>
                <th>版本</th>
                <th>节点数</th>
                <th>处理器</th>
                <th>操作系统</th>
                <th>主MAC地址</th>
                <th>副MAC地址</th>
                <th>   查看</th>
            `;
            detailTable.appendChild(detailTableHeader);

            // 添加详细信息行 (子行)
            applicationArray.forEach(detail => {
                const detailInnerRow = document.createElement('tr');
                detailInnerRow.innerHTML = `
                    <td>${createEllipsisText(detail.ProductName)}</td>
                    <td>${createEllipsisText(detail.ProductVersion)}</td>
                    <td>${detail.NodeCount}</td>
                    <td>${createEllipsisText(detail.oa_cpu)}</td>
                    <td>${createEllipsisText(detail.oa_operating_system)}</td>
                    <td>${createEllipsisText(detail.oa_main_mac)}</td>
                    <td>${createEllipsisText(detail.oa_second_mac)}</td>
                `;
//保留这里的代码，涉及到子行的单独申请
                // 添加 License 状态按钮 (子行) 
                // if (hasGeneratePermission || hasDistributePermission) {
                //     const licenseStatusDetailCell = document.createElement('td');

                //     if (hasGeneratePermission && detail.LicenseFlage === "未生成") {
                //         // 子行点击生成按钮时，传递 UniqueID 和 false 表示这是子行
                //         licenseStatusDetailCell.innerHTML = `<button class="license-status-btn generate" onclick="confirmGenerateLicense('${detail.UniqueID}', false)">生成</button>`;
                //     } else if (hasDistributePermission && detail.LicenseFlage === "已生成") {
                //         // 子行点击分发按钮时，传递 UniqueID 用于分发操作
                //         licenseStatusDetailCell.innerHTML = `<button class="license-status-btn distribute" onclick="showEmailModal('${detail.SupportEmail}', '${detail.SalesEmail}', '${detail.UniqueID}','')">分发</button>`;
                //     }

                //     detailInnerRow.appendChild(licenseStatusDetailCell);
                // }

                detailTable.appendChild(detailInnerRow);
        // 添加“查看详情”按钮 (子行)
        // const viewDetailsCell = document.createElement('td');
        // viewDetailsCell.innerHTML = `<button class="license-status-btn view-details" onclick="showDetailsModal('${detail.UniqueID}', true)">查看详情</button>`;
        // detailInnerRow.appendChild(viewDetailsCell);
        // detailTable.appendChild(detailInnerRow);

            // 仅当主行状态为“分发”时添加“下载lic”按钮
// 创建一个新的单元格用于放置按钮
const actionCell = document.createElement('td');

// 创建按钮容器
const buttonContainer = document.createElement('div');
buttonContainer.classList.add('button-container');

// 创建“查看详情”按钮 (子行)
const viewDetailsButton = document.createElement('button');
viewDetailsButton.classList.add('license-status-btn', 'view-details');
viewDetailsButton.textContent = '查看详情';
viewDetailsButton.onclick = () => showDetailsModal(detail.UniqueID, true);

// 将“查看详情”按钮添加到按钮容器
buttonContainer.appendChild(viewDetailsButton);

// 仅当主行状态为“已生成”时添加“下载lic”按钮
if (firstApplication.LicenseFlage === "已生成") {
    const downloadLicButton = document.createElement('button');
    downloadLicButton.classList.add('license-status-btn', 'download-lic');
    downloadLicButton.textContent = '下载lic';
    
    // 绑定当前行的 lic1 和 lic2 数据
    downloadLicButton.onclick = () => downloadLicenseFiles(detail.lic1, detail.lic2);
    
    // 将“下载lic”按钮添加到按钮容器
    buttonContainer.appendChild(downloadLicButton);
}

// 将按钮容器添加到actionCell
actionCell.appendChild(buttonContainer);

// 将actionCell添加到当前子行
detailInnerRow.appendChild(actionCell);

// 将子行添加到详细信息表格
detailTable.appendChild(detailInnerRow);


    // 为每个详细信息行添加点击事件 (子行)
                detailInnerRow.addEventListener('click', (event) => {
                    if (!event.target.closest('button')) {
                        openActionModal(event, detail, 'licenseActionModal');
                    }
                });

                detailInnerRow.addEventListener('contextmenu', (event) => {
                    event.preventDefault();
                    if (!event.target.closest('button')) {
                        openActionModal(event, detail, 'licenseActionModal');
                    }
                });
            });

            detailCell.appendChild(detailTable);
            detailRow.appendChild(detailCell);
            tableBody.appendChild(detailRow);

            // 主行的点击事件，用于切换下拉菜单的显示隐藏
            // row.addEventListener('click', (event) => {
            //     if (!event.target.closest('button')) { // 如果点击的不是按钮
            //         detailCell.style.display = detailCell.style.display === 'none' ? 'table-cell' : 'none';
            //     }
            // });

            // // 点击下拉按钮切换显示隐藏
            // dropdownButton.addEventListener('click', (event) => {
            //     event.stopPropagation(); // 阻止事件冒泡到行点击事件
            //     detailCell.style.display = detailCell.style.display === 'none' ? 'table-cell' : 'none';
            // });
            row.addEventListener('click', (event) => {
    if (!event.target.closest('button')) { // 如果点击的不是按钮
        // const isExpanded = detailCell.style.display === 'table-cell';
        // detailCell.style.display = isExpanded ? 'none' : 'table-cell';
        // row.classList.toggle('expanded-row', !isExpanded);
        // dropdownButton.classList.toggle('rotate-arrow', !isExpanded); // 旋转箭头图标

        if (!event.target.closest('button')) {
        const isExpanded = detailCell.style.display === 'table-cell';
        
        // 收回其他行
        closeAllExpandedRows();

        // 展开/收起当前行
        detailCell.style.display = isExpanded ? 'none' : 'table-cell';
        row.classList.toggle('expanded-row', !isExpanded);
        dropdownButton.classList.toggle('rotate-arrow', !isExpanded);
    }
    }

    
});


dropdownButton.addEventListener('click', (event) => {
    // event.stopPropagation(); // 阻止事件冒泡到行点击事件
    // const isExpanded = detailCell.style.display === 'table-cell';
    // detailCell.style.display = isExpanded ? 'none' : 'table-cell';
    // row.classList.toggle('expanded-row', !isExpanded);
    // dropdownButton.classList.toggle('rotate-arrow', !isExpanded); // 旋转箭头图标

    event.stopPropagation(); // 阻止事件冒泡到行点击事件
    const isExpanded = detailCell.style.display === 'table-cell';
    
    // 收回其他行
    closeAllExpandedRows();

    // 展开/收起当前行
    detailCell.style.display = isExpanded ? 'none' : 'table-cell';
    row.classList.toggle('expanded-row', !isExpanded);
    dropdownButton.classList.toggle('rotate-arrow', !isExpanded);
});

        });

        // 分页和其他控制逻辑
  // 更新分页信息
      //  totalPages = Math.ceil(data.total / pageSize);
        document.getElementById('pagination-info').textContent = `第 ${currentPage} 页，共 ${totalPages} 页`;
        document.getElementById('prev-page').disabled = currentPage <= 1;
        document.getElementById('next-page').disabled = currentPage >= totalPages;
        const pageSelector = document.getElementById('page-selector');
        pageSelector.innerHTML = '';
        for (let i = 1; i <= totalPages; i++) {
            const option = document.createElement('option');
            option.value = i;
            option.text = i;
            if (i === selectedPage) {
                option.selected = true;
                document.getElementById('pagination-info').textContent = `第 ${selectedPage} 页，共 ${totalPages} 页`;
                // LisOffset = selectedPage
                // pageSize = LisOffset + 10;
                // document.getElementById('prev-page').disabled = currentPage <= 1;
                // document.getElementById('next-page').disabled = currentPage >= totalPages;
            }
            pageSelector.appendChild(option);
        }
        
        
    });
}

function checkCaptureLicensePermission() {
  

    // 获取插入按钮的容器元素
    const container = document.getElementById('capture-license-button-container');

    if (container) {  // 确保容器元素存在
        if (userPermissions.includes('capture_license_once_to_db')) {
            // 如果有权限，插入按钮
            const CaptureLicensebuttonHtml = `<button class="CaptureLicenseOnce-button" onclick="CaptureLicenseOncefunc()">获取最新license</button>`;
            container.innerHTML = CaptureLicensebuttonHtml;
        } else {
            // 如果没有权限，确保不显示按钮
            container.innerHTML = ''; // 清空容器
        }
    } else {
        console.error('找不到 capture-license-button-container 元素');
    }
}


let currentOffset = 1;
const itemsPerPage = 10;

// 添加页数选择框的事件监听器
document.getElementById('page-selector').addEventListener('change', (event) => {
     selectedPage = parseInt(event.target.value, 10);
     
    const startRecord = (selectedPage - 1) * 10 + 1;
    const endRecord = startRecord + 10;
    LisOffset = selectedPage
    pageSize = LisOffset* 10; 
    currentPage = selectedPage 
    currentOffset = startRecord
    endOffset = endRecord
    fetchApplications(startRecord, endRecord);

});

// 分页按钮事件监听器
document.getElementById('prev-page').addEventListener('click', () => {
    if (currentPage > 1) {
        currentPage--;
        selectedPage--
    
        currentOffset -= itemsPerPage;
        const startOffset = currentOffset;
        const endOffset = currentOffset + itemsPerPage - 1;
        fetchApplications(startOffset, endOffset);
    }
});


document.getElementById('next-page').addEventListener('click', () => {
    if (currentPage < totalPages) {
        currentPage++
        selectedPage++
        LisOffset += pageSize-LisOffset;
        pageSize += 10; // 增加页数时，增加 pageSize，规则可自定义

  
        currentOffset += itemsPerPage;
        const startOffset = currentOffset;
        const endOffset = currentOffset + itemsPerPage - 1;
        fetchApplications(startOffset, endOffset);
    }
});

// 页面加载时默认调用第一页的数据
//fetchApplications(1);
// 页面初始化时调用 fetchUsername 函数

//fetchApplications(LisOffset,pageSize);

//排序
// function sortTableByDate() {
//     applicationData.sort((a, b) => {
//         const dateTimeA = `${a[0].ApplicationDate} ${a[0].ApplicationTime}`;
//         const dateTimeB = `${b[0].ApplicationDate} ${b[0].ApplicationTime}`;
//         return isAscending ? dateTimeA.localeCompare(dateTimeB) : dateTimeB.localeCompare(dateTimeA);
//     });

//     renderTable(applicationData); // 排序后重新渲染表格
//     isAscending = !isAscending; // 切换排序顺序
// }


// 关闭所有已经展开的行
function closeAllExpandedRows() {
    const allExpandedRows = document.querySelectorAll('.expanded-row');
    allExpandedRows.forEach(expandedRow => {
        const detailCell = expandedRow.nextElementSibling.querySelector('td');
        if (detailCell && detailCell.style.display === 'table-cell') {
            detailCell.style.display = 'none';
            expandedRow.classList.remove('expanded-row');
            const dropdownButton = expandedRow.querySelector('.arrow-icon');
            if (dropdownButton) {
                dropdownButton.classList.remove('rotate-arrow');
            }
        }
    });
}


// 创建带省略号的文本，并在鼠标悬停时显示完整内容
function createEllipsisText(text) {
    const maxLength = 20; // 最大显示字符数
    if (text == null || typeof text !== 'string') {
        return ''; // 如果 text 是 null、undefined 或不是字符串，返回空字符串
    }
    if (text.length > maxLength) {
        const span = document.createElement('span');
        span.textContent = text.substring(0, maxLength) + '...';
        span.title = text; // 鼠标悬停时显示完整内容
        return span.outerHTML;
    }
    return text;
}

//生成licensestr
function confirmGenerateLicense(id, isParentRow) {
    const confirmGenerateModal = document.getElementById('confirmGenerateModal');
    confirmGenerateModal.style.display = 'block';
    document.getElementById('confirm-generate-button').onclick = function() {
        generateLicense(id, isParentRow);
    };
}

function generateLicense(id, isParentRow) {
    const payload = isParentRow ? { oa_request_id: id } : { uniqueID: id };
    
    fetch('http://127.0.0.1:8080/api/admin/GenerateLicense', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(payload)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('License生成成功！');
            const startOffset = currentOffset;  // 当前的起始位置
    const endOffset = startOffset + itemsPerPage - 1;  // 计算结束位置
    fetchApplications(startOffset, endOffset);  // 传入计算好的起始和结束位置
        //    fetchApplications(LisOffset, pageSize);
        } else {
            alert('License生成失败：' + data.error);
        }
        closeModal('confirmGenerateModal');
    });
}


//主动抓取一次Licen数据
function CaptureLicenseOncefunc() {
    // 显示加载模态框
    const loadingModal = document.createElement('div');
    loadingModal.classList.add('modal-content', 'apple-modal-content');
    loadingModal.innerHTML = `
        <h3>正在获取 License 信息...</h3>
        <div class="progress-bar" style="width: 100%; height: 20px; background-color: #e0e0e0;">
            <div class="progress" style="width: 50%; height: 100%; background-color: #007aff;"></div>
        </div>
    `;
    document.body.appendChild(loadingModal);

    // 定义超时函数
    const timeoutPromise = new Promise((_, reject) => {
        setTimeout(() => {
            reject(new Error('获取超时'));
        }, 10000); // 10秒超时
    });

    // 发起 GET 请求的 Promise
    const fetchPromise = fetch('http://127.0.0.1:8080/api/admin/GetCaptureLicenseOnce', {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        }
    }).then(response => response.json());

    // 使用 Promise.race 来竞争两个 Promise，哪个先返回就使用哪个
    Promise.race([fetchPromise, timeoutPromise])
    .then(data => {
        // 先关闭进度条
        document.body.removeChild(loadingModal);

        // 显示成功或失败提示
        if (data.success) {
            alert('License 获取成功！');
        } else {
            alert('获取失败：' + data.error);
        }
    })
    .catch(error => {
        // 先关闭进度条
        document.body.removeChild(loadingModal);
        
        // 显示错误提示
        alert(error.message); // 如果超时或请求失败
    });
}


function downloadLicenseFiles(lic1, lic2) {
    // 下载license.dat文件
    if (lic1) {
        const blob1 = new Blob([lic1], { type: 'text/plain' });
        const link1 = document.createElement('a');
        link1.href = URL.createObjectURL(blob1);
        link1.download = 'license.dat';
        link1.click();
    }

    // 如果lic2不为空，下载license2.dat文件
    if (lic2) {
        const blob2 = new Blob([lic2], { type: 'text/plain' });
        const link2 = document.createElement('a');
        link2.href = URL.createObjectURL(blob2);
        link2.download = 'license2.dat';
        link2.click();
    }
}


//查看lic所有信息
// 查看lic所有信息
function showDetailsModal(uniqueID, isChildRow = false, page = 1) {
    console.log("当前 uniqueID:", uniqueID);
    console.log("当前 isChildRow:", isChildRow);
    console.log("当前页码:", page);

    let selectedData = null;
    const itemsPerPage = 1; // 每页只显示一个子行数据
    let currentPage = page; // 当前页码

    // 查找主行和子行数据
    console.log("查找主行和子行数据");
    let selectedApplicationArray = null;
    for (let applicationArray of LicApplicationData) {
        if (applicationArray.some(data => data.UniqueID === uniqueID)) {
            selectedApplicationArray = applicationArray;
            break;
        }
    }

    if (!selectedApplicationArray) {
        console.error('未找到对应的记录，UniqueID:', uniqueID);
        alert('未找到对应的记录，请检查数据');
        return;
    }

    let detailsHtml = `<div class="apple-modal-content">`;

    // 如果是子行，直接显示该子行的信息，不进行分页
    if (isChildRow) {
    
        // 查找唯一的子行数据
        const childData = selectedApplicationArray.find(data => data.UniqueID === uniqueID);
        if (childData) {
            detailsHtml += `
                
                <p class="apple-modal-text"><strong>产品名称:</strong> ${childData.ProductName}</p>
                <p class="apple-modal-text"><strong>版本:</strong> ${childData.ProductVersion}</p>
                <p class="apple-modal-text"><strong>节点数:</strong> ${childData.NodeCount}</p>
                <p class="apple-modal-text"><strong>处理器:</strong> ${childData.oa_cpu}</p>
                <p class="apple-modal-text"><strong>操作系统:</strong> ${childData.oa_operating_system}</p>
                <p class="apple-modal-text"><strong>主MAC地址:</strong> ${childData.oa_main_mac}</p>
                <p class="apple-modal-text"><strong>副MAC地址:</strong> ${childData.oa_second_mac}</p>
            `;
        } else {
            detailsHtml += `<p>未找到对应的子行记录。</p>`;
        }
    } else {
        // 如果是主行，使用分页显示主行和子行信息
    

        // 计算总页数
        const totalItems = selectedApplicationArray.length;
        const totalPages = totalItems + 1; // 主行为第一页，后续为子行
        console.log("totalItems: ", totalItems);
        console.log("totalPages: ", totalPages);

        if (currentPage === 1) {
            // 显示主行内容（第一页）
  
            detailsHtml += `<h3 class="apple-modal-title">项目信息</h3>`;
            const firstData = selectedApplicationArray[0];
            detailsHtml += `
                <p class="apple-modal-text"><strong>创建人:</strong> ${firstData.Creator}</p>
                <p class="apple-modal-text"><strong>申请日期:</strong> ${firstData.ApplicationDate}</p>
                <p class="apple-modal-text"><strong>关联项目:</strong> ${firstData.GlxmName}</p>
                <p class="apple-modal-text"><strong>销售人员:</strong> ${firstData.SalesPerson}</p>
                <p class="apple-modal-text"><strong>技服人员:</strong> ${firstData.SupportPerson}</p>
                <p class="apple-modal-text"><strong>总节点数:</strong> ${firstData.TotalNodes}</p>
                <p class="apple-modal-text"><strong>使用单位:</strong> ${firstData.Company}</p>
            `;
        } else {
            // 显示子行内容（从第二页开始）

            const dataIndex = currentPage - 2; // 当前页对应的子行数据索引，主行占用第一页
            const data = selectedApplicationArray[dataIndex];
            detailsHtml += `
                <h4 class="apple-modal-subtitle">集群 ${currentPage - 1}</h4>
                <p class="apple-modal-text"><strong>产品名称:</strong> ${data.ProductName}</p>
                <p class="apple-modal-text"><strong>版本:</strong> ${data.ProductVersion}</p>
                <p class="apple-modal-text"><strong>节点数:</strong> ${data.NodeCount}</p>
                <p class="apple-modal-text"><strong>处理器:</strong> ${data.oa_cpu}</p>
                <p class="apple-modal-text"><strong>操作系统:</strong> ${data.oa_operating_system}</p>
                <p class="apple-modal-text"><strong>主MAC地址:</strong> ${data.oa_main_mac}</p>
                <p class="apple-modal-text"><strong>副MAC地址:</strong> ${data.oa_second_mac}</p>
            `;
        }

        // 添加分页按钮
        detailsHtml += `<div class="pagination-controls" style="text-align: center;">`;
        if (currentPage > 1) {
            detailsHtml += `<button style="font-size: 12px; padding: 5px 10px; width: 80px;" onclick="showDetailsModal('${uniqueID}', ${isChildRow}, ${currentPage - 1})">上一页</button>`;
        }
        detailsHtml += `<hr style="margin: 10px 0; border-top: 1px solid #ccc;">`; // 分隔符
        if (currentPage < totalPages) {
            detailsHtml += `<button style="font-size: 12px; padding: 5px 10px; width: 80px;" onclick="showDetailsModal('${uniqueID}', ${isChildRow}, ${currentPage + 1})">下一页</button>`;
        }
        detailsHtml += `</div>`;
    }

    detailsHtml += `</div>`;

    console.log("detailsHtml: ", detailsHtml);

    document.getElementById('detailsContent').innerHTML = detailsHtml;
    document.getElementById('detailsModal').style.display = 'block';
}


// 用户管理菜单栏
function openUserActionModal(event, data, modalId) {
    selectedRowData = data;
    let modal = document.getElementById(modalId);
    const modalContent = modal.querySelector('.modal-content');

    // 清空之前的内容
    modalContent.innerHTML = `
        <span class="close" onclick="closeModal('${modalId}')">&times;</span>
    `;

    // 动态生成更多用户信息按钮
    if (userPermissions.includes('read_user')) {
        modalContent.innerHTML += `<button onclick="showMoreUserInfo(); closeModal('${modalId}');">更多用户信息</button>`;
    }

    // 检查是否有 `update_user` 权限，决定是否显示修改用户按钮
    if (userPermissions.includes('update_user')) {
        modalContent.innerHTML += `<button onclick="modifyUser(); closeModal('${modalId}');">修改用户</button>`;
    }

    // 检查是否有 `delete_user` 权限，决定是否显示删除按钮
    if (userPermissions.includes('delete_user')) {
        modalContent.innerHTML += `<button onclick="confirmDeleteUser('${data.UniqueID}'); closeModal('${modalId}');">删除用户</button>`;
    }

    // 显示菜单位置
    modalContent.style.top = `${event.clientY}px`;
    modalContent.style.left = `${event.clientX}px`;
    modal.style.display = 'block';
}


// 为用户管理界面的每一行添加点击和右键事件监听器
function fetchUsers() {
    fetch('http://127.0.0.1:8080/api/admin/userInfoAll', {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        const tableBody = document.querySelector('#users-table tbody');
        tableBody.innerHTML = '';
        data.data.forEach(user => {
            // 如果 ACCOUNT 字段为 'admin'，则跳过这一行
            if (user.Account === 'admin') {
                return;
            }

            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${user.Username}</td>
                <td>${user.Telephone}</td>
                <td>${user.Email}</td>
                <td>${user.Role}</td>
                <td>${user.Account}</td>
            `;

            row.addEventListener('click', (event) => {
                if (!event.target.classList.contains('ios-button')) {
                    openUserActionModal(event, user, 'userActionModal');
                }
            });
            row.addEventListener('contextmenu', (event) => {
                event.preventDefault();
                if (!event.target.classList.contains('ios-button')) {
                    openUserActionModal(event, user, 'userActionModal');
                }
            });

            tableBody.appendChild(row);
        });
    });
}

//查看用户lic历史
function showUserLicenseHistory() {
    fetch(`http://127.0.0.1:8080/api/admin/GetlicenseRecordInfoByUser`, {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            Id: selectedRowData.Id,
            UserName: selectedRowData.Username,
            Page: 1,
            PageSize: 10
        })
    })
    .then(response => response.json())
    .then(data => {
        const extraInfoContent = document.getElementById('extraInfoContent');
        extraInfoContent.innerHTML = `<h3>License 分发记录</h3>`;
        
        if (data.data && data.data.length > 0) {
            const table = document.createElement('table');
            table.style.width = '100%';
            table.style.borderCollapse = 'collapse';
            table.style.marginTop = '10px';

            const thead = document.createElement('thead');
            const headerRow = document.createElement('tr');
            const headers = ['分发日期', '关联项目', '产品名称', '版本', '节点数', 'Company'];

            headers.forEach(headerText => {
                const th = document.createElement('th');
                th.textContent = headerText;
                th.style.border = '1px solid #ddd';
                th.style.padding = '8px';
                th.style.backgroundColor = '#f1f1f1';
                headerRow.appendChild(th);
            });

            thead.appendChild(headerRow);
            table.appendChild(thead);

            const tbody = document.createElement('tbody');
            data.data.forEach(record => {
                const row = document.createElement('tr');

                const cells = [
                    record.up_time.Time,
                    record.AssociatedProject,
                    record.ProductName,
                    record.Version,
                    record.NodeCount,
                    record.Company
                ];

                cells.forEach(cellText => {
                    const td = document.createElement('td');
                    td.textContent = cellText;
                    td.style.border = '1px solid #ddd';
                    td.style.padding = '8px';
                    row.appendChild(td);
                });

                tbody.appendChild(row);
            });

            table.appendChild(tbody);
            extraInfoContent.appendChild(table);
        } else {
            extraInfoContent.innerHTML += `<p>没有找到分发记录。</p>`;
        }

        document.getElementById('extraInfoModal').style.display = 'block';
    });
}


//用户菜单栏
function openActionModal(event, data, modalId) {
    selectedRowData = data;
    let modal = document.getElementById(modalId);
    const modalContent = modal.querySelector('.modal-content');

    // 清空之前的内容
    modalContent.innerHTML = `
        <span class="close" onclick="closeModal('${modalId}')">&times;</span>
    `;


    // 动态生成查看分发记录
    if (userPermissions.includes('read_license_record')) {
        modalContent.innerHTML += `
            <button onclick="showDistributionHistory(); closeModal('${modalId}');">查看分发记录</button>
        `;
    }
     // 动态生成查看额外信息
     if (userPermissions.includes('read_license')) {
        modalContent.innerHTML += `
            <button onclick="showExtraInfo(); closeModal('${modalId}');">查看额外信息</button>
        `;
    }

    // 检查是否有 `update_license` 权限，决定是否显示修改信息按钮
    if (userPermissions.includes('update_license')) {
        modalContent.innerHTML += `<button onclick="modifyLicenseInfo(); closeModal('${modalId}');">修改信息</button>`;
    }

    // 检查是否有 `delete_license` 权限，决定是否显示删除按钮
    if (userPermissions.includes('delete_license')) {
        modalContent.innerHTML += `<button onclick="confirmDelete(); closeModal('${modalId}');">删除</button>`;
    }

    // 显示菜单位置
    modalContent.style.top = `${event.clientY}px`;
    modalContent.style.left = `${event.clientX}px`;
    modal.style.display = 'block';
}


function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
        }


// function closeUserInfo() {
//             document.getElementById('userModal').style.display = 'none';
//         }

//删除一行lic信息
function confirmDelete() {
    const confirmDeleteModal = document.getElementById('confirmDeleteModal');
    confirmDeleteModal.innerHTML = `
 <div class="centered-modal-content">
    <span class="close" onclick="closeModal('confirmDeleteModal')" style="font-size: 24px; font-weight: bold; color: #555; cursor: pointer;">&times;</span>
    <div style="margin-bottom: 15px; border: 1px solid #ddd; padding: 10px; border-radius: 10px;">
        <p><strong>申请日期:</strong> ${selectedRowData.ApplicationDate}</p>
        <p><strong>关联项目:</strong> ${selectedRowData.AssociatedProject}</p>
        <p><strong>使用单位:</strong> ${selectedRowData.Company}</p>
    </div>
    <p>确认删除此行数据吗？</p>
    <button class="flat-rounded-button" onclick="deleteRow()">确认</button>
    <button class="flat-rounded-button" onclick="closeModal('confirmDeleteModal')">取消</button>
</div>

    `;
    confirmDeleteModal.style.display = 'block';
}

function deleteRow() {
            fetch(`http://127.0.0.1:8080/api/admin/deleteLicRow`, {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ uniqueID: selectedRowData.UniqueID })
            }).then(response => {
                if (response.ok) {
                    alert('删除成功');
                    closeModal('confirmDeleteModal');
                  //  fetchApplications(LisOffset, pageSize);
                  const startOffset = currentOffset;  // 当前的起始位置
    const endOffset = startOffset + itemsPerPage - 1;  // 计算结束位置
    fetchApplications(startOffset, endOffset);  // 传入计算好的起始和结束位置
                } else {
                    alert('删除失败');
                }
            });
        }


//添加用户
document.getElementById('addUserButton').addEventListener('click', function() {
    document.getElementById('addUserModal').style.display = 'block';
});

//添加用户
function saveNewUser() {
    const username = document.getElementById('addUsername').value.trim();
    const password = document.getElementById('addPassword').value.trim();
    const account = document.getElementById('addAccount').value.trim();
    const telephone = document.getElementById('addTelephone').value.trim();
    const email = document.getElementById('addEmail').value.trim();

    // 验证每个字段都不能为空
    if (!username || !password || !account || !telephone || !email) {
        alert('有空选项未填写');
        return;
    }

    // 验证电话是否为11位数字
    const phonePattern = /^\d{11}$/;
    if (!phonePattern.test(telephone)) {
        alert('电话必须是11位数字');
        return;
    }

    // 验证密码长度是否至少为6位
    if (password.length < 6) {
        alert('密码长度必须至少为6位');
        return;
    }

    // 验证邮箱是否包含@符号
    if (!email.includes('@')) {
        alert('邮箱必须包含@符号');
        return;
    }

    // 验证账号长度是否至少为3位
    if (account.length < 3) {
        alert('账号长度必须至少为3位');
        return;
    }

    const newUser = {
        Username: username,
        Password: password,
        Account: account,
        Telephone: telephone,
        Email: email
    };

    fetch('http://127.0.0.1:8080/api/register', {  // 修改为实际的API路径
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(newUser)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('用户创建成功！');
            fetchUsers(); // 重新加载用户列表
            closeModal('addUserModal'); // 关闭模态框
        } else {
            alert('用户创建失败：' + data.error);
        }
    });
}


function deleteUser(uniqueID) {
    fetch('http://127.0.0.1:8080/api/admin/deleteUser', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ UniqueID: uniqueID })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('用户删除成功！');
            fetchUsers(); // 重新加载用户列表
        } else {
            alert('用户删除失败：' + data.error);
        }
    })
    .catch(error => {
        console.error('Error deleting user:', error);
        alert('删除用户时发生错误，请稍后再试。');
    });
}
function confirmDeleteUser(uniqueID) {
    const confirmed = confirm("确认删除此用户吗？");
    if (confirmed) {
        deleteUser(uniqueID);
    }
}


// 分发模态框
function showEmailModal(supportEmail, salesEmail, uniqueID,oa_request_id) {
    // 清空并设置默认值
    document.getElementById('emailInputs').innerHTML = `
        <div>
            <input type="checkbox" id="supportEmailCheckbox" value="${supportEmail}" checked>
            <label for="supportEmailCheckbox">  运维邮箱: ${supportEmail}</label>
        </div>
        <div>
            <input type="checkbox" id="salesEmailCheckbox" value="${salesEmail}" checked>
            <label for="salesEmailCheckbox">  销售邮箱: ${salesEmail}</label>
        </div>
 
    `;
    document.getElementById('userInputs').innerHTML = ''; // 清空用户输入

    // 获取用户信息并填充第一个用户输入框
    fetch('http://127.0.0.1:8080/api/admin/distributeLicenseByUserInfo', {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        const userSelect = document.createElement('select');
        userSelect.id = 'userSelect1';
        userSelect.className = 'email-modal-input';
        
        data.data.forEach(user => {
            userMap[user.Username] = {// 存储用户名和用户ID的映射
            Account: user.Account,
            UniqueID: user.UniqueID,
            Username: user.Username,
            Email: user.Email,
            Role: user.Role,
            Telephone:user.Telephone
        };
            const option = document.createElement('option');
            option.value = user.Username;
            option.textContent = user.Username;
            userSelect.appendChild(option);
        });

        //document.getElementById('userInputs').appendChild(userSelect);
    });

    document.getElementById('emailModal').style.display = 'block';
    selectedRowData = { ...selectedRowData, UniqueID: uniqueID ,Oa_request_id: oa_request_id};
}

function addEmailInput() {
    const emailInputs = document.getElementById('emailInputs');
    const newInputDiv = document.createElement('div');
    newInputDiv.style.display = 'flex';
    newInputDiv.style.alignItems = 'center';
    newInputDiv.style.marginBottom = '10px';

    const newInput = document.createElement('input');
    newInput.type = 'text';
    newInput.className = 'email-modal-input';
    newInput.style.flexGrow = '1';
    newInputDiv.appendChild(newInput);

    const deleteButton = document.createElement('button');
    deleteButton.textContent = '✕';
    deleteButton.style.background = 'none';
    deleteButton.style.border = 'none';
    deleteButton.style.color = '#007aff';
    deleteButton.style.cursor = 'pointer';
    deleteButton.style.fontSize = '12px'; /* 再次缩小字体大小 */
    deleteButton.style.padding = '0'; /* 移除内边距 */
    deleteButton.style.marginLeft = '3px'; /* 减少与输入框的间距 */
    deleteButton.style.width = '20px'; /* 限制按钮宽度 */
    deleteButton.style.height = '20px'; /* 限制按钮高度 */
    deleteButton.onclick = () => {
        newInputDiv.remove();
    };

    newInputDiv.appendChild(deleteButton);
    emailInputs.appendChild(newInputDiv);
}

function addUserInput() {
    const userInputs = document.getElementById('userInputs');
    const newUserDiv = document.createElement('div');
    newUserDiv.className = 'user-select-container';
    newUserDiv.style.display = 'flex';
    newUserDiv.style.alignItems = 'center';
    newUserDiv.style.marginBottom = '10px';

    const newUserSelect = document.createElement('select');
    newUserSelect.className = 'email-modal-input';
    newUserSelect.style.flexGrow = '1';
    newUserSelect.style.marginRight = '5px';

    // 添加一个默认的空白选项
    const defaultOption = document.createElement('option');
    defaultOption.value = '';
    defaultOption.textContent = '请选择用户';
    newUserSelect.appendChild(defaultOption);

    // 获取当前已选择的用户
    const selectedValues = Array.from(document.querySelectorAll('.user-select-container select'))
        .map(select => select.value);

    // 获取用户列表并填充到选择框中
    fetch('http://127.0.0.1:8080/api/admin/distributeLicenseByUserInfo', {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        data.data.forEach(user => {
            // 仅显示未被选中的用户，并且过滤掉admin用户
            if (!selectedValues.includes(user.Username) && user.Username !== 'admin') {
                const option = document.createElement('option');
                option.value = user.Username;
                option.textContent = user.Username;
                newUserSelect.appendChild(option);
            }
        });
    });

    const deleteButton = document.createElement('button');
    deleteButton.textContent = '✕';
    deleteButton.style.background = 'none';
    deleteButton.style.border = 'none';
    deleteButton.style.color = '#007aff';
    deleteButton.style.cursor = 'pointer';
    deleteButton.style.fontSize = '12px';
    deleteButton.style.padding = '0';
    deleteButton.style.marginLeft = '3px';
    deleteButton.style.width = '20px';
    deleteButton.style.height = '20px';
    deleteButton.onclick = () => {
        newUserDiv.remove();
        updateUserOptions(); // 更新其他下拉框中的选项
    };

    newUserSelect.addEventListener('change', updateUserOptions);

    newUserDiv.appendChild(newUserSelect);
    newUserDiv.appendChild(deleteButton);
    userInputs.appendChild(newUserDiv);
        // 设置空白选项为默认选项
    newUserSelect.selectedIndex = 0;
}

function updateUserOptions() {
    const selectedValues = Array.from(document.querySelectorAll('.user-select-container select'))
        .map(select => select.value);

    document.querySelectorAll('.user-select-container select').forEach(select => {
        const currentValue = select.value;
        select.innerHTML = ''; // 清空现有选项

        // 添加一个默认的空白选项
        const defaultOption = document.createElement('option');
        defaultOption.value = '';
        defaultOption.textContent = '请选择用户';
        select.appendChild(defaultOption);

        fetch('http://127.0.0.1:8080/api/admin/userInfoAll', {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            data.data.forEach(user => {
                if (!selectedValues.includes(user.Username) || user.Username === currentValue) {
                    if (user.Username !== 'admin') { // 过滤掉admin用户
                        const option = document.createElement('option');
                        option.value = user.Username;
                        option.textContent = user.Username;
                        select.appendChild(option);
                    }
                }
            });

            select.value = currentValue;
        });
    });
}


// 打开修改信息表单框
function modifyLicenseInfo() {
    const form = document.getElementById('modifyLicenseForm');
    
    // 将选中的行数据填充到表单中
    form.creator.value = selectedRowData.Creator;
    form.applicationDate.value = selectedRowData.ApplicationDate;
    form.associatedProject.value = selectedRowData.GlxmName;
    form.salesPerson.value = selectedRowData.SalesPerson;
    form.salesEmail.value = selectedRowData.SalesEmail;
    form.supportPerson.value = selectedRowData.SupportPerson;
    form.supportEmail.value = selectedRowData.SupportEmail;
    form.totalNodes.value = selectedRowData.TotalNodes;
    form.company.value = selectedRowData.Company;
    form.productName.value = selectedRowData.ProductName;
    form.version.value = selectedRowData.ProductVersion;
    form.nodeCount.value = selectedRowData.NodeCount;
    
    document.getElementById('modifyLicenseModal').style.display = 'block';
}

// 保存修改后的数据
function saveLicenseChanges() {
    const form = document.getElementById('modifyLicenseForm');
    const updatedData = {
        UniqueID: selectedRowData.UniqueID,
        Creator: form.creator.value,
        ApplicationDate: form.applicationDate.value,
        AssociatedProject: form.associatedProject.value,
        SalesPerson: form.salesPerson.value,
        SalesEmail: form.salesEmail.value,
        SupportPerson: form.supportPerson.value,
        SupportEmail: form.supportEmail.value,
        TotalNodes: parseInt(form.totalNodes.value, 10), // 将 TotalNodes 转换为整数
        Company: form.company.value,
        ProductName: form.productName.value,
        Version: form.version.value,
        NodeCount: parseInt(form.nodeCount.value, 10), // 将 NodeCount 转换为整数
    };
    
    fetch(`http://127.0.0.1:8080/api/admin/UpdateLicense`, {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(updatedData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('License信息更新成功！');
          //  fetchApplications(LisOffset, pageSize);
          const startOffset = currentOffset;  // 当前的起始位置
    const endOffset = startOffset + itemsPerPage - 1;  // 计算结束位置
    fetchApplications(startOffset, endOffset);  // 传入计算好的起始和结束位置
            closeModal('modifyLicenseModal');
        } else {
            alert('License信息更新失败：' + data.error);
        }
    });
}


function updateUserOptions() {
    const selectedValues = Array.from(document.querySelectorAll('.user-select-container select'))
        .map(select => select.value);

    document.querySelectorAll('.user-select-container select').forEach(select => {
        const currentValue = select.value;  // 保留当前选择值
        select.innerHTML = ''; // 清空现有选项
        
        fetch('http://127.0.0.1:8080/api/admin/distributeLicenseByUserInfo', {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            data.data.forEach(user => {
                // 保留当前值，并排除已经在其他下拉框中选中的值
                if (!selectedValues.includes(user.Username) || user.Username === currentValue) {
                    const option = document.createElement('option');
                    option.value = user.Username;
                    option.textContent = user.Username;
                    if (user.Username === currentValue) {
                        option.selected = true;  // 保持当前选择
                    }
                    select.appendChild(option);
                }
            });
        });
    });
}

//lic分发给用户 与邮件
function sendEmail() {
    console.log('Send button clicked');

    const emailInputs = document.querySelectorAll('.email-modal-input[type="text"]');
    let emails = Array.from(emailInputs)
        .map(input => input.value.trim())
        .filter(email => email && email.includes('@'))
        .join(',');

    const supportEmailChecked = document.getElementById('supportEmailCheckbox').checked;
    const salesEmailChecked = document.getElementById('salesEmailCheckbox').checked;

    const emailArray = emails ? [emails] : [];

    if (supportEmailChecked) {
        emailArray.push(document.getElementById('supportEmailCheckbox').value);
    }
    if (salesEmailChecked) {
        emailArray.push(document.getElementById('salesEmailCheckbox').value);
    }

    emails = emailArray.join(',');

    // if (!emails) {
    //     alert('请至少选择一个邮箱地址。');
    //     return;
    // }

    console.log('Emails to send:', emails);

    const userInputs = document.querySelectorAll('select.email-modal-input');
    console.log('userMap:', userMap);
    
    const users = Array.from(userInputs)
        .map(select => userMap[select.value].Account)
        .join(',');

    const userIds = Array.from(userInputs)
        .map(select => userMap[select.value].UniqueID)
        .join(',');

    const userNames = Array.from(userInputs)
        .map(select => userMap[select.value].Username);


    const operatorUniqueID = userMap[currentUserName].UniqueID;
    console.log('User IDs:', userIds);
    console.log('Users:', users);
    console.log(' selectedRowData.UniqueID:',  selectedRowData.UniqueID);

    if (!userIds) {
        alert('请至少选择一个用户。');
        return;
    }

    const requestData = {
        LicenseUniqueID: selectedRowData.UniqueID,
        Oa_request_id: selectedRowData.Oa_request_id,
        UserUniqueIDs: userIds.split(','), 
        UserAccounts: users.split(','), 
        Emails: emails,
        UserNames: userNames,
        OperatorUniqueID: operatorUniqueID
    };
    console.log('requestData:', requestData);

    fetch('http://127.0.0.1:8080/api/admin/distributeLicense', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(requestData)
    })
    .then(response => {
        console.log('Response received');
        return response.json();
    })
    .then(data => {
        if (data.success) {
            alert('分发成功！');
            closeModal('emailModal');
        } else {
            // 检查是否有 error 字段，并提示用户详细的错误信息
            const errorMessage = data.error || '分发失败。';
            alert(`分发失败: ${errorMessage}`);
        }
   
    })
    .catch(error => {
        console.error('Error occurred during email distribution:', error);
        alert('分发失败，请检查网络或后端服务。');
    });
}


function showDistributionHistory() {
    fetch('http://127.0.0.1:8080/api/admin/GetlicenseRecord', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ uniqueID: selectedRowData.UniqueID, oa_request_id: selectedRowData.oa_request_id })
    })
    .then(response => response.json())
    .then(data => {
        const distributionHistoryContent = document.getElementById('distributionHistoryContent');
        const { license_record_to_user, license_record_to_emails } = data.data;

        // 确保 license_record_to_user 和 license_record_to_emails 存在并且是数组
        const userRecords = Array.isArray(license_record_to_user) ? license_record_to_user : [];
        const emailRecords = Array.isArray(license_record_to_emails) ? license_record_to_emails : [];

        if (userRecords.length > 0 || emailRecords.length > 0) {
            const userHistoryHtml = userRecords.map(record => `
                <div style="margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 10px; background-color: #f9f9f9;">
                    <p><strong>已转发给用户:</strong> ${record.user_account}</p>
                    <p><strong>分发时间:</strong> ${new Date(record.up_time).toLocaleString()}</p>
                </div>
            `).join('');

            const emailHistoryHtml = emailRecords.map(record => `
                <div style="margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 10px; background-color: #f9f9f9;">
                    <p><strong>已发给邮箱:</strong> ${record.emails}</p>
                    <p><strong>分发时间:</strong> ${new Date(record.up_time).toLocaleString()}</p>
                </div>
            `).join('');

            distributionHistoryContent.innerHTML = userHistoryHtml + emailHistoryHtml;
        } else {
            distributionHistoryContent.innerHTML = `<p>没有分发历史记录。</p>`;
        }

        // 显示模态框
        const distributionHistoryModal = document.getElementById('distributionHistoryModal');
        distributionHistoryModal.style.display = 'block';
    });
}


 function showMoreUserInfo() {
            const extraInfoContent = document.getElementById('extraInfoContent');
            extraInfoContent.innerHTML = `
                <p><strong>用户名:</strong> ${selectedRowData.Username}</p>
                <p><strong>电话:</strong> ${selectedRowData.Telephone}</p>
                <p><strong>邮箱:</strong> ${selectedRowData.Email}</p>
                <p><strong>权限:</strong> ${selectedRowData.Role}</p>
            `;
            document.getElementById('extraInfoModal').style.display = 'block';
        }

function modifyUser() {
            const userInfoContent = document.getElementById('extraInfoContent');
            userInfoContent.innerHTML = `
                <p><strong>用户名:</strong> ${selectedRowData.Username}</p>
                <p><strong>电话:</strong> ${selectedRowData.Telephone}</p>
                <p><strong>邮箱:</strong> ${selectedRowData.Email}</p>
                <p><strong>权限:</strong> ${selectedRowData.Role}</p>
                <button onclick="showEditUserForm()">编辑用户信息</button>
            `;
            document.getElementById('extraInfoModal').style.display = 'block';
        }

//查看额外信息
function showExtraInfo() {
    const extraInfoContent = document.getElementById('extraInfoContent');
    
    // 清空之前的内容
    extraInfoContent.innerHTML = '';

    // 使用预定义的字段名和中文翻译
    const fieldTranslations = {
        id: "ID",
        user_id: "用户ID",
        up_user: "上传用户",
        up_time: "上传时间",
        del_time: "删除时间",
        License1: "License 1",
        License2: "License 2",
        LicenseFlage: "License 状态",
        UniqueID: "唯一标识符",
        Creator: "创建人",
        ApplicationDate: "申请日期",
        AssociatedProject: "关联项目",
        SalesPerson: "销售人员",
        SalesEmail: "销售邮箱",
        SupportPerson: "支持人员",
        SupportEmail: "支持邮箱",
        TotalNodes: "总节点数",
        Company: "公司",
        ProductName: "产品名称",
        Version: "版本",
        NodeCount: "节点数",
        Processor: "处理器",
        OperatingSystem: "操作系统",
        MasterMacAddress: "主MAC地址",
        SecondaryMasterMacAddress: "备用主MAC地址"
    };

    // 使用指定的字段进行展示
    const fieldsToShow = [
        "id", "user_id", "up_user", "up_time", "del_time", "License1", "License2", 
        "LicenseFlage", "UniqueID", "Creator", "ApplicationDate", "AssociatedProject", 
        "SalesPerson", "SalesEmail", "SupportPerson", "SupportEmail", "TotalNodes", 
        "Company", "ProductName", "Version", "NodeCount", "Processor", "OperatingSystem", 
        "MasterMacAddress", "SecondaryMasterMacAddress"
    ];

    fieldsToShow.forEach(key => {
        if (selectedRowData.hasOwnProperty(key)) {
            let value = selectedRowData[key];
            
            // 特殊处理 up_time 和 del_time
            if (key === 'up_time' || key === 'del_time') {
                if (value.Valid) {
                    value = new Date(value.Time).toLocaleString(); // 格式化日期时间
                } else {
                    value = '无';
                }
            }

            // 处理 License1 和 License2，提取字符串字段
            if (key === 'License1' || key === 'License2') {
                // 假设 License 对象包含一个名为 'Details' 的字符串字段
                value = value.String || '[无数据]';
            }

            // 处理 MasterMacAddress 和 SecondaryMasterMacAddress，提取字符串字段
            // if (key === 'MasterMacAddress' || key === 'SecondaryMasterMacAddress') {
            //     // 假设 License 对象包含一个名为 'Details' 的字符串字段
            //     value = value.String || '[无数据]';
            // }

            const infoElement = document.createElement('p');
            infoElement.innerHTML = `<strong>${fieldTranslations[key]}:</strong> ${value}`;
            extraInfoContent.appendChild(infoElement);
        }
    });

    // 显示 modal
    document.getElementById('extraInfoModal').style.display = 'block';
}


function showRoleManagement() {
    document.getElementById('table-container').style.display = 'none';
    document.getElementById('user-management').style.display = 'none'; // 隐藏用户管理页面
    document.getElementById('role-management').style.display = 'block';;

    fetchRoles();
}

function fetchRoles() {
    fetch('http://127.0.0.1:8080/api/admin/GetRoles', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ Name: " " })  // 发送空的 Name 参数
    })
    .then(response => response.json())
    .then(data => {
        const roleContainer = document.getElementById('roles-container');
        roleContainer.innerHTML = ''; // 清空之前的内容

        const permissionMap = {
            'generate_license': '生成许可证',
            'upload_license': '上传许可证',
            'read_license': '读取许可证',
            'read_license_record': '读取许可证分发记录',
            'update_license': '修改许可证',
            'delete_license': '删除许可证',
            'dispat_license': '分发许可证',
            'create_user': '创建用户',
            'read_user': '读取用户',
            'update_user': '更新用户',
            'delete_user': '删除用户',
            'create_role': '创建角色',
            'delete_role': '删除角色',
            'update_role': '更新角色',
            'get_role': '获取角色'
        };

        // 检查用户是否有 create_role 权限
        const hasCreateRolePermission = userPermissions.includes('create_role');

        // 如果有权限则显示“创建角色”按钮
        if (hasCreateRolePermission) {
            document.getElementById('createRoleButton').style.display = 'block';
        } else {
            document.getElementById('createRoleButton').style.display = 'none';
        }

        // 处理置顶角色和其他角色的渲染（代码不变）
        const topRoles = ['admin', 'guest', 'supportRole'];

        topRoles.forEach(role => {
            if (data.data[role]) {
                renderRole(roleContainer, data.data[role], permissionMap, true);
            }
        });

        Object.keys(data.data).forEach(role => {
            if (!topRoles.includes(role)) {
                renderRole(roleContainer, data.data[role], permissionMap, false);
            }
        });
    });
}


function renderRole(container, roleInfo, permissionMap, isTopRole) {
    const roleDiv = document.createElement('div');
    roleDiv.className = 'role-item';
    roleDiv.style.position = 'relative';  // 确保弹出菜单能够正确定位

    if (isTopRole) {
        roleDiv.classList.add('top-role'); // 应用置顶角色的样式
    }

    let permissions = roleInfo.Permissions.map(permission => permissionMap[permission]);
    let permissionsHtml = permissions.join('，');  // 使用逗号分隔并合并为一行

    roleDiv.innerHTML = `
        <h3>${roleInfo.Name}</h3>
        <p>${permissionsHtml}</p>
    `;
    container.appendChild(roleDiv);

    // 添加事件监听器，处理点击和右键点击弹出菜单
    roleDiv.addEventListener('click', function(event) {
        event.stopPropagation();  // 阻止事件冒泡
        event.preventDefault();   // 阻止默认行为
        showRoleActionMenu(event, roleInfo.Name);
    });

    roleDiv.addEventListener('contextmenu', function(event) {
        event.preventDefault();
        showRoleActionMenu(event, roleInfo.Name);
    });
}

function showRoleActionMenu(event, roleName) {
    const existingMenu = document.getElementById('role-action-menu');
    if (existingMenu) {
        existingMenu.remove();
    }

    const menu = document.createElement('div');
    menu.id = 'role-action-menu';
    menu.style.position = 'absolute';
    menu.style.top = `${event.clientY}px`;
    menu.style.left = `${event.clientX}px`;
    menu.style.backgroundColor = '#fff';
    menu.style.border = '1px solid #ccc';
    menu.style.borderRadius = '5px';
    menu.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.2)';
    menu.style.padding = '10px';
    menu.style.zIndex = '1000';

    const topRoles = ['admin', 'guest', 'support'];

    if (topRoles.includes(roleName)) {
        // 为 admin, guest, supportRole 设置灰色和不可点击样式
        const disabledButton = document.createElement('button');
        disabledButton.textContent = '不可操作';
        disabledButton.style.display = 'block';
        disabledButton.style.width = '100%';
        disabledButton.style.padding = '10px 20px';
        disabledButton.style.border = 'none';
        disabledButton.style.borderRadius = '15px';
        disabledButton.style.cursor = 'not-allowed';
        disabledButton.style.backgroundColor = '#d3d3d3';  // 灰色背景
        disabledButton.style.color = '#999';  // 灰色文字

        menu.appendChild(disabledButton);
    } else {
        // 检查用户是否有 update_role 和 delete_role 权限
        const hasUpdateRolePermission = userPermissions.includes('update_role');
        const hasDeleteRolePermission = userPermissions.includes('delete_role');

        // 创建和添加修改角色按钮
        if (hasUpdateRolePermission) {
            const modifyButton = document.createElement('button');
            modifyButton.textContent = '修改角色';
            modifyButton.style.display = 'block';
            modifyButton.style.marginBottom = '10px';
            modifyButton.style.width = '100%';
            modifyButton.style.padding = '10px 20px';
            modifyButton.style.border = 'none';
            modifyButton.style.borderRadius = '15px';
            modifyButton.style.cursor = 'pointer';
            modifyButton.style.transition = 'background-color 0.3s, color 0.3s';
            modifyButton.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
            modifyButton.style.backgroundColor = '#007aff';
            modifyButton.style.color = '#fff';

            modifyButton.addEventListener('mouseenter', function () {
                modifyButton.style.backgroundColor = '#005bb5';
            });

            modifyButton.addEventListener('mouseleave', function () {
                modifyButton.style.backgroundColor = '#007aff';
            });

            modifyButton.addEventListener('click', function () {
                modifyRole(roleName);
                menu.remove(); // 点击按钮后，关闭菜单栏
            });

            menu.appendChild(modifyButton);
        }

        // 创建和添加删除角色按钮
        if (hasDeleteRolePermission) {
            const deleteButton = document.createElement('button');
            deleteButton.textContent = '删除角色';
            deleteButton.style.display = 'block';
            deleteButton.style.width = '100%';
            deleteButton.style.padding = '10px 20px';
            deleteButton.style.border = 'none';
            deleteButton.style.borderRadius = '15px';
            deleteButton.style.cursor = 'pointer';
            deleteButton.style.transition = 'background-color 0.3s, color 0.3s';
            deleteButton.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
            deleteButton.style.backgroundColor = '#ff3b30';
            deleteButton.style.color = '#fff';

            deleteButton.addEventListener('mouseenter', function () {
                deleteButton.style.backgroundColor = '#c23321';
            });

            deleteButton.addEventListener('mouseleave', function () {
                deleteButton.style.backgroundColor = '#ff3b30';
            });

            deleteButton.addEventListener('click', function () {
                deleteRole(roleName);
                menu.remove(); // 点击按钮后，关闭菜单栏
            });

            menu.appendChild(deleteButton);
        }

        // 如果用户没有修改或删除权限，则显示没有选项的提示
        if (!hasUpdateRolePermission && !hasDeleteRolePermission) {
            const noOption = document.createElement('div');
            noOption.textContent = '没有可用的操作';
            noOption.style.textAlign = 'center';
            noOption.style.color = '#999';
            menu.appendChild(noOption);
        }
    }

    document.body.appendChild(menu);

    document.addEventListener('click', function closeMenu(event) {
        if (!menu.contains(event.target)) {
            menu.remove();
            document.removeEventListener('click', closeMenu);
        }
    });
}


//修改角色信息
function modifyRole(roleName) {
    console.log(`modifyRole called with roleName: ${roleName}`);
    
    fetchRoleInfo(roleName, function(roleInfo) {
        console.log(`fetchRoleInfo returned:`, roleInfo);

        if (!roleInfo) {
            console.error('Role info is undefined or null');
            return;
        }

        const extraInfoContent = document.getElementById('extraInfoContent');
        if (!extraInfoContent) {
            console.error('Element with id "extraInfoContent" not found');
            return;
        }

        extraInfoContent.innerHTML = `
            <h3>修改角色: ${roleInfo.Name}</h3>
            <label for="roleName">角色名称:</label>
            <input type="text" id="roleName" value="${roleInfo.Name}" required><br><br>
            <label for="permissions">权限:</label><br>
            <div id="permissions">
                  <div>
            <input type="checkbox" id="license" name="permissions" value="license" onchange="toggleSubPermissions('license', this)">
            <label for="license">许可证</label>
            <div id="licenseSubPermissions" style="margin-left: 20px;">
                <input type="checkbox" id="generate_license" name="permissions" value="generate_license">
                <label for="generate_license">生成许可证</label><br>
                <input type="checkbox" id="upload_license" name="permissions" value="upload_license">
                <label for="upload_license">上传许可证</label><br>
                <input type="checkbox" id="read_license" name="permissions" value="read_license">
                <label for="read_license">读取许可证</label><br>
                <input type="checkbox" id="update_license" name="permissions" value="update_license">
                <label for="update_license">更新许可证</label><br>
                <input type="checkbox" id="delete_license" name="permissions" value="delete_license">
                <label for="delete_license">删除许可证</label><br>
            </div>
        </div>
        <div>
            <input type="checkbox" id="user" name="permissions" value="user" onchange="toggleSubPermissions('user', this)">
            <label for="user">用户</label>
            <div id="userSubPermissions" style="margin-left: 20px;">
                <input type="checkbox" id="create_user" name="permissions" value="create_user">
                <label for="create_user">创建用户</label><br>
                <input type="checkbox" id="read_user" name="permissions" value="read_user">
                <label for="read_user">读取用户</label><br>
                <input type="checkbox" id="update_user" name="permissions" value="update_user">
                <label for="update_user">更新用户</label><br>
                <input type="checkbox" id="delete_user" name="permissions" value="delete_user">
                <label for="delete_user">删除用户</label><br>
            </div>
        </div>
        <div>
            <input type="checkbox" id="role" name="permissions" value="role" onchange="toggleSubPermissions('role', this)">
            <label for="role">角色</label>
            <div id="roleSubPermissions" style="margin-left: 20px;">
                <input type="checkbox" id="create_role" name="permissions" value="create_role">
                <label for="create_role">创建角色</label><br>
                <input type="checkbox" id="delete_role" name="permissions" value="delete_role">
                <label for="delete_role">删除角色</label><br>
                <input type="checkbox" id="update_role" name="permissions" value="update_role">
                <label for="update_role">更新角色</label><br>
                <input type="checkbox" id="get_role" name="permissions" value="get_role">
                <label for="get_role">获取角色</label><br>
            </div>
        </div>
            </div><br><br>
            <button onclick="saveRoleChanges('${roleInfo.Id}')">保存</button>
        `;

        console.log('Form content added to extraInfoContent');

        const checkboxes = document.querySelectorAll('#permissions input[type="checkbox"]');

// 遍历所有复选框
checkboxes.forEach(checkbox => {
    if (roleInfo.Permissions.includes(checkbox.value)) {
        checkbox.checked = true; // 如果当前权限在roleInfo.Permissions中，则勾选
    }
});

        const extraInfoModal = document.getElementById('extraInfoModal');
        if (!extraInfoModal) {
            console.error('Element with id "extraInfoModal" not found');
            return;
        }

        extraInfoModal.style.display = 'block';  // 强制显示模态框
        console.log('Modal should be visible now');
    });
}

function getCheckboxOptions(selectedPermissions) {
    const permissionMap = {
        'generate_license': '生成许可证',
        'upload_license': '上传许可证',
        'read_license': '读取许可证',
        'update_license': '修改许可证',
        'delete_license': '删除许可证',
        'dispat_license': '分发许可证',
        'read_license_record': '读取许可证分发记录',
      //  'get_user_info': '获取用户信息',
        'create_user': '创建用户',
        'read_user': '读取用户',
        'update_user': '更新用户',
        'delete_user': '删除用户',
        'create_role': '创建角色',
        'delete_role': '删除角色',
        'update_role': '更新角色',
        'get_role': '获取角色'
    };

    return Object.keys(permissionMap).map(permission => `
        <div>
            <input type="checkbox" id="${permission}" name="permissions" value="${permission}" ${selectedPermissions.includes(permission) ? 'checked' : ''}>
            <label for="${permission}">${permissionMap[permission]}</label>
        </div>
    `).join('');
}


function fetchRoleInfo(roleName, callback) {
    console.log(`fetchRoleInfo called with roleName: ${roleName}`);
    
    fetch('http://127.0.0.1:8080/api/admin/GetRoles', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ Name: roleName })
    })
    .then(response => {
        console.log('fetchRoleInfo response received', response);
        return response.json();
    })
    .then(data => {
        console.log('fetchRoleInfo data received', data);

        // 直接从 data.data 获取角色信息
        if (data && data.data) {
            console.log('Role info found:', data.data);
            callback(data.data);  // 直接返回 data.data 而不是 data.data[roleName]
        } else {
            console.error('Role not found or unexpected data structure', data);
            callback(null);  // 如果角色信息未找到，返回 null
        }
    })
    .catch(error => {
        console.error('Error in fetchRoleInfo:', error);
        callback(null);  // 捕获异常情况
    });
}

function getPermissionsOptions(selectedPermissions) {
    const permissionMap = {
        'generate_license': '生成许可证',
        'upload_license': '上传许可证',
        'read_license': '读取许可证',
        'update_license': '修改许可证',
        'delete_license': '删除许可证',
        'dispat_license': '分发许可证',
        'read_license_record': '读取许可证分发记录',
        //'get_user_info': '获取用户信息',
        'create_user': '创建用户',
        'read_user': '读取用户',
        'update_user': '更新用户',
        'delete_user': '删除用户',
        'create_role': '创建角色',
        'delete_role': '删除角色',
        'update_role': '更新角色',
        'get_role': '获取角色'
    };
    
    return Object.keys(permissionMap).map(permission => `
        <option value="${permission}" ${selectedPermissions.includes(permission) ? 'selected' : ''}>
            ${permissionMap[permission]}
        </option>
    `).join('');
}

function saveRoleChanges(roleId) {
    const updatedRoleName = document.getElementById('roleName').value.trim();
    const selectedPermissions = Array.from(document.querySelectorAll('#permissions input[type="checkbox"]:checked'))
                                    .map(checkbox => checkbox.value)
                                    .filter(value => !['license', 'user', 'role'].includes(value)); // 过滤掉一级分类

    if (!updatedRoleName) {
        alert('角色名称不能为空！');
        return;
    }

    const updateRole = {
        Id: parseInt(roleId, 10),  // 确保 roleId 被传递并转换为整数
        Name: updatedRoleName,
        Permissions: selectedPermissions
    };

    fetch('http://127.0.0.1:8080/api/admin/UpdateRole', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(updateRole)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('角色更新成功！');
            fetchRoles(); // 刷新角色列表
            closeModal('extraInfoModal'); // 关闭信息栏
        } else {
            alert('角色更新失败：' + data.error);
        }
    });
}

//删除角色
function deleteRole(roleName) {
    console.log(`deleteRole called for role: ${roleName}`);
    
    const confirmed = confirm(`确认删除角色: ${roleName} 吗？`);
    if (!confirmed) {
        return;
    }

    fetch('http://127.0.0.1:8080/api/admin/DeleteRole', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            name: roleName  // 将角色名称传递给后端
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('角色删除成功！');
            fetchRoles();  // 刷新角色列表
        } else {
            alert('角色删除失败：' + data.error);
        }
    })
    .catch(error => {
        console.error('Error deleting role:', error);
        alert('删除角色时发生错误，请稍后再试。');
    });
}

document.getElementById('createRoleButton').addEventListener('click', function() {
    const extraInfoContent = document.getElementById('extraInfoContent');
    extraInfoContent.innerHTML = `
        <h3>创建新角色</h3>
        <label for="newRoleName">角色名称:</label>
        <input type="text" id="newRoleName" required><br><br>
          <label for="newPermissions">权限:</label><br>
 <div id="newPermissions">
        <div>
            <input type="checkbox" id="license" name="permissions" value="license" onchange="toggleSubPermissions('license', this)">
            <label for="license">许可证</label>
            <div id="licenseSubPermissions" style="margin-left: 20px;">
                <input type="checkbox" id="generate_license" name="permissions" value="generate_license">
                <label for="generate_license">生成许可证</label><br>
                <input type="checkbox" id="upload_license" name="permissions" value="upload_license">
                <label for="upload_license">上传许可证</label><br>
                <input type="checkbox" id="read_license" name="permissions" value="read_license">
                <label for="read_license">读取许可证</label><br>
                <input type="checkbox" id="update_license" name="permissions" value="update_license">
                <label for="update_license">更新许可证</label><br>
                <input type="checkbox" id="delete_license" name="permissions" value="delete_license">
                <label for="delete_license">删除许可证</label><br>
            </div>
        </div>
        <div>
            <input type="checkbox" id="user" name="permissions" value="user" onchange="toggleSubPermissions('user', this)">
            <label for="user">用户</label>
            <div id="userSubPermissions" style="margin-left: 20px;">
                <input type="checkbox" id="create_user" name="permissions" value="create_user">
                <label for="create_user">创建用户</label><br>
                <input type="checkbox" id="read_user" name="permissions" value="read_user">
                <label for="read_user">读取用户</label><br>
                <input type="checkbox" id="update_user" name="permissions" value="update_user">
                <label for="update_user">更新用户</label><br>
                <input type="checkbox" id="delete_user" name="permissions" value="delete_user">
                <label for="delete_user">删除用户</label><br>
            </div>
        </div>
        <div>
            <input type="checkbox" id="role" name="permissions" value="role" onchange="toggleSubPermissions('role', this)">
            <label for="role">角色</label>
            <div id="roleSubPermissions" style="margin-left: 20px;">
                <input type="checkbox" id="create_role" name="permissions" value="create_role">
                <label for="create_role">创建角色</label><br>
                <input type="checkbox" id="delete_role" name="permissions" value="delete_role">
                <label for="delete_role">删除角色</label><br>
                <input type="checkbox" id="update_role" name="permissions" value="update_role">
                <label for="update_role">更新角色</label><br>
                <input type="checkbox" id="get_role" name="permissions" value="get_role">
                <label for="get_role">获取角色</label><br>
            </div>
        </div>
    </div><br><br>
    <button onclick="createNewRole()">创建</button>
</div>

     
    `;
    document.getElementById('extraInfoModal').style.display = 'block';
});


function toggleSubPermissions(category, checkbox) {
    const subPermissions = document.querySelectorAll(`#${category}SubPermissions input[type="checkbox"]`);
    subPermissions.forEach(subCheckbox => {
        subCheckbox.checked = checkbox.checked;
    });
}

function createNewRole() {
    const newRoleName = document.getElementById('newRoleName').value.trim();
    const selectedPermissions = Array.from(document.querySelectorAll('#newPermissions input[type="checkbox"]:checked'))
                                    .map(checkbox => checkbox.value)
                                    .filter(value => !['license', 'user', 'role'].includes(value)); // 过滤掉一级分类

    if (!newRoleName) {
        alert('角色名称不能为空！');
        return;
    }

    const newRole = {
        Name: newRoleName,
        Permissions: selectedPermissions
    };

    fetch('http://127.0.0.1:8080/api/admin/CreateRole', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(newRole)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('角色创建成功！');
            fetchRoles(); // 刷新角色列表
            closeModal('extraInfoModal'); // 关闭信息栏
        } else {
            alert('角色创建失败：' + data.error);
        }
    });
}

//显示用户信息
function showEditUserForm() {
    const extraInfoContent = document.getElementById('extraInfoContent');

    // 清空之前的内容
    extraInfoContent.innerHTML = '';

    // 创建表单
    const form = document.createElement('form');
    form.id = 'editUserForm';
    form.style.width = '400px'; // 增加表单宽度

    form.innerHTML = `
        <div style="display: flex; align-items: center; margin-bottom: 15px;">
            <label for="username" style="flex: 0 0 80px;">用户名:</label>
            <input type="text" id="username" name="username" value="${selectedRowData.Username}" style="flex: 1;" required>
        </div>
        
        <div style="display: flex; align-items: center; margin-bottom: 15px;">
            <label for="telephone" style="flex: 0 0 80px;">电话:</label>
            <input type="text" id="telephone" name="telephone" value="${selectedRowData.Telephone}" style="flex: 1;" required>
        </div>
        
        <div style="display: flex; align-items: center; margin-bottom: 15px;">
            <label for="email" style="flex: 0 0 80px;">邮箱:</label>
            <input type="email" id="email" name="email" value="${selectedRowData.Email}" style="flex: 1;" required>
        </div>
    `;

    // 检查用户是否有 'update_role' 权限，如果有，则显示权限选择框
    if (userPermissions.includes('update_role')) {
        const roleSelectDiv = document.createElement('div');
        roleSelectDiv.style = 'display: flex; align-items: center; margin-bottom: 15px;';
        roleSelectDiv.innerHTML = `
            <label for="role" style="flex: 0 0 80px;">权限:</label>
            <select id="role" name="role" style="flex: 1;" required></select>
        `;
        form.appendChild(roleSelectDiv);

        // 获取角色列表并填充到选择框中
        fetch('http://127.0.0.1:8080/api/admin/GetRoleNames', {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            const roleSelect = document.getElementById('role');
            data.roles.forEach(role => {
                const option = document.createElement('option');
                option.value = role;
                option.textContent = role;
                if (selectedRowData.Role === role) {
                    option.selected = true;
                }
                roleSelect.appendChild(option);
            });
        })
        .catch(error => console.error('获取角色列表时出错:', error));
    }

    // 将表单添加到弹出框内容中
    extraInfoContent.appendChild(form);

    // 添加保存按钮
    const saveButton = document.createElement('button');
    saveButton.type = 'button';
    saveButton.onclick = saveUserChanges;
    saveButton.style = 'width: 100%; background-color: #007bff; color: white; border: none; padding: 10px; border-radius: 5px;';
    saveButton.textContent = '保存';
    form.appendChild(saveButton);
}


function saveUserChanges() {
            const form = document.getElementById('editUserForm');
            const formData = new FormData(form);
            const updatedUser = {
                Username: formData.get('username'),
                Telephone: formData.get('telephone'),
                Email: formData.get('email'),
                Role: formData.get('role')
            };

            fetch(`http://127.0.0.1:8080/api/admin/updateUser`, {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ ...updatedUser, Id: selectedRowData.Id })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('用户信息更新成功！');
                    fetchUsers();
                    closeModal('extraInfoModal');
                } else {
                    alert('用户信息更新失败：' + data.error);
                }
            });
        }

//用户个人信息
function toggleUserInfo() {
    const userModal = document.getElementById('userModal');
    const userButton = document.getElementById('username');
    const rect = userButton.getBoundingClientRect();
    const modalWidth = 300; // 信息栏的宽度
    const windowWidth = window.innerWidth; // 浏览器窗口的宽度

    if (userModal.style.display === 'none' || userModal.style.display === '') {
        fetch(`http://127.0.0.1:8080/api/admin/userInfo`, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            const userInfoContent = document.getElementById('userInfoContent');
            let power;
            switch (data.data.Role) {
                case 'admin':
                    power = '至高无上的主';
                    break;
                case 'supportRole':
                    power = '运维';
                    break;
                case 'guest':
                    power = '访客';
                    break;
                default:
                    power = data.data.Role;
            }

            userInfoContent.innerHTML = `
               <h2> 个人信息</h2>
               <div class="apple-modal-content">
                   <p class="apple-modal-text"><strong>用户名:</strong> ${data.data.Username}</p>
                   <p class="apple-modal-text"><strong>账号:</strong> ${data.data.Account}</p>
                   <p class="apple-modal-text"><strong>邮箱:</strong> ${data.data.Email}</p>
                   <p class="apple-modal-text"><strong>电话:</strong> ${data.data.Telephone}</p>
                   <p class="apple-modal-text"><strong>权限:</strong> ${power}</p>
               </div>
            `;

            // 设置模态框位置
            userModal.style.top = `${rect.bottom + window.scrollY + 10}px`;
            const leftPosition = rect.right + window.scrollX + 20; // 右侧位置
            const rightEdge = leftPosition + modalWidth;

            if (rightEdge > windowWidth) {
                const leftEdge = rect.left + window.scrollX - modalWidth - 20;
                userModal.style.left = `${Math.max(20, leftEdge)}px`;
            } else {
                userModal.style.left = `${leftPosition}px`;
            }

            userModal.style.display = 'block';
            userModal.style.opacity = '0'; // 先设置透明度为0
            setTimeout(() => {
                userModal.style.opacity = '1'; // 然后慢慢显示
            }, 0); // 延迟一帧显示

            userModal.style.transition = 'opacity 0.3s ease, top 0.3s ease, left 0.3s ease';

            // 添加全局点击监听器
            document.addEventListener('click', handleClickOutsideModal);
        });

    } else {
        closeUserInfo();
    }
}

function closeUserInfo() {
    const userModal = document.getElementById('userModal');
    userModal.style.opacity = '0'; // 先设置透明度为0
    setTimeout(() => {
        userModal.style.display = 'none'; // 然后隐藏
    }, 300); // 延迟0.3秒，等待过渡结束

    // 移除全局点击监听器
    document.removeEventListener('click', handleClickOutsideModal);
}


function closeUserInfo() {
    const userModal = document.getElementById('userModal');
    userModal.style.opacity = '0'; // 先设置透明度为0
    setTimeout(() => {
        userModal.style.display = 'none'; // 然后隐藏
    }, 300); // 延迟0.3秒，等待过渡结束

    // 移除全局点击监听器
    document.removeEventListener('click', handleClickOutsideModal);
}

function handleClickOutsideModal(event) {
    const userModal = document.getElementById('userModal');
    if (!userModal.contains(event.target) && event.target.id !== 'username') {
        closeUserInfo();
    }
}


//用户退出
function logout() {
            localStorage.removeItem('Authorization');
            window.location.href = '/';
        }


function showUserManagement() {
    document.getElementById('table-container').style.display = 'none';
    document.getElementById('role-management').style.display = 'none'; // 隐藏角色管理页面
    document.getElementById('user-management').style.display = 'block';
    
    // 检查用户是否有 create_user 权限
    const hasCreateUserPermission = userPermissions.includes('create_user');

    // 获取添加用户按钮元素
    const addUserButton = document.getElementById('addUserButton');

    // 根据权限显示或隐藏添加用户按钮
    if (hasCreateUserPermission) {
        addUserButton.style.display = 'block';
    } else {
        addUserButton.style.display = 'none';
    }

    // 加载用户列表
    fetchUsers();
        }

function showTable() {
    document.getElementById('user-management').style.display = 'none';
    document.getElementById('role-management').style.display = 'none'; // 隐藏角色管理页面
    document.getElementById('table-container').style.display = 'block';
        }

function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    const content = document.getElementById('content');
    sidebar.classList.toggle('hidden');
    content.classList.toggle('expanded');

    const toggleButton = document.querySelector('.toggle-sidebar');
    if (sidebar.classList.contains('hidden')) {
        toggleButton.innerHTML = '>';  // 当侧边栏隐藏时，显示右箭头
    } else {
        toggleButton.innerHTML = '<';  // 当侧边栏显示时，显示左箭头
    }
}


 function fetchUsername() {
    fetch(`http://127.0.0.1:8080/api/admin/userInfo`, {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('username').textContent = data.data.Username;
        currentUserRole = data.data.Role; // 存储当前用户的角色
        currentUserName = data.data.Username
        // 使用获取到的角色，调用获取权限的接口
        fetchPermissionsByRole(currentUserRole)
            .then(() => {
                //fetchApplications(LisOffset, pageSize); // 确保在权限获取之后才调用 fetchApplications
                const startOffset = currentOffset;  // 当前的起始位置
    const endOffset = startOffset + itemsPerPage - 1;  // 计算结束位置
    fetchApplications(startOffset, endOffset);  // 传入计算好的起始和结束位置
                // 检查用户是否有 upload_license 权限
                const hasUploadLicensePermission = userPermissions.includes('upload_license');

                // 获取上传按钮元素
                const uploadButton = document.querySelector('.upload-button');

                // 根据权限显示或隐藏上传按钮
                // if (hasUploadLicensePermission) {
                //     uploadButton.style.display = 'inline-block'; // 显示按钮
                // } else {
                //     uploadButton.style.display = 'none'; // 隐藏按钮
                // }
// 是否生成主动抓取lic按钮
    checkCaptureLicensePermission();
 // 检查是否有 capture_license_once_to_db 权限

            });
    });
}

function fetchPermissionsByRole(role) {
    return fetch(`http://127.0.0.1:8080/api/admin/GetSelfRoles`, {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ name: role })
    })
    .then(response => response.json())
    .then(data => {
        userPermissions = data.data.Permissions; // 获取用户的权限数组
        console.log('userPermissions:', userPermissions);
        
        // 定义权限类别
        const licensePermissions = ['upload_license', 'read_license'];
        const userPermissionsCheck = [ 'create_user', 'read_user', 'update_user', 'delete_user'];
        const rolePermissions = ['create_role', 'delete_role', 'update_role', 'get_role'];

        const hasLicenseAccess = licensePermissions.some(permission => userPermissions.includes(permission));
        const hasUserManagementAccess = userPermissionsCheck.some(permission => userPermissions.includes(permission));
        const hasRoleManagementAccess = rolePermissions.some(permission => userPermissions.includes(permission));

        // 根据权限渲染菜单并显示初始页面
        renderMenuAndInitialPage(hasLicenseAccess, hasUserManagementAccess, hasRoleManagementAccess);
    });
}


function renderMenuAndInitialPage(hasLicenseAccess, hasUserManagementAccess, hasRoleManagementAccess) {
    const sidebar = document.querySelector('.sidebar');

    // 清空现有菜单项
    sidebar.innerHTML = '';

    let initialPageShown = false;

    // 动态添加菜单项并确定初始显示的页面
    if (hasLicenseAccess) {
        const licenseButton = document.createElement('button');
        licenseButton.textContent = 'License 管理';
        licenseButton.onclick = showTable;
        sidebar.appendChild(licenseButton);

        if (!initialPageShown) {
            showTable(); // 如果有License权限，先显示License页面
            initialPageShown = true;
        }
    }

    if (hasUserManagementAccess) {
        const userManagementButton = document.createElement('button');
        userManagementButton.textContent = '用户管理';
        userManagementButton.onclick = showUserManagement;
        sidebar.appendChild(userManagementButton);

        if (!initialPageShown) {
            showUserManagement(); // 如果没有License权限，但有用户管理权限，显示用户管理页面
            initialPageShown = true;
        }
    }

    if (hasRoleManagementAccess) {
        const roleManagementButton = document.createElement('button');
        roleManagementButton.textContent = '角色管理';
        roleManagementButton.onclick = showRoleManagement;
        sidebar.appendChild(roleManagementButton);

        if (!initialPageShown) {
            showRoleManagement(); // 如果没有License和用户管理权限，但有角色管理权限，显示角色管理页面
            initialPageShown = true;
        }
    }

    if (!initialPageShown && sidebar.firstChild) {
        sidebar.firstChild.click(); // 如果没有优先的权限页面，则显示菜单中的第一个页面
    }
}

// 添加到每个模态框的 JavaScript 部分
document.addEventListener('DOMContentLoaded', function() {
  
    // 获取所有模态框
    const modals = document.querySelectorAll('.modal');
    
    // 为每个模态框添加点击事件监听器
    modals.forEach(modal => {
        modal.addEventListener('click', function(event) {
            // 如果点击的是模态框背景而不是模态框内容，关闭模态框
            if (event.target === modal) {
                modal.style.display = 'none';
            }
        });
    });
});

        // 页面初始化时调用 fetchUsername 函数
        fetchUsername();
        //fetchApplications(currentPage, pageSize);
    </script>
</body>
</html>