<template>
  <div class="pb_content" style="background:#fff;">
    <div class="pb_content_body">
      <div class="body_student">
        <div class="student_head">
          <div class="box_course">
            <div class="wheel">
              <img
                :src="
                  studentMessage.headportrait != null
                    ? studentMessage.headportrait
                    : tx
                "
                alt=""
              />
            </div>
            <div class="right_box">
              <div class="right_box_title">{{ studentMessage.name }}</div>
              <div class="people">
                <div>
                  <span>班级：</span><span>{{ studentMessage.cname }}</span>
                </div>
                <div style="margin-left: 50px">
                  <span>所属学校：</span><span>{{ studentMessage.sname }}</span>
                </div>
              </div>
              <div>
                <span>手机号码：</span
                ><span>{{ studentMessage.phonenumber }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="student_body" v-if="!dialogVisible">
          <div class="student_table">
            <el-table
              ref="table"
              :data="tableData1"
              border
              :height="tableHeight"
              :fit="true"
              style="width: 100%"
              :header-cell-style="{ background: '#f1f1f1', fontSize: '17px' }"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                prop="title"
                label="项目"
                min-width="30"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="uname"
                label="创建人"
                min-width="30"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="time"
                label="时间"
                min-width="20"
                align="center"
              ></el-table-column>
              <el-table-column label="操作" min-width="30">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="small"
                    @click="getWorkData(scope.row)"
                    >查看课程</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="student_page" style="padding: 10px 0;">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="10"
              :total="total"
              v-if="page"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </div>
        </div>
      </div>
      <div style="position: relative">
        <div style="width: 98.5%;margin: 0 auto;">
          <WorksDetail2
            :cid="cid"
            :uid="userid"
            v-if="dialogVisible"
          ></WorksDetail2>
        </div>
        <div class="cancelbox" v-if="dialogVisible">
          <el-button @click="cancel" type="primary" size="small"
            >返回</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WorksDetail2 from "./components/worksDetail2";
export default {
  components: {
    WorksDetail2,
  },
  data() {
    return {
      myCourse: [],
      studentMessage: [],
      tx: require("../assets/avatar.png"),
      mpj: require("../assets/project.png"),
      userid: this.$route.query.userid,
      tableData1: [],
      tableHeight: "500px",
      page: 1,
      total: 0,
      dialogVisible: false,
      dataJson: {},
      cid: "",
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getProject();
    },
    selectSDetail() {
      let params = {
        uid: this.userid,
      };
      this.ajax
        .get(this.$store.state.api + "selectSDetail", params)
        .then((res) => {
          this.studentMessage = res.data[0][0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    getProject() {
      let params = {
        uid: this.userid,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getMyProject", params)
        .then((res) => {
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData1 = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getWorkData(res) {
      this.cid = res.courseid;
      this.dialogVisible = true;
    },
    cancel() {
      this.dataJson = "";
      this.dialogVisible = false;
    },
  },
  mounted() {
    this.$nextTick(function () {
      this.tableHeight =
        window.innerHeight - this.$refs.table.$el.offsetTop - 200;
      if (this.tableHeight <= 530) {
        this.tableHeight = 530;
      }
      // 监听窗口大小变化
      let self = this;
      window.onresize = function () {
        self.tableHeight =
          window.innerHeight - self.$refs.table.$el.offsetTop - 200;
        if (self.tableHeight <= 530) {
          self.tableHeight = 530;
        }
      };
    });
  },
  created() {
    this.page = 1;
    this.selectSDetail();
    this.getProject();
    document.scrollingElement.scrollTop = 0;
  },
};
</script>

<style scoped>
.body_student {
  margin: 0px auto;
  width: 98%;
  height: 100%;
}
.student_head {
  width: 100%;
  margin: 0 auto;
  height: 30%;
  background-image: linear-gradient(90deg, #30c499, #75ceba);
  color: #fff;
}
.wheel > img,
.project > img {
  width: 100%;
  height: 100%;
}
.box_course {
  display: flex;
  padding: 35px 0 25px 60px;
  align-items: center;
}
.wheel {
  width: 210px;
}
.right_box {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  /* justify-content: space-around; */
}
.right_box_title {
  font-size: 23px;
}
.people {
  display: flex;
  margin: 30px 0 20px 0px;
}
.student_body {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  margin-top: 20px;
  padding: 0 0 20px;
}
.project {
  width: 100%;
  height: 100%;
}
.project_box {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
}
.three_box_inthis {
  display: flex;
  width: 30.33%;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid #ccc;
  margin: 15px 0 0 15px;
}
.projct_nav {
  margin-left: 5px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
}
.projct_nav > div {
  margin-bottom: 5px;
}
.look_score {
  border-radius: 0px 0px 5px 5px;
  text-align: center;
  background: #41cda6;
  width: 100%;
  height: 35px;
  font-size: 14px;
  color: #fff;
  line-height: 35px;
  cursor: pointer;
  margin-top: 10px;
}

.cancelbox {
  position: absolute;
  z-index: 2;
  left: 50%;
  width: 95%;
  transform: translateX(-50%);
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
}

.student_table >>> .el-table,
.student_table >>> .el-table__body-wrapper {
  height: auto !important;
}
</style>
