<template>
  <div class="exam-container">
    <el-card style="background: none; box-shadow:none;border: none;padding: 0;">
      <template #header>
        <page-header>
          <template #actions>
            <el-button
              @click="fetchExamDetail"
              :loading="loading.refresh"
              v-if="isStudentGroup && exam.joined"
            >
              <el-icon>
                <RefreshRight/>
              </el-icon>
            </el-button>
            <el-button
              v-if="isStudentGroup && !exam.joined"
              type="primary"
              @click="dialog.join = true"
              :disabled="statusTagContent!=='进行中'"
            >
              参加考试
            </el-button>
            <el-button
              v-if="(isStudentGroup || isTeacherGroup) && !exam.joined"
              type="primary"
              :loading="loading.create"
              @click="createExamPaper"
              :disabled="statusTagContent!=='进行中'"
            >
              生成自测试卷
            </el-button>
            <el-button
              v-if="(isStudentGroup || isTeacherGroup) && exam.joined"
              type="primary"
              @click="jumpToCoderOnlineExam"
            >
              在线自测
            </el-button>
            <!--            <el-button-->
            <!--                v-if="isTeacherGroup || isAdmin || isAssistantGroup"-->
            <!--                style="background-color:white;border-color:white;color:#606266;min-width: 125px;box-shadow: #868484 0 2px 5px .1px"-->
            <!--                @click="checkStudentGrade"-->
            <!--            >-->
            <!--              查看学生成绩-->
            <!--            </el-button>-->
            <el-button
              v-if="isTeacherGroup || isAdmin"
              disabled
              style="background-color:white;color:#606266;min-width: 100px;"
              @click="goToDetect()"
            >
              查看查重结果
            </el-button>
            <el-button
              v-if="isTeacherGroup || isAdmin"
              style="background-color:#F46C6C;border-color:#F46C6C;color:white;min-width: 100px;"
              @click="dialog.delete = true"
            >
              删除考试
            </el-button>
          </template>
          <span style="font-size: 32px;font-family: 'Inter',sans-serif">{{ exam.name }}</span>
        </page-header>
      </template>

      <el-descriptions class="exam-description">
        <el-descriptions-item
          label="编号:"
          label-class-name="label-bold"
          min-width="200px"
        >
          {{ exam.id }}
        </el-descriptions-item>
        <el-descriptions-item
          label="教师:"
          label-class-name="label-bold"
          min-width="300px"
        >
          {{ teacherName }}
        </el-descriptions-item>
        <el-descriptions-item
          label="课程:"
          label-class-name="label-bold"
          min-width="300px"
        >
          {{ exam.course }}
        </el-descriptions-item>
        <el-descriptions-item
          label="状态:"
          label-class-name="label-bold"
        >
          <el-tag size="small" :type="statusTagType" round effect="plain">
            {{ statusTagContent }}
          </el-tag>
        </el-descriptions-item>
        <!--        <el-descriptions-item-->
        <!--            v-if="(isStudentGroup || isTeacherGroup) && exam.joined"-->
        <!--            :label="`${isTeacherGroup ? '自测' : ''}成绩:`"-->
        <!--            label-class-name="label-bold"-->
        <!--        >-->
        <!--          {{ result.score }}-->
        <!--        </el-descriptions-item>-->
        <el-descriptions-item
          label="创建时间:"
          label-class-name="label-bold"
        >
          {{ formatTimestamp(exam.created_at) }}
        </el-descriptions-item>
        <el-descriptions-item
          label="起止时间:"
          :span="2"
          label-class-name="label-bold"
        >
          {{ formatTimestamp(exam.startAt) }} 至 {{ formatTimestamp(exam.endAt) }}
          <a
            v-if="isTeacherGroup || isAdmin"
            class="changeable"
            @click="dialog.update = true"
          >
            修改
          </a>
        </el-descriptions-item>
        <el-descriptions-item
          v-if="(isStudentGroup && exam.joined) || isTeacherGroup"
          label="试卷地址:"
          :span="3"
          label-class-name="label-bold"
        >
        <span id="exam-url">
        {{ exam.url ? exam.url : "不可用" }}
        </span>
          <a
            v-if="exam.url"
            id="copy-btn"
            class="changeable"
            data-clipboard-target="#exam-url"
            @click="copyAddress"
          >
            复制
          </a>
        </el-descriptions-item>
        <el-descriptions-item
          v-if="isTeacherGroup || isAdmin"
          label="是否允许学生查看控制台:"
          :span="2"
          label-class-name="label-bold"
        >
          <span>{{ isConsoleOutputShownForStu ? "允许" : "不允许" }}</span>
          <a class="changeable" @click="dialog.console = true">
            修改
          </a>
        </el-descriptions-item>
      </el-descriptions>

      <!--      题目列表-->
      <el-card
        v-if="exam.joined || isTeacherGroup"
        class="son-card"
        style="background: none; box-shadow:none;border: none; margin-top: 15px;margin-bottom: 30px"
      >
        <template #header>
          <span style="color:black;font-size: 24px;font-family: 'Inter',sans-serif">题目列表</span>
        </template>

        <el-collapse accordion>
          <el-collapse-item
            v-for="problem in exam.problems"
            :key="problem.id"
            :name="problem.id"
          >
            <template #title>
              <span style="margin-left: 20px;font-size: 16px;">{{ problem.name }}</span>
              <el-tag size="small" round style="margin-left: 15px" effect="plain">
                {{ problemTypeToTagContent(problem.type) }}
              </el-tag>
            </template>
            <div style="margin-left: 40px">{{ problem.description }}</div>
            <div style="margin-left: 30px;margin-top: 10px">
              <!--              原来逻辑：只有老师和管理员可以查看题目预览-->
              <a
                v-if="isTeacherGroup || isAdmin"
                style="color: #409EFF;cursor: pointer;"
                @click="jumpToProblemDetail(problem.id)">
                预览
              </a>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-card>

      <!--      提交记录-->
      <el-card
        v-if="exam.joined || isTeacherGroup"
        class="son-card"
        style="background: none; box-shadow:none;border: none;margin-bottom: 30px"
      >
        <template #header>
          <span style="color:black;font-size: 24px;font-family: 'Inter',sans-serif">提交记录</span>
        </template>

        <el-table v-if="exam.joined || isTeacherGroup" :data="result.commits"
                  style="background: none; box-shadow:none;border: none">
          <el-table-column prop="id" label="#" width="200"/>
          <el-table-column label="提交时间">
            <template #default="scope">
              <span>{{ formatTimestamp(scope.row.created_at) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="200">
            <template #default="scope">
              <span
                :style="{color: + scope.row.finished ? $color.ElEMENT_COLOR.successColor : $color.ElEMENT_COLOR.primaryColor}">
                {{ scope.row.finished ? "运行结束" : "等待或运行中" }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="score" label="成绩" width="150"/>
          <el-table-column label="操作" type="expand" width="50">
            <template #default="scope">
              <CommitBoard :commit-id="scope.row.id" :exam-id="Number($route.params.examId)"></CommitBoard>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!--      结果列表-->
      <el-card class="son-card" style="background: none; box-shadow:none;border: none;margin-bottom: 30px"
               v-if="isTeacherGroup || isAdmin || isAssistantGroup">
        <template #header>
          <page-header>
            <template #actions>
              <el-button
                type="primary"
                size="small"
                @click="download">
                下载成绩单
              </el-button>
              <el-button
                @click="downloadDetailed"
                size="small"
                type="primary">
                下载详细成绩单
              </el-button>
            </template>
            <span
              style="color:black;font-size: 24px;font-family: 'Inter',sans-serif;font-weight: normal;margin-top: 0;margin-bottom: 0">结果列表</span>
          </page-header>
        </template>
        <div style="margin-left: 20px">
          <echarts style="width: 100%" :options="chartOptions"/>
          <el-descriptions class="exam-description">
            <el-descriptions-item label="总计人数:" label-class-name="label-bold">
              {{ totalStudents }}
            </el-descriptions-item>
            <el-descriptions-item label="总计平均成绩:" label-class-name="label-bold">
              {{ totalAverage }}
            </el-descriptions-item>
            <el-descriptions-item label="有效人数:" label-class-name="label-bold">
              {{ committedStudents }}
            </el-descriptions-item>
            <el-descriptions-item label="有效平均成绩:" label-class-name="label-bold">
              {{ committedAverage }}
            </el-descriptions-item>
            <el-descriptions-item label="满分人数:" label-class-name="label-bold">
              {{ fullScoreStudents }}
            </el-descriptions-item>
            <el-descriptions-item label="满分比例:" label-class-name="label-bold">
              {{ fullScoreRatio }}
            </el-descriptions-item>
            <el-descriptions-item label="及格人数:" label-class-name="label-bold">
              {{ passedStudents }}
            </el-descriptions-item>
            <el-descriptions-item label="及格比例:" label-class-name="label-bold">
              {{ passedRatio }}
            </el-descriptions-item>
          </el-descriptions>
          <el-table :data="resultList" style="background: none; box-shadow:none;border: none">
            <el-table-column prop="id" label="#" width="200"/>
            <el-table-column label="用户名">
              <template #default="scope">
                <span>{{ scope.row.owner.username }}</span>
              </template>
            </el-table-column>
            <el-table-column label="最后提交时间">
              <template #default="scope">
                <span v-if="!scope.row.lastCommitAt">没有提交记录</span>
                <span v-else>{{ formatTimestamp(scope.row.lastCommitAt) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="score" label="成绩" width="200"/>
            <el-table-column label="操作" width="200">
              <template #default="scope">
                <el-button type="text" @click="jumpToCodemirror(scope.row.owner)">源码</el-button>
                <!--                |-->
                <!--                <el-button type="text" @click="jumpToResultDetail(scope.row.id)">详情</el-button>-->
              </template>
            </el-table-column>
            <el-table-column type="expand">
              <template #default="scope">
                <ResultDetail :resultId="scope.row.id" :exam-id="$route.params.examId"></ResultDetail>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </el-card>

    <el-dialog title="确认删除考试吗？" v-model="dialog.delete">
      <el-alert
        style="margin-bottom: 20px"
        title="注意：所有与该场考试有关的提交数据都将被删除！"
        type="error"
        :closable="false"
      ></el-alert>
      <el-descriptions>
        <el-descriptions-item label="考试ID：">{{ exam.id }}</el-descriptions-item>
        <el-descriptions-item label="考试名称：">{{ exam.name }}</el-descriptions-item>
      </el-descriptions>

      <template #footer class="dialog-footer">
        <el-button @click="dialog.delete = false">取消</el-button>
        <el-button
          type="danger"
          :loading="loading.delete"
          @click="deleteExam"
        >确定
        </el-button>
      </template>
    </el-dialog>
    <el-dialog title="修改起止时间" v-model="dialog.update" width="960px">
      <el-alert title="注意" type="warning" style="margin-bottom: 20px">
        <p>开始时间早于当前时间考试将立即开始</p>
        <p>开始时间晚于当前时间考试将回归未开始状态</p>
        <p>结束时间早于当前时间考试将立即结束并关闭</p>
        <p>考试关闭后将无法恢复</p>
        <p>需选定开始时间和结束时间方可设置</p>
      </el-alert>
      <el-descriptions>
        <el-descriptions-item label="原起止时间：" :span="2">
          {{ formatTimestamp(exam.startAt) }} 至 {{ formatTimestamp(exam.endAt) }}
        </el-descriptions-item>
        <el-descriptions-item label="新起止时间：" :span="2">
          <el-date-picker
            v-model="range"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-descriptions-item>
      </el-descriptions>

      <template #footer class="dialog-footer">
        <el-button @click="dialog.update = false">取消</el-button>
        <el-button
          type="primary"
          :loading="loading.update"
          :disabled="range.length !== 2"
          @click="updateExam"
        >
          确定
        </el-button>
      </template>
    </el-dialog>
    <el-dialog title="修改学生查看控制台权限" v-model="dialog.console">
      <el-descriptions>
        <el-descriptions-item label="考试ID：">{{ exam.id }}</el-descriptions-item>
        <el-descriptions-item label="考试名称：">{{ exam.name }}</el-descriptions-item>
        <el-descriptions-item label="当前控制台权限：">
          {{ isConsoleOutputShownForStu ? "" : "不" }}允许学生查看控制台输出
        </el-descriptions-item>
        <el-descriptions-item label="控制台权限变更：">
          {{ isConsoleOutputShownForStu ? "" : "不" }}允许学生查看控制台输出 ->
          {{ isConsoleOutputShownForStu ? "不" : "" }}允许学生查看控制台输出
        </el-descriptions-item>
      </el-descriptions>
      <template #footer class="dialog-footer">
        <el-button @click="dialog.console = false">取消</el-button>
        <el-button
          type="primary"
          :loading="loading.console"
          @click="changeShowConsoleForStu"
        >
          确定
        </el-button>
      </template>
    </el-dialog>
    <el-dialog title="确认参加这场考试吗？" v-model="dialog.join">
      <el-descriptions>
        <el-descriptions-item label="考试名称:">{{ exam.name }}</el-descriptions-item>
        <el-descriptions-item label="创建者:">{{ exam.creator ? exam.creator.username : "" }}</el-descriptions-item>
        <el-descriptions-item label="起止时间:" :span="2">
          {{ formatTimestamp(exam.startAt) }} 至 {{ formatTimestamp(exam.endAt) }}
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" :loading="loading.join" @click="joinExam">确定</el-button>
          <el-button @click="dialog.join = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  examStatusToTagContent,
  examStatusToTagType,
  formatTimestamp,
  problemTypeToTagContent
} from "@/utils/coder-utils";
import {mapGetters} from "vuex";
import PageHeader from "../../components/PageHeader.vue";
import CommitBoard from "@/views/CoderPage/ResultPage/CommitPage/components/CommitBoard.vue";
import ResultDetail from "@/views/CoderPage/ResultPage/ResultDetail";
import Echarts from "@/views/CoderPage/ResultPage/Echarts.vue";
import {ElMessage} from "element-plus";
import Clipboard from "clipboard";
import colorUtil from "@/utils/color";

export default {
  name: "ExamDetail",
  components: {
    PageHeader,
    Echarts,
    CommitBoard,
    ResultDetail
  },
  props: {},
  data() {
    return {
      exam: {joined: true},
      result: {},
      isConsoleOutputShownForStu: false,

      dialog: {
        update: false,
        delete: false,
        console: false,
        join: false
      },

      loading: {
        join: false,
        update: false,
        delete: false,
        console: false,
        refresh: false,
        create: false,
      },

      range: [],

      //结果列表
      resultList: [],
      chartOptions: {
        tooltip: {
          show: true
        },
        xAxis: {
          data: [
            "未提交",
            "0-9",
            "10-19",
            "20-29",
            "30-39",
            "40-49",
            "50-59",
            "60-69",
            "70-79",
            "80-89",
            "90-99",
            "100"
          ]
        },
        yAxis: {
          name: "人数"
        },
        series: [
          {
            type: "bar",
            data: [],
            tooltip: {
              formatter: "{c}人"
            }
          }
        ]
      },

      // name, not username 门户统一使用name而非username
      teacherName: "",
    };
  },
  computed: {
    colorUtil() {
      return colorUtil;
    },
    ...mapGetters([
      "isStudentGroup",
      "isTeacherGroup",
      "isAdmin",
      "isAssistantGroup"
    ]),
    statusTagType() {
      return examStatusToTagType(this.exam.status);
    },
    statusTagContent() {
      return examStatusToTagContent(this.exam.status);
    },
    joinDisabled() {
      return (
        this.exam.status === "UNAVAILABLE" ||
        this.exam.status === "FINISHED" ||
        this.exam.status === "CLOSED"
      );
    },
    tabValue() {
      return this.exam.joined ? "commits" : "problems";
    },
    //结果列表的统计数据
    summary() {
      return this.resultList
        .map((result) => result.score)
        .reduce((a = 0, b = 0) => a + b, 0) ?? 0;
    },
    totalStudents() {
      return this.resultList.length;
    },
    totalAverage() {
      return (this.summary / Math.max(this.totalStudents, 1)).toFixed(2);
    },
    committedStudents() { //该同学有提交历史就算有效提交
      return this.resultList
        .map(result => result.lastCommitAt ? 1 : 0)
        .reduce((a, b) => a + b, 0);
    },
    committedAverage() { //注意：无效提交成绩为0
      return (this.summary / Math.max(this.committedStudents, 1)).toFixed(2);
    },
    fullScoreStudents() {
      return this.resultList
        .map(result => result.score === 100)
        .reduce((a, b) => a + b, 0);
    },
    fullScoreRatio() {
      return (
        (
          (this.fullScoreStudents * 100) /
          Math.max(this.committedStudents, 1)
        ).toFixed(2) + "%"
      );
    },
    passedStudents() { //
      return this.resultList
        .map(result => result?.score ?? 0 >= 60)
        .reduce((a, b) => a + b, 0);
    },
    passedRatio() {
      return (
        (
          this.passedStudents / Math.max(this.committedStudents, 1)
        ).toFixed(2) + "%"
      );
    },
  },
  async mounted() {
    await this.fetchExamDetail();
    if (this.exam.creator) {
      this.teacherName = (await this.$apis.getNameByUsernameAPI(this.exam.creator.username)).data.data;
    }
  },
  methods: {
    /**
     * 获取当前考试信息
     */ async fetchExamDetail() {
      this.loading.refresh = true;
      const {examId} = this.$route.params;
      await this.$apis.getCoderExamByExamId(examId)
        .then(_res => {
          this.exam = _res.data.res;
          if (!this.isAdmin && this.exam.joined) {
            this.fetchResult();
          }
        }).catch(_err => {
          ElMessage.error("当前考试不存在！跳转到管理页面！");
          this.$router.push("/manage");
        });
      if (this.isTeacherGroup) {
        await this.$apis.getExamIsShownForStu(examId)
          .then(_res => {
            this.isConsoleOutputShownForStu = _res.data.res ?? false;
            this.loading.refresh = false;
          }).catch(_err => {
            ElMessage.error(_err);
          });
        await this.$apis.getCoderResultByExamId(examId)
          .then(_res => {
            this.resultList = _res.data.res ?? [];
            //下面是两步操作
            //1 按照分数段分类
            //2 根据分数段，获取每个分数段的人数（返回数组）
            this.chartOptions.series[0].data = this.resultList.map(
              result => (result.lastCommitAt ? Math.floor((result.score ?? 0) / 10) : -1) + 1
            ).reduce((a, b) => {
              a[b]++;
              return a;
            }, new Array(12).fill(0));
          }).catch(_err => {
            ElMessage.error(_err);
          });
      }
      this.loading.refresh = false;
    },
    fetchResult() {
      this.$apis.getResultByResultId(this.exam.result?.id)
        .then(_res => {
          this.result = _res.data.res ?? {};
        }).catch(_err => {
        ElMessage.error(_err);
      });
    },
    formatTimestamp,
    problemTypeToTagContent,
    jumpToCoderOnlineExam() {
      let firstQuestionId = this.exam.problems[0].id;
      // let nextURL = "https://coder.seec.seecoder.cn/exam/" + this.exam.id + "?id_token=" + this.$store.state.user.token; //跳转到Coder
      let nextURL = `https://ide.seec.seecoder.cn/?examId=${this.exam.id}&questionId=${firstQuestionId}&id_token=${this.$store.state.user.token}`;
      window.open(nextURL);
    },
    goToDetect() {
      // ElMessage.error("暂不支持查看查重结果");
    },
    checkStudentGrade() {
      this.$router.push(this.$route.path + "/result");
    },
    deleteExam() {
      this.loading.delete = true;
      const {examId} = this.$route.params;
      this.$apis.deleteCoderExam(examId)
        .then(_res => {
          ElMessage.success("删除考试成功");
          this.dialog.delete = false;
          this.$router.push("/manage");
        }).catch(_err => {
        ElMessage.error("删除考试失败");
      }).finally(() => {
        this.loading.delete = false;
      });
    },
    updateExam() {
      this.loading.update = true;
      const {examId} = this.$route.params;

      this.$apis.updateCoderExam(examId, {
        course: this.exam.courseId,
        startAt: this.range[0].getTime() / 1000,
        endAt: this.range[1].getTime() / 1000
      }).then(_res => {
        console.log(_res);
        this.exam = _res.data.res ?? {};
        ElMessage.success({
          message: "更新考试时间段成功！",
          center: true
        });
        this.dialog.update = false;
      }).catch(_err => {
        ElMessage.error({
          message: "更新考试时间段失败！",
          center: true
        });
      }).finally(() => {
        this.loading.update = false;
        this.range = [];
      });
    },
    copyAddress() {
      const cb = new Clipboard("#copy-btn");
      cb.on("success", (e) => {
        ElMessage.success({
          message: "已复制到剪切板！",
          center: true
        });
        e.clearSelection();
      });
      cb.on("error", (e) => {
        ElMessage.error({
          message: "浏览器不支持复制到剪贴板！",
          center: true
        });
        e.clearSelection();
      });
    },
    changeShowConsoleForStu() {
      this.loading.console = true;
      const {examId} = this.$route.params;
      const showConsoleForStu = !this.isConsoleOutputShownForStu;

      this.$apis.changeExamIsShownForStu(examId, showConsoleForStu)
        .then(_res => {
          this.isConsoleOutputShownForStu = _res.data.res ?? false;
          ElMessage.success("修改控制台权限成功！");
        }).catch(_err => {
        console.log(_err);
        ElMessage.success("修改控制台权限失败！");
      }).finally(() => {
        this.dialog.console = false;
      });
    },
    jumpToProblemDetail(problemId) {
      this.$router.push("/problem/" + problemId);
    },
    joinExam() {
      this.loading.join = true;
      this.$apis.joinCoderExam(this.exam.id)
        .then(_res => {
          this.$message.success({
            message: "参加考试成功！",
            center: true
          });
          console.log("参加考试接口返回信息", _res);
          this.fetchExamDetail();
        }).catch(_err => {
        this.$message.error({
          message: "参加考试出错！",
          center: true
        });
      }).finally(() => {
        this.loading.join = false;
        this.dialog.join = false;
      });
    },
    createExamPaper() { // 生成自测试卷（老师选择考试，否则不能正常自测）
      this.loading.create = true;
      this.$apis.joinCoderExam(this.exam.id)
        .then(_res => {
          this.$message.success({
            message: "生成自测试卷成功！",
            center: true
          });
          this.fetchExamDetail();
        }).catch(_err => {
        this.$message.error({
          message: "生成自测试卷出错！",
          center: true
        });
      }).finally(() => {
        this.loading.create = false;
      });
    },
    //TODO 下载考试成绩的认证过程，信息安全问题
    //下载考试成绩单
    download() {
      const {examId} = this.$route.params;
      window.open(`https://coder.seec.seecoder.cn/api/file/result/${examId}`);
    },
    //下载考试详细成绩单
    downloadDetailed() {
      const {examId} = this.$route.params;
      window.open(`https://coder.seec.seecoder.cn/api/file/result/${examId}/detailed`);
    },
    //查看提交代码
    jumpToCodemirror(user) {
      let nextURL = `https://ide.seec.seecoder.cn/?examId=${this.exam.id}&studentId=${user.id}&id_token=${this.$store.state.user.token}`;
      window.open(nextURL);
    },
    //跳转到具体结果信息页
    jumpToResultDetail(resultId) {
      this.$router.push(`${this.$route.path}/result/${resultId}`);
    },
    // stop coder record
    async stopRecord(recordId) {
      const res = (await this.$apis.stopRecord(recordId)).data;
      console.log(res);
    }
  }
};
</script>

<style lang="scss" scoped>
.exam-container {
  margin: 40px 10vw 80px 10vw;
  min-height: calc(100vh - 100px);
}

.changeable {
  color: #409EFF;
  cursor: pointer;
  margin-left: 20px;
}

::v-deep .el-card__header {
  border-bottom: 1px solid black;
  padding-left: 0;
  padding-right: 0;
}

::v-deep .son-card .el-card__header {
  border-bottom: none;
  padding-bottom: 0;
}

::v-deep .exam-description .el-descriptions__body {
  font-size: 16px;
  background-color: #F8F9FB; //样式穿透，覆盖原本的样式
}

::v-deep .label-bold {
  font-weight: 500;
  font-size: 16px;
}

::v-deep .el-collapse-item__content {
  padding-bottom: 15px;
}

//::v-deep .el-table th{
//  color: #606266;
//  font-family: 'Roboto', sans-serif;
//  font-size: 16px;
//  background-color: #F8F9FB;
//}
//::v-deep .el-table__row{
//  background-color: #F8F9FB;
//}

//::v-deep .el-table__header {
//  color: black;
//  border-bottom: 1px solid #afaaaa;
//}

.commit-stop-button {
  color: var(--el-color-danger)
}

.commit-stop-button:hover {
  color: rgba(245, 108, 108, 0.75);
}

:deep(.el-table__expanded-cell[class*=cell]){
  padding: 0;
  box-shadow: inset 0px 0px 5px 0px var(--el-color-info);
}
</style>
