<template>
  <div class="doctor-item">
    <navigator
      class="info-box clearfix"
      :url="'/pages/doctorDetail/main?id=' + doctorInfo.id"
      hover-class="none">
      <div class="img fl">
        <img :src="baseUrl + doctorInfo.headUrl" mode="widthFix">
      </div>
      <div class="info">
        <div class="name">{{doctorInfo.name}}</div>
        <div class="label">
          <span>{{doctorInfo.hospital}}</span>
          <span>{{doctorInfo.dept}}</span>
        </div>
        <div class="detail">{{doctorInfo.description}}</div>
      </div>
    </navigator>
    <navigator
      v-if="doctorInfo.article && !isHideWorks"
      :url="'/pages/expertSayDetail/main?id=' + doctorInfo.article.id"
      hover-class="none"
      class="works-box clearfix" >
      <div class="img fl" :style="{'backgroundImage': 'url('+baseUrl + doctorInfo.article.coverUrl+')'}">
        <div class="play"></div>
      </div>
      <div class="text-box clearfix">
        <div class="text">
          <img class="icon fl" src="../assets/images/title_icon_2.png" mode="widthFix">
          <span>{{doctorInfo.article.title}}</span>
        </div>
      </div>
    </navigator>
  </div>
</template>

<script>
import { baseUrl } from '@/utils/http'
export default {
  props: ['doctorInfo', 'isHideWorks'],
  data () {
    return {
      baseUrl: baseUrl
    }
  },
  methods: {
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/less/common.less';
.doctor-item{
  margin: 0 @spacing @spacing;
  border-radius: 5px;
  box-shadow:0px 0px 7px 0px rgba(0,0,0,0.1);
  overflow: hidden;
  .info-box{
    position: relative;
    padding: 10px 0;
    .img{
      padding: 0 22px;
      width: 68px;
      height: 68px;
      img{
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        width: 64px;
        height: 64px;
        border: solid 2px @themeColor;
        border-radius: 50%;
        overflow: hidden;
      }
    }
    .info{
      padding-right: @spacing;
      min-height: 68px;
      overflow: hidden;
      .name{
        font-size: 16px;
        font-weight: 500;
      }
      .label{
        margin-top: 5px;
        span{
          display: inline-block;
          margin-right: 8px;
          padding: 0 5px;
          line-height: 16px;
          border-radius: 8px;
          font-size: 10px;
          color: @themeColor;
          background: #FFF2F5;
        }
      }
      .detail{
        margin-top: 7px;
        line-height: 18px;
        font-size: 12px;
        color: #999999;
      }
    }
  }
  .works-box{
    background: #F8F8F8;
    .img{
      position: relative;
      width: 100px;
      height: 70px;
      background: no-repeat center center;
      background-size: cover;
      overflow: hidden;
      .play{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: url('../assets/images/video_icon_1.png') no-repeat center center rgba(0, 0, 0, 0.1);
        background-size: 30px auto;
      }
    }
    .text-box{
      position: relative;
      height: 70px;
      font-size: 16px;
      font-weight: 500;
      overflow: hidden;
      .text{
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        padding: 0 10px;
      }
      .icon{
        margin: 3px 10px 0 0;
        width: 42px;
      }
    }
  }
}
</style>
