<template>
    <el-card class="explore-item" shadow="never">

        <div class="explore-item-description"
             @click="this.$router.push('/communication/communicationDetail/' + this.communicationVO.id)">

          <div class="explore-item-star" >
            <el-tooltip placement="top-start" effect="light">
              <template #content>
                <p style="max-width:500px;">{{starersListString}}收藏了本交流</p>
              </template>
              <div>
                <el-icon v-if="starred===false" style="font-size: 20px" @click.stop="star()"><Star /></el-icon>
                <el-icon v-if="starred===true" style="font-size: 20px;color: orange" @click.stop="cancelStar()">
                  <StarFilled />
                </el-icon>
              </div>
            </el-tooltip>
          </div>

            <h1 class="description-title">{{ title}}</h1>
            <div style="font-size: 14px;margin-top: 5px;margin-left: 10px;">
              <span style="color: var(--el-color-danger)" v-if="type==='PROBLEM'">难题</span>
              <span style="color: var(--el-color-success)" v-if="type==='NOTICE'">通知</span>
              <span style="color: var(--el-color-primary)" v-if="type!=='PROBLEM' && type!=='NOTICE'">其他</span>
                <span style="margin-left: 14px">{{ publisherName }}</span>
                <span style="margin-left: 14px">{{ organization }}</span>
                <span style="margin-left: 14px">{{ contact }}</span>
                <span style="margin-left: 14px">{{ publishTime }}~{{deadline}}</span>
            </div>
            <p class="description-detail">{{ description }}</p>
        </div>

        <img class="explore-item-img" :src="photo">

    </el-card>

</template>

<script>
import {ElMessage} from "element-plus";
export default {
  name: "ExploreItem",
  props: {
    communicationVO: Object,
  },
  data(){
    return{
      starersList: [],
      starersListString: "",
    };
  },
  computed: {
    title() {
      return this.communicationVO.title || "无标题";
    },
    publisherName() {
      return this.communicationVO.publisherName || "匿名";
    },
    organization() {
      return this.communicationVO.organization || "无单位院系";
    },
    contact() {
      if (this.communicationVO.email != ""){
        return this.communicationVO.email;
      }
      else if (this.communicationVO.qq != ""){
        return "qq: " + this.communicationVO.qq;
      }
      else if (this.communicationVO.wechat != ""){
        return "微信: " + this.communicationVO.wechat;
      }
      else if (this.communicationVO.phone != ""){
        return "电话: " + this.communicationVO.phone;
      }
      else return "暂无联系方式";
    },
    type() {
      return this.communicationVO.type;
    },
    description() {
      return this.communicationVO.description || "无简介";
    },
    photo() {
      return this.communicationVO.photos.length === 0 ? this.$variables.noImgUrl : this.communicationVO.photos[0].fileUrl;
    },
    publishTime(){
      return this.communicationVO.publishTime.substring(0,10);
    },
    deadline(){
      if (this.communicationVO.deadline != null){
        return this.communicationVO.deadline.substring(0,10);
      }
      else return "无截止日期";
    },
    starred: {
      get(){
        return this.communicationVO.starred;
      },
      // set(val){
      //   this.communicationVO.starred = val;
      // }
    },
  },
  methods: {
    star(){
      this.$emit("starChange",this.communicationVO);
      this.$apis.starCommunication(this.$store.state.user.id, this.communicationVO.id);
      ElMessage.success("收藏成功");
    },
    cancelStar(){
      this.$emit("starChange",this.communicationVO);
      this.$apis.cancelStarCommunication(this.$store.state.user.id, this.communicationVO.id);
      ElMessage.success("取消收藏成功");
    },
    fetchData(){
        const communicationId =  this.communicationVO.id;
        this.$apis.getCommunicationStarers(communicationId).then(res=>{
          this.starersList = res.data.data;
          this.starersListString = "";
          this.starersList.forEach(starer=>{
            this.starersListString = this.starersListString + starer.username + "(" + starer.phone + ")" + ",";
          });
          if (this.starersListString === ""){
            this.starersListString = "暂无用户";
          }
          else this.starersListString = this.starersListString.substr(0, this.starersListString.length-1);
      });
    },
  },
  mounted() {
    this.fetchData();
  }
};
</script>

<style scoped>
el-card {
    width: 100%;
}
.explore-item-star{
  cursor: pointer;
}
.explore-item {
    --explore-item-height: 150px;
    height: var(--explore-item-height);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    padding: 5px 5px 15px 0;
}

.explore-item-description {
  margin-left: 10px;
  /*position: absolute;*/
  /*left: 20px;*/
}

.explore-item-img {
    height: calc(var(--explore-item-height) - 10px);
    /*aspect-ratio: 2/3;*/
}

:deep(.el-card__body) {
    padding: 5px;
    display: flex;
    justify-content: space-between;
}

.description-detail {
    margin-top: 10px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--el-color-info);
    margin-left: 10px;
}

.description-title {
    margin: 0 0 0 10px;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>