<template>
  <div class="media-box">
    <!-- 头像 姓名 职位标签-->
    <navigator
      v-if="!isHideInfo"
      :url="'/pages/doctorDetail/main?id=' + mediaInfo.doctorId"
      hover-class="none"
      class="header-box clearfix">
      <div class="img fl">
        <img :src="baseUrl+mediaInfo.doctor.headUrl" mode="widthFix">
      </div>
      <div class="info">
        <div class="name">
          <span>{{mediaInfo.doctor.name}}</span>
          <span class="vip" v-if="mediaInfo.isVip"></span>
        </div>
        <div class="label">
          <span>{{mediaInfo.doctor.hospital}}</span>
          <span>{{mediaInfo.doctor.dept}}</span>
        </div>
      </div>
    </navigator>
    <navigator
      :url="'/pages/expertSayDetail/main?id=' + mediaInfo.id"
      hover-class="none"
      class="info-box">
      <!-- 标题 标签-->
      <div class="title clearfix">
        <img v-if="mediaInfo.isFeature" class="icon fl" src="../assets/images/title_icon_2.png" mode="widthFix">
        <span>{{mediaInfo.title}}</span>
      </div>
      <div class="count-box clearfix">
        <!-- 收藏 -->
        <div class="count-item collect fr" :class="{'active': mediaInfo.isCollect}" @click.stop="collect">
          <div class="text">{{mediaInfo.collectNum}}人</div>
        </div>
        <!-- 浏览 -->
        <div class="count-item watch fr">
          <div class="text">{{mediaInfo.playNum || 0}}人</div>
        </div>
        <!-- 时间 -->
        <div class="count-item time fl" v-if="!isHideInfo">
          <div class="text">00:25:48</div>
        </div>
      </div>
      <!-- 视频或者音频 -->
      <div @click.stop>
        <mp-video
          v-if="mediaInfo.contentType == 'video'"
          :mediaInfo="mediaInfo"
          ></mp-video>
        <mp-audio
          v-if="mediaInfo.contentType == 'audio'"
          :mediaInfo="mediaInfo"></mp-audio>
      </div>
    </navigator>
  </div>
</template>

<script>
import { baseUrl } from '@/utils/http'
import { articleCollect } from '@/utils/api'

import mpVideo from './mpVideo'
import mpAudio from './mpAudio'
export default {
  props: ['mediaInfo', 'isHideInfo'],
  components: {
    mpVideo,
    mpAudio
  },
  data () {
    return {
      baseUrl: baseUrl
    }
  },
  methods: {
    // 收藏
    async collect () {
      let {id, isCollect, collectNum} = this.mediaInfo

      await articleCollect(id)
      this.mediaInfo.collectNum = isCollect ? collectNum - 1 : collectNum + 1
      this.mediaInfo.isCollect = !isCollect
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/less/common.less';
.media-box{
  margin: 0 @spacing @spacing;
  .header-box{
    margin-bottom: 5px;
    .header-box();
  }
  .info-box{
    box-shadow:0px 2px 7px 0px rgba(0,0,0,0.1);
    border-radius: 10px;
    overflow: hidden;
    .title{
      margin: 0 0 8px;
      padding: 6px 10px 0;
      font-size: 16px;
      font-weight: 500;
      .icon{
        margin: 3px 10px 0 0;
        width: 42px;
      }
    }
    .count-box{
      margin: 0 10px 10px;
      .count-box();
    }
    .media{
      display: flex;
      width: 100%;
    }
  }
}
</style>
