<template>
  <div>
    <div>
      <el-checkbox-group
        v-if="subjectList.length > 1"
        @change="checkSubject"
        v-model="subjectId"
        size="medium"
        style="margin-bottom: 20px"
      >
        <el-checkbox-button
          :class="subjectList.length == 1 ? 'one' : ''"
          v-for="(item, index) in subjectList"
          :key="index"
          :label="item.id"
          >{{ item.name }}</el-checkbox-button
        >
      </el-checkbox-group>
      <el-table
        style="width: 100%"
        max-height="300px"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        :data="list"
      >
        <!-- <el-table-column type="expand">
          <template slot-scope="props">
            <el-row
              :gutter="20"
              v-for="(item, index) in props.row.detailDtos"
              :key="index"
            >
              <el-col :span="12"
                ><div class="rowFirst">{{ item.musicScoreName }}</div></el-col
              >
              <el-col :span="6"
                ><div class="rowSecond">
                  <span>{{ item.heardLevel | palyLevelFilter }}</span>
                </div></el-col
              >
              <el-col :span="6"
                ><div class="rowlast">
                  <span
                    :class="
                      item.trainingScore >= item.standardScore ? '' : 'red'
                    "
                    >{{ item.trainingScore }}</span
                  >
                  / {{ item.standardScore }} 分
                </div></el-col
              >
            </el-row>
          </template>
        </el-table-column> -->
        <el-table-column prop="username" align="left" label="学生姓名">
        </el-table-column>
        <el-table-column prop="phone" align="left" label="手机号">
        </el-table-column>
        <el-table-column prop="subjectName" align="left" label="声部名称">
        </el-table-column>
        <el-table-column prop="memo" align="left" label="练习说明">
          <template slot-scope="scope">
            <Tooltip
              :content="
                scope.row.memo
                  ? scope.row.memo
                  : '--'
              "
            />
          </template>
        </el-table-column>
        <el-table-column prop="trainingTime" align="left" label="完成时间">
          <template slot-scope="scope">
            <div v-if="scope.row.trainingTime">{{ scope.row.trainingTime | dateForMinFormat }}</div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column prop="finishFlag" align="left" label="测验分数">
          <template slot-scope="scope">
            <div>{{ scope.row.trainingScore || 0 }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="finishFlag" align="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="onDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      :title="userName + '评测详情'"
      :visible.sync="classVisible"
      width="800px"
      append-to-body
      v-if="classVisible"
    >
      <homeworkDetail :list="selectItem" />
    </el-dialog>
  </div>
</template>
<script>
import homeworkDetail from '../modal/homework-detail.vue'
import {
  getLessonExaminationStudent,
  getExaminationSubjectPublic
} from "../api";
export default {
  props: ["courseScheduleId", "type"],
  components: {homeworkDetail},
  data() {
    return {
      classVisible: false,
      subjectId: [],
      list: [],
      subjectList: [],
      userName: null,
      selectItem: [],
    };
  },
  mounted() {
    if (this.courseScheduleId) {
      this.getStudentList(this.courseScheduleId);
      this.getPublicSubject();
    }
  },
  methods: {
    onDetail(row) {
      this.userName = row.username
      this.selectItem = row.detailDtos || []
      this.classVisible = true
    },
    async getStudentList() {
      try {
        const res = await getLessonExaminationStudent({
          lessonExaminationId: this.courseScheduleId,
          subjectId: this.subjectId
        });
        const result = res.data || []
        result.forEach(item => {
          const detailDtos = item.detailDtos || []
          if(detailDtos.length > 0) {
            item.memo = detailDtos[0].memo || ''
          } else {
            item.memo = ''
          }
        })
        this.list = res.data;
      } catch (e) {
        console.log(e);
      }
    },
    async getPublicSubject() {
      try {
        const res = await getExaminationSubjectPublic({
          lessonExaminationId: this.courseScheduleId
        });
        this.subjectList = res.data;
      } catch (e) {
        console.log(e);
      }
    },
    checkSubject(val) {
      if (this.subjectId.length > 1) {
        this.subjectId.shift();
      }
      this.getStudentList();
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep.one {
  .el-checkbox-button__inner {
    border-radius: 4px !important;
  }
}

::v-deep.el-row {
  line-height: 44px;
}
.rowFirst {
  padding-left: 58px;
  color: #101010;
}
.rowSecond {
  text-align: right;
  span {
    color: #101010;
  }
  color: #9a9a9a;
}
.rowlast {
  text-align: right;
  padding-right: 10px;
  color: #101010;
  .red {
    color: #f44743;
  }
}
</style>
