<template>
  <el-card class="project" shadow="hover" @click="toProjectInfo">
    <template #header>
      <div class="project-header">
        <span :title="this.projectVO['name']">
          {{ this.projectVO["name"] }}
        </span>
      </div>
    </template>
    <div class="project-logo">
      <div class="project-logo-text">
        D
      </div>
    </div>
    <el-row class="projectId">
      {{ projectId }}
    </el-row>
    <el-row class="project-description">
      {{ description }}
    </el-row>
    <el-row class="project-link">
      <el-button type="text" style="padding: 0" @click.stop="copyLink(projectVO['gitRemoteUrl'])">复制链接</el-button>
    </el-row>
  </el-card>
</template>

<script>
import {ElMessage} from "element-plus";
import store from "@/store";
import colorUtil from "@/utils/color";

export default {
  name: "ProjectCard",
  props: {
    projectVO: Object,
    type: String,
    isPublic: undefined,
  },
  data() {
    return {
      teacher: Object,
      color: colorUtil.SYSTEM_THEME.developerColor,
    };
  },
  computed: {
    isLogin() {
      return store.state.user.token;
    },
    isTeacher() {
      return this.$store.getters.isTeacher;
    },
    isStudent() {
      return this.$store.getters.isStudent;
    },
    projectId() {
      return "项目ID: " + this.projectVO.id;
    },
    description() {
      return "描述: " + this.projectVO.description;
    },
  },

  methods: {
    async toProjectInfo() {
      if (!this.isLogin) {
        ElMessage({
          showClose: true,
          message: "请先登录",
          type: "warning",
          duration: 1000,
        });
        await this.$router.push({name: "Auth", params: {login_to: "/portal"}});
      } else if (this.isPublic) {
        const courseId = (await this.$apis.findCourseByName(this.isPublic)).data.data.id;
        await this.$router.push(`/course/${courseId}`);
      } else {
        if (this.projectVO.name) {
          window.open("https://devcloud.seec.seecoder.cn/project/" + this.projectVO.id + "/schedule?id_token=" + this.$store.state.user.token);
        }
      }
    },

    async copyLink(link) {
      await navigator.clipboard.writeText(link);
      this.$message.success("复制成功！");
    }
  }
};
</script>

<style scoped>
.project {
  min-height: 180px;
  border-radius: 8px;
  height: calc(100% - 14px);
  position: relative;
  border: 1px solid #cccccc;
}

.project:hover {
  cursor: pointer;
  border: 1px solid #999999;
}

.projectId {
  /*font-weight: bold;*/
  font-size: medium;
  color: #777777;
}

.project-header {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
}

.project-description {
  width: 100%;
  display: -webkit-box; /*必须结合的属性,将对象作为弹性伸缩盒子模型显示*/
  -webkit-line-clamp: 2; /*设置多少行*/
  -webkit-box-orient: vertical; /*必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式*/
  overflow: hidden; /*文本会被修剪，并且剩余的部分不可见*/
  text-overflow: ellipsis;
  font-size: medium;
  color: #777777;
}

.project-link {
  font-size: medium;
}

.project-logo {
  float: right;
  width: 0;
  height: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  border-left: 30px solid transparent;
  border-bottom: 30px solid v-bind(color)
}

.project-logo-text {
  padding: 0 3px 0 0;
  position: absolute;
  right: 0;
  bottom: -32px;
  color: white
}
</style>