<template>
  <div
    class="doctor-wrap"
    v-show="userInfo.doctorName"
  >
    <card class="doctor-info ">
      <img
        :src="userInfo.headurl?userInfo.headurl:require('../../assets/images/doctor.png')"
        alt=""
        class="avatar"
      >
      <span class="doctor-name">{{userInfo.doctorName}}</span>
      <!-- <span class="job">{{userInfo.job}}</span> -->
      <span class="job" v-if="userInfo.jobTitle!=0">{{ userInfo.jobTitle }}</span>
    </card>

    <card class="menu-list">
      <div
        class="item animated"
        @click="goUploadVideo"
        :class="`slideInLeft`"
      >
        <img
          src="../../static/imgs/doctorHome/upload_video.png"
          alt=""
        >
        <span class="text">上传的视频</span>
        <span class="right-arrows">></span>
      </div>

      <div
        class="item animated"
        @click="goLikeVideo"
        :class="`slideInRight`"
      >
        <img
          src="../../static/imgs/doctorHome/like_video.png"
          alt=""
        >
        <span class="text">喜欢的视频</span>
        <span class="right-arrows">></span>
      </div>

      <div
        class="item animated"
        @click="goAttentionDoctor"
        :class="`slideInLeft`"
      >
        <img
          src="../../static/imgs/doctorHome/attention_doctor.png"
          alt=""
        >
        <span class="text">关注的医生</span>
        <span class="right-arrows">></span>
      </div>
    </card>

    <card class="my-earnings">
      <div
        class="item animated"
        @click="goMyEarnings"
        :class="`slideInRight`"
      >
        <img
          src="../../static/imgs/doctorHome/earnings.png"
          alt=""
        >
        <span class="text">我的收益</span>
        <span class="right-arrows">></span>
      </div>
    </card>
  </div>
  </div>
</template>

<script>
import card from '@/components/common/Card.vue'
import { getDoctorInfo } from '@/api/ShortVideo/ShortVideo.js'
export default {
  components: {
    card
  },
  data() {
    return {
      userInfo: {
      },
    }
  },
  methods: {
    goUploadVideo() {
      this.$router.push({ name: 'MyVideos' })
    },
    goLikeVideo() {
      this.$router.push({ name: 'LikeVideo' })
    },
    goAttentionDoctor() {
      this.$router.push({ name: 'Attention' })
    },
    goMyEarnings() {
      this.$router.push({ name: 'MyProfitIndex' })
    }
  },
  mounted() {
    getDoctorInfo()
      .then(res => {
        console.log('医生信息', res)
        if (res.data.success) {
          this.userInfo = res.data.result;
        } else {
          this.$toast(res.data.message)
        }
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

<style lang="less" scoped>
/* common style start */
.item {
  display: flex;
  align-items: center;
  height: 1.14rem;
  border-bottom: 2px solid #f1f1f1;
  &:last-child {
    border-bottom: none;
  }
  img {
    width: 0.36rem;
    height: 0.36rem;
    animation: demo 1s infinite linear alternate;
  }
  .text {
    font-size: 0.32rem;
    margin-left: 0.2rem;
    width: 5.96rem;
    text-align: left;
  }
  .right-arrows {
    font-size: 0.5rem;
    font-family: consolas;
  }
}

/* common style end */

.doctor-wrap {
  padding: 0.18rem 0.2rem 0;
  height: 100%;
  background-color: #f7f8fa;

  .doctor-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 2.4rem;
    .avatar {
      display: block;
      width: 1.14rem;
      height: 1.14rem;
      border-radius: 50%;
      border: 10rpx solid #488bfb;
      margin-left: 0.4rem;
    }
    .doctor-name {
      margin: 0 0.42rem;
      font-size: 0.34rem;
    }

    .job {
      // width: 0.82rem;
      padding: 0 0.1rem;
      height: 0.36rem;
      line-height: 0.36rem;
      text-align: center;
      background-color: #ec2f2f;
      color: #fff;
      border-radius: 0.2rem;
      font-size: 0.26rem;
    }
  }

  .menu-list,
  .my-earnings {
    margin-top: 0.4rem;
    padding: 0 0.2rem;
  }

  .my-earnings {
    height: 4.78rem;
    .item {
      border-bottom: 2px solid #f1f1f1;
    }
  }
}

@keyframes demo {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.2);
  }
}
</style>