<template>
  <div>
    <div class="pb_head">
      <span>创新</span>
    </div>
    <div
      class="pb_content_body"
      style="width: 100%; height: 89%; overflow: hidden"
    >
      <div class="cd_head">
        <div class="cd_bread">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/new' }"
              >课程管理</el-breadcrumb-item
            >
            <el-breadcrumb-item>{{ studentmessage.name }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="cd_picture">
          <div class="cd_image">
            <el-image
              v-if="studentmessage.img"
              style="width: 200px"
              :src="studentmessage.img"
              fit="cover"
            ></el-image>
            <el-image
              v-if="!studentmessage.img"
              style="width: 150px"
              :src="require('../../assets/portal.png')"
              fit="cover"
            ></el-image>
          </div>
          <div class="cd_title">
            <span>{{ studentmessage.name }}</span>
            <span>{{ studentmessage.class }}</span>
          </div>
        </div>
      </div>
      <div class="cd_boder"></div>
      <div class="cd_content">
        <div class="nd_title">
          <span>动态</span>
        </div>
        <div class="nd_content">
          <div
            class="nd_box"
            v-for="x in studentdynamic"
            :key="x.id"
            @click="dialogshow(x.id)"
          >
            <div class="nd_img">
              <img v-if="x.file[0]" :src="x.file[0]" alt="" />
              <img
                v-if="!x.file[0]"
                :src="require('../../assets/tu4.png')"
                alt=""
              />
            </div>
            <div class="nd_box_title">{{ x.title }}</div>
            <div class="nd_box_time">{{ x.time }}</div>
            <div class="nd_box_bottom">
              <div>
                <img
                  :src="require('../../assets/icon/comment.png')"
                  alt=""
                /><span>{{ x.evaluate }}</span>
              </div>
              <div>
                <img
                  :src="require('../../assets/icon/zan.png')"
                  style="width: 18px"
                  alt=""
                /><span>{{ x.like }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="student_page">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="5"
          :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="notice_content cont">
          <div class="dialog_main">
            <div class="dialog_header">
              <div class="header_img">
                <el-image
                  v-if="studentmessage.img"
                  style="width: 95px"
                  :src="studentmessage.img"
                  fit="cover"
                ></el-image>
                <el-image
                  v-if="!studentmessage.img"
                  style="width: 70px"
                  :src="require('../../assets/portal.png')"
                  fit="cover"
                ></el-image>
              </div>
              <div class="header_test">
                <span style="font-size: 1.3em; color: black">{{
                  studentmessage.name
                }}</span>
                <span style="font-size: 1.2em">{{ dialogmessage.time }}</span>
              </div>
              <div class="deleteBtn" @click="deleteNew">删除</div>
            </div>
            <div class="dialog_title">
              <span>{{ dialogmessage.title }}</span>
            </div>
            <div class="dialog_txtbox" v-html="dialogmessage.content"></div>
            <div
              class="dialog_bigimg"
              v-for="a in dialogmessage.file"
              :key="a.id"
            >
              <el-image
                v-if="a"
                style="width: 420px"
                :src="a"
                fit="contain"
              ></el-image>
            </div>
            <div class="dialog_aside">
              <div>
                <img
                  :src="require('../../assets/icon/comment.png')"
                  alt=""
                /><span>{{ dialogmessage.evaluate }}</span>
              </div>
              <div>
                <img
                  :src="require('../../assets/icon/zan.png')"
                  style="width: 20px"
                  alt=""
                /><span>{{ dialogmessage.like }}</span>
              </div>
            </div>
            <div class="dialog_comments">
              <span>评论:</span>
              <div class="comments" v-for="e in studentEvaluate" :key="e.id">
                <div class="comments_img">
                  <el-image
                    v-if="e.img"
                    style="width: 70px"
                    :src="e.img"
                    fit="cover"
                  ></el-image>
                  <el-image
                    v-if="!e.img"
                    style="width: 50px"
                    :src="require('../../assets/portal.png')"
                    fit="cover"
                  ></el-image>
                </div>
                <div class="comments_test">
                  <div>
                    <span>{{ e.name }}</span
                    ><span style="margin-left: 5px; font-size: 12px">{{
                      e.time
                    }}</span>
                  </div>
                  <div>{{ e.content }}</div>
                </div>
              </div>
              <div v-if="studentEvaluate.length == 0"  class="dialog_comments" style="display: flex;justify-content: center;">
                暂无评论
              </div>
            </div>
          </div>
        </div>
        <!-- >>> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" type="primary"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      total: 0,
      id: this.$route.query.id,
      studentmessage: {},
      studentdynamic: [],
      dialogmessage: {},
      studentEvaluate: [],
      dialogVisible: false,
      loading: false,
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.page = val;
      this.getStudent();
      console.log(`当前页: ${val}`);
    },
    handleClose(done) {
      done();
    },
    getStudent() {
      this.loading = true;
      let params = {
        uid: "Admin",
        id: this.id,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getNewStudentDetail", params)
        .then((res) => {
          this.studentdynamic = [];
          console.log(res.data[0]);
          // 学生基本信息
          res.data[0].forEach((item) => {
            this.studentmessage = {
              name: item.name,
              class: item.classname,
              id: item.userid,
              img: item.img,
            };
            this.total = item.num;
          });
          console.log(this.studentmessage);
          //学生动态信息
          res.data[1].forEach((item, index) => {
            this.studentdynamic.push({
              id: item.id,
              userid: item.userid,
              title: item.title,
              content: item.content,
              file: item.file,
              time: item.time,
              evaluate: item.evaluate,
              like: item.praise,
            });
            let filecount = [];
            filecount.push(this.studentdynamic[index].file.split(","));
            this.studentdynamic[index].file = filecount[0];
          });
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          console.error(err);
        });
    },
    // 获取留言信息
    getEvaluatemessage(id) {
      this.loading = true;
      let params = {
        uid: "Admin",
        id: id,
      };
      this.ajax
        .get(this.$store.state.api + "getNewStudentEvaluate", params)
        .then((res) => {
          this.studentEvaluate = [];
          console.log(res.data[0]);
          res.data[0].forEach((item) => {
            this.studentEvaluate.push({
              id: item.id,
              content: item.content,
              time: item.time,
              name: item.name,
              img: item.img,
            });
          });
          console.log(this.studentEvaluate);
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          console.error(err);
        });
    },
    dialogshow(id) {
      this.dialogmessage = this.studentdynamic.filter(
        (item) => item["id"] == id
      )[0];
      this.getEvaluatemessage(id);
      this.dialogVisible = true;
    },
     deleteNew() {
      let params = [
        {
          aid: this.dialogmessage.id,
        },
      ];
      this.$confirm("确认删除此创新文章嘛?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.ajax
            .post(this.$store.state.api + "deleteNew", params)
            .then((res) => {
              this.dialogVisible = false;
              this.getStudent();
            })
            .catch((err) => {
              console.error(err);
            });
        })
        .catch(() => {});
    },
  },
  created() {
    this.getStudent();
  },
};
</script>

<style scoped>
.dialog_diy .dialog_main {
  width: 460px;
  height: 500px;
  overflow-y: scroll;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.dialog_diy .dialog_header {
  width: 440px;
  height: 80px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}
.deleteBtn {
  position: absolute;
  right: 0;
  cursor: pointer;
  color: #c5c5c5;
}
.dialog_diy .header_img {
  width: 70px;
  height: 70px;
  border-radius: 70px;
  overflow: hidden;
}
.dialog_diy .dialog_title {
  margin-top: 10px;
  width: 440px;
  color: #57ae6d;
  font-size: 1.4em;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.dialog_diy .header_test {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.dialog_diy .dialog_txtbox {
  margin-top: 10px;
  font-size: 1.2em;
  width: 440px;
  color: black;
}
.dialog_diy .dialog_bigimg {
  margin-top: 10px;
}
.dialog_diy .dialog_aside {
  width: 440px;
  height: 50px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 20px;
  border-bottom: solid 2px #eee;
}
.dialog_aside > div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  margin-bottom: 10px;
}
.dialog_aside > div > span {
  /* position: relative;
  top: 4px; */
  margin-left: 4px;
}
.dialog_diy .dialog_comments {
  width: 440px;
  margin-top: 10px;
  color: black;
  font-size: 20px;
}
.dialog_comments .comments {
  width: 440px;
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
  /* align-items: center; */
}
.dialog_comments .comments_img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  overflow: hidden;
}
.dialog_comments .comments_test {
  font-size: 16px;
  margin-left: 10px;
  width: calc(100% - 50px);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.comments_test span {
  color: #606266;
}
.comments_test div > span {
  /* margin-left:5px ; */
  font-size: 14px;
}
.dialog_diy >>> .el-dialog {
  background: #fafafa;
}
.dialog_diy >>> .el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}
.dialog_diy >>> .el-dialog__title {
  font-size: 15px;
  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;
}
.cd_head {
  background: #fff;
  width: 94%;
  margin: 0 auto;
}

.cd_bread {
  margin: 20px auto;
}

.cd_picture {
  display: flex;
  align-items: center;
}

.cd_image {
  margin-right: 20px;
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 150px;
}

.cd_title {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cd_title span:nth-child(1) {
  font-size: 30px;
  margin-bottom: 20px;
}
.cd_boder {
  border: 10px solid #e6eaf0;
  width: 100%;
  margin-top: 30px;
  box-sizing: border-box;
}

.cd_content {
  width: 94%;
  margin: 10px auto;
  height: calc(100% - 200px - 50px - 60px);
  overflow: hidden;
}
.nd_title {
  display: flex;
}
.nd_title span {
  font-size: 30px;
  padding: 0 5px 5px;
  border-bottom: 5px solid rgb(158, 179, 222);
}
.nd_content {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  height: calc(100% - 80px);
  overflow: auto;
}
.student_page {
  display: flex;
  justify-content: flex-end;
}
.nd_box {
  height: 300px;
  overflow: hidden;
  margin-right: 20px;
  border-radius: 20px;
  box-shadow: #b1b1b1 0px 0px 5px 0px;
  border: 1px solid rgb(211, 211, 211);
  width: 275px;
  position: relative;
  cursor: pointer;
  margin-bottom: 10px;
}
.nd_img {
  height: 190px;
  width: 100%;
}
.nd_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nd_box_title {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 20px;
  color: rgb(100, 131, 199);
  padding: 5px 5px;
}
.nd_box_time {
  color: rgb(158, 158, 158);
  padding: 0px 5px;
}
.nd_box_bottom {
  position: absolute;
  border-top: 1px solid rgb(211, 211, 211);
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  color: rgb(158, 158, 158);
  align-items: center;
  box-sizing: border-box;
  padding: 8px 20px 3px 0;
  background: rgb(246, 246, 246);
}
.nd_box_bottom div {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.nd_box_bottom div img {
  width: 20px;
  margin-right: 5px;
}
.pb_head {
  font-size: 26px;
  /* font-weight: 600; */
  width: 95%;
  margin: 10px auto;
  padding: 10px 5px;
  border-bottom: 3px solid #eee;
}
</style>
