<template>
  <div class="app-container">
    <!-- 编辑分数的弹框 -->
    <el-dialog
      title="编辑课程分数"
      :visible.sync="editNoticeVisible"
      @close="cancel('editScoreList')"
    >
      <el-form :model="editScoreList" ref="editScoreList">
        <div class="line">
          <el-form-item label="编辑学生课程分数" prop="gpa">
            <el-input autosize v-model.number="editScoreList.gpa"> </el-input>
            <!-- {{editRecruitCourse.courseName}} -->
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('editScoreList')">取 消</el-button>
        <el-button type="primary" @click="submitForm('editScoreList')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <div class="table-container">
      <el-table
        ref="productTable"
        :data="list"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="listLoading"
        border
      >
        <el-table-column label="上课年份" align="center">
          <template slot-scope="scope">{{ scope.row.yearTime }}</template>
        </el-table-column>
        <el-table-column label="上课学期" align="center">
          <template slot-scope="scope">{{ scope.row.term }}</template>
        </el-table-column>

        <el-table-column label="课程1" align="center">
          <el-table-column align="center" label="课程">
            <template slot-scope="scope">
              <span v-if="scope.row.userCourseList[0].csoCourseCode">
                {{ scope.row.userCourseList[0].csoCourseCode }}</span
              >
              <span v-else-if="scope.row.userCourseList[0].auditCourseCode">
                {{ scope.row.userCourseList[0].auditCourseCode }}</span
              >
              <span v-else-if="scope.row.userCourseList[0].ownCourseCode">
                {{ scope.row.userCourseList[0].ownCourseCode }}</span
              >
            </template>
          </el-table-column>
          <el-table-column align="center" label="分数">
            <template slot-scope="scope">
              {{ scope.row.userCourseList[0].gpa }}</template
            >
          </el-table-column>
          <el-table-column align="center" label="编辑分数">
            <template slot-scope="scope">
              <el-button
                @click="
                  updateScore(
                    scope.row.userCourseList[0].gpa,
                    scope.row.userCourseList[0].id
                  )
                "
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="课程2" align="center">
          <el-table-column align="center" label="课程">
            <template slot-scope="scope" v-if="scope.row.userCourseList[1]">
              <span v-if="scope.row.userCourseList[1].csoCourseCode">
                {{ scope.row.userCourseList[1].csoCourseCode }}</span
              >
              <span v-else-if="scope.row.userCourseList[1].auditCourseCode">
                {{ scope.row.userCourseList[1].auditCourseCode }}</span
              >
              <span v-else-if="scope.row.userCourseList[1].ownCourseCode">
                {{ scope.row.userCourseList[1].ownCourseCode }}</span
              >
            </template>
          </el-table-column>
          <el-table-column align="center" label="分数">
            <template slot-scope="scope" v-if="scope.row.userCourseList[1]">
              {{ scope.row.userCourseList[1].gpa }}</template
            >
          </el-table-column>
          <el-table-column align="center" label="编辑分数">
            <template slot-scope="scope" v-if="scope.row.userCourseList[1]">
              <el-button
                @click="
                  updateScore(
                    scope.row.userCourseList[1].gpa,
                    scope.row.userCourseList[1].id
                  )
                "
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="课程3" align="center">
          <el-table-column align="center" label="课程">
            <template slot-scope="scope" v-if="scope.row.userCourseList[2]">
              <span v-if="scope.row.userCourseList[2].csoCourseCode">
                {{ scope.row.userCourseList[2].csoCourseCode }}</span
              >
              <span v-else-if="scope.row.userCourseList[2].auditCourseCode">
                {{ scope.row.userCourseList[2].auditCourseCode }}</span
              >
              <span v-else-if="scope.row.userCourseList[2].ownCourseCode">
                {{ scope.row.userCourseList[2].ownCourseCode }}</span
              >
            </template>
          </el-table-column>
          <el-table-column align="center" label="分数">
            <template slot-scope="scope" v-if="scope.row.userCourseList[2]">
              {{ scope.row.userCourseList[2].gpa }}</template
            >
          </el-table-column>
          <el-table-column align="center" label="编辑分数">
            <template slot-scope="scope" v-if="scope.row.userCourseList[2]">
              <el-button
                @click="
                  updateScore(
                    scope.row.userCourseList[2].gpa,
                    scope.row.userCourseList[2].id
                  )
                "
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="课程4" align="center">
          <el-table-column align="center" label="课程">
            <template slot-scope="scope" v-if="scope.row.userCourseList[3]">
              <span v-if="scope.row.userCourseList[3].csoCourseCode">
                {{ scope.row.userCourseList[3].csoCourseCode }}</span
              >
              <span v-else-if="scope.row.userCourseList[3].auditCourseCode">
                {{ scope.row.userCourseList[3].auditCourseCode }}</span
              >
              <span v-else-if="scope.row.userCourseList[3].ownCourseCode">
                {{ scope.row.userCourseList[3].ownCourseCode }}</span
              >
            </template>
          </el-table-column>
          <el-table-column align="center" label="分数">
            <template slot-scope="scope" v-if="scope.row.userCourseList[3]">
              {{ scope.row.userCourseList[3].gpa }}</template
            >
          </el-table-column>
          <el-table-column align="center" label="编辑分数">
            <template slot-scope="scope" v-if="scope.row.userCourseList[3]">
              <el-button
                @click="
                  updateScore(
                    scope.row.userCourseList[3].gpa,
                    scope.row.userCourseList[3].id
                  )
                "
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { editScore, getHaveScoreStu } from "@/api/cso2";
import { formatDate } from "@/utils/date";
// const defaultListQuery = {
//   pageNum: 1,
//   pageSize: 10,
//   customerName: this.newCustomerName
// };
export default {
  name: "transcripts",
  props: ["stuName"],
  data() {
    return {
      // listQuery: Object.assign({}, defaultListQuery),
      list: null,
      pageSize: null,
      pageNum: null,
      total: null,
      listLoading: true,
      multipleSelection: [],
      oneStu: "",
      editNoticeVisible: false,
      pickerOptions: {},
      haveGpaStu: [],
      editScoreList: {
        id: 0,
        gpa: 0
      }
    };
  },

  filters: {
    formatDateTime(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    }
  },

  watch: {
    stuName(newVal, oldVal) {
      this.oneStu = newVal;
      // console.log(typeof(this.oneStu),this.oneStu,'this.oneStu');
      //	methods的函数在这里调用可以获取到newOrderData的值
      this.getList();
    }
  },

  methods: {
    getList() {
      this.listLoading = true;
      // console.log(this.oneStu,'getOneStu');
      getHaveScoreStu({
        pageNum: 1,
        pageSize: 999,
        customerName: this.oneStu
      }).then(res => {
        this.listLoading = false;

        this.list = res.data.list;
        this.pageNum = res.data.pageNum;
        this.pageSize = res.data.pageSize;
        this.total = res.data.total;
        // console.log(this.list, "oneScore");
        this.$forceUpdate();
      });
    },

    handleCurrentChange(val) {
      // 翻页
      this.listQuery.pageNum = val;
      this.getList();
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    //编辑分数
    updateScore(gpa, id) {
      this.editNoticeVisible = true;
      this.editScoreList.gpa = gpa;
      this.editScoreList.id = id;
    },
    cancel(formName) {
      this.editNoticeVisible = false;
      this.$refs[formName].resetFields();
    },
    //提交编辑后的分数

    submitForm(editScoreList) {
      // if (this.updateId) {
      //   this.recruitCourseInfo.id = this.updateId;
      // }

      let arr = [];
      if (this.editScoreList.gpa) {
        let obj = {};
        obj.userCourseId = this.editScoreList.id;
        obj.gpa = this.editScoreList.gpa;
        arr.push(obj);
      }
      if (arr.length == 0) {
        this.$message({
          type: "error",
          message: "请先打分再提交",
          duration: 1000
        });
      } else {
        this.$confirm("请认真核对课程名称和分数！", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          editScore(arr).then(response => {
            this.$message({
              type: "success",
              message: "提交成功",
              duration: 1000
            });
            // this.$refs[formName].resetFields();
            this.editNoticeVisible = false;

            this.getList();
            this.$forceUpdate();
          });
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped></style>
