<template>
  <div v-loading="loading" class="app-container">
    <div class="mt30" />
    <div v-if="error">
      <el-result
        :title="language==0?'未找到赛事':'No Data'"
        icon="error"
      >
        <template #extra />
      </el-result>
    </div>
    <div v-else class="box mb20">
      <el-card class="mb20">
        <el-row :gutter="20" align="middle">
          <el-col :lg="matchData.type=='0'?7:8" :md="12" :xl="6">
            <div class="popo">
              <el-tag v-if="matchData.signType==0">{{ language == 0 ? '个人' : 'Individual' }}</el-tag>
              <el-tag v-if="matchData.signType==1">{{ language == 0 ? '团体' : 'Team' }}</el-tag>
              <el-tag v-if="matchData.signType==2">{{ language == 0 ? '个人/团体' : 'Individual/Team' }}</el-tag>
            </div>
            
            <img :src="fillImgUrl(matchData.coverUrl)" class="mauto w100 as16_9">
          </el-col>
          <el-col :lg="matchData.type=='0'?9:16" :md="12" :xl="10" style="position: relative">
            <h3 style="margin: 0 0 10px">{{ matchData.name }}</h3>
            <div v-if="matchData.type=='1'">
              <p class="ppl">
                <label class="bm2">{{ language == 0 ? '赛事级别' : 'EVENT LEVEL' }}：</label>
                {{ matchData.level }}</p>
              <p class="ppl">
                <label class="bm1">{{ language == 0 ? '赛事时间' : 'COMPETITION DATE' }}：</label>
                {{ matchData.beginTime?.slice(0, 10) }} ~
                {{ matchData.endTime?.slice(0, 10) }}</p>
              <p v-if="matchData.address" class="ppl">
                <label class="bm3">
                  {{ language == 0 ? '地&nbsp;&nbsp;&nbsp;&nbsp;点' : 'LOCATION' }}：
                </label>
                {{ matchData.address }}</p>
              <!--            <p class="ppl" v-if="matchData.signEndTime"><label class="bm4">Registration Deadline：</label>{{ matchData.signEndTime?.slice(0, 10) }}</p>-->
              
              <p class="ppl"><label>
                <svg
                  class="icon" height="18" p-id="37235" style="position: relative;top: 3px;"
                  t="1712726889323"
                  version="1.1" viewBox="0 0 1024 1024" width="18" xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M290.88 128H928V96a64 64 0 0 0-64-64H288a192 192 0 0 0-192 192v576a192 192 0 0 0 192 192h576a64 64 0 0 0 64-64V320a64 64 0 0 0-64-64H290.88A64 64 0 0 1 224 192a64 64 0 0 1 66.88-64z m77.12 608l96-22.72v-29.12a123.2 123.2 0 0 1-58.24-84.48c-29.76-2.24-24.64-41.28-24.64-41.28 0-19.84 10.24-26.24 18.56-27.84v-19.2c0-148.48 128-128 128-128a128 128 0 0 1 55.04 5.12c34.56 11.2 72.32 42.24 72.32 123.2v19.2c8.32 1.92 18.56 8 18.56 28.16 0 0 5.12 39.04-24.64 41.28a123.2 123.2 0 0 1-58.24 84.48v29.12l96 22.72c47.04 16.64 0 96 0 96h-320S320 752 368 736z"
                    fill="#d3d8d9" p-id="37236"
                  />
                </svg>
                {{ language == 0 ? '联&nbsp;系&nbsp;人' : 'CONTACT PERSON' }}：</label>{{ matchData.contactPerson }}
              </p>
              
              <p class="ppl">
                <label>
                  <svg
                    class="icon" height="20" p-id="7920" style="position: relative;top: 2px;"
                    t="1711708779620" version="1.1" viewBox="0 0 1024 1024" width="20"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M398.652952 165.692952c-32.280381-46.006857-58.172952-61.318095-92.867047-54.808381-14.969905 2.80381-24.210286 7.850667-41.20381 22.528l-12.946285 11.361524-25.185524 20.894476-6.582857 5.753905c-3.705905 3.413333-6.38781 6.217143-9.825524 10.118095-64 72.46019-81.724952 185.782857-44.470857 292.327619 26.794667 76.55619 74.605714 152.624762 142.774857 228.644572 72.289524 80.62781 133.046857 131.364571 202.922666 168.374857 54.857143 29.013333 96.865524 41.74019 145.676191 43.227429 59.001905 1.828571 110.957714-11.50781 153.648762-39.15581a162.133333 162.133333 0 0 0 19.553524-15.189333l8.289523-7.558095 16.335239-15.213715 5.534476-4.924952 10.922666-9.435429c22.040381-19.651048 29.184-31.939048 30.646858-51.370666 2.194286-29.647238-11.215238-52.736-49.737143-85.699048l-26.063238-21.820952-12.117334-10.581334-11.459047-9.825524c-37.229714-30.744381-64.804571-40.69181-100.205715-35.35238-24.283429 3.632762-38.278095 12.141714-63.073523 38.107428l-10.947048 11.654095c-18.041905 19.017143-28.330667 26.258286-43.544381 29.305905-22.25981 4.461714-44.373333-7.046095-80.262095-36.205714-46.250667-37.546667-84.626286-80.676571-117.613715-131.949714-22.869333-35.766857-31.890286-62.902857-24.941714-87.600762 2.82819-9.99619 9.679238-17.042286 24.064-28.184381l14.994286-11.312762 2.413714-1.877334 22.747429-18.553904c20.114286-16.822857 28.281905-28.281905 32.572952-45.836191 8.899048-36.10819 0.487619-66.072381-32.426667-117.638095l-15.62819-24.234667-5.558857-8.533333-6.436572-9.435429z"
                      fill="#d3d8d9" p-id="7921"
                    />
                  </svg>
                  {{ language == 0 ? '联系电话' : 'TEL' }}：</label>086-{{ matchData.contactTelno }}
              </p>
              <p class="ppl">
                <label>
                  <svg
                    class="icon" height="18" p-id="40177" style="position: relative;top: 4px;"
                    t="1712726978978" version="1.1" viewBox="0 0 1024 1024"
                    width="18" xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M853.333333 341.333333l-341.333333 213.333334-341.333333-213.333334V256l341.333333 213.333333 341.333333-213.333333m0-85.333333H170.666667c-47.36 0-85.333333 37.973333-85.333334 85.333333v512a85.333333 85.333333 0 0 0 85.333334 85.333333h682.666666a85.333333 85.333333 0 0 0 85.333334-85.333333V256a85.333333 85.333333 0 0 0-85.333334-85.333333z"
                      fill="#d3d8d9" p-id="40178"
                    />
                  </svg>
                  {{ language == 0 ? '邮&nbsp;&nbsp;&nbsp;&nbsp;箱' : 'EMAIL' }}：
                </label>
                {{ matchData.contactEmail }}
                
                <!--                <span class="father">-->
                <!--                  <div class="son2">-->
                <!--                    <div v-if="matchData.chatQrcode">-->
                <!--                      <div class="qrTitle">{{ language == 0 ? '群二维码' : 'WhatsApp' }}</div>-->
                <!--                      <el-image-->
                <!--                        :preview-src-list="[fillImgUrl(matchData.chatQrcode)]"-->
                <!--                        :src="fillImgUrl(matchData.chatQrcode)"-->
                <!--                        fit="cover"-->
                <!--                        preview-teleported-->
                <!--                        style="width: 100px;height: 100px;margin-left: 10px"-->
                <!--                      />-->
                <!--                    </div>-->
                <!--                    <div v-if="matchData.liveQrcode">-->
                <!--                      <div class="qrTitle">{{ language == 0 ? '赛事直播' : "Live Qrcode" }}</div>-->
                <!--                      <el-image-->
                <!--                        :preview-src-list="[fillImgUrl(matchData.liveQrcode) ]"-->
                <!--                        :src="fillImgUrl(matchData.liveQrcode)"-->
                <!--                        fit="cover"-->
                <!--                        preview-teleported-->
                <!--                        style="width: 100px;height: 100px;margin-left: 10px"-->
                <!--                      />-->
                <!--                    </div>-->
                <!--                    {{ matchData.cptQrcode }}-->
                <!--                    <div v-if="matchData.qrcode">-->
                <!--                      <div class="qrTitle">{{ language == 0 ? '小程序' : "UniApp" }}</div>-->
                <!--                      <el-image-->
                <!--                        v-if="matchData.qrcode"-->
                <!--                        :preview-src-list="[fillImgUrl(matchData.qrcode)]"-->
                <!--                        :src="fillImgUrl(matchData.qrcode)"-->
                <!--                        fit="cover"-->
                <!--                        preview-teleported-->
                <!--                        style="width: 100px;height: 100px;margin-left: 10px"-->
                <!--                      />-->
                <!--                    </div>-->
                <!--          -->
                <!--                  </div>-->
                <!--                </span>-->
              </p>
              <p class="ppl">
                <label>
                  <svg
                    class="icon" height="18" p-id="6578" style="position: relative;top: 2px;"
                    t="1711707785514" version="1.1" viewBox="0 0 1024 1024"
                    width="18" xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M780 68H256c-71.6 0-130.2 55.5-130.2 123.2v711.2c1.5 42.8 50 69.3 90.6 50.6l227.2-105c38.5-17.8 83.4-18.5 122.6-1.9l255.4 108.6c34.8 14.8 76.1-2.7 86.3-37.6 1.6-5.4 2.4-11 2.4-16.9v-709C910.2 123.5 851.6 68 780 68zM276.9 231.3h255.9c23.9 0 43.3 18.4 43.3 41s-19.4 41-43.3 41H276.9c-23.9 0-43.3-18.4-43.3-41s19.4-41 43.3-41z m386.8 464H276.9c-23.9 0-43.3-18.4-43.3-41s19.4-41 43.3-41h386.8c23.9 0 43.3 18.4 43.3 41s-19.4 41-43.3 41z m0-191H276.9c-23.9 0-43.3-18.4-43.3-41s19.4-41 43.3-41h386.8c23.9 0 43.3 18.4 43.3 41s-19.4 41-43.3 41z"
                      fill="#d3d8d9" p-id="6579"
                    />
                  </svg>
                  {{ language == 0 ? '分&nbsp;站&nbsp;赛' : 'NO. OF TOURNAMENTS' }}：</label>
                {{ matchData.cpts.length }}
              </p>
              <div class="father">
                <div class="son2">
                  <div v-if="matchData.chatQrcode">
                    <div class="qrTitle">{{ language == 0 ? '群二维码' : 'WhatsApp' }}</div>
                    <el-image
                      :preview-src-list="[fillImgUrl(matchData.chatQrcode)]"
                      :src="fillImgUrl(matchData.chatQrcode)"
                      fit="cover"
                      preview-teleported
                      style="width: 100px;height: 100px;margin-left: 10px"
                    />
                  </div>
                  <div v-if="matchData.liveQrcode">
                    <div class="qrTitle">{{ language == 0 ? '赛事直播' : "Live Qrcode" }}</div>
                    <el-image
                      :preview-src-list="[fillImgUrl(matchData.liveQrcode) ]"
                      :src="fillImgUrl(matchData.liveQrcode)"
                      fit="cover"
                      preview-teleported
                      style="width: 100px;height: 100px;margin-left: 10px"
                    />
                  </div>
                  {{ matchData.cptQrcode }}
                  <div v-if="matchData.qrcode">
                    <div class="qrTitle">{{ language == 0 ? '小程序' : "UniApp" }}</div>
                    <el-image
                      v-if="matchData.qrcode"
                      :preview-src-list="[fillImgUrl(matchData.qrcode)]"
                      :src="fillImgUrl(matchData.qrcode)"
                      fit="cover"
                      preview-teleported
                      style="width: 100px;height: 100px;margin-left: 10px"
                    />
                  </div>
                
                </div>
              </div>
            </div>
            
            <div v-if="matchData.type=='0'">
              <p class="ppl">
                <label>{{ language == 0 ? '赛事时间' : 'COMPETITION DATE' }}：</label>
                {{ matchData.beginTime?.slice(0, 10) }} ~ {{ matchData.endTime?.slice(0, 10) }}
              </p>
              <p class="ppl esp">
                <label>{{ language == 0 ? '地&nbsp;&nbsp;&nbsp;&nbsp;点' : 'LOCATION' }}：</label>
                {{ matchData.address }}
              </p>
              <p class="ppl"><label>{{ language == 0 ? '赛事级别' : 'EVENT LEVEL' }}：</label>{{ matchData.level }}</p>
              <!--              <p class="ppl">-->
              <!--                <label>{{ language == 0 ? '报名截止' : 'Registration Deadline' }}：</label>-->
              <!--                {{ matchData.signEndTime?.slice(0, 10) }}-->
              <!--              </p>-->
              <p v-if="matchData.contactPerson" class="ppl">
                <label>{{ language == 0 ? '联&nbsp;系&nbsp;人' : 'CONTACT PERSON' }}：</label>
                {{ matchData.contactPerson }}
              </p>
              <p class="ppl"><label>{{ language == 0 ? '联系电话' : 'TEL' }}：</label>
                086-{{ matchData.contactTelno }}
              </p>
              <p v-if="matchData.contactEmail" class="ppl">
                <label>{{ language == 0 ? '邮&nbsp;&nbsp;&nbsp;&nbsp;箱' : 'EMAIL' }}：</label>
                {{ matchData.contactEmail }}
                <!--                <span class="father">-->
                <!--                  <div v-if="matchData.type!=1" class="son">-->
                <!--                    <div v-if="matchData.chatQrcode">-->
                <!--                      <div class="qrTitle2">{{ language == 0 ? '赛事直播' : "Live Qrcode" }}</div>-->
                <!--                      <el-image-->
                <!--                        :preview-src-list="[fillImgUrl(matchData.chatQrcode)]"-->
                <!--                        :src="fillImgUrl(matchData.chatQrcode)"-->
                <!--                        fit="cover"-->
                <!--                        preview-teleported-->
                <!--                        style="width: 50px;height: 50px;margin-left: 10px"-->
                <!--                      />-->
                <!--                    </div>-->
                <!--                    <div v-if="matchData.liveQrcode">-->
                <!--                      <div class="qrTitle2">{{ language == 0 ? '群二维码' : 'WhatsApp' }}</div>-->
                <!--                      <el-image-->
                <!--                        :preview-src-list="[fillImgUrl(matchData.liveQrcode) ]"-->
                <!--                        :src="fillImgUrl(matchData.liveQrcode)"-->
                <!--                        fit="cover"-->
                <!--                        preview-teleported-->
                <!--                        style="width: 50px;height: 50px;margin-left: 10px"-->
                <!--                      />-->
                <!--                    </div>-->
                <!--                    <div v-if="matchData.qrcode">-->
                <!--                      <div class="qrTitle2">{{ language == 0 ? '小程序' : "UniApp" }}</div>-->
                <!--                      <el-image-->
                <!--                        v-if="matchData.qrcode"-->
                <!--                        :preview-src-list="[fillImgUrl(matchData.qrcode)]"-->
                <!--                        :src="fillImgUrl(matchData.qrcode)"-->
                <!--                        fit="cover"-->
                <!--                        preview-teleported-->
                <!--                        style="width: 50px;height: 50px;margin-left: 10px"-->
                <!--                      />-->
                <!--                    </div>-->
                <!--                  </div>-->
                <!--                </span>-->
              </p>
              <div v-if="matchData.chatQrcode||matchData.liveQrcode||matchData.qrcode">
                <div class="father">
                  <div v-if="matchData.type!=1" class="son">
                    <div v-if="matchData.chatQrcode">
                      <div class="qrTitle2">{{ language == 0 ? '赛事直播' : "Live Qrcode" }}</div>
                      <el-image
                        :preview-src-list="[fillImgUrl(matchData.chatQrcode)]"
                        :src="fillImgUrl(matchData.chatQrcode)"
                        fit="cover"
                        preview-teleported
                        style="width: 50px;height: 50px;margin-left: 10px"
                      />
                    </div>
                    <div v-if="matchData.liveQrcode">
                      <div class="qrTitle2">{{ language == 0 ? '群二维码' : 'WhatsApp' }}</div>
                      <el-image
                        :preview-src-list="[fillImgUrl(matchData.liveQrcode) ]"
                        :src="fillImgUrl(matchData.liveQrcode)"
                        fit="cover"
                        preview-teleported
                        style="width: 50px;height: 50px;margin-left: 10px"
                      />
                    </div>
                    <div v-if="matchData.qrcode">
                      <div class="qrTitle2">{{ language == 0 ? '小程序' : "UniApp" }}</div>
                      <el-image
                        v-if="matchData.qrcode"
                        :preview-src-list="[fillImgUrl(matchData.qrcode)]"
                        :src="fillImgUrl(matchData.qrcode)"
                        fit="cover"
                        preview-teleported
                        style="width: 50px;height: 50px;margin-left: 10px"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <div style="height: 30px" />
            <div class="ppl_pb">
              <el-link
                v-if="matchData.signKnowUrl&&JSON.parse(matchData.signKnowUrl)?.length>0"
                :href="fillImgUrl(JSON.parse(matchData.signKnowUrl)[0]?.url)"
                class="mr20"
                target="_blank" type="primary"
              >
                <el-icon :size="20">
                  <Download />
                </el-icon>
                {{ language == 0 ? '报名须知' : 'Notes' }}
              </el-link>
              
              <el-link
                v-if="matchData.disclaimerUrl&&JSON.parse(matchData.disclaimerUrl)?.length>0"
                :href="fillImgUrl(JSON.parse(matchData.disclaimerUrl)[0]?.url)"
                class="mr20"
                target="_blank" type="primary"
              >
                <el-icon :size="20">
                  <Download />
                </el-icon>
                {{ language == 0 ? '免责声明' : 'Disclaimers' }}
              </el-link>
              <el-link
                v-if="matchData.ruleUrl&&JSON.parse(matchData.ruleUrl)?.length>0"
                :href="fillImgUrl(JSON.parse(matchData.ruleUrl)[0]?.url)"
                target="_blank"
                type="primary"
              >
                <el-icon :size="20">
                  <Download />
                </el-icon>
                {{ language == 0 ? '赛事规程' : 'Competition Regulations' }}
              </el-link>
            </div>
          
          </el-col>
          <el-col v-if="matchData.type=='0'" :lg="8" :md="12" :xl="8">
            <p v-if="language==0" class="countDownTitle">
              <span v-if="startSign>0">报名开始倒计时</span>
              <span v-else>报名截止倒计时</span>
            </p>
            <p v-else class="countDownTitle">
              <span>REGISTRATION COUNTDOWN</span>
            </p>
            
            <van-count-down :time="startSign>0?startSign:time" format="DD 天 HH 时 mm 分 ss 秒">
              <template #default="timeData">
                <span class="block">{{ timeData.days }}</span>
                <span class="colon">{{ language == 0 ? '天' : 'Days' }}</span>
                <span class="block">{{ timeData.hours }}</span>
                <span class="colon">{{ language == 0 ? '时' : 'Hrs' }}</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">{{ language == 0 ? '分' : 'Min' }}</span>
                <span class="block">{{ timeData.seconds }}</span>
                <span class="colon">{{ language == 0 ? '秒' : 'Sec' }}</span>
              </template>
            </van-count-down>
            
            <div class="flexCenter">
              <el-button
                v-if="matchData.progressStatusCode=='2'" ref="RegisterRef" class="btn-lineG mt10 w100" round
                style="font-size: 16px"
                type="primary" @click="choseSignType"
              >
                {{ language == 0 ? '我要报名' : 'REGISTER' }}
              </el-button>
              <div v-else-if="time<=0" class="btn-lineG mb20 mauto text-center" style="opacity: 0.5;">
                {{ language == 0 ? '报名已结束' : 'Registration has ended' }}
              </div>
              <div v-else-if="startSign>0" class="btn-lineG mb20 mauto text-center" style="opacity: 0.5;">
                {{ language == 0 ? '报名未开始' : 'Not started yet' }}
              </div>
            </div>
            <p class="text-gray text-center uppercase">{{
              language == 0 ? '报名截止' : 'Registration Deadline'
            }}：{{ matchData.signEndTime?.slice(0, 10) }}</p>
          
          </el-col>
        
        </el-row>
      
      </el-card>
      
      <!--      只联赛有-->
      <quick-row v-if="matchData.leagueId==0" :match-id="matchId" />
      
      <el-row v-if="matchData.type=='0'" :gutter="20">
        <el-col :lg="18">
          <el-card :body-style="{'padding':'0'}">
            <div class="lineHead">
              <ul>
                <li v-for="l in menu" :key="l.name" :class="l.active==1?'active':''" @click="changeMenu(menu,l)">
                  {{ language == 0 ? l.cn : l.name }}
                </li>
              </ul>
            </div>
            <matchInfo v-if="menu[0].active==1" :form="matchData" />
            <div v-if="menu[1].active==1">
              <match-info-project-list :is-national="isNational" :match-id="matchData.id" />
            </div>
            <match-schedule-list v-if="menu[2].active==1" :match-data="matchData" />
            <div v-if="menu[3].active==1">
              <div v-if="matchData.showPersonFlag=='1'">
                <!--                <el-row :gutter="20" v-if="matchData.signType == '0'">-->
                <!--                  <el-col v-for="t in signDoneGroupList" :key="t.id" :span="8">-->
                <!--                    <div class="teamItem">-->
                <!--                      <el-avatar :size="60" :src="fillImgUrl(t.imgUrl||t.avatar)"/>-->
                <!--                      <span class="name">{{ t.name }}</span>-->
                <!--                    </div>-->
                <!--                  </el-col>-->
                <!--                </el-row>-->
                <el-row :gutter="20" class="pd20">
                  <el-col :span="24">
                    <div class="fr mb20">
                      <div class="flex">
                        <el-input
                          v-model="queryGroupList.groupName"
                          :placeholder="language == 0 ? '请输入参赛队名称' :'Please enter the Team name'"
                          :prefix-icon="Search" class="mr10"
                          clearable
                          size="small" @change="getGroupListByCptId"
                        />
                        <el-input
                          v-model="queryGroupList.athleteName"
                          :placeholder=" language == 0 ? '请输入运动员查询' :'Please enter the athlete name'"
                          :prefix-icon="Search"
                          clearable
                          size="small" @change="getGroupListByCptId"
                        />
                      </div>
                    </div>
                    <el-table :data="signDoneGroupList">
                      <el-table-column
                        :label="language == 0 ? '组别代码' :'EVENT CODE'" align="center" min-width="120"
                        prop="groupCode"
                      />
                      <el-table-column :label="language == 0 ?'组别':'EVENT'" min-width="200" prop="group">
                        <template #default="scope">
                          <div class="esp">{{ scope.row.group }}</div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        :label="language == 0 ?'男运动员':'man name'" min-width="150"
                        prop="maleAthName"
                      />
                      <el-table-column
                        :label="language == 0 ?'女运动员':'woman name'" min-width="150"
                        prop="femaleAthName"
                      />
                      <el-table-column
                        :label="language == 0 ?'舞种':'Division'" align="center" min-width="90"
                        prop="danceType"
                      />
                      <el-table-column
                        :label="language == 0 ?'国籍':'Representing'" align="center" min-width="130"
                        prop="countryName"
                      />
                      <el-table-column
                        :label="language == 0 ?'参赛队名称':'Team name'" align="center" min-width="150"
                        prop="groupName"
                      />
                    </el-table>
                    <PaginationPc
                      v-show="signDoneGroupListToTal>0"
                      v-model:limit="queryGroupList.pageSize"
                      v-model:page="queryGroupList.pageNum"
                      :total="signDoneGroupListToTal"
                      @pagination="getGroupListByCptId"
                    />
                  </el-col>
                </el-row>
              </div>
              <div v-else>
                <el-empty :image="`/img/order_no.png`" :image-size="228" description="" />
              </div>
            
            </div>
            <div v-if="menu[4].active==1">
              <!--              &lt;!&ndash;成绩&ndash;&gt;-->
              <!--              <el-empty :image="`/img/order_no.png`" :image-size="228" description="" />-->
              
              <matchPerformance :match-data="matchData" />
            </div>
            <div v-if="menu[5].active==1" class="pd20">
              <div class="xzbox">
                <div v-html="matchData.signKnow" />
                <div v-if="matchData.signKnowUrl">
                  <el-link
                    v-for="(item,index) in JSON.parse(matchData.signKnowUrl)" :key="index" :href="fillImgUrl(item.url)"
                    target="_blank" type="primary"
                  >
                    <el-icon :size="20">
                      <Download />
                    </el-icon>
                    {{ item.name }}
                  </el-link>
                </div>
              </div>
            </div>
          </el-card>
          <div style="height: 20px" />
        
        </el-col>
        <el-col :lg="6">
          <match-news :match-id="matchId" />
        </el-col>
      </el-row>
      
      <el-row v-if="matchData.type=='1'" class="mb20">
        <el-col :lg="24">
          <el-card :body-style="{'padding':'0'}">
            <div class="lineHead">
              <ul>
                <li v-for="l in menu1" :key="l.name" :class="l.active==1?'active':''" @click="changeMenu(menu1,l)">
                  {{ language == 0 ? l.cn : l.name }}
                </li>
              </ul>
            </div>
            <!--            分站赛-->
            <substation-list v-if="menu1[0].active==1" :list="matchData.cpts" />
            <matchInfo v-if="menu1[1].active==1" :form="matchData" />
            <match-schedule-list v-if="menu1[2].active==1" :match-data="matchData" />
            <!--            <matchPerformance v-if="menu1[3].active==1" :match-data="matchData" />-->
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <div v-if="matchData.leagueId==0" class="fixed_gg_l" @click="applyInvitation">
      <img v-if="language==0" src="@/assets/logo/Invitation_c.png">
      <img v-else src="@/assets/logo/Invitation_e.png">
    </div>
    
    <affix-invitation ref="dialogInvitationRef" />
    <div style="height: 50px" />
    
    <el-dialog
      v-model="signTypePop" center class="pcloginpop"
      close-icon="CircleClose" title="Choose Type" width="450px"
    >
      <div>
        <div class="rItem r1" @click="goLogin">
          <h3>{{ language == 0 ? '机构用户' : 'Organization' }}</h3>
        </div>
        <div class="rItem r2" @click="goGeren">
          <h3>{{ language == 0 ? '个人用户' : 'Individual' }}</h3>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      v-model="upgradePop" center class="pcloginpop"
      close-icon="CircleClose" title="Upgrade" width="450px"
    >
      <div>
        <div class="rItem r1" @click="goUpdateTeam">
          <h3>{{ language == 0 ? '升级机构用户' : 'Organization' }}</h3>
        </div>
        <div class="rItem r2" @click="goUpdatePersonal">
          <h3>{{ language == 0 ? '升级个人用户' : 'Individual' }}</h3>
        </div>
      </div>
    </el-dialog>
    
    <!--    v-if="matchData.leagueId==0"-->
    <a
      v-if="matchData.isAirView" class="ding"
      @click="openPickup"
    >{{ language == 0 ? '接 / 送机服务' : 'Pick-up/drop-off service' }}</a>
    <pickup ref="pickupRef" />
    
    <checkAllSportsman ref="checkAllSportsmanRef" />
    <LoginDialog ref="pcloginDialog" @submitForm="reFlash" />
  </div>
</template>

<script setup>
import MatchInfo from '@/viewsPc/match/components/matchInfo'
import MatchScheduleList from '@/viewsPc/match/components/matchScheduleList'
import MatchNews from '@/viewsPc/match/components/matchNews'
import SubstationList from '@/viewsPc/match/components/substation-list'
import MatchInfoProjectList from '@/viewsPc/match/components/matchInfo-projectList'
import QuickRow from '@/viewsPc/match/components/quick-row'
import Pickup from '@/viewsPc/components/pickup'
import matchPerformance from '@/viewsPc/match/components/matchPerformance.vue'


import { getCurrentInstance, ref, watch } from 'vue'
import { reactive, onMounted } from '@vue/runtime-core'
import { useRoute, useRouter } from 'vue-router'
import AffixInvitation from '@/viewsPc/match/components/affix-invitation'
import checkAllSportsman from '@/viewsPc/match/components/checkAllSportsman'
import LoginDialog from '@/viewsPc/login'

const language = useStorage('language', 0)
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()
import * as match from '@/apiPc/match'
import { toRefs } from '@vueuse/shared'
import { dayjs, ElMessage, ElMessageBox } from 'element-plus'
import useUserStore from '@/store/modules/user'
import { useStorage } from '@vueuse/core/index'
import { Search } from '@element-plus/icons-vue'
import { preCheckForGroup } from '@/apiPc/match'
import { fillImgUrl } from '/@/utils/ruoyi'

const qrUrl = ref()
const user = useUserStore().user
const group = useUserStore().group
const data = reactive({
  error: false,
  loading: false,
  matchData: {},
  matchId: '0',
  groupId: '',
  activeName2: 'first',
  menu: [
    { name: 'Event details', cn: '赛事详情', active: 1 },
    { name: 'Event settings', cn: '赛事设项', active: 0 },
    { name: 'Schedule', cn: '日程', active: 0 },
    { name: 'Participating teams', cn: '参赛人员', active: 0 },
    { name: 'Achievement', cn: '成绩', active: 0 },
    { name: 'Notes', cn: '报名须知', active: 0 }
  ],
  menu1: [
    { name: 'Tournaments', cn: '分站赛', active: 1 },
    { name: 'Event details', cn: '赛事详情', active: 0 },
    { name: 'Schedule', cn: '日程', active: 0 }
    // { name: 'Achievement', cn: '成绩', active: 0 }
  ],
  
  signDoneGroupList: [],
  signDoneGroupListToTal: 0,
  queryGroupList: {
    name: '',
    pageSize: 10,
    pageNum: 1
  },
  time: '',
  startSign: '',
  isNational: false
})

const {
  error,
  loading,
  matchData,
  matchId,
  groupId,
  menu,
  menu1,
  signDoneGroupList, signDoneGroupListToTal, queryGroupList,
  time, startSign, isNational
} = toRefs(data)

const signTypePop = ref(false)
const upgradePop = ref(false)

onMounted(() => {
  if (group) {
    groupId.value = group.id
  } else {
    groupId.value = 0
  }
  if (route.params.id != 0) {
    matchId.value = route.params.id
    getMatch(matchId.value)
    getGroupListByCptId(matchId.value)
  } else {
    getMatchId()
  }
})

function getMatchId() {
  match.getMaList({ topFlag: 1, status: 1 }).then((res) => {
    matchId.value = res.rows[0].id
    getMatch(matchId.value)
    getGroupListByCptId()
  })
}

function getMatch(id) {
  loading.value = true
  match.getMatchById({ id: id }).then(res => {
    matchData.value = res.data
    console.log(666666, matchData.value)
    loading.value = false
    const today = dayjs().format('YYYY-MM-DD HH:mm:ss')
    time.value = dayjs(res.data.signEndTime).diff(today, 'millisecond')
    startSign.value = dayjs(res.data.signBeginTime).diff(today, 'millisecond')
    if (matchData.value.languageSource == '100') {
      isNational.value = false
    } else {
      isNational.value = true
    }
  }).catch(res => {
    router.push({ path: '/match/list' })
    loading.value = false
    // setTimeout("window.location.reload()", 1000)
  })
}

function getGroupListByCptId() {
  match.getGroupListByCptId(matchId.value, queryGroupList.value).then(res => {
    signDoneGroupList.value = res.rows
    signDoneGroupListToTal.value = res.total
  })
}

function changeMenu(menu, l) {
  console.log(matchData.value.leagueId, l.name)
  // if (
  //   matchData.value.leagueId == '1778253367748993026' &&
  //   (l.name == '成绩' || l.name == 'Achievement')
  // ) {
  //   window.open('http://www.cdsf.org.cn/h5/sscj.index?matchID=526')
  // }
  for (const n of menu) {
    if (n == l) {
      n.active = 1
    } else {
      n.active = 0
    }
  }
}


function choseSignType() {
  console.log(matchData.value.signType, matchData.value.languageSource, user)
  if (!user) {
    handelGoLogin({}, matchData.value.signType)
    // 判断signType，如1个人注册-报名；
    // switch (matchData.value.signType) {
    //   case '0':
    //     // 注册
    //     goGeren()
    //     break
    //   case '1':
    //     // 登录
    //     goLogin()
    //     break
    //   case '2':
    //     popChangeType()
    //     break
    // }
  } else {
    // 获取已报名信息
    checkIsSign().then(() => {
      // 报名
      switchSignType()
    })
  }
}

function goUpdateTeam() {
  // 升级团队
  router.push({
    name: 'teamRegister',
    query: {
      step: '1',
      matchId: matchId.value
    }
  })
}

function goUpdatePersonal() {
  // 升级团队
  router.push({
    name: 'personalRegister',
    query: {
      matchId: matchId.value
    }
  })
}

function goTeamSign() {
  if (matchData.value.languageSource == '100') {
    // 国内
    // if (group.type == '4') {
    //   ElMessageBox.confirm(
    //     language.value == 0 ? '您的团体类型不符合报名条件' : 'Your Team type does not meet the registration requirements',
    //     language.value == 0 ? '提示' : 'Warning',
    //     {
    //       confirmButtonText: language.value == 1 ? 'OK' : '确定',
    //       cancelButtonText: language.value == 1 ? 'Cancel' : '取消',
    //       type: 'warning'
    //     }
    //   )
    //   return
    // }
    if (matchData.value.countryLimit == 1) {
      // 国家协会账号报名
      if (group && group.type == 4) {
        handelPreCheckForGroup(goTeamSignCn)
      } else {
        return proxy.$modal.confirm(language.value == 0
          ? '您的账号类型为团队,无法报名当前活动。请切换至国家协会类型的账号，或重新注册类型为国家协会的账号报名当前活动。'
          : 'Your account type is "Team",which does not qualify for the current event.Please switch to a "National Association" type account or register a new account with this type to proceed.')
      }
    } else {
      if (group && group.type == 4) {
        return proxy.$modal.confirm(language.value == 0
          ? '您的账号类型为团队(国家协会),无法报名当前活动。请切换至团队类型的账号，或重新注册类型为非国家协会的团队类型的账号，报名当前活动。'
          : 'Your account type is "National Association Team"which does not qualify for the current event.Please switch to a "Team" type account or register a new account with this type to proceed.')
      } else {
        handelPreCheckForGroup(goTeamSignCn)
      }
    }
  } else {
    // 国际赛
    if (matchData.value.countryLimit == 1) {
      if (group && group.type == 4) {
        handelPreCheckForGroup(goTamSign)
      } else {
        return proxy.$modal.confirm(language.value == 0
          ? '您的账号类型为团队,无法报名当前活动。请切换至国家协会类型的账号，或重新注册类型为国家协会的账号报名当前活动。'
          : 'Your account type is "Team",which does not qualify for the current event.Please switch to a "National Association" type account or register a new account with this type to proceed.')
      }
    } else {
      if (group && group.type == 4) {
        return proxy.$modal.confirm(language.value == 0
          ? '您的账号类型为团队(国家协会),无法报名当前活动。请切换至团队类型的账号，或重新注册类型为非国家协会的团队类型的账号，报名当前活动。'
          : 'Your account type is "National Association Team"which does not qualify for the current event.Please switch to a "Team" type account or register a new account with this type to proceed.')
      } else {
        handelPreCheckForGroup(goTamSign)
      }
    }
    
    
    // if (group?.type != '4' && matchData.value.countryLimit == '1') {
    //   ElMessageBox.confirm(
    //     language.value == 0 ? '您的团体类型不符合报名条件' : 'Your Team type does not meet the registration requirements',
    //     language.value == 0 ? '提示' : 'Warning',
    //     {
    //       confirmButtonText: language.value == 1 ? 'OK' : '确定',
    //       cancelButtonText: language.value == 1 ? 'Cancel' : '取消',
    //       type: 'warning'
    //     }
    //   )
    //   return
    // }
    // handelPreCheckForGroup(goTamSign)
  }
}

// 国际赛
function goTamSign() {
  router.push({
    path: `${route.params.id}/teamSign`,
    query: {
      matchId: matchId.value,
      groupId: groupId.value,
      signType: matchData.value.signType,
      isNational: true,
      languageSource: matchData.value.languageSource
    }
  })
}

// 国内赛
function goTeamSignCn() {
  router.push({
    path: `${route.params.id}/teamSignCn`,
    query: {
      matchId: matchId.value,
      groupId: groupId.value,
      signType: matchData.value.signType,
      languageSource: matchData.value.languageSource,
      isNational: false
    }
  })
}

async function goPersonalSign() {
  // 选项目
  await router.push({
    name: 'chooseProject',
    query: {
      matchId: matchId.value
    }
  })
}

function goLogin() {
  useUserStore().setReLogin()
}

function goGeren() {
  // 注册
  router.push({
    name: 'personalRegister',
    query: { matchId: matchId.value }
  })
}

function popChangeType() {
  // 选择登录类型
  signTypePop.value = true
}

// 获取已报信息
function checkIsSign() {
  const obj = {
    cptId: matchId.value,
    groupId: groupId.value || 0
  }
  return match.getMySignInfo(obj).then(res => {
    switch (res.data.type) {
      case '0':
        // 未报名
        break
      case '1':
        // 提交报名，未审核
        ElMessageBox.confirm(
          language.value == 0 ? '您的报名信息已提交，是否撤回，重新填写报名信息？' : 'Your registration information has been submitted. Do you want to withdraw it and fill in the registration information again?',
          language.value == 0 ? '提示' : 'Warning',
          {
            confirmButtonText: language.value == 1 ? 'Withdraw the registration' : '撤回报名信息',
            cancelButtonText: language.value == 1 ? 'Cancel' : '取消',
            type: 'warning'
          }
        ).then(() => {
          withDraw(res.data.orderId)
        })
        return Promise.reject('rejected message')
        break
      case '2':// 报名审批拒绝
        ElMessageBox.confirm(
          language.value == 0 ? '报名审批拒绝，是否重新报名' : 'Registration approval rejected. Do you want to register again',
          language.value == 0 ? '提示' : 'Warning',
          {
            confirmButtonText: language.value == 1 ? 'OK' : '确定',
            cancelButtonText: language.value == 1 ? 'Cancel' : '取消',
            type: 'warning'
          }
        ).then(() => {
          reSign()
        })
        return Promise.reject('rejected message')
        break
      case '3':// 报名已取消
        ElMessageBox.confirm(
          language.value == 0 ? '报名已取消，是否重新报名' : 'Registration cancelled. Do you want to register again',
          language.value == 0 ? '提示' : 'Warning',
          {
            confirmButtonText: language.value == 1 ? 'OK' : '确定',
            cancelButtonText: language.value == 1 ? 'Cancel' : '取消',
            type: 'warning'
          }
        ).then(() => {
          reSign()
        })
        return Promise.reject('rejected message')
        break
      case '4':
        // 审核通过未缴费
        ElMessageBox.confirm(
          language.value == 0 ? '您的报名信息已审核通过，如需修改，请联系组委会' : 'Your registration information has been approved. If you need to make any changes, please contact the organizing committee',
          language.value == 0 ? '提示' : 'Warning',
          {
            confirmButtonText: language.value == 1 ? 'OK' : '确定',
            cancelButtonText: language.value == 1 ? 'Cancel' : '取消',
            type: 'warning'
          }
        ).then(() => {
          // router.push({name: 'myMatch'})
        })
        return Promise.reject('rejected message')
        break
      case '5':
        // 审核通过已缴费
        ElMessageBox.confirm(
          language.value == 0 ? '您的报名信息已完成缴费，如需修改，请联系组委会' : 'Your registration information has been paid. If you need to make any changes, please contact the organizing committee',
          language.value == 0 ? '提示' : 'Warning',
          {
            confirmButtonText: language.value == 1 ? 'OK' : '确定',
            cancelButtonText: language.value == 1 ? 'Cancel' : '取消',
            type: 'warning'
          }
        )
        return Promise.reject('rejected message')
        break
    }
  })
}

function withDraw(orderId) {
  match.withDrawByOrderId(orderId).then(res => {
    choseSignType()
  })
}

function reSign() {
  match.recoverMySignFromCancel(matchId.value).then((res) => {
    switchSignType()
  })
}

function switchSignType() {
  switch (matchData.value.signType) {
    case '0':// 个人赛报名
      if (user.utype == '1') {
        handelGeRenNext()
      }
      if (user.utype == '2') {
        return proxy.$modal.confirm(language.value == 0
          ? '您的账号类型为:团队,无法报名当前活动。请切换至个人类型的账号，或重新注册类型为个人的账号，报名当前活动。'
          : 'Your account type is "Team",which does not qualify for the current race. Please switch to a "Individual" type account or register a new account with this type to proceed.')
      }
      if (user.utype == '3') {
        // 注册
        goGeren()
      }
      break
    case '1':// 团体赛报名
      if (user.utype == '1') {
        return proxy.$modal.confirm(language.value == 0
          ? '您的账号类型为:个人，无法报名当前活动。请切换至团体类型账号报名。或者重新注册团体类型账号后再报名。'
          : 'Your account type is: Individual. which does not qualify for the current race.Please switch to a group type account to register. Or register with a group type account before signing up.')
      }
      if (user.utype == '2') {
        // match.preCheckForGroup(groupId.value).then(goTeamSign)
        // handelPreCheckForGroup(goTeamSign)
        goTeamSign()
      }
      if (user.utype == '3') {
        // 团队活动 且 游客
        upgradePop.value = true
      }
      break
    case '2':// 团体队伍
      if (user.utype == '1') {
        // match.preCheckForGroup(groupId.value).then(goPersonalSign)
        // goPersonalSign()
        handelPreCheckForGroup(goPersonalSign)
      }
      if (user.utype == '2') {
        // handelPreCheckForGroup(goTeamSign)
        // match.preCheckForGroup(groupId.value).then(goTeamSign)
        goTeamSign()
      }
      if (user.utype == '3') {
        // 游客
        upgradePop.value = true
      }
      break
  }
}

// 个人报名校验
async function handelGeRenNext() {
  const res = await match.preCheckForPerson({ type: '1' })
  // 不给报名
  if (res.data == 0) {
    await proxy.$modal.confirm(
      language.value == 0
        ? '您绑定的WDSF会员号已过期，请先到WDSF官网激活您的会员号。'
        : 'Your bound WDSF Number has expired. Please activate your WDSF Number on the WDSF official website first.'
    )
    return
  }
  // 正常报名
  if (res.data == 1) {
    if (matchData.value.languageSource != '100') {
      // 国际赛
      const flag = await getCheckOcr({ type: '1' })
      if (flag) await goPersonalSign()
    } else {
      // 国内赛
      await goPersonalSign()
    }
  }
  // 提示
  if (res.data == 2) {
    await proxy.$modal.confirm(
      language.value == 0
        ? '运动员的wdsf信息已发生变更，是否更新？'
        : 'The athlete`s WDSF details have changed. Update now?'
    )
    // 删除
    await match.preCheckForPerson({ type: '2' })
    
    if (matchData.value.languageSource != '100') {
      // 国际赛
      const flag = await getCheckOcr({ type: '1' })
      if (flag) await goPersonalSign()
    } else {
      // 国内赛
      await goPersonalSign()
    }
  }
}

function applyInvitation() {
  const obj = {
    title: language.value == 0 ? '邀请函申请' : 'Visa Invitation Letter ',
    cptId: matchId.value
  }
  proxy.$refs['dialogInvitationRef'].open(obj)
}

const openPickup = () => {
  const obj = {
    title: language.value == 0 ? '接 / 送机服务' : 'Pick-up/drop-off service',
    cptId: matchId.value
  }
  proxy.$refs['pickupRef'].open(obj)
}

// 团体报名校验
async function handelPreCheckForGroup(fn) {
  const res = await match.preCheckForGroup(groupId.value, '1')
  if (res.data == 1 || res.data == 0) {
    // const flag = await getCheckOcr({ type: '2', groupId: groupId.value })
    // if (flag) await fn()
    await fn()
  }
  if (res.data == 2) {
    await proxy.$modal.confirm(
      language.value == 0
        ? '运动员的wdsf信息已发生变更，是否更新？'
        : 'The athlete`s WDSF details have changed. Update now?')
    await match.preCheckForGroup(groupId.value, '2')
    // const flag = await getCheckOcr({ type: '2', groupId: groupId.value })
    // if (flag) await fn()
    await fn()
  }
}

async function getCheckOcr(obj) {
  const { data } = await match.checkOcr(obj)
  if (!data) {
    // 人员ocr未通过
    await proxy.$modal.confirm(language.value == 0 ? '请完善人员信息' : 'Please complete the personnel information')
    // 完善ocr
    await proxy.$refs['checkAllSportsmanRef'].open(obj.type == 1 ? user.userId : groupId.value, obj.type)
    return false
  } else {
    return true
  }
}

watch(() => useUserStore().reLogin, (val) => {
  if (val.show) {
    console.log(val)
    handelGoLogin(val.query)
  }
})

// 登录
const handelGoLogin = (query, type) => {
  proxy.$refs['pcloginDialog'].open(query, type)
}

const reFlash = () => {
  // 刷新
  location.reload()
}


async function handelQR(id, type) {
  let patch
  if (type == 1) {
    patch = '/pages_match/match/singleLs'
  } else {
    patch = '/pages_match/match/single'
  }
  const res = await match.getMiniappQrCode(id, patch)
  if (res.data) {
    qrUrl.value = 'data:image/gif;base64,' + res.data
  } else {
    qrUrl.value = undefined
  }
}
</script>

<style lang="scss" scoped>
.ding {
  position: fixed;
  right: 0;
  z-index: 99;
  top: 38%;
  background: linear-gradient(-90deg, #8623FC, #453DEA) !important;
  box-shadow: 0 0 10px #666;
  color: #fff;
  border-radius: 10px;
  padding: 10px 20px;
  text-align: center;
}

.rItem {
  height: 130px;
  cursor: pointer;
  width: 350px;
  padding: 1px;
  margin: 20px auto;
  
  h3 {
    font-size: 30px;
    margin: 50px;
  }
  
  &.r1 {
    background: url("@/assets/dance/r1b.png") no-repeat left;
    
    &:hover {
      background: url("@/assets/dance/r1.png") no-repeat left;
    }
  }
  
  &.r2 {
    background: url("@/assets/dance/r2b.png") no-repeat left;
    
    &:hover {
      background: url("@/assets/dance/r2.png") no-repeat left;
    }
  }
  
  &:hover {
    color: #fff;
  }
}

.app-container {
  min-height: 80vh;
}

.m0 {
  margin: 0;
}

.indexTitle {
  margin: 20px 0 12px;
  
  h3 {
    font-size: 20px;
    color: var(--el-color-primary);
  }
}

.xzbox {
  border: 2px solid #DDECFB;
  padding: 20px;
  line-height: 2;
  color: #29343C;
  font-size: 16px;
}

.dlbox {
  background: url("@/assets/dance/ds_bg.png") no-repeat left;
  background-size: 100% 100%;
  padding: 0 0 20px;
  margin: 0 0 20px;
  height: 90%;
  
  dl {
    min-height: 120px;
    margin: 0;
    
    dt {
      height: 30px;
      font-size: 16px;
      margin: 0 0 18px;
      font-weight: 600;
      line-height: 30px;
      display: inline-block;
      padding: 0 20px 0 14px;
      background: linear-gradient(90deg, #8623FC, #453DEA);
      border-radius: 0px 0px 15px 0px;
      color: #fff;
    }
  }
  
  dd {
    font-size: 14px;
    line-height: 1.6;
    color: #29343C;
  }
}

.ppl {
  color: #29343C;
  margin: 10px 0 0;
  
  label {
    color: #929AA0;
  }
}

.ppl_pb {
  position: absolute;
  bottom: 0;
}

.bm1 {
  background: url("@/assets/dance/bm1.png") no-repeat left;
  background-size: contain;
  padding-left: 24px;
}

.bm2 {
  background: url("@/assets/dance/bm2.png") no-repeat left;
  background-size: contain;
  padding-left: 24px;
}

.bm3 {
  background: url("@/assets/dance/bm3.png") no-repeat left;
  background-size: contain;
  padding-left: 24px;
}

.bm4 {
  background: url("@/assets/dance/bm4.png") no-repeat left;
  background-size: contain;
  padding-left: 24px;
}

.app-container {
  padding: 0;
  background: #F5F7F9;
}

.countDownTitle {
  text-align: center;
  color: #525F6B;
  position: relative;
  width: 100%;
  left: 0;
  font-size: 14px;
}

.countDownTitle span {
  background: #fff;
  padding: 0 10px;
  position: relative;
  z-index: 1;
}

.countDownTitle::after {
  position: absolute;
  background: #ccc;
  height: 1px;
  content: '';
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  left: 0;
}

.typeTag {
  border-radius: 10px 10px 10px 0px;
  padding: 2px 12px;
  background: #FF8124;
  font-size: 14px;
  color: #fff;
}

.matchItem {
  cursor: pointer;
  margin-bottom: 40px;
  height: 180px;
  background: #FFFFFF;
  position: relative;
  border-radius: 10px;
  
  .el-avatar {
    position: absolute;
    left: 20px;
    top: 30px;
    
    img {
      background: #fff;
    }
  }
  
  .info {
    padding: 12px 0 0 140px;
    
    p {
      font-size: 14px;
    }
  }
  
  .typeTag {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  h3 {
    font-weight: 500;
    font-size: 18px;
    color: #000000;
    text-overflow: ellipsis;
  }
  
  &:hover h3 {
    font-weight: bold;
  }
}

.el-pagination {
  justify-content: center;
  --el-pagination-bg-color: none;
}

.kind {
  background: #fff;
  margin: 0 0 30px;
  
  ul {
    list-style: none;
    padding: 30px 0 10px;
    
    li {
      margin: 0 0 20px;
      display: flex;
      align-items: center;
    }
  }
}

.listTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.match-tabs {
  background: #fff;
  padding: 10px 20px 20px;
}

.teamItem {
  height: 80px;
  background: #FBFCFD;
  border-radius: 10px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  
  .el-avatar {
    border: 1px solid #EEEEEE;
  }
  
  .name {
    margin-left: 15px;
    flex: 1;
    font-size: 14px;
  }
}

.grid-top {
  background: #fff;
  min-height: 300px;
  padding: 28px 28px 10px;
  border-radius: 10px;
  margin: 30px auto;
  position: relative;
  
  .cover {
    width: 420px;
    height: 250px;
    position: absolute;
    border-radius: 10px;
    background: #fff;
    object-fit: cover;
  }
  
  .info {
    padding-left: 440px;
    
    h3 {
      font-weight: 500;
      color: #000000;
      margin: 0 0 10px;
      font-size: 24px;
      
      img {
        margin-right: 10px
      }
      
      .typeTag {
        border-radius: 13px 13px 13px 0;
        margin-left: 10px;
      }
    }
    
    p {
      color: #7B7F83;
      font-size: 16px;
    }
    
    .countDownTitle {
      font-size: 14px;
    }
    
    .el-button.el-button--primary {
      background: #CA171D;
      border: none;
    }
  }
}

.gg {
  margin: 0 0 28px;
  
  h3 {
    border-left: 2px solid #BA2E29;
    padding: 0 0 0 12px;
    margin: 20px 0 8px;
    font-weight: 500;
    font-size: 16px;
  }
  
  p {
    font-size: 16px;
    color: #000;
    margin: 0 0 8px;
    line-height: 24px;
    
    label {
      color: #7D8790;
    }
  }
  
  .pp {
    border: 1px solid rgba(186, 46, 41, 0.3);
    padding: 20px;
  }
}

.van-count-down {
  text-align: center;
  margin: 20px 0;
}

.colon {
  display: inline-block;
  font-size: 14px;
  margin: 0 6px;
  color: #7B7F83;
}

.block {
  display: inline-block;
  width: 52px;
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  border-radius: 10px;
  background: url(@/assets/img/djs_bg.png) left;
  background-size: 100% 100%;
  line-height: 50px;
  text-align: center;
}


.time-address {
  font-size: 15px;
  margin: 10px 0 0;
  color: #999;
}

.popList .teamItem {
  cursor: pointer;
}

.popList .teamItem:hover {
  background: #e7e7e7;
}

.richContent {
  overflow: hidden;
}

.richContent img {
  max-width: 100%;
}

.red-center {
  font-size: 24px;
  text-align: center;
  font-family: DIN Alternate;
  padding: 30px 0;
  font-weight: bold;
  color: #E60012;
}

.plist {
  dt {
    font-size: 14px;
  }
  
  dd {
    display: inline-block;
    margin: 0 15px 0 0;
  }
  
  dd.t {
    display: block;
    margin: 15px 0 6px;
    border-left: 3px solid #1ec886;
    line-height: 1;
    padding: 6px;
    background: #f5f5f5;
  }
  
  li {
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    cursor: pointer;
  }
  
  li:hover {
    background: #eee;
  }
}

.pp .el-link {
  margin-right: 15px;
  font-size: 16px;
}

:deep(.el-collapse-item__header) {
  font-weight: 500;
  font-size: 16px;
}

.pobtns {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

:deep(.el-tabs__item) {
  font-size: 16px;
}

.signButton {
  margin: 0 0 20px;
  
  button {
    width: 90%;
    background: var(--el-color-primary);
    font-size: 20px;
    margin: 30px auto 0;
    display: block;
    height: 50px;
  }
}

.el-timeline-item__timestamp.is-top {
  font-size: 16px;
}

.el-timeline-item__content {
  font-size: 16px;
  margin: 10px 0 0;
}

.typeTag.blue {
  background: #00a0e9;
}

.typeTag.green {
  background: #34cf96;
}

:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
}

.table {
  width: 100%;
  border-left: 1px solid #e1e1e1;
  border-top: 1px solid #e1e1e1;
  
  th {
    background: #eee;
    padding: 6px 10px;
    border-right: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    font-size: 15px;
  }
  
  td {
    padding: 6px 10px;
    border-right: 1px solid #e1e1e1;
    font-size: 15px;
    border-bottom: 1px solid #e1e1e1;
    vertical-align: middle;
    text-align: center;
    
    span {
      margin-right: 10px
    }
    
    span::after {
      content: ','
    }
    
    span:last-child::after {
      content: ''
    }
  }
}

.flexLine {
  display: flex;
  
  label {
    font-weight: normal
  }
}

.nowteamItem {
  height: 100px;
  background: #FBFCFD;
  border-radius: 10px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  
  .el-avatar {
    margin: 0 20px
  }
  
  .info {
    h3 {
      margin: 0 0 15px;
    }
    
    p {
      margin: 0;
      color: #1ab394
    }
  }
  
  .rr {
    text-align: right;
    flex: 1;
    
    span {
      color: #1ab394
    }
  }
}

.collapsebox {
  .el-collapse-item {
    margin-bottom: 15px;
    --el-collapse-content-bg-color: #F4F9FE;
    border: 2px solid #DDECFB;
    
    .table {
      background: #fff;
    }
  }
  
  .is-active {
    --el-collapse-header-bg-color: #F4F9FE
  }
  
  :deep(.el-collapse-item__header) {
    padding: 0 20px;
  }
}

.funcBtns {
  display: flex;
  justify-content: space-around;
  
  div {
    text-align: center;
    background: #F7FAFF;
    box-shadow: 0 0 10px #d4cae4;
    margin: 0 5px;
    border-radius: 15px;
    padding: 0 10px 15px;
    
    img {
      margin: auto
    }
    
    h4 {
      margin: 0;
      font-size: 14px;
    }
  }
}

.table {
  white-space: nowrap
}

@media (max-width: 1650px) {
  .ppl {
    color: #29343C;
    margin: 5px 0 0;
  }
}

@media (max-width: 800px) {
  .van-count-down {
    .block {
      margin: 0 10px;
    }
  }
  .colon {
    display: none;
  }
  .funcBtns {
    div {
      padding: 0 0 10px;
      margin: 0 5px;
      
    }
  }
}


@media (max-width: 767px) {
  .father {
    position: relative;
    width: 100%;
    margin-top: 10px;
    
    .son {
      width: 100%;
      display: flex;
      justify-content: space-around;
    }
    
    .son2 {
      width: 100%;
      display: flex;
      justify-content: space-around;
    }
  }
}

/* 中等屏幕（平板设备） */
@media (min-width: 768px) and (max-width: 1199px) {
  .father {
    position: relative;
    width: 100%;
    margin-top: 10px;
    
    .son {
      width: 100%;
      display: flex;
      justify-content: space-around;
    }
    
    .son2 {
      width: 100%;
      display: flex;
      justify-content: space-around;
    }
  }
}

/* 大屏幕（桌面设备） */
@media (min-width: 1200px) and (max-width: 1630px) {
  .father {
    position: relative;
    width: 100%;
    
    .son {
      position: absolute;
      bottom: 0;
      left: 55%;
      width: 50%;
      display: flex;
      justify-content: space-around;
    }
    
    .son2 {
      position: absolute;
      bottom: 0;
      left: 35%;
      width: 70%;
      display: flex;
      justify-content: space-around;
    }
  }
}

/* 大屏幕（桌面设备） */
@media (min-width: 1631px) {
  .father {
    position: relative;
    width: 100%;
    
    .son {
      position: absolute;
      bottom: 0;
      left: 35%;
      width: 65%;
      display: flex;
      justify-content: space-around;
    }
    
    .son2 {
      position: absolute;
      bottom: 0;
      left: 260px;
      width: 45vw;
      max-width: 900px;
      display: flex;
      justify-content: space-around;
    }
  }
}


.qrTitle {
  font-size: 14px;
  text-align: center;
  height: 25px;
  line-height: 25px;
}

.qrTitle2 {
  font-size: 12px;
  text-align: center;
  height: 25px;
  line-height: 25px;
}
</style>