<template>
  <div>
    <div class="cp_title">
      <span>{{this.problemCourse.title}}</span>
    </div>
    <div style="margin-top:10px">
      <el-table
        v-loading="Loading"
        ref="table"
        :data="Data"
        border
        :height="500"
        :fit="true"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        :header-cell-style="{ background: 'rgb(238,238,238)' }"
      >
        <el-table-column prop="courseName" label="课程" min-width="25" show-overflow-tooltip></el-table-column>
        <el-table-column prop="classname" label="章节" min-width="20" show-overflow-tooltip></el-table-column>
        <el-table-column prop="name" label="姓名" min-width="15" show-overflow-tooltip></el-table-column>
        <el-table-column prop="time" label="时间" min-width="20"></el-table-column>
        <el-table-column label="操作" min-width="10">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="checkProblem(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:10px">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="10"
          :total="Total"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      title="查看提问详情"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div class="a_addBox">
          <ProblemDetail :problem="problem"></ProblemDetail>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ProblemDetail from "./problemDetail";
export default {
  components: {
    ProblemDetail,
  },
  props: ["problemCourse"],
  data() {
    return {
      Course: this.problemCourse,
      chapters: [],
      Loading: false,
      Data: [],
      Total: 0,
      page: 1,
      courseId: "",
      dialogVisible: false,
      problem: {},
    };
  },
  methods: {
    getData() {
      this.Loading = true;
      let params = {
        cid: this.courseId,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getProblem", params)
        .then((res) => {
          this.Loading = false;
          this.Total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          let _array = res.data[0];
          let _chapters = this.chapters;
          _array.forEach((item) => {
            _chapters.forEach((chapter,index) => {
              if (item.chapterid == index) {
                item.classname = chapter.name;
              }
            });
          });
          this.Data = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
      console.log(`当前页: ${val}`);
    },
    handleClose(done) {
      done();
    },
    checkProblem(res) {
      this.problem = res;
      this.dialogVisible = true;
    },
  },
  watch: {
    // 使用监听的方式，监听数据的变化
    problemCourse(val) {
      this.Course = val;
      var _chapters = JSON.parse(val.chapters);
      this.chapters = [];
      this.courseId = val.courseId;
      _chapters.forEach((element) => {
        this.chapters.push({
          name: element.dyName,
          id: element.chapterInfo[0].chapterid,
        });
      });
      this.page = 1;
      this.getData();
    },
  },
  mounted() {
    console.log(JSON.parse(this.problemCourse.chapters));
    var _chapters = JSON.parse(this.problemCourse.chapters);
    _chapters.forEach((element) => {
      this.chapters.push({
        name: element.dyName,
        id: element.chapterInfo[0].chapterid,
      });
    });
    this.courseId = this.problemCourse.courseId;
    this.getData();
  },
};
</script>

<style scoped>
.cp_title {
  font-size: 24px;
}
.dialog_diy >>> .el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 19px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}
</style>
