<template>
  <ul class="doctor-box">
    <scroll-view scroll-x="true" class="doctor-list">
      <navigator
        class="doctor-item"
        v-for="(item, key) in doctorList"
        :key="key"
        :url="'/pages/doctorDetail/main?id=' + item.id">
        <img class="img" :src="baseUrl + item.headUrl" aspectFill>
        <div class="name">{{item.name}}</div>
        <div class="label-box">
          <div class="label"><div>{{item.hospital}}</div></div>
        </div>
        <div class="label-box">
          <div class="label"><div>{{item.dept}}</div></div>
        </div>
      </navigator>
      <navigator class="doctor-item more" url="/pages/doctorList/main">
        <div class="text-box">
          <div>查看更多</div>
          <div class="text">MORE</div>
        </div>
      </navigator>
    </scroll-view>
  </ul>
</template>

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

<style scoped lang="less">
@import '~@/assets/less/common.less';
.doctor-box{
  line-height: 30px;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;
  .doctor-list{
    padding: 0 @spacing - 5;
    width: auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    ::-webkit-scrollbar{
      width: 0;
      height: 0;
      color: transparent;
    }
    .doctor-item{
      display: inline-block;
      margin: 6px 5px;
      padding: 12px 8px;
      width: 28%;
      box-shadow:0px 0px 7px 0px rgba(0,0,0,0.1);
      border-radius: 4px;
      text-align: center;
      background: #fff;
      box-sizing: border-box;
      vertical-align: top;
      &.more{
        position: relative;
        padding: 0 12px;
        width: auto;
        min-width: 72px;
        height: 142px;
        font-size: 12px;
        text-align: center;
        color: #999999;
        .text-box{
          display: inline-block;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          line-height: 12px;
          .text{
            margin-top: 10px;
            color: #CECECE;
          }
        }
      }
      .img{
        margin: auto;
        width: 46px;
        height: 46px;
        border: solid 1px @themeColor;
        border-radius: 50%;
      }
      .name{
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        overflow: hidden;
      }
      .brief{
        font-size: 14px;
        text-align: left;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
      .label-box{
        margin: 4px 0 0;
        height: 20px;
        overflow: hidden;
      }
      .label{
        display: inline-block;
        padding: 0 6px;
        max-width: 100%;
        border-radius: 8px;
        font-size: 10px;
        color: @themeColor;
        background: #FFF2F5;
        vertical-align: top;
        box-sizing: border-box;
        & > div{
          width: 100%;
          height: 20px;
          line-height: 20px;
          white-space:nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
