<template>
  <div class="infoBar-wrap">
    <div class="top">
      <div class="top-info">
        <div
          class="doctor-avatar"
          @click="goDoctorDetail(videoData.DoctorID)"
        >
          <img
            :src="videoData.DoctorHeadImg?videoData.DoctorHeadImg:require('../../static/imgs/logo.png')"
            alt=""
          />
        </div>
        <span class="doctor-name">{{videoData.DoctorName}}</span>
        <!-- <span class="hospital">三甲</span> -->
        <div
          class="attention-wrap"
          v-show="showMenu"
          @click.stop="addAttention(videoData.DoctorID)"
        >
          <div v-if="videoData.IsFollow">
            <img
              src="../../static/imgs/attentioned.png"
              alt=""
            >
          </div>
          <div v-else>
            <img
              src="../../static/imgs/attention.png"
              alt=""
            >
          </div>
        </div>
      </div>
    </div>
    <div class="middle">
      <span class="video-title">{{videoData.VideoTitle}}</span>
    </div>
    <div class="footer">
      <div
        class="bubble"
        ref="bubbleDom"
      >
        <img src="@/static/imgs/bubble-icon.png">
      </div>
      <div
        class="like"
        v-show="showMenu"
        @click.stop="addLike(videoData.IsLike, videoData.ID)"
      >
        <span :class="videoData.IsLike?'iconfont icon-xin1 active':'iconfont icon-xin1'"></span>
        <span class="like-sum">{{videoData.LikeFrequency  + videoData.DummyLikeFrequency}}</span>
      </div>
      <div
        class="comment"
        @click.stop="showComment(videoData.ID)"
      >
        <span class="iconfont icon-liaotian"></span>
        <span class="comment-sum">{{videoData.CommentFrequency}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['videoList', 'isAttention', 'source'],
  data() {
    return {
      videoData: { IsLike: false },
      attentionStatus: '',
      showMenu: this.source === 'myVideos' ? false : true
    };
  },
  mounted() {
  },
  methods: {
    goDoctorDetail(id) {
      this.$router.push({ name: "doctorDetail", query: { id } })
    },
    addLike(IsLike, id) {
      if (IsLike) {
        // 此时为取消点赞
        this.videoData.IsLike = false;
        --this.videoData.LikeFrequency;
        this.$emit("cancelLike", { "id": id })
      } else {
        // 此时为点赞
        this.videoData.IsLike = true;
        ++this.videoData.LikeFrequency;
        // 添加点赞动画效果
        this.$refs.bubbleDom.style.display = "block";
        this.$refs.bubbleDom.addEventListener('animationend', (e) => {
          e.elapsedTime === 2 ? this.$refs.bubbleDom.style.display = "none" : "";
        });
        this.$emit("addLike", { "id": id });
      }
    },
    showComment(id) {
      this.$emit("showComment", { id });
    },
    addAttention(id) {
      if (!this.videoData.IsFollow) {
        this.videoData.IsFollow = !this.videoData.IsFollow
        this.$emit("addAttention", { id });
      }
    }
  },
  watch: {
    videoList: {
      handler(newValue, oldValue) {
        if (newValue.VideoTitle) {
          if (newValue.VideoTitle.indexOf('.') !== -1) {
            newValue.VideoTitle = newValue.VideoTitle.split('.')[0]
          }
        }
        this.videoData = newValue;

      },
      immediate: true,
      deep: true
    },
    isAttention: {
      handler(newValue, oldValue) {
        this.attentionStatus = newValue;
      },
      immediate: true,
      deep: true
    }
  },
};
</script>

<style lang="less" scoped>
.infoBar-wrap {
  padding: 0.05rem 0.2rem;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.36rem;
  background-color: rgba(45, 45, 45, 0.3);

  .top {
    .top-info {
      display: flex;
      align-items: center;
      margin-top: 0.1rem;
      .doctor-avatar {
        width: 0.74rem;
        height: 0.74rem;
        border-radius: 50%;
        border: 1px solid #fff;
        background-color: #fff;
      }
      img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
      .doctor-name {
        flex: 1;
        text-align: left;
        margin-left: 0.1rem;
        color: #fff;
        font-size: 0.34rem;
      }
      .hospital {
        margin-left: 0.4rem;
        padding: 0.06rem 0.15rem;
        color: #fff;
        background-color: #ec2f2f;
        border-radius: 0.1rem;
      }
      .attention-wrap {
        margin-left: 1rem;
        img {
          border-radius: 0;
          width: 70%;
        }
      }
    }
  }

  .middle {
    margin-top: 0.2rem;
    color: #fff;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: left;
    .video-title {
      font-size: 0.3rem;
    }
  }

  .footer {
    position: relative;
    display: flex;
    justify-content: flex-end;
    font-size: 0.4rem;
    margin-top: 0.2rem;
    color: #ffffff;
    .bubble {
      position: absolute;
      display: none;
      top: 0%;
      left: 67%;
      width: 0.8rem;
      height: 0.8rem;
      animation: bubble_y 2s linear 1 normal, bubble_big_1 1s linear 1 normal,
        bubble_1 2s linear 1 forwards;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .icon-xin1,
    .icon-liaotian {
      margin-right: 0.14rem;
      font-size: 0.5rem;
    }
    .like {
      margin-right: 0.14rem;
      .icon-xin1.active {
        color: red;
        .like-sum {
        }
      }
    }
    .comment {
      .comment-sum {
        margin-right: 0.3rem;
      }
      .icon-liaotian {
        // color: #b5b5b5;
        color: #fff;
      }
    }
  }
}

@keyframes bubble_y {
  0% {
    display: block;
    top: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    display: none;
    top: -1000%;
    opacity: 0;
  }
}

@keyframes bubble_1 {
  0% {
  }
  25% {
    margin-left: -8px;
  }
  50% {
    margin-left: 8px;
  }
  75% {
    margin-left: -15px;
  }
  100% {
    margin-left: 15px;
  }
}

@keyframes bubble_big_1 {
  0% {
    transform: scale(0.3);
  }
  100% {
    transform: scale(1);
  }
}
</style>
