<template>
    <div class="introduce">
        <svg xmlns="http://www.w3.org/2000/svg" class="img" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
            version="1.1" width="32" height="33" viewBox="0 0 32 33">
            <defs>
                <clipPath id="master_svg0_28_400">
                    <rect x="0" y="0" width="32" height="33" rx="0" />
                </clipPath>
            </defs>
            <g clip-path="url(#master_svg0_28_400)">
                <g>
                    <g>
                        <g>
                            <g>
                                <g>
                                    <path
                                        d="M9.21835866821289,1.9825439453125C8.99650866821289,2.1213209453125,8.77466866821289,2.2637019453125,8.556428668212892,2.4168969453124998C3.9048636682128905,5.6430039453125005,1.7855986682128906,10.6317539453125,3.8255036682128907,13.5604439453125C4.177208668212891,14.0669439453125,4.6335286682128904,14.4760439453125,5.167408668212891,14.7932439453125C3.562173668212891,12.0141439453125,5.205278668212891,6.7207739453125,9.21835866821289,1.9825439453125Z"
                                        fill="#F8B62D" fill-opacity="1" style="mix-blend-mode:passthrough" />
                                </g>
                            </g>
                        </g>
                        <g>
                            <g>
                                <path
                                    d="M13.242306057739258,1.52114C13.842916057739258,0.975041,14.456156057739257,0.468596,15.072996057739259,0C10.791176057739257,1.7302,7.669096057739258,5.10229,6.2135630577392575,8.29055C5.843819057739258,9.15025,5.575077057739258,9.98471,5.412751057739258,10.7741C4.987094057739258,13.1549,5.730190057739258,15.1014,7.901756057739258,15.6619C7.887326057739258,15.6475,7.872906057739257,15.6349,7.858476057739258,15.6187C5.326176757739258,12.8431,7.735826057739258,6.53331,13.242306057739258,1.52114Z"
                                    fill="#F8B62D" fill-opacity="1" style="mix-blend-mode:passthrough" />
                            </g>
                        </g>
                        <g>
                            <path
                                d="M13.10150351196289,12.066364038085938C12.11491351196289,10.166764038085937,14.37486351196289,7.048754038085938,18.146293511962888,5.100474038085937C19.414193511962893,4.446244038085937,20.69299351196289,4.0064840380859374,21.86899351196289,3.7848040380859373C21.75889351196289,3.1630140380859375,21.531693511962892,2.5826740380859374,21.17279351196289,2.0672140380859374C21.16189351196289,2.0527940380859375,21.149293511962888,2.0383840380859377,21.138493511962892,2.0221640380859376C20.095993511962888,2.3213440380859374,19.029993511962893,2.7016240380859373,17.96409351196289,3.1630140380859375C15.39391351196289,4.275024038085937,13.179063511962891,5.702444038085938,11.494473511962891,7.232594038085938C12.793083511962891,5.610524038085938,14.49931351196289,4.0064840380859374,16.53020351196289,2.5898840380859376C17.55829351196289,1.8725740380859375,18.60259351196289,1.2507740380859376,19.641493511962892,0.7245080380859374C18.97589351196289,0.3676540380859375,18.19679351196289,0.1477741380859375,17.34364351196289,0.0612640380859375C16.59333351196289,0.4938150380859375,15.84302351196289,0.9750270380859375,15.101733511962891,1.5085040380859376C9.05416351196289,5.852034038085938,5.932073511962891,11.842864038085937,8.12889651196289,14.890564038085937C8.329099511962891,15.168064038085937,8.56717351196289,15.411364038085937,8.839523511962891,15.622264038085937C8.91888351196289,15.683564038085937,9.00185351196289,15.741264038085937,9.086623511962891,15.797064038085937C9.164183511962891,15.797064038085937,9.24354351196289,15.795264038085937,9.32290351196289,15.791664038085937C11.41691351196289,15.715964038085938,13.81754351196289,14.931964038085937,16.06667351196289,13.461364038085938C14.65082351196289,13.418064038085937,13.56143351196289,12.953064038085937,13.10150351196289,12.066364038085938Z"
                                fill="#C30D23" fill-opacity="1" style="mix-blend-mode:passthrough" />
                        </g>
                        <g>
                            <g>
                                <g>
                                    <path
                                        d="M22.779983520507812,18.925861895751954C23.001830520507813,18.787061895751954,23.223677520507813,18.644661895751952,23.441915520507813,18.491561895751953C28.093483520507814,15.265411895751953,30.212743520507814,10.276661895751953,28.17283352050781,7.3479318957519535C27.82112352050781,6.841485895751953,27.364813520507813,6.432364895751953,26.830933520507813,6.115161895751953C28.43797352050781,8.894301895751953,26.79486352050781,14.187631895751952,22.779983520507812,18.925861895751954Z"
                                        fill="#00913A" fill-opacity="1" style="mix-blend-mode:passthrough" />
                                </g>
                            </g>
                            <g>
                                <g>
                                    <path
                                        d="M18.757935556640625,19.387292385864257C18.157325556640625,19.93339238586426,17.544090556640626,20.43979238586426,16.925445556640625,20.908392385864257C21.207265556640625,19.178192385864257,24.329345556640625,15.806092385864257,25.784875556640625,12.617872385864258C26.154615556640625,11.758182385864258,26.423355556640622,10.923722385864258,26.585685556640627,10.134312385864257C27.011345556640627,7.753482385864258,26.268245556640625,5.807005385864258,24.096675556640626,5.246492385864258C24.111105556640624,5.260910685864258,24.125535556640624,5.273526685864258,24.139965556640625,5.289747385864258C26.672265556640625,8.065282385864258,24.262615556640625,14.376912385864259,18.757935556640625,19.387292385864257Z"
                                        fill="#00913A" fill-opacity="1" style="mix-blend-mode:passthrough" />
                                </g>
                            </g>
                            <g>
                                <path
                                    d="M18.898375668945313,8.843871032714844C19.884965668945313,10.743491032714843,17.625015668945313,13.861451032714843,13.853625668945313,15.809721032714844C12.585675668945314,16.463921032714843,11.306905668945312,16.90372103271484,10.130935668945312,17.125421032714844C10.240957668945313,17.747221032714844,10.468214668945313,18.32752103271484,10.827136668945313,18.843021032714844C10.837958668945312,18.857421032714846,10.850584668945313,18.87182103271484,10.861405668945313,18.888021032714846C11.903905668945313,18.588821032714844,12.969845668945313,18.208621032714845,14.035795668945312,17.747221032714844C16.605965668945313,16.635221032714846,18.82082566894531,15.207721032714844,20.50543566894531,13.677621032714844C19.206805668945314,15.299721032714844,17.500565668945313,16.90372103271484,15.469685668945313,18.320321032714844C14.441615668945312,19.037621032714846,13.397315668945312,19.659421032714846,12.358415668945312,20.185721032714845C13.023955668945312,20.542521032714845,13.803125668945313,20.762421032714844,14.656245668945314,20.84892103271484C15.406555668945312,20.416421032714844,16.15686566894531,19.935221032714843,16.898155668945314,19.401721032714846C22.94573566894531,15.058181032714844,26.067835668945314,9.067351032714843,23.87103566894531,6.019675032714844C23.670835668945312,5.742121032714843,23.432735668945313,5.498812032714843,23.160335668945315,5.287943032714844C23.08103566894531,5.226665032714844,22.998035668945313,5.1689920327148435,22.913235668945312,5.113121032714844C22.83573566894531,5.113121032714844,22.75633566894531,5.114923362714844,22.67703566894531,5.118528042714844C20.58293566894531,5.194224432714844,18.182345668945313,5.978222032714844,15.933215668945312,7.448891032714844C17.349065668945315,7.490351032714844,18.436655668945313,7.955341032714844,18.898375668945313,8.843871032714844Z"
                                    fill="#172A88" fill-opacity="1" style="mix-blend-mode:passthrough" />
                            </g>
                        </g>
                    </g>
                </g>
                <g>
                    <g>
                        <path
                            d="M3.8093366622924805,24.36883544921875L4.15563366229248,24.36883544921875L4.15563366229248,25.88997544921875L5.94302666229248,25.88997544921875L5.94302666229248,24.36883544921875L6.28932666229248,24.36883544921875L6.28932666229248,27.82022544921875L5.94302666229248,27.82022544921875L5.94302666229248,26.20176544921875L4.15563366229248,26.20176544921875L4.15563366229248,27.82022544921875L3.8093366622924805,27.82022544921875L3.8093366622924805,24.36883544921875Z"
                            fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough" />
                    </g>
                    <g>
                        <path
                            d="M6.9980573654174805,24.36883544921875L7.34435436541748,24.36883544921875L7.34435436541748,27.82022544921875L6.9980573654174805,27.82022544921875L6.9980573654174805,24.36883544921875Z"
                            fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough" />
                    </g>
                    <g>
                        <path
                            d="M8.04773998260498,24.36883544921875L8.514879982604981,24.36883544921875L10.44295998260498,27.23267544921875L10.45197998260498,27.23267544921875L10.45197998260498,24.36883544921875L10.798279982604981,24.36883544921875L10.798279982604981,27.82022544921875L10.45197998260498,27.82022544921875L8.40305498260498,24.78336044921875L8.39403698260498,24.78336044921875L8.39403698260498,27.82022544921875L8.04774067063498,27.82022544921875L8.04773998260498,24.36883544921875Z"
                            fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough" />
                    </g>
                    <g>
                        <path
                            d="M12.68314416229248,24.36883544921875L13.070924162292481,24.36883544921875L14.55531416229248,27.82022544921875L14.176554162292481,27.82022544921875L13.67694416229248,26.65774544921875L12.07171416229248,26.65774544921875L11.566697162292481,27.82022544921875L11.20777416229248,27.82022544921875L12.68314416229248,24.36883544921875ZM12.20337916229248,26.34775544921875L13.54347416229248,26.34775544921875L12.87974416229248,24.76173444921875L12.20337916229248,26.34775544921875Z"
                            fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough" />
                    </g>
                    <g>
                        <path
                            d="M20.94031810760498,24.36883544921875L22.83051810760498,24.36883544921875L22.83051810760498,24.68063144921875L21.28481210760498,24.68063144921875L21.28481210760498,25.92241544921875L22.77821810760498,25.92241544921875L22.77821810760498,26.23420544921875L21.28481210760498,26.23420544921875L21.28481210760498,27.50843544921875L22.83051810760498,27.50843544921875L22.83051810760498,27.82022544921875L20.94031810760498,27.82022544921875L20.94031810760498,24.36883544921875Z"
                            fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough" />
                    </g>
                    <g>
                        <path
                            d="M23.49769115447998,24.36883544921875L23.84398815447998,24.36883544921875L23.84398815447998,27.50843544921875L25.27246115447998,27.50843544921875L25.27246115447998,27.82022544921875L23.49769115447998,27.82022544921875L23.49769115447998,24.36883544921875Z"
                            fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough" />
                    </g>
                    <g>
                        <path
                            d="M26.803749631042482,24.36883544921875L27.19152963104248,24.36883544921875L28.67591963104248,27.82022544921875L28.29715963104248,27.82022544921875L27.79754963104248,26.65774544921875L26.19231963104248,26.65774544921875L25.68730263104248,27.82022544921875L25.32837963104248,27.82022544921875L26.803749631042482,24.36883544921875ZM26.322184631042482,26.34775544921875L27.66227963104248,26.34775544921875L26.99854963104248,24.76173444921875L26.322184631042482,26.34775544921875Z"
                            fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough" />
                    </g>
                    <g>
                        <rect x="14.74634838104248" y="25.92242431640625" width="1.8397027254104614"
                            height="0.31179681420326233" rx="0" fill="#FFFFFF" fill-opacity="1"
                            style="mix-blend-mode:passthrough" />
                    </g>
                    <g>
                        <g>
                            <path
                                d="M1.7277373654174806,27.472394375C0.9648023654174804,27.472394375,0.3461573654174805,26.854204375000002,0.3461573654174805,26.091834375C0.3461573654174805,25.329465375,0.9648033654174805,24.711277375,1.7277373654174806,24.711277375C2.1858573654174807,24.711277375,2.5916773654174805,24.934762375,2.8423773654174807,25.278998375L3.2499973654174803,25.278998375C2.9596173654174804,24.734705375,2.3860673654174804,24.365234375,1.7259373654174806,24.365234375C0.7718143654174805,24.365234375,-0.0019426345825195312,25.138417375,-0.0019426345825195312,26.091834375C-0.0019426345825195312,27.045244375,0.7718143654174805,27.818434375,1.7259373654174806,27.818434375C2.3914773654174803,27.818434375,2.9686373654174805,27.441754375,3.2572173654174805,26.890254375L2.8532073654174805,26.890254375C2.6043073654174806,27.241694375,2.1930773654174804,27.472394375,1.7277373654174806,27.472394375Z"
                                fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough" />
                        </g>
                    </g>
                    <g>
                        <g>
                            <path
                                d="M18.885826049499514,27.472394375C18.122889049499513,27.472394375,17.504245049499513,26.854204375000002,17.504245049499513,26.091834375C17.504245049499513,25.329465375,18.12289004949951,24.711277375,18.885826049499514,24.711277375C19.34394604949951,24.711277375,19.749766049499513,24.934762375,20.00046604949951,25.278998375L20.408086049499513,25.278998375C20.11770604949951,24.734705375,19.544156049499513,24.365234375,18.88402604949951,24.365234375C17.92990304949951,24.365234375,17.15614604949951,25.138417375,17.15614604949951,26.091834375C17.15614604949951,27.045244375,17.92990304949951,27.818434375,18.88402604949951,27.818434375C19.54956604949951,27.818434375,20.12672604949951,27.441754375,20.415306049499513,26.890254375L20.011296049499514,26.890254375C19.76238604949951,27.241694375,19.35296604949951,27.472394375,18.885826049499514,27.472394375Z"
                                fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough" />
                        </g>
                    </g>
                    <g>
                        <g>
                            <path
                                d="M30.468826232604982,27.472394375C29.70589123260498,27.472394375,29.08724623260498,26.854204375000002,29.08724623260498,26.091834375C29.08724623260498,25.329465375,29.70589223260498,24.711277375,30.468826232604982,24.711277375C30.92694623260498,24.711277375,31.332766232604982,24.934762375,31.58346623260498,25.278998375L31.99108623260498,25.278998375C31.70070623260498,24.734705375,31.12715623260498,24.365234375,30.46702623260498,24.365234375C29.51290323260498,24.365234375,28.73914623260498,25.138417375,28.73914623260498,26.091834375C28.73914623260498,27.045244375,29.51290323260498,27.818434375,30.46702623260498,27.818434375C31.13256623260498,27.818434375,31.70972623260498,27.441754375,31.998306232604982,26.890254375L31.594296232604982,26.890254375C31.34539623260498,27.241694375,30.93416623260498,27.472394375,30.468826232604982,27.472394375Z"
                                fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough" />
                        </g>
                    </g>
                </g>
                <g>
                    <g>
                        <path
                            d="M17.513444479003905,29.548583984375L17.513444479003905,31.639243984375C17.513444479003905,31.891563984375,17.551320479003905,32.120453984375,17.630681479003908,32.264643984375C17.839902479003907,32.652133984375,18.180793479003906,32.689983984375,18.344913479003907,32.689983984375C18.509053479003907,32.689983984375,18.849933479003905,32.652133984375,19.059153479003907,32.264643984375C19.138513479003905,32.120453984375,19.176393479003906,31.891563984375,19.176393479003906,31.639243984375L19.176393479003906,29.548583984375L19.522693479003905,29.548583984375L19.522693479003905,31.639243984375C19.522693479003905,31.927613984375,19.475793479003904,32.176323984375,19.392823479003905,32.358363984375C19.154743479003905,32.875623984375,18.669573479003905,33.001783984375,18.346723479003906,33.001783984375C18.023871479003905,33.001783984375,17.538694479003905,32.875623984375,17.300615479003906,32.358363984375C17.215844179003906,32.176333984375,17.170753479003906,31.929413984375,17.170753479003906,31.639243984375L17.170753479003906,29.548583984375L17.513444479003905,29.548583984375Z"
                            fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough" />
                    </g>
                    <g>
                        <path
                            d="M8.188575744628906,29.546783447265625L9.934485744628907,29.546783447265625L9.934485744628907,29.858579447265626L8.533068744628906,29.858579447265626L8.533068744628906,31.109373447265625L9.882185744628906,31.109373447265625L9.882185744628906,31.421163447265624L8.533068744628906,31.421163447265624L8.533068744628906,32.99817344726563L8.188575744628906,32.99817344726563L8.188575744628906,29.546783447265625Z"
                            fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough" />
                    </g>
                    <g>
                        <path
                            d="M14.310157775878906,29.548583984375L15.188525775878906,29.548583984375C15.650257775878906,29.548583984375,15.879317775878906,29.604454684375,16.038037775878905,29.678348984375C16.425817775878905,29.860379984375,16.654877775878905,30.238862984375,16.654877775878905,30.662403984375C16.654877775878905,31.161633984375,16.295957775878907,31.669883984375,15.628607775878907,31.711343984375L16.604377775878906,32.998173984375L16.169697775878905,32.998173984375L14.997340775878905,31.435583984375C15.435617775878907,31.435583984375,15.585327775878905,31.430183984375,15.740437775878906,31.385123984375C16.119197775878906,31.276983984375,16.310387775878908,30.959783984375,16.310387775878908,30.653393984375C16.310387775878908,30.383049984375,16.157077775878907,30.103693984375,15.931617775878905,29.990150984375C15.726007775878907,29.882011984375,15.549247775878907,29.860385984375,15.258867775878906,29.860385984375L14.656455775878907,29.860385984375L14.656455775878907,32.999983984375L14.310159151938906,32.999983984375L14.310157775878906,29.548583984375Z"
                            fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough" />
                    </g>
                    <g>
                        <path
                            d="M20.229443634628907,29.548583984375L20.761514244628906,29.548583984375L22.016838244628907,32.488123984375L23.277578244628906,29.548583984375L23.809648244628907,29.548583984375L23.809648244628907,32.999973984375L23.463348244628907,32.999973984375L23.463348244628907,29.925262984375L23.454328244628908,29.925262984375L22.161128244628905,32.999973984375L21.867138244628904,32.999973984375L20.582953244628907,29.925262984375L20.573935244628906,29.925262984375L20.573935244628906,32.999973984375L20.227638244628906,32.999973984375L20.227638244628906,29.548583984375L20.229443634628907,29.548583984375Z"
                            fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough" />
                    </g>
                    <g>
                        <g>
                            <path
                                d="M12.055257319335938,29.548568725585938C11.101134319335937,29.548568725585938,10.327377319335938,30.321751725585937,10.327377319335938,31.27516872558594C10.327377319335938,32.22857872558594,11.101134319335937,33.00176872558594,12.055257319335938,33.00176872558594C13.009377319335938,33.00176872558594,13.783137319335937,32.22857872558594,13.783137319335937,31.27516872558594C13.783137319335937,30.321754725585937,13.009377319335938,29.548568725585938,12.055257319335938,29.548568725585938ZM12.055257319335938,32.65572872558594C11.292320319335937,32.65572872558594,10.673674319335937,32.03753872558594,10.673674319335937,31.27516872558594C10.673674319335937,30.512796725585936,11.292320319335937,29.894608725585936,12.055257319335938,29.894608725585936C12.818187319335937,29.894608725585936,13.436837319335938,30.512794725585938,13.436837319335938,31.27516872558594C13.436837319335938,32.03753872558594,12.818187319335937,32.65572872558594,12.055257319335938,32.65572872558594Z"
                                fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough" />
                        </g>
                    </g>
                </g>
            </g>
        </svg>
        <h4 class="text" style="font-size: 1.5rem;" v-text="lang[langType].title"></h4>
        <div style="font-size: 1rem;margin-bottom: 30px;color: rgba(255,255,255,0.9);" class="text"
            v-html="lang[langType].marstContent"></div>

        <h4 class="text" style="font-size: 1.2rem;" v-text="lang[langType].wrestleMania"></h4>
        <p class="text" style="color: rgba(255,255,255,0.9);" v-html="lang[langType].wrestleManiaContent"></p>
        <div class="line"></div>
        <h4 class="text" style="font-size: 1.2rem;" v-text="lang[langType].venue"></h4>
        <p class="text" style="color: rgba(255,255,255,0.9);" v-html="lang[langType].venueContent"></p>
        <div class="line"></div>
        <h4 class="text" style="font-size: 1.2rem;color: rgba(255,255,255,0.9);" v-text="lang[langType].organization">
        </h4>
        <van-row style="color: rgba(255,255,255,0.9);">
            <van-col span="8">
                <div class="text" v-text="lang[langType].organizationSub1"></div>
            </van-col>
            <van-col span="16">
                <div class="text" style="padding-left: 2px;" v-html="lang[langType].organizationSub2"></div>
            </van-col>
        </van-row>
        <van-row>
            <van-col span="8">
                <div class="text" v-text="lang[langType].organizationSub3"></div>
            </van-col>
            <van-col span="16">
                <div class="text" style="padding-left: 2px;" v-html="lang[langType].organizationSub4"></div>
            </van-col>
        </van-row>
        <van-button class="btn_bottom" block type="primary" @click="showCheck = true, code = 'fore25'">
            {{ lang[langType].signUp }}
        </van-button>
        <van-button class="btn_bottom" block type="primary" @click="showCheck = true, code = 'chin25'">
            {{ lang[langType].signUpZH }}
        </van-button>
        <van-button class="btn_bottom" block type="primary" @click="showCheck = true, code = 'work25'">
            {{ lang[langType].signUpWK }}
        </van-button>

        <p class="tologo" v-html="lang[langType].tologoText + '>>'" @click="showLogin = true"></p>
        <p class="tologo" style="margin-top: 1em;margin-bottom: 1em;font-size: 0.9rem;color: rgba(255,255,255,0.8)">
            {{ lang[langType].technicalAdvice }}
        </p>

        <!-- 邀请码校验 -->
        <van-dialog destroy-on-close :confirmButtonText="lang[langType].confirm"
            :cancelButtonText="lang[langType].cancel" @confirm="checkVerificationCode" v-model:show="showCheck"
            :title="lang[langType].verificationCode" show-cancel-button>
            <van-field size="large" v-model="verificationCode" :placeholder="lang[langType].verificationCodeContent"
                required
                :rules="[{ required: true, trigger: 'onBlur', pattern: /[a-zA-Z0-9]/g, message: lang[langType].verificationCodeContent }]" />
            />
        </van-dialog>

        <!-- 登录框 -->
        <van-dialog close-on-click-overlay destroy-on-close :show-confirm-button="false" v-model:show="showLogin">
            <br />
            <van-form @submit="saveLogin">
                <van-cell-group inset>
                    <van-field size="large" v-model="form.verificationCode" name="verificationCode"
                        :label="lang[langType].verificationCode" :placeholder="lang[langType].verificationCodeContent"
                        required
                        :rules="[{ required: true, trigger: 'onBlur', pattern: /[a-zA-Z0-9]/g, message: lang[langType].verificationCodeContent }]" />
                    <van-field size="large" v-model="form.password" name="password" :label="lang[langType].passport"
                        :placeholder="lang[langType].passportContent" required
                        :rules="[{ required: true, message: lang[langType].passportContent }]" />
                    <p style="color: red;font-size: 0.9rem;line-height: 1.5em;height: 1.5em;text-align: center;" v-text="lang[langType].timesText"></p>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" size="small" native-type="submit">
                        {{ lang[langType].login }}
                    </van-button>
                </div>
            </van-form>
        </van-dialog>
    </div>
</template>
<script setup>
import { defineProps, ref, defineEmits, reactive, onMounted } from 'vue';
import { checkCode, getUserInfo } from '@/api/2025.js';
import { showToast } from 'vant';
import init, { encrypt, decrypt } from "./wasm_encrypt.min.js";
import lang from './lang.js';
const showCheck = ref(false);
const verificationCode = ref('');
const showLogin = ref(false);
const form = reactive({})
const props = defineProps(['langType']);
const emits = defineEmits(['saveData']);
let code = '';

onMounted(async () => {
    await init();
})

const checkVerificationCode = () => {
    let userType = lang[props.langType].distinguishedGuest[code];
    const RCode = Math.random().toString(32).substring(2, 15);
    const data = encrypt({
        code: verificationCode.value.toLowerCase().trim(),
        userType,
        randomCode: RCode
    })
    checkCode({
        token: data
    }).then((res) => {
        const token = decrypt(res.token).randomCode
        if (token !== RCode) {
            showToast(lang[props.langType].verificationCodeError);
            return;
        }
        emits('saveData', code, verificationCode.value.toLowerCase().trim());
    }).catch((res) => {
        console.log(res);
        showToast(res.msg || lang[props.langType].verificationCodeError);
    })
}

const saveLogin = () => {
    const RCode = Math.random().toString(32).substring(2, 15);
    const data = encrypt({
        "code": form.verificationCode.toLowerCase().trim(),
        "idCard": form.password,
        randomCode: RCode
    })
    getUserInfo({
        token: data
    }).then((res) => {
        const token = decrypt(res.token)
        if (token.randomCode !== RCode) {
            showToast(lang[props.langType].verificationCodeError);
            return;
        }
        const userType = token.userType;
        const keysList = Object.keys(lang[props.langType].distinguishedGuest); // 获取对象的所有键名组成的数组
        for (let ii = 0; ii < keysList.length; ii++) {
            const keys = keysList[ii];
            const value = lang[props.langType].distinguishedGuest[keys];  // 获取对象的所有键名组成的数组
            value === userType ? code = keys + 'Recurrence' : '';
        }
        emits('saveData', code, form.verificationCode.toLowerCase().trim(), token);
    }).catch((res) => {
        showToast(res.msg || lang[props.langType].networkError);
    })
}
</script>

<style lang="scss">
.introduce {
    padding-top: 30px;
    box-sizing: border-box;
    color: #ffffff;
    padding-bottom: 10px;
    overflow: hidden;
    position: relative;
    background: url('../../assets/img/2025lameifenghui.png') no-repeat 100% 100%;
    width: 100%;
    min-height: 100vh;
    overflow-y: scroll;
    background-size: 100% 100%;

    .img {
        box-sizing: border-box;
        position: relative;
        top: 24px;
        left: 26px;
        width: 32px;
        height: 32px;
        margin-bottom: 16px;
    }

    .text {
        box-sizing: border-box;
        padding: 4px 8px 0 30px;
        line-height: 1.75em;
        font-size: 1rem;
    }

    .line {
        width: 16px;
        height: 1px;
        background-color: #FFFFFF00;
        margin: 5px auto 5px 30px;
    }

    .btn_bottom {
        background-color: #ffffff;
        text-align: center;
        color: #001770;
        width: calc(100% - 40px);
        margin: 24px auto 21px auto;
        font-size: 1rem;
    }

    .tologo {
        font-size: 1rem;
        text-align: center;
    }
}
</style>