FE_occupationlab_client/src/pages/match/details/index.vue

<template>
    <div class="wrap index">
        <div class="banner" :style="{backgroundImage: 'url(' + (form.carouselUrl || 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220613/png/1536269450851409920.png') + ')'}"></div>
        <div class="center-con">
          <div class="center-wrap">
              <breadcrumb ref="breadcrumb" :data="'全部赛事/' + form.name"></breadcrumb>
              <div class="content">
                  <div :class="['tool flex-between', {logView: !logView}]">
                      <el-tabs v-model="curType" @tab-click="typeChange">
                          <el-tab-pane v-for="(item, index) in typeList" :key="index" :label="item.name" :name="item.id"></el-tab-pane>
                      </el-tabs>
                      <div class="action">
                          <p class="end-text" v-if="end">
                              距离{{ endList[status] }}还有
                              <em>{{ end }}</em>
                          </p>
                          <el-dropdown v-if="playingStages.length > 1" class="m-l-10" @command="chooseStage">
                            <el-button type="primary" style="background-color: #f96d6d;border: 0;">
                              选择竞赛<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item v-for="(item, i) in playingStages" :key="i" :command="item">进入{{ item.stageName }}</el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                          <a v-else-if="status != 4 || (status == 4 && curStage)" class="status" :class="{wait: status == 0,signing: status == 2,signed: status == 1,playing: status == 4,finish: status == 3 || status == 5}" :title="statusList[status]" @click.stop="signup">{{ statusList[status] }}</a>
                      </div>
                  </div>
                  <div class="info">
                    <h6 class="title">{{ form.name }}</h6>
                    <div class="meta">最近编辑时间：{{ form.updateTime }}</div>
                  </div>
                  
                  <div v-show="curType < 4">
                    <div class="l-title" id="part1"><img src="@/assets/img/label.png" alt=""> 竞赛信息</div>
                    <div v-if="form.description" class="texts ql-editor" v-html="form.description"></div>
                    <template v-if="form.competitionAnnexList">
                      <h6 class="p-title">附件下载</h6>
                      <ul class="files">
                        <li v-for="(item, i) in form.competitionAnnexList" :key="i">
                          <el-link v-if="item.canPreview" class="m-r-10" type="primary" @click="preview(item)">{{ item.fileName }}</el-link>
                          <span v-else class="fileName">{{ item.fileName }}</span>
                          <el-link type="primary" :underline="false" @click="download(item)">下载</el-link>
                        </li>
                      </ul>
                    </template>

                    <template v-if="form.releaseType">
                      <div class="l-title"><img src="@/assets/img/label.png" alt=""> 赛程、规则与内容</div>
                      <h6 class="rule-title">共{{ form.competitionStage.length }}个竞赛阶段，同一个团队每个成员只能参加一个阶段赛项</h6>
                      <div v-for="(rule, i) in form.competitionStage" :key="i" class="rule">
                        <p style="font-size: 16px;color: #333;">{{ rule.stageName }}</p>
                        <p>比赛时间：{{ rule.startTime && rule.startTime + ' ~ ' + rule.endTime }}</p>
                        <p>比赛方式：{{ methods.find(e => e.id == rule.method) && methods.find(e => e.id == rule.method).name }}</p>
                        <p v-if="rule.method != 2">课程系统：{{ rule.systemName }}</p>
                        <p v-if="rule.onlineButton && rule.method != 2">线上地点：{{ rule.onlineAddress }}</p>
                        <p v-if="rule.offlineButton">线下地点：{{ rule.offlineAddress }}</p>
                        <template v-if="rule.method === 2">
                          <p>线下地点：{{ rule.offlineAddress }}</p>
                          <p>比赛内容：{{ rule.contentDescription }}</p>
                          <p>评分规则：{{ rule.scoreRule }}</p>
                        </template>
                        
                        <template v-if="form.completeCompetitionSetup.competitionType">
                          <p>团队参赛人数限制：{{ rule.teamNumLimit || '不限制' }}</p>
                          <p>团队成绩计算方式：{{ teamCalculationMethods.find(e => e.id == rule.teamCalculationMethod) && teamCalculationMethods.find(e => e.id == rule.teamCalculationMethod).name }}</p>
                        </template>
                        <p>阶段比赛结束后{{ rule.resultAnnouncementTime }}小时，公布阶段比赛成绩。</p>
                        <div v-if="form.rule === 1" class="flex">
                          <p>晋级规则：</p>
                          <div>
                            <p v-if="rule.peopleLimit">本阶段成绩排名前{{ rule.peopleLimit }}队，可晋级下一阶段比赛</p>
                            <p v-if="rule.percentageLimit">本阶段成绩排名前{{ rule.percentageLimit }}%，可晋级下一阶段比赛</p>
                            <p v-if="rule.scoreLimit">本阶段成绩{{ rule.scoreLimit }}分，可晋级下一阶段比赛</p>
                          </div>
                        </div>
                      </div>
                    </template>
                    
                    <!-- 进展 -->
                    <div class="l-title" id="part2"><img src="@/assets/img/label.png" alt=""> 竞赛进展</div>
                    <ul class="progress" v-if="progress.length">
                        <li v-for="(item,index) in progress" :key="index" :class="item.status == 0 ? 'not' : (item.status == 1 ? 'ing' : 'done')">
                            <i class="dot"></i>
                            <p class="name">{{item.title}}</p>
                            <p class="desc">{{item.description}}</p>
                        </li>
                        <img class="rocket" src="@/assets/img/rocket.png" alt="">
                    </ul>
                    <template v-else>
                        <div class="empty">
                            <div>
                                <img src="@/assets/img/none.png" alt="">
                                <p>暂无数据</p>
                            </div>
                        </div>
                    </template>
                    
                    <!-- 公告 -->
                    <div class="l-title" id="part3"><img src="@/assets/img/label.png" alt=""> 通知公告</div>
                    <ul class="notice-list" v-if="notices.length">
                      <li v-for="(item, i) in notices" :key="i" @click="toNotice(item)">
                        <h6>{{ item.announcementTitle }}</h6>
                        <p class="meta">{{ item.updateTime }}</p>
                        <div class="des" v-html="item.announcementText"></div>
                      </li>
                    </ul>
                    <template v-else>
                        <div class="empty">
                            <div>
                                <img src="@/assets/img/none.png" alt="">
                                <p>暂无通知公告</p>
                            </div>
                        </div>
                    </template>
                  </div>

                  <!-- 竞赛排名 -->
                  <template v-if="curType == 4">
                    <div class="l-title"><img src="@/assets/img/label.png" alt=""> 竞赛排名</div>
                    <el-tabs v-model="curArch" @tab-click="getRank">
                      <el-tab-pane v-for="(item, index) in arches" :key="index" :label="item.stageName + '排名'" :name="item.stageId"></el-tab-pane>
                    </el-tabs>
                    <el-table ref="table" :data="ranks" stripe header-align="center">
                      <el-table-column type="index" width="60" label="排名" align="center"></el-table-column>
                      <template v-if="form.completeCompetitionSetup.competitionType">
                        <el-table-column prop="teamName" label="团队名称"></el-table-column>
                        <el-table-column prop="leaderName" label="队长"></el-table-column>
                      </template>
                      <el-table-column v-else prop="userName" label="姓名"></el-table-column>
                      <el-table-column prop="schoolName" label="学校"></el-table-column>
                      <el-table-column prop="school" label="用时">
                        <template slot-scope="scope">
                            {{ scope.row.timeSum }}min
                        </template>
                      </el-table-column>
                      <el-table-column prop="score" label="分数"></el-table-column>
                    </el-table>
                  </template>

                  <template v-if="curType == 5">
                    <div class="l-title m-t-20"><img src="@/assets/img/label.png" alt=""> 参赛信息</div>
                    <table v-if="form.completeCompetitionSetup.competitionType && info.team.captain === 0" class="table m-b-20">
                      <tr>
                        <th width="150">团队名称：</th>
                        <td>
                          <el-input :disabled="!editing" v-model="info.team.teamName"></el-input>
                        </td>
                        <th width="150">团队邀请码：</th>
                        <td>
                          <el-input :disabled="!editing" v-model="info.team.invitationCode"></el-input>
                        </td>
                      </tr>
                    </table>
                    <div v-if="form.completeCompetitionSetup.competitionType && info.team.captain === 0 && status < 4" class="m-b-20 text-center">
                      <el-button type="primary" @click="edit(1)">{{ editing ? '保存' : '编辑' }}</el-button>
                    </div>
                    <table class="table">
                      <template v-if="!form.completeCompetitionSetup.competitionType || info.team.captain">
                        <tr>
                          <th width="150">姓名：</th>
                          <td>{{ info.person.userName }}</td>
                        </tr>
                        <tr>
                          <th>学号：</th>
                          <td>{{ info.person.workNumber }}</td>
                        </tr>
                        <tr>
                          <th>学校：</th>
                          <td>{{ info.person.schoolName }}</td>
                        </tr>
                      </template>
                      <template v-if="form.completeCompetitionSetup.competitionType">
                        <tr v-if="info.team.captain">
                          <th width="150">团队名称：</th>
                          <td>
                            <span>{{ info.team.teamName }}</span>
                          </td>
                        </tr>
                        <template v-if="info.team.captain">
                          <tr>
                            <th>队长：</th>
                            <td>{{ info.caption.userName }}{{ info.caption.schoolName && '，' + info.caption.schoolName }}{{ info.caption.workNumber && '，' + info.caption.workNumber }}</td>
                          </tr>
                          <tr>
                            <th>团队成员：</th>
                            <td>
                              <el-tag v-for="(item, i) in info.teamDetail" :key="i" style="margin-right: 5px">{{ item.userName }}</el-tag>
                            </td>
                          </tr>
                          <tr v-if="info.team.captain">
                            <th>团队邀请码：</th>
                            <td>
                              <span>{{ info.team.invitationCode }}</span>
                            </td>
                          </tr>
                        </template>
                      </template>
                      <tr>
                        <th width="130">指导老师：</th>
                        <td v-if="info.team.captain === 0 || !form.completeCompetitionSetup.competitionType">
                          <div v-if="status != 5" class="plus">
                            <i class="el-icon-circle-plus-outline icon" @click="addAdvisor"></i>
                          </div>
                          <div v-for="(item, i) in info.teamInstructors" :key="i" class="line">
                            <el-input placeholder="请输入姓名" v-model="item.name" clearable size="mini" :disabled="!item.edit"></el-input>
                            <el-input placeholder="请输入职务" maxlength="10" v-model="item.position" clearable size="mini" :disabled="!item.edit"></el-input>
                            <el-input placeholder="请输入手机号" maxlength="11" v-model="item.phone" clearable size="mini" :disabled="!item.edit"></el-input>
                            <template v-if="status < 5">
                              <i v-if="item.edit" class="el-icon-check icon" @click="submitAdvisor(item)"></i>
                              <i v-else class="el-icon-edit icon" @click="editAdvisor(item)"></i>
                              <i class="el-icon-delete icon" @click="delAdvisor(item, i)"></i>
                            </template>
                          </div>
                        </td>
                        <td v-else>
                          <table class="table tc">
                            <tr>
                              <th width="60">姓名</th>
                              <th width="100">职务</th>
                              <th width="100">手机号</th>
                            </tr>
                            <template v-if="info.teamInstructors.length">
                              <tr v-for="(item, i) in info.teamInstructors" :key="i">
                                <td width="60">{{ item.name }}</td>
                                <td width="100">{{ item.position }}</td>
                                <td width="100">{{ item.phone }}</td>
                              </tr>
                            </template>
                            <tr v-else>
                              <td colspan="3">暂无数据</td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                      <tr>
                        <th>竞赛阶段：</th>
                        <td>
                          <table class="table tc">
                            <tr>
                              <th width="70">序号</th>
                              <th width="120">赛项阶段名称</th>
                              <template v-if="form.completeCompetitionSetup.competitionType">
                                <th width="110">参赛人数限制</th>
                                <th>允许参赛人员</th>
                              </template>
                              <th v-if="form.rule === 0" width="70">总分</th>
                              <th>竞赛成绩</th>
                            </tr>
                            <template v-if="info.stages.length">
                              <tr v-for="(item, i) in info.stages" :key="i">
                                <td>{{ i + 1 }}</td>
                                <td>{{ item.stageName || form.name }}</td>
                                <template v-if="form.completeCompetitionSetup.competitionType">
                                  <td>{{ item.teamNumLimit || '不限制' }}</td>
                                  <td>
                                    <template v-if="item.participants">
                                      <el-tag
                                        v-for="tag in item.participants"
                                        :key="tag.name"
                                        class="m-r-5 m-b-5"
                                        :closable="info.team.captain === 0"
                                        @close="removePar(tag, item)">
                                        {{tag.name}}
                                      </el-tag>
                                    </template>
                                    <span v-else class="m-r-5">无</span>
                                    <i v-if="info.team.captain === 0" class="el-icon-edit icon" @click="selectPar(item)"></i>
                                  </td>
                                </template>
                                <td v-if="form.rule === 0 && !i" :rowspan="info.stages.length">{{ info.totalScore || 0 }}</td>
                                <td>
                                  <span v-if="item.score >= 0" class="m-r-10">分数{{item.score}}</span>
                                  <el-button type="text" :disabled="item.showDetail && item.resultsDetails === 1 || (form.completeCompetitionSetup.competitionType && !item.reportId) || (form.completeCompetitionSetup.competitionType === 0 && !item.reportId)" @click="show(item)">查看成绩详情</el-button>
                                </td>
                              </tr>
                            </template>
                            <tr v-else>
                              <td colspan="6">暂无数据</td>
                            </tr>
                          </table>
                          <!-- 团队&&队长才显示 -->
                          <el-alert
                            v-if="form.completeCompetitionSetup.competitionType && info.team.captain === 0"
                            style="margin-top: 10px;"
                            :title="'注：请团长（团队创建人）设置各阶段参赛成员，只有被选择的允许参赛成员可进入对应阶段比赛' + (info.teamLimit ? '，每个团队成员只能参加一个赛项阶段' : '') + '！'"
                            type="warning"
                            show-icon>
                          </el-alert>
                        </td>
                      </tr>
                    </table>
                    
                    <!-- 团队&&队长才显示 -->
                    <template v-if="form.completeCompetitionSetup.competitionType && info.team.captain === 0">
                      <div class="l-title m-t-20">团队成员</div>
                      <div class="flex-center">
                        <p>队长：{{ info.caption.userName }}</p>
                        <el-button type="primary" @click="transfer">转让队长</el-button>
                      </div>
                      <el-alert
                        style="margin: 10px 0;"
                        title="请确保团队成员人数满足大赛要求，否则无法参加比赛"
                        type="success"
                        :closable="false">
                      </el-alert>
                      <el-table :data="info.teamDetail" stripe header-align="center">
                        <el-table-column prop="userName" label="成员姓名" min-width="100" align="center"></el-table-column>
                        <el-table-column prop="schoolName" label="学校" min-width="100" align="center"></el-table-column>
                        <el-table-column prop="workNumber" label="学号" min-width="100" align="center"></el-table-column>
                        <el-table-column prop="createTime" label="加入时间" width="180" align="center"></el-table-column>
                        <el-table-column label="操作" align="center" width="160">
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.captain" type="text" @click="removeLine(scope.row)">踢出团队</el-button>
                            </template>
                        </el-table-column>
                      </el-table>
                    </template>
                  </template>
              </div>
          </div>
        </div>
        
        <el-dialog title="报名" :visible.sync="peopleSignupVisible" :close-on-click-modal="false" width="300px">
          <el-form class="dia-form">
            <el-form-item>
              <el-input placeholder="请输入4位数大赛邀请码" maxlength="4" v-model="peopleSignupForm.registrationInvitationCode"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="peopleSignupSubmit">报名</el-button>
            <el-button size="small" @click="peopleSignupVisible = false">取消</el-button>
          </span>
        </el-dialog>
        <el-dialog title="报名" :visible.sync="enterVisible" :close-on-click-modal="false" width="300px" @close="enterClose">
          <el-form class="dia-form">
            <p style="margin-bottom: 5px">请选择要加入的团队</p>
            <el-form-item>
              <el-select class="w-100" v-model="enterForm.teamId" filterable>
                <el-option v-for="(item, i) in teams" :key="i" :label="item.teamName" :value="item.teamId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="请输入团队邀请码" maxlength="6" v-model="enterForm.invitationCode"></el-input>
            </el-form-item>
            <el-form-item v-if="form.completeCompetitionSetup.isNeedCode">
              <el-input placeholder="请输入大赛邀请码" maxlength="6" v-model="enterForm.registrationInvitationCode"></el-input>
            </el-form-item>
            <p class="tips">
              查找不到团队？点击 <el-link :underline="false" type="primary" @click="toTeam">创建团队</el-link>
            </p>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="enterSubmit">报名</el-button>
            <el-button size="small" @click="enterVisible = false">取消</el-button>
          </span>
        </el-dialog>
        <el-dialog title="创建团队" :visible.sync="teamVisible" :close-on-click-modal="false" width="300px" @close="teamClose">
          <el-form class="dia-form">
            <el-form-item>
              <el-input placeholder="请输入团队名称" maxlength="10" v-model="teamForm.teamName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="请设置团队邀请码" maxlength="6" v-model="teamForm.invitationCode"></el-input>
            </el-form-item>
            <el-form-item v-if="form.completeCompetitionSetup.isNeedCode">
              <el-input placeholder="请输入大赛邀请码" maxlength="6" v-model="teamForm.registrationInvitationCode"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="teamSubmit">创建并报名</el-button>
            <el-button size="small" @click="teamVisible = false">取消</el-button>
          </span>
        </el-dialog>
        
        <el-dialog title="选择参赛成员" :visible.sync="transferVisible" :close-on-click-modal="false" width="400px">
          <template v-for="(item, i) in info.teamDetail">
            <el-radio v-if="item.captain" :key="i" v-model="checkedPlayer" :label="item.teamId">{{ item.userName }}</el-radio>
          </template>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="transferSubmit">确定</el-button>
            <el-button size="small" @click="transferVisible = false">取消</el-button>
          </span>
        </el-dialog>
        <el-dialog title="选择参赛成员" :visible.sync="chooseVisible" :close-on-click-modal="false" width="400px">
          <el-checkbox-group v-model="checkedMembers">
            <el-checkbox v-for="(item, i) in chooses" :key="i" :label="item.accountId">{{ item.userName }}</el-checkbox>
          </el-checkbox-group>
          <p v-if="info.teamLimit && curRow.teamNumLimit" style="margin-top: 15px;font-size: 12px;">注：当前阶段限制{{ curRow.teamNumLimit }}人参赛，且此竞赛每个成员只能参加一个阶段赛项。</p>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="chooseSubmit">确定</el-button>
            <el-button size="small" @click="chooseVisible = false">取消</el-button>
          </span>
        </el-dialog>
        <el-dialog title="团队得分详情" :visible.sync="memberVisible" width="900px" :close-on-click-modal="false">
          <h6 v-if="members.length" style="margin-bottom: 10px;font-size: 16px;">团队名称：{{ members[0].teamName }}  阶段名称：{{ curRow.stageName }}</h6>
          <table class="table tc">
            <tr>
              <th width="60">序号</th>
              <th width="100">姓名</th>
              <th width="100">学校</th>
              <th width="100">用时</th>
              <th width="100">分数</th>
              <th width="100">得分详情</th>
            </tr>
            <template v-if="members.length">
              <tr v-for="(item, i) in members" :key="i">
                <td>{{ i + 1 }}</td>
                <td>{{ item.userName }}</td>
                <td>{{ item.schoolName }}</td>
                <td>{{ item.timeSum }}min</td>
                <td>{{ item.score }}</td>
                <td>
                  <el-button :disabled="!item.reportId" type="text" @click="toReport(item)">查看</el-button>
                </td>
              </tr>
            </template>
            <tr v-else>
              <td colspan="6">暂无数据</td>
            </tr>
          </table>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="memberVisible = false">确定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import breadcrumb from '@/components/breadcrumb'
import util from '@/libs/util'
import Setting from "@/setting"
import Const from '@/const/match'
export default {
    name: 'matchdetail',
    data() {
        return {
            token: util.local.get(Setting.tokenKey),
            id: +this.$route.query.id,
            end: '',
            status: '',
            statusList: ["等待报名", "取消报名", "立即报名", "报名截止", "进入竞赛", "已结束"],
            endList: ["报名开始", "报名截止", "报名截止", "竞赛开始", "竞赛结束", ""],
            rules: Const.rules,
            methods: Const.methods,
            teamCalculationMethods: Const.teamCalculationMethods,
            timerList: [],
            form: {
              name: '',
              coverUrl: '',
              description: '',
              signUpStartTime: '',
              signUpEndTime: '',
              playStartTime: '',
              playEndTime: '',
              competitionStage: [],
              completeCompetitionSetup: {},
              competitionRegistration: {}
            },
            curType: '1',
            typeList: [
                {
                    id: '1',
                    name: '竞赛信息'
                },
                {
                    id: '2',
                    name: '竞赛进展'
                },
                {
                    id: '3',
                    name: '通知公告'
                },
                {
                    id: '4',
                    name: '竞赛排名'
                },
            ],
            progress: [],
            timer: null,
            notices: [],
            noticeDetail: {},
            curArch: '0',
            arches: [],
            ranks: [],

            enterVisible: false,
            enterForm: {
              competitionId: this.$route.query.id,
              teamId: '',
              invitationCode: '',
              registrationInvitationCode: '',
              whetherSignUp: 1
            },
            
            teamVisible: false,
            teams: [],
            teamNameRepeat: false,
            teamForm: {
              competitionId: this.$route.query.id,
              registrationInvitationCode: '',
              teamName: '',
              invitationCode: '',
              whetherSignUp: 1
            },
            curStage: null,
            originInfo: {},
            info: {
              isCaption: 0,
              person: {},
              caption: {},
              team: {
                captain: 1,
                invitationCode: ''
              },
              stages: [],
              teamDetail: [],
              teamInstructors: []
            },
            originIns: {
              position: '',
              name: '',
              phone: '',
            },
            checkedPlayer: '',
            transferVisible: false,
            editing: false,
            memberVisible: false,
            members: [],
            curRow: {},
            chooseVisible: false,
            checkedMember: '',
            checkedMembers: [],
            chooses: [],
            lastType: 1,
            playingStages: [],
            peopleSignupVisible: false,
            peopleSignupForm: {
              registrationInvitationCode: ''
            },
        };
    },
    computed: {
        ...mapState("user", [
            'logView'
        ]),
    },
    components: {
        breadcrumb
    },
    mounted() {
      this.$once('hook:beforeDestroy', function() {
        clearInterval(this.timer)
        this.timerList.forEach(n => {
          clearTimeout(n)
        })
        this.timerList = []
      })
      this.getData()
      this.getProgress()
      this.getNotice()
      this.getTeam()
    },
    methods: {
        ...mapMutations('match', [
          'SET_SOURCE'
        ]),
        getData() { // 获取竞赛信息
            clearInterval(this.timer)
            this.$post(`${this.api.getCompetition}?competitionId=${this.id}`).then(({ competition }) => {
              const list = competition.competitionAnnexList
              // 附件
              if (list) {
                list.map(e => {
                  const { filePath } = e
                  e.canPreview = util.canPreview(filePath.substr(filePath.lastIndexOf('.') + 1))
                })
              }

              this.form = competition
              const reg = competition.competitionRegistration
              // 选择的赛事类型为设置完整比赛的才展示竞赛排名和参赛信息
              if (competition.releaseType) {
                const arches = []
                // 积分赛才有总分排名
                competition.rule === 0 ?
                  arches.push({
                    stageId: '0',
                    stageName: '总分'
                  }) :
                  (this.curArch = competition.competitionStage[0].stageId + '')
                arches.push(...competition.competitionStage)
                arches.map(e => e.stageId = e.stageId + '')
                this.arches = arches

                // 报名后才显示参赛信息
                if (reg && !this.typeList.find(e => e.id == 5)) {
                  this.typeList.push({
                    id: '5',
                    name: '参赛信息'
                  })
                  this.getInfo()
                }
                this.token && this.getRank()
              } else {
                this.typeList = this.typeList.slice(0, 3)
              }
              this.$refs.breadcrumb.update('全部赛事/' + competition.name)
              this.handleStatus()
            }).catch(err => {})
        },
        // 定时处理时间及状态
        handleStatus() {
          const { form } = this
          let total = ''
          let time = ''
          let status = ''
          let signUpStartTime = new Date(this.core.dateCompatible(form.signUpStartTime)) // 报名开始时间
          let signUpEndTime = new Date(this.core.dateCompatible(form.signUpEndTime)) // 报名结束时间
          let playStartTime = new Date(this.core.dateCompatible(form.playStartTime)) // 比赛开始时间
          let playEndTime = new Date(this.core.dateCompatible(form.playEndTime)) // 比赛结束时间
          this.timer = setInterval(() => {
              const now = new Date()
              if (now < signUpStartTime) { // 报名没开始
                status = 0
                total = signUpStartTime - now
              } else if (now > signUpStartTime && now < signUpEndTime) { // 报名进行中
                // 1已报名，2立即报名(没登录的情况下，直接显示立即报名，登录了则取报名信息，有则已报名，无则立即报名)
                status = this.token ?
                  (form.competitionRegistration ?
                    1 :
                    2) :
                  2
                total = signUpEndTime - now
              } else if (now > signUpEndTime && now < playStartTime) { // 报名结束了,但比赛没开始
                status = 3
                total = playStartTime - now
              } else if (now > playStartTime && now < playEndTime) { // 比赛进行中
                // 如果是完整比赛
                if (form.releaseType) {
                  // 进行中的赛事，则遍历每个阶段的开始结束时间，看阶段比赛是否开始
                  let curStage = null
                  const stages = form.competitionStage
                  if (stages) {
                    this.playingStages = []
                    form.competitionRegistration && stages.forEach(e => {
                      if (now >= new Date(e.startTime) && now <= new Date(e.endTime) && e.method !== 2) this.playingStages.push(e)
                    })
                    let endText = ''
                    for (const i in stages) {
                      const e = stages[i]
                      const startTime = new Date(e.startTime)
                      const endTime = new Date(e.endTime)
                      if (now < startTime) { // 阶段比赛未开始，不显示进入比赛按钮
                        endText = '阶段开始'
                        total = startTime - now
                        break
                      } else if (now >= startTime && now <= endTime && e.method !== 2) { // 阶段比赛进行中，显示进入比赛按钮
                        if (form.competitionRegistration) { // 报名了才能进入比赛
                          this.statusList[4] = e.count ? '已提交' : '进入' + e.stageName
                          curStage = e
                        } else if (!this.token) {
                          this.statusList[4] = '进入' + e.stageName
                          curStage = e
                        }
                        endText = '阶段结束'
                        total = endTime - now
                        break
                      } else if (stages[i + 1] && now > endTime && now < new Date(stages[i + 1].startTime)) { // 过了该阶段的结束时间，但是没到下个阶段的开始时间，不显示进入比赛按钮
                        endText = '阶段开始'
                        total = new Date(stages[i + 1].startTime) - now
                        break
                      } else if (i === stages.length - 1) { // 当前时间在比赛开始结束时间之间，并且是最后一个阶段结束时间之后
                        this.$set(form, 'stageName', '')
                        endText = '竞赛结束'
                        total = playEndTime - now
                        break
                      }
                    }
                    this.endList[4] = endText
                  }
                  this.curStage = curStage
                } else { // 仅发布信息
                  total = playEndTime - now
                }
                status = 4
              } else if (now > playEndTime) { // 比赛结束
                status = 5
              }
              this.status = status
              total = total / 1000
              --total
              if (total > 86400) { // 超过一天则显示天数
                // clearInterval(this.timer)
                this.end = Math.floor(total / 86400) + '天'
              } else if (total > 0) { // 一天之内，显示时分秒
                let hours = Math.floor(total / (60 * 60))
                let minutes = Math.floor(total % (60 * 60) / 60)
                let seconds = Math.floor(total % (60 * 60) % 60)
                time = `${this.core.formateTime(hours)}:${this.core.formateTime(minutes)}:${this.core.formateTime(seconds)}`
                if (total > 0) this.end = time
              } else if (this.status === 5) { // 竞赛结束，清除定时器
                clearInterval(this.timer)
              }
          }, 1000)
        },
        // 获取竞赛信息
        getInfo() {
          this.$post(`${this.api.entryInformation}?competitionId=${this.id}`).then(res => {
            const info = res.entryInformation
            // 如果是队长，并且没有指导老师，默认添加一个空的
            if (info.team && !info.team.captain && !info.teamInstructors.length) info.teamInstructors.push(JSON.parse(JSON.stringify(this.originIns)))
            if (info.personalDetail) {
              info.team = {}
              info.teamDetail = []
            } else {
              info.isCaption = info.team.caption
            }
            const caption = info.teamDetail.find(e => !e.caption)
            info.caption = caption ? caption : {}
            info.person = info.personalDetail || info.teamDetail.find(e => e.accountId == info.team.accountId)
            this.originInfo = JSON.parse(JSON.stringify(info))
            // 把参赛人员的名字和accountId处理成一个数组
            info.stages && info.stages.map(e => {
              if (e.participantAccountIds && e.teamParticipantIds) {
                const accountIds = e.participantAccountIds.split(',').map(n => +n)
                const names = e.teamParticipantIds.split(',')
                const participants = []
                accountIds.map((n, i) => {
                  participants.push({
                    id: n,
                    name: names[i]
                  })
                })
                e.participants = participants
              }
            })
            // 设置定时器，阶段比赛结束后公布成绩，到时间后调本接口
            const now = Date.now()
            this.form.competitionStage && this.form.competitionStage.map(e => {
              // 如果公布成绩详情勾选的是
              if (!e.resultsDetails) {
                console.log(44, endTime - now < 86400000)

                const endTime = new Date(e.endTime).getTime() + e.resultAnnouncementTime * 3600000 // 阶段结束时间+成绩公布时间（成绩公布时间单位是小时，所以要转化为毫秒）
                if (now > endTime) { // 如果到了公布时间
                  info.stages.find(n => n.stageId == e.stageId).showDetail = 1
                } else if (endTime - now < 86400000) { // 没有到公布时间，则加定时器，到点后调用
                  this.timerList.push(setTimeout(this.getInfo, endTime - now))
                }
              }
            })
            this.info = info
            console.log("🚀 ~ file: index.vue:752 ~ this.$post ~ info", info)

          }).catch(err => {});
        },
        // 编辑保存
        edit(showMsg) {
          if (this.editing || !showMsg) {
            const { teamId, teamName, invitationCode } = this.info.team
            this.$post(this.api.editCompetitionTeam, {
              competitionId: this.id,
              teamId,
              teamName,
              invitationCode,
              whetherSignUp: 0
            }).then(res => {
              this.editing = false
              this.getInfo()
              showMsg && util.successMsg('保存成功')
            }).catch(res => {})
          } else {
            this.editing = !this.editing
          }
        },
        getProgress() { // 获取竞赛进展
            this.$get(this.api.getCompetitionProgress, {
              competitionId: this.id
            }).then(res => {
                this.progress = res.competitionProgressList.reverse()
            }).catch(err => {});
        },
        // 公告列表
        getNotice() {
          this.$post(`${this.api.queryAnnouncementByCompetitionId}?pageNum=1&pageSize=1000&competitionId=${this.id}`).then(({ data }) => {
            const records = data.records.filter(e => e.status) // 只显示已发布的（status 0草稿 1为已发布）
            records.map(e => {
              e.announcementText = e.announcementText.replace(/<img.*?(?:>|\/>)/gi, '')
            })
            this.notices = records
          }).catch(res => {})
        },
        // 预览附件
        preview(item) {
          const { filePath } = item
          const suffix = filePath.substr(filePath.lastIndexOf('.') + 1)
          window.open((util.isDoc(suffix) ? 'https://view.officeapps.live.com/op/view.aspx?src=' : '') + item.filePath)
        },
        // 下载附件
        download(item) {
          util.downloadFile(item.fileName, item.filePath)
        },
        // tab切换 前三个滚动，后两个切换
        typeChange() {
          const type = +this.curType
          // 如果上个选中的是参赛信息，则检查修改数据后有没保存(团队名称、邀请码、指导老师)
          if (this.lastType == 5) {
            const { team, teamInstructors } = this.info
            const { originInfo } = this
            let notSave = 0
            // 如果团队名称或者邀请码有修改
            if (team.teamName !== originInfo.team.teamName || team.invitationCode !== originInfo.team.invitationCode) {
              notSave = 1
            } else if (JSON.stringify(teamInstructors) !== JSON.stringify(originInfo.teamInstructors)) {
              notSave = 2
            }
            if (notSave) {
              this.$confirm('所填写内容暂未保存，是否保存？', "提示", {
                type: "warning"
              }).then(() => {
                // 保存团队名称和邀请码
                if (notSave === 1) {
                  this.edit()
                } else { // 保存指导老师
                  teamInstructors.map(e => {
                    e.name && this.$post(this.api.addAnAdvisor, {
                      name: e.name,
                      competitionId: this.id,
                      id: e.id,
                      teamId: this.form.competitionRegistration ? this.form.competitionRegistration.teamId : '',
                      phone: e.phone,
                      position: e.position,
                    }).then(res => {}).catch(res => {})
                  })
                }
              }).catch(() => {})
            } else {
              type < 4 && document.querySelector(`#part${type}`).scrollIntoView()
            }
          } else {
            type == 5 && this.getInfo()
            type < 4 && document.querySelector(`#part${type}`).scrollIntoView()
          }
          this.editing = false
          this.lastType = type
        },
        // 跳转公告详情
        toNotice(item) {
          this.$router.push(`noticeDetail?id=${item.id}&matchId=${this.id}&name=${this.form.name}&end=${this.end}&status=${this.status}`)
        },
        // 获取排名
        getRank() {
          const cur = +this.curArch
          const data = {
            pageNum: 1,
            pageSize: 1000,
            competitionId: this.id,
            isOverallRanking: cur ? 0 : 1
          }
          data.stageIds = cur ? cur: ''
          this.token && this.$post(this.api.frontOfficeCompetitionRanking, data).then(({ list }) => {
            this.ranks = list
          }).catch(res => {})
        },
        
        // 删除指导老师
        delAdvisor(row, i) {
          if (row.id) {
            this.$confirm('确定要删除吗？', '提示', {
              type: 'warning'
            }).then(() => {
              this.$post(`${this.api.deleteAnAdvisor}?id=${row.id}`).then(res => {
                util.successMsg('删除成功')
                this.getInfo()
              }).catch(res => {})
            }).catch(() => {})
          } else {
            this.info.teamInstructors.splice(i, 1)
          }
        },
        // 添加指导老师
        addAdvisor() {
          if (this.info.teamInstructors.length > 4) return util.errorMsg('指导老师仅限添加5个！')
          this.info.teamInstructors.push(JSON.parse(JSON.stringify(this.originIns)))
        },
        // 编辑导老师
        editAdvisor(row) {
          this.$set(row, 'edit', 1)
        },
        // 提交指导老师
        submitAdvisor(row) {
          if (!row.name) return util.errorMsg('请输入姓名')
          const { phone } = row
          if (phone && !/^1[3456789]\d{9}$/.test(phone)) return util.errorMsg('请输入正确手机号格式')
          this.$post(this.api.addAnAdvisor, {
            name: row.name,
            competitionId: this.id,
            id: row.id,
            teamId: this.form.competitionRegistration ? this.form.competitionRegistration.teamId : '',
            phone: row.phone,
            position: row.position,
          }).then(res => {
            util.successMsg((row.id ? '修改' : '新增') + '成功')
            this.getInfo()
          }).catch(res => {})
        },
        // 显示转让队长
        transfer() {
          // 取每个阶段的开始结束时间，有任何阶段开始了都不能转让队长和踢出队员
          const now = new Date()
          let start = 0
          for (const e of this.form.competitionStage) {
            if (now >= new Date(e.startTime) && now <= new Date(e.endTime)) {
              util.errorMsg('比赛已经开始，无法转让队长！')
              start = 1
              break
            }
          }
          if (!start) this.transferVisible = true
        },
        // 转让队长提交
        transferSubmit() {
          if (!this.checkedPlayer) return util.errorMsg('请选择成员')
          this.$post(this.api.captainOfTransfer, {
            captainId: this.info.caption.teamId,
            playerId: this.checkedPlayer
          }).then(res => {
            this.checkedPlayer = ''
            util.successMsg('转让成功')
            this.transferVisible = false
            this.getInfo()
          }).catch(res => {})
        },
        // 踢出团队
        removeLine(row) {
          // 取每个阶段的开始结束时间，有任何阶段开始了都不能转让队长和踢出队员
          const now = new Date()
          let start = 0
          for (const e of this.form.competitionStage) {
            if (now >= new Date(e.startTime) && now <= new Date(e.endTime)) {
              util.errorMsg('比赛已经开始，无法踢出成员！')
              start = 1
              break
            }
          }
          if (!start) {
            let include
            for (const e of this.info.stages) {
              if (e.participantAccountIds) {
                const ids = e.participantAccountIds.split(',').map(n => +n)
                if (ids.includes(row.accountId)) {
                  include = e.stageName
                  break
                }
              }
            }
            this.$confirm(include ? `该成员已被指定参加${include}，踢出后需重新指定成员参加，是否确认踢出团队？` : '确定要踢出该成员吗？', '提示', {
              type: 'warning'
            }).then(() => {
              this.$post(`${this.api.removeTheLine}?teamId=${this.info.teamId}&competitionId=${this.id}&accountId=${row.accountId}`).then(res => {
                util.successMsg('移除成功')
                this.getInfo()
              }).catch(res => {})
            }).catch(() => {})
          }
        },
        // 移除参赛人员
        removePar(e, stage) {
          this.$confirm('确定要移除该成员吗？', '提示', {
            type: 'warning'
          }).then(() => {
            this.$post(this.api.cancelParticipant, {
              accountId: e.id,
              competitionId: this.id,
              stageId: stage.stageId,
              teamId: this.info.teamId
            }).then(res => {
              util.successMsg('移除成功')
              this.getInfo()
            }).catch(res => {})
          }).catch(() => {})
        },
        // 选择参赛人员
        selectPar(row) {
          const item = this.form.competitionStage.find(e => e.stageId == row.stageId)
          if (item) {
            // 该阶段已经开始比赛则不能修改
            const now = new Date()
            if (now >= new Date(item.startTime) && now <= new Date(item.endTime)) {
              return util.errorMsg('该阶段比赛已经开始，无法修改允许参赛人员！')
            } else {
              const { teamLimit, stages, teamDetail } = this.info
              // teamLimit=true，则每个成员只能参加一个阶段的比赛，要获取stages里返回的所有participantAccountIds（参赛人员的accountId），然后不显示这些参赛人员
              if (teamLimit) {
                const chooses = []
                let ids = []
                // 获取已经允许参赛的人员accountId
                stages.map(e => {
                  const id = e.participantAccountIds
                  if (e.stageId != row.stageId && id) ids.push(...id.split(',').map(n => +n))
                })
                ids = [...new Set(ids)]
                teamDetail.map(e => {
                  ids.includes(e.accountId) || chooses.push(e) // 没有参赛的人员则显示出来
                })
                this.chooses = chooses
              } else {
                this.chooses = this.info.teamDetail
              }
              this.curRow = row
              this.checkedMembers = row.participantAccountIds ? row.participantAccountIds.split(',').map(e => +e) : [] // 选中了的人员要回显
              this.chooseVisible = true
            }
          }
        },
        // 选择参赛人员提交
        chooseSubmit() {
          const accountIds = this.checkedMembers
          if (!accountIds.length) return util.errorMsg('请选择参赛成员！')
          const limit = this.curRow.teamNumLimit // 参赛人数限制
          if (limit && accountIds.length > limit) return util.errorMsg(`请选择${limit}个以下参赛成员！`) // 选择的参赛人员个数不能大于参赛人数限制
          this.$post(this.api.stageSelectParticipants, {
            accountIds,
            competitionId: this.id,
            stageId: this.curRow.stageId,
            teamId: this.info.teamId
          }).then(res => {
            this.checkedMembers = []
            util.successMsg('修改成功')
            this.getInfo()
            this.chooseVisible = false
          }).catch(res => {})
        },
        // 查看成绩详情
        show(row) {
          // 团队展示弹框，个人跳转实验报告
          if (this.form.completeCompetitionSetup.competitionType) { // 团队比赛则展示团队成员成绩详情
            this.curRow = row
            this.memberVisible = true
            const teamId = this.form.competitionRegistration.teamId
            if (teamId) {
              this.$post(this.api.stageTeamScoreDetails, {
                pageNum: 1,
                pageSize: 1000,
                competitionId: this.id,
                stageId: row.stageId,
                teamId
              }).then(({ page }) => {
                this.members = page.records
              }).catch(res => {})
            } else {
              this.members = []
            }
          } else if (row.reportId) { // 个人比赛，并且有reportId，则进入实验报告
            this.toReport(row)
          }
        },
        // 跳转实验报告
        toReport(row) {
          this.$router.push(`/record/show?reportId=${row.reportId}&matchId=${this.id}&matchName=${this.form.name}`)
        },
        
        // 个人报名提交
        peopleSignupSubmit() {
          this.$post(this.api.addCompetitionRegistration, {
            competitionId: this.id,
            registrationInvitationCode: this.peopleSignupForm.registrationInvitationCode
          }).then(res => {
            this.peopleSignupVisible = false
            this.getData()
            this.$message.success('报名成功')
          }).catch(res => {})
        },
        // 团队报名提交
        enterSubmit() {
          const form = this.enterForm
          if (!form.teamId) return util.errorMsg('请选择团队')
          if (!form.invitationCode) return util.errorMsg('请输入团队邀请码')
          if (this.form.completeCompetitionSetup.isNeedCode && !form.registrationInvitationCode) return util.errorMsg('请输入大赛邀请码')
          this.$post(this.api.joinCompetitionTeam, form).then(({ status, data, message }) => {
            this.enterVisible = false
            this.getData()
            util.successMsg('报名成功！')
          }).catch(res => {})
        },
        // 团队关闭
        enterClose() {
          this.enterForm = {
            competitionId: this.id,
            teamId: '',
            registrationInvitationCode: '',
            invitationCode: '',
            whetherSignUp: 1
          }
        },

        
        // 创建团队
        toTeam() {
          this.teamVisible = true
        },
        // 获取团队列表
        getTeam() {
          this.$get(this.api.searchTeam, {
            teamName: '',
            competitionId: this.id
          }).then(({ teamList }) => {
            this.teams = teamList
          }).catch(res => {})
        },
        // 团队提交
        teamSubmit() {
          const form = this.teamForm
          if (!form.teamName) return util.errorMsg('请输入团队名称')
          if (this.teamNameRepeat) return util.errorMsg('团队名称重复，请重新输入')
          if (form.invitationCode.length !== 6) return util.errorMsg('请输入6位数团队邀请码')
          if (this.form.completeCompetitionSetup.isNeedCode && !form.registrationInvitationCode) return util.errorMsg('请输入大赛邀请码')
          this.$post(this.api.addCompetitionTeam, form).then(({ status, data, message }) => {
            this.teamVisible = false
            this.enterVisible = false
            this.getData()
            util.successMsg('报名成功！')
          }).catch(res => {})
        },
        // 团队关闭
        teamClose() {
          this.teamForm = {
            competitionId: this.id,
            teamName: '',
            invitationCode: '',
            registrationInvitationCode: '',
            whetherSignUp: 1
          }
        },

        // 选择要进入的阶段
        chooseStage(e) {
          this.curStage = e
          this.signup()
        },
        // 判断是否能进赛事
        getAllow() {
          // 是否允许参加赛事（淘汰赛制）
          if (this.form.rule === 1) {
            this.$post(this.api.allowedParticipateCompetition, {
              competitionId: this.id,
              number: this.curStage.number,
              stageId: this.curStage.stageId,
              teamId: this.form.competitionRegistration.teamId,
            }).then(res => {
              this.toSub()
            }).catch(res => {})
          } else {
            this.toSub()
          }
        },
        // 立即报名
        signup(){
          const { status, form } = this
          // 如果登录了
          if (util.local.get(Setting.tokenKey)) {
            const { competitionType } = form.completeCompetitionSetup
            if (status == 4) { // 进入比赛
              // 参加过比赛不让参加
              if (this.curStage && this.curStage.count) return util.errorMsg('您已经参加过该阶段竞赛！')
              if (form.competitionRegistration.isDisable === 1) return util.errorMsg('当前用户已被禁赛，如有疑问，请联系平台管理员。') // 被禁用的用户不能进入大赛
              // 团队赛，则判断是否为参赛人员
              if (competitionType) {
                this.$post(this.api.isParticipant, {
                  competitionId: this.id,
                  stageId: this.curStage.stageId,
                  teamId: form.competitionRegistration.teamId,
                }).then(res => {
                  this.getAllow()
                }).catch(res => {})
              } else {
                this.getAllow()
              }
            } else if (status == 2) { // 报名
              // 团队赛报名
              if (competitionType) {
                this.enterVisible = true
              } else { // 个人赛报名
                if (form.completeCompetitionSetup.isNeedCode) {
                  this.peopleSignupForm.registrationInvitationCode = ''
                  this.peopleSignupVisible = true
                } else {
                  this.$post(this.api.addCompetitionRegistration, {
                    competitionId: this.id
                  }).then(res => {
                    this.getData()
                    this.$message.success('报名成功')
                  }).catch(res => {})
                }
              }
            } else if (status == 1) {
              // 已报名，点击取消报名
              this.$confirm('是否要取消报名？', '提示', {
                type: 'success'
              }).then(() => {
                this.$post(`${this.api.cancelRegistration}?competitionId=${this.id}`).then(res => {
                  this.$message.success('取消报名成功')
                  this.getData()
                }).catch(res => {})
              }).catch(() => {})
            }
          } else { // 如果没登录，提示去登录
            this.$confirm('请先登录，是否直接前往登录？', "提示", {
              type: 'success'
            }).then(() => {
              this.SET_SOURCE(this.id)
              this.$router.push('/login')  
            }).catch(() => {})
          }
        },
        // 进入python系统
        toPython() {
          const form = this.curStage
          let token = util.local.get(Setting.tokenKey);
          util.cookies.set('assessmentId', '', -1)
          util.cookies.set('startTime', '', -1)
          util.cookies.set('stopTime', '', -1)
          util.cookies.set('projectId', form.projectId)
          util.cookies.set('token', token)
          util.cookies.set('courseId', form.cid)
          util.cookies.set('curriculumName', escape(form.systemName))
          util.cookies.set('systemId', form.systemId)
          util.cookies.set('competitionId', this.form.id)
          util.cookies.set('stageId', form.stageId)
          util.cookies.set('teamId', this.form.competitionRegistration.teamId)
          util.cookies.set('stopTime', form.endTime)
          util.cookies.set('resultsDetails', form.resultsDetails)
          util.cookies.set('resultAnnouncementTime', form.resultAnnouncementTime)
          util.cookies.set('fromManager', '', -1)
          // 8个python子系统都跳这个地址，子系统会通过cookie里的systemId识别展示哪套系统
          location.href = process.env.NODE_ENV === 'development' ?
            `http://${location.hostname}:8085/#/` :
            Setting.isPro ?
              `https://${location.hostname}/pyTrials` :
              `${location.origin}/pyTrials`
        },
        // 进入子系统
        toSub() {
          const { form } = this
          const { systemId, projectId, cid, stageId } = this.curStage
          const competitionId = form.id
          const teamId = form.competitionRegistration.teamId
          let token = util.local.get(Setting.tokenKey);
          if (systemId == 11) {
              // 银行系统
              location.href = `${Setting.systemPath}/#/index/list?curriculumName=${this.curriculumName}&token=${token}&cid=${cid}&systemId=${systemId}&projectId=${projectId}&competitionId=${competitionId}&stageId=${stageId}&teamId=${teamId}&assessmentId=&classId=&stopTime=&test=true`
          } else if (systemId == 12) {
              // 众筹系统
              window.open(`http://120.78.139.126:8879?systemId=${systemId}&courseId=${cid}&projectId=${projectId}&token=${token}&userId=${this.userId}&classId=1&competitionId=${competitionId}&stageId=${stageId}&teamId=${teamId}`);
          } else {
            // python系统
            this.toPython(this.curProject)
          }
        }
    }
};
</script>

<style lang="scss" scoped>
.banner{
    width: 100%;
    height: 350px;
    padding: 120px 0 0 20%;
    color: #fff;
    background-size: 100% 350px;
    background-repeat: no-repeat;
}
.l-title {
  font-size: 18px;
}
.main .center-con {
    background: url(../../../assets/img/match-bg1.png) (0px 95px)/auto auto no-repeat,
                url(../../../assets/img/match-bg2.png) (98% 300px)/auto auto no-repeat;
}
.main .center-wrap {
    margin-top: 30px;
}
.rule-title {
  margin-bottom: 10px;
  font-size: 16px;
}
.rule {
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid #dfdfdf;
  p {
    font-size: 14px;
    line-height: 30px;
    color: #6e6e6e;
  }
}
/deep/.el-tabs__item {
  box-shadow: none !important;
}
.content{
    position: relative;
    padding: 20px 40px;
    margin-top: 30px;
    background-color: #fff;
    .title{
        width: 67%;
        margin: 0 auto;
        font-size: 28px;
        text-align: center;
        color: #0B1D30;
    }
    .tool {
      z-index: 100;
      position: sticky;
      top: 64px;
      margin-bottom: 20px;
      background-color: #fff;
      &.logView {
        z-index: 0;
      }
    }
    .info .meta{
        padding: 16px 0;
        font-size: 12px;
        color: #999;
        text-align: center;
    }
    .action {
        display: inline-flex;
        align-items: center;
    }
    .status {
        max-width: 120px;
        padding: 0 16px;
        margin-left: 20px;
        line-height: 34px;
        font-size: 14px;
        color: #fff;
        background-color: #52C41A;
        border-radius: 4px;
        cursor: pointer;
        @include ellipsis();
        &.wait {
            background-color: #FAAD14;
        }
        &.signing {
            background-color: $main-color;
        }
        &.signed {
            background-color: #52C41A;
        }
        &.playing {
            background-color: #f96d6d;
        }
        &.finish {
            background-color: #ccc;
        }
    }
    .end-text {
        font-size: 12px;
        color: #666;
        em {
            font-style: normal;
            color: #f00;
        }
    }
    .texts{
        margin: 20px 0 50px;
        font-size: 14px;
        line-height: 1.6;
        text-indent: 2em;
        overflow: hidden;
        /deep/img{
            max-width: 100%;
        }
    }
    .progress{
        position: relative;
        width: 95%;
        padding: 50px 0;
        margin: 40px auto 80px;
        text-align: left;
        &:before{
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 2px;
            height: 100%;
            background-color: #E1E6F2;
        }
        &:after {
            content: '';
            position: absolute;
            top: -10px;
            left: 430px;
            border: 8px solid transparent;
            border-bottom-color: #E1E6F2;
        }
        .rocket {
            position: absolute;
            bottom: -50px;
            left: 425px;
        }
        li{
            position: relative;
            width: 400px;
            margin-bottom: 42px;
            .dot{
                position: absolute;
                top: 12px;
                left: 431px;
                width: 15px;
                height: 15px;
                background-color: #DCDCDC;
                border-radius: 50%;
            }
            .name{
                display: inline-block;
                padding: 0 19px;
                margin-bottom: 16px;
                line-height: 40px;
                text-align: center;
                font-size: 16px;
                color: #fff;
                border-radius: 20px;
                background-color: #C4C4C4;
            }
            .desc{
                position: relative;
                color: #333;
                font-size: 14px;
            }
            &.ing, &.done {
                .dot {
                    top: 8px;
                    background-color: #007EFF;
                }
                .name {
                    background-color: #007EFF;
                }
            }
            &.ing {
                .dot {
                    width: 27px;
                    height: 27px;
                    border: 6px solid #E2F1FB;
                }
            }
            &:nth-child(odd) {
                text-align: right;
                &.ing {
                    .dot {
                        left: auto;
                        right: -51px;
                    }
                }
                .name {
                    &:before {
                        content: '';
                        z-index: 2;
                        position: absolute;
                        top: 14px;
                        right: -35px;
                        border: 18px solid transparent;
                        border-top-width: 6px;
                        border-bottom-width: 6px;
                        border-left-color: #C4C4C4;
                    }
                }
                .desc {
                    text-align: right;
                }
                &.ing, &.done {
                    .name {
                        &:before {
                            border-left-color: #007EFF;
                        }
                    }
                }
            }
            &:nth-child(even) {
                margin-left: 482px;
                .dot {
                    left: -51px;
                }
                &.ing {
                    .dot {
                        left: -57px;
                    }
                }
                .name {
                    text-align: left;
                    &:after {
                        content: '';
                        z-index: 2;
                        position: absolute;
                        top: 14px;
                        left: -35px;
                        border: 18px solid transparent;
                        border-top-width: 6px;
                        border-bottom-width: 6px;
                        border-right-color: #C4C4C4;
                    }
                }
                .desc {
                    &:before {
                        left: auto;
                        right: -16px;
                        border: 8px solid transparent;
                        border-left-color: #fff;
                    }
                    &:after {
                        left: auto;
                        right: -18px;
                        border: 9px solid transparent;
                        border-left-color: #E6E6E6;
                    }
                }
                
                &.ing, &.done {
                    .name {
                        &:after {
                            border-right-color: #007EFF;
                        }
                    }
                }
            }
            &:last-child{
                margin-bottom: 0;
            }
        }
    }
}
.files {
  margin-bottom: 30px;
  li {
    display: flex;
    align-items: center;
    margin: 10px 0;
  }
  .fileName {
    margin-right: 10px;
    font-size: 12px;
  }
}
.notice-list {
  text-align: left;
  li {
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.3s;
    cursor: pointer;
    border-radius: 6px;
    background-color: #fff;
    border-bottom: 1px dashed #ebebeb;
    &:last-child {
      border-bottom: 0;
    }
  }
  h6 {
    font-size: 20px;
    font-weight: 500;
    color: #0B1D30;
    &:hover {
      color: #007EFF;
    }
  }
  .meta {
    margin: 10px 0;
    font-size: 14px;
    color: #666;
  }
  .des {
    font-size: 14px;
    color: #333;
    line-height: 24px;
    display: -webkit-box;
    display:-moz-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.table {
  width: 100%;
  border-collapse: collapse;
  th, td {
    padding: 12px;
    border: 1px solid #ebeef5;
  }
  &.tc {
    text-align: center;
  }
  th {
    text-align: center;
    background-color: #f8faff;
  }
  .icon {
    margin-right: 10px;
    font-size: 16px;
    color: #7a7a7a;
    cursor: pointer;
    &:hover {
      color: #007EFF;
    }
  }
  .plus {
    margin-bottom: 10px;
    text-align: right;
  }
  .line {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .el-input {
      margin-right: 15px;
    }
  }
}
.flex-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
/deep/.dia-form {
  .w-100 {
    width: 100%;
  }
  .tips {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>