<template>
  <div class="communication-detail-page">
    <!--课程信息-->
    <div class="communication-detail-container">
      <!--课程基本信息-->
      <el-card>
        <div class="header">
          <img :src="titleImg" alt="err" class="communication-img">
          <div class="communication-info">
            <el-row style="font-size: xx-large; font-weight: bold">
                {{ communicationInfo.title }}
            </el-row>
            <div class="communication-info-main">
              <el-row>发布作者: {{ communicationInfo.publisherName }}</el-row>
              <el-row>所属组织: {{ communicationInfo.organization }}</el-row>
              <el-row>持续时间:</el-row>
              <el-row style="text-indent: 1em"> {{ publishTime }}~{{ deadline }}</el-row>
            </div>
            <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="communicationInfo.starred===false" style="font-size: 20px" @click="star()"><Star /></el-icon>
                  <el-icon v-if="communicationInfo.starred===true" style="font-size: 20px;color: orange" @click="cancelStar()">
                    <StarFilled />
                  </el-icon>
                </div>
              </el-tooltip>
            </div>
            <el-row>
              联系方式：
            </el-row>
            <el-row v-if="communicationInfo.phone !== ''">
              电话：{{communicationInfo.phone}}
            </el-row>
            <el-row v-if="communicationInfo.qq !== ''">
              qq：{{communicationInfo.qq}}
            </el-row>
            <el-row v-if="communicationInfo.wechat !== ''">
              微信：{{communicationInfo.wechat}}
            </el-row>
            <el-row v-if="communicationInfo.email !== ''">
              邮箱：{{communicationInfo.email}}
            </el-row>
          </div>
        </div>
        <el-divider/>
        <div class="introduce">
          <div class="title">详细描述:</div>
          <div class="introduce-content">{{ communicationInfo.description }}</div>
        </div>
        <div class="pictureList">
          <div class="title">图片:</div>
          <div v-for="image in imgList" :key="image.id">
            <img :src="image.fileUrl" alt="err" class="picture">
          </div>

        </div>
        <div class="attachment">
          <div class="title">附件:</div>
          <div class="attachment-list"
              v-for="attachment in attachments"
              :key="attachment.id"
              @click="downloadAttachment(attachment.fileUrl, attachment.fileName)"
          >
            {{attachment.fileName}}{{attachment.fileExtention}}({{attachment.fileSize}})
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import communication from "@/api/communication";

export default {
  name: "CommunicationDetail",
  data(){
    return{
      communicationInfo: {},
      titleImg: "",
      imgList: [],
      attachments: [],
      starersList: [],
      starersListString: "",
      publishTime: "",
      deadline: ""
    };
  },
  async mounted() {
    this.fetchData();
  },
  methods: {
    fetchData(){
      this.$apis.getCommunicationDetail(this.$route.params.communicationId).then(res=>{
        this.communicationInfo = res.data.data;
        if (this.communicationInfo.photos.length !== 0){
          this.titleImg = this.communicationInfo.photos[0].fileUrl;
          this.imgList =  this.communicationInfo.photos;
        }
        else this.titleImg = this.$variables.noImgUrl;
        this.attachments = this.communicationInfo.attachments;
        this.publishTime = this.communicationInfo.publishTime.substring(0,10) + " " + this.communicationInfo.publishTime.substring(11,19);
        if (this.deadline !== ""){
          this.deadline = this.communicationInfo.deadline.substring(0,10) + " " + this.communicationInfo.deadline.substring(11,19);
        }
        else this.deadline = "无截止日期";
      });
      this.$apis.getCommunicationStarers(this.$route.params.communicationId).then(starRes=>{
            this.starersList = starRes.data.data;
            this.starersListString = "";
            this.starersList.forEach(starer=>{
              this.starersListString = this.starersListString + starer.username + ",";
            });
            if (this.starersListString === ""){
              this.starersListString = "暂无用户";
            }
            else this.starersListString = this.starersListString.substr(0, this.starersListString.length-1);
      });
    },
    star(){
      this.communicationInfo.starred = !this.communicationInfo.starred;
      this.$apis.starCommunication(this.$store.state.user.id, this.communicationInfo.id);
      ElMessage.success("收藏成功");
    },
    cancelStar(){
      this.communicationInfo.starred = !this.communicationInfo.starred;
      this.$apis.cancelStarCommunication(this.$store.state.user.id, this.communicationInfo.id);
      ElMessage.success("取消收藏成功");
    },
    downloadAttachment(url, fileName){
      console.log("下载！");
      const data = url;
      let file = new Blob(["\ufeff" + data]);
      if (window.navigator.msSaveOrOpenBlob)
          // IE10+
        window.navigator.msSaveOrOpenBlob(file, fileName);
      else {
        // Others
        let a = document.createElement("a"),
            url = URL.createObjectURL(file);
        a.href = url;
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
          document.body.removeChild(a);
          window.URL.revokeObjectURL(url);
        }, 0);
      }
    }
  },
};
</script>

<style scoped>
.explore-item-star{
  cursor: pointer;
}
.attachment{
  margin-top: 20px;
}
.attachment-list{
  margin-top: 20px;
  text-indent: 20px;
  text-decoration: underline;
  color: #409eff;
}
.attachment-list:hover{
  margin-top: 20px;
  text-indent: 20px;
  text-decoration: underline;
  color: #337ecc;
  cursor: pointer;
}
.communication-detail-page {
  margin: 40px 0 80px 0;
  min-height: calc(100vh - 100px);
}

.communication-detail-container {
  box-sizing: border-box;
  padding: 0 100px;
  margin-top: 32px;
}

.header {
  display: flex;
  justify-content: flex-start;
  margin: 40px 10vw 80px 10vw;
}

.communication-img {
    width: 320px;
    height: 230px;
    margin-left: -120px;
}

.communication-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.pictureList{
  margin-top: 20px;
  text-align: center;
}

.picture{
  max-width: 600px;
  text-align: center;
}

.communication-info {
  font-size: 16px;
  color: #333333;
  margin-left: 32px;
  margin-right: -80px;
}

.communication-info-main {
  background-color: #f6f6f6;
  color: #777777;
  margin-top: 10px;
  border-radius: 8px;
  padding: 20px;
  width: 350px;
}

.communication-info > div {
  margin-bottom: 16px;
}

.communication-info > div:last-child {
  margin-bottom: 0;
}

.communication-info .mooc-link .el-link {
  font-size: 16px;
  color: #409eff;
}

.communication-info .mooc-link .el-link:hover {
  color: #79bbff;
}

.introduce-content {
  white-space: pre-wrap;
  margin-top: 16px;
  font-size: 14px;
  line-height: 26px;
  color: #333333;
  padding: 10px 0 10px 20px;
  border-radius: 10px;
  background: #f6f6f6;
}

.title {
  color: #333333;
  font-weight: 500;
  font-size: 20px;
  text-align: left;
}

.new-notice-content .new-notice-item {
  height: 40px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 16px;
}

.new-notice-item > span, .content-description-area > span {
  min-width: 100px;
}

.new-notice-item .mini-name-icon {
  margin-left: 16px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: white;

}
</style>