<template>
  <div class="famousTeacher">
    <el-card class="left">
      <img class="userBg" src="/images/personal/userBg.png" alt="" />
      <div class="userContent">
        <img class="user" :src="getFullUrl(userInfo.user_avatar)" />
        <!-- <img class="user" src="/images/personal/user1.png" /> -->
        <div class="center" style="color: #171721; margin: 5px 0; font-size: 20px">
          {{ userInfo.user_name }}
        </div>
        <div class="flex" style="color: #949494; font-size: 16px">
          <div class="flex">
            <el-icon color="#949494" style="margin-right: 5px">
              <User />
            </el-icon>
            <span>{{ userInfo.role_name }}</span>
          </div>
          <div class="flex" style="margin-left: 40px">
            <el-icon color="#949494" style="margin-right: 5px">
              <User />
            </el-icon>
            <span>{{ userInfo.grade_name }}/{{ userInfo.subject_name }}</span>
          </div>
        </div>
        <div class="center" style="margin: 30px 0 35px 0">
          <!-- <el-button type="primary" :plain="isFocus" @click="handleFocus">{{!isFocus ? "关注" : "已关注"}}</el-button> -->
          <el-button type="primary" @click="toSet">设置</el-button>
        </div>
        <div class="production">
          <div class="list" v-for="item in proData" :key="item.name">
            <div class="item">
              <div>{{ item.name }}</div>
              <div class="value">{{ item.value }}</div>
            </div>
          </div>
        </div>
        <div class="proDiv">
          <div class="title">专业知识介绍</div>
          <div class="pro" v-if="userInfo.ext">
            {{ userInfo.ext.ue_zyzsjs }}
          </div>
        </div>
        <div class="proDiv">
          <div class="title">座右铭</div>
          <div class="pro" v-if="userInfo.ext">{{ userInfo.ext.ue_zym }}</div>
        </div>
        <div class="proDiv">
          <div class="title">徽章</div>
          <div class="badgeDiv">
            <div class="badgeItem center" v-for="(item, index) in badgeData" :key="index">
              <img @click="toBadge" :src="item.icon" alt="" srcset="" />
              <div>{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="right">
      <Photo />
    </el-card>
  </div>
</template>

<script>
import Photo from "./photo/index.vue";
import icon1 from "/images/personal/icon/icon1_active.png";
import icon2 from "/images/personal/icon/icon2_active.png";
import icon3 from "/images/personal/icon/icon3_active.png";
import icon4 from "/images/personal/icon/icon4_active.png";
import icon5 from "/images/personal/icon/icon5_active.png";
import icon6 from "/images/personal/icon/icon6_active.png";
export default {
  data() {
    return {
      badgeData: [
        {
          icon: icon1,
          name: "徽章一",
        },
        {
          icon: icon2,
          name: "徽章二",
        },
        {
          icon: icon3,
          name: "徽章三",
        },
        {
          icon: icon4,
          name: "徽章四",
        },
        {
          icon: icon5,
          name: "徽章五",
        },
        {
          icon: icon6,
          name: "徽章六",
        },
      ],
      isFocus: true,
    };
  },
  components: { Photo },
  props: ["userInfo", "proData"],
  methods: {
    handleFocus() {
      this.isFocus = !this.isFocus;
    },
    toSet() {
      this.$router.push({ name: "personal_setting", params: { id: this.userInfo.user_id } });
    },
    toBadge() {
      this.$router.push({ name: "personal_components_hz" });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/mixin.scss";
</style>

<style lang="scss" scoped>
.famousTeacher {
  display: flex;
  margin-top: 15px;
  height: 950px;
  // max-height: 950px;
  .el-card {
    border-radius: 6px;
    height: 100%;
    overflow: auto;
    ::v-deep .el-card__body {
      padding: 25px 20px;
    }
  }
  .center {
    text-align: center;
  }
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .left {
    width: 374px;
    margin-right: 20px;
    position: relative;
    .userBg {
      position: absolute;
      top: 25px;
      left: 50%;
      transform: translateX(-50%);
      width: 348px;
      height: 128px;
    }
    .userContent {
      position: relative;
      z-index: 1;
      padding-top: 65px;
      .user {
        width: 105px;
        height: 105px;
        border-radius: 50%;
        margin: auto;
      }
    }
    .el-button {
      width: 100px;
      height: 40px;
      text-align: center;
      &.el-button--primary.is-plain {
        background: transparent;
        color: #409eff;
      }
    }
    .production {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -10px;
      .list {
        padding: 0 10px;
        width: 50%;
        .item {
          border: 1px dashed #e4e6e8;
          border-radius: 6px;
          margin-bottom: 15px;
          padding: 6px 10px;
          height: 64px;
          line-height: 24px;
          color: #9a9a9a;
          font-size: 12px;
          .value {
            color: #000;
            font-size: 14px;
          }
        }
      }
    }
    .proDiv {
      color: #000;
      margin-top: 15px;
      .title {
        font-size: 16px;
        margin-bottom: 5px;
      }
      .pro {
        font-size: 14px;
      }
      .badgeDiv {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px;
        .badgeItem {
          width: 20%;
          padding: 0 10px;
          font-size: 14px;
          margin-top: 10px;
        }
      }
    }
  }
  .right {
    flex: 1;
  }
  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0);
  }

  /*定义滚动条的轨道，内阴影及圆角*/
  *::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: rgba(230, 230, 230, 0.05);
  }

  *:hover::-webkit-scrollbar-track {
    background-color: rgba(230, 230, 230, 0.5);
  }

  /*定义滑块，内阴影及圆角*/

  *::-webkit-scrollbar-thumb {
    height: 20px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    background-color: rgba(216, 216, 216, 0.4);
    transition: background-color 1s;
  }

  *:hover::-webkit-scrollbar-thumb {
    background-color: rgba(216, 216, 216, 1);
  }

  *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(190, 190, 190, 1);
  }

  *::-webkit-scrollbar-thumb:active {
    background-color: rgba(160, 160, 160, 1);
  }
}
</style>