root
/
xugu_license


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798
							<!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: 300px; /* 添加最小宽度 */

}


.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%);

        }


 /* 通用按钮样式 */

.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.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)}</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);


                // 为每个详细信息行添加点击事件 (子行)

                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); // 如果超时或请求失败

    });

}


//查看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 })

    })

    .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>

        
        <div style="display: flex; align-items: center; margin-bottom: 15px;">

            <label for="role" style="flex: 0 0 80px;">权限:</label>

            <select id="role" name="role" style="flex: 1;" required></select>

        </div>


        <button type="button" onclick="saveUserChanges()" style="width: 100%; background-color: #007bff; color: white; border: none; padding: 10px; border-radius: 5px;">保存</button>

    `;


    // 将表单添加到弹出框内容中

    extraInfoContent.appendChild(form);


    // 获取角色列表并填充到选择框中

    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 fetching roles:', error));

}


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>