<template>
  <div class="ordinaryTeacher">
    <div class="info">
      <div class="infoDiv">
        <div class="left">
          <img class="user" :src="getFullUrl(userInfo.user_avatar)" />
          <!-- <img class="user" src="/images/personal/user.png" /> -->
          <div>
            <div class="font-size-18 iconDiv">
              <span class="name">{{ userInfo.user_name }}</span>
              <img @click="toBadge" v-for="(item, index) in badgeData" :key="index" :src="item" alt="" srcset="" />
            </div>
            <div class="font-size-16" style="display: flex; color: #949494">
              <div style="display: flex; align-items: center">
                <el-icon color="#000" style="margin-right: 5px">
                  <User />
                </el-icon>
                <span>{{ userInfo.role_name }}</span>
              </div>
              <div style="
                  margin-left: 40px;
                  display: flex;
                  align-items: center;
                ">
                <el-icon color="#000" style="margin-right: 5px">
                  <User />
                </el-icon>
                <span>{{ userInfo.grade_name }}/{{
                    userInfo.subject_name
                  }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <!-- <el-button type="primary" :plain="isFocus" @click="handleFocus">{{
            !isFocus ? "关注" : "已关注"
          }}</el-button> -->
          <el-button type="primary" @click="toSet(userInfo.user_id)">设置</el-button>
        </div>
      </div>
      <div class="production">
        <div class="item font-size-14" v-for="item in proData" :key="item.name">
          <span>{{ item.name }}</span>
          <span class="value">{{ item.value }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
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: [icon1, icon2, icon3, icon4, icon5, icon6],
      isFocus: true,
    }
  },
  props: ["userInfo", "proData"],
  methods: {
    handleFocus() {
      this.isFocus = !this.isFocus;
    },
    toSet(id) {
      this.$router.push({ name: "personal_components_sz", params: { id: id } });
    },
    toBadge() {
      this.$router.push({ name: "personal_components_hz" });
    },
  }
}
</script>

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

<style lang="scss" scoped>
.ordinaryTeacher {
  .info {
    padding: 0 50px;
    padding-bottom: 35px;
    border-bottom: 2px solid rgba($color: #f6f6fa, $alpha: 0.7);

    .infoDiv {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24px;

      .left {
        display: flex;
        align-items: center;

        .user {
          width: 54px;
          height: 54px;
          border-radius: 50%;
          margin-right: 18px;
        }

        .name {
          margin-right: 8px;
        }

        .iconDiv {
          display: flex;
          margin-bottom: 5px;

          img {
            width: 28px;
            height: 28px;
          }
        }
      }

      .right {
        .el-button {
          width: 100px;
          height: 40px;
          text-align: center;

          &.el-button--primary.is-plain {
            background: transparent;
            color: #409eff;
          }
        }
      }
    }

    .production {
      display: flex;

      .item {
        border: 1px dashed #e4e6e8;
        border-radius: 6px;
        line-height: 50px;
        padding-left: 15px;
        padding-right: 70px;

        .value {
          color: rgba(0, 131, 197, 0.8);
          margin-left: 30px;
        }
      }

      .item + .item {
        margin-left: 30px;
      }
    }
  }
}
</style>