<template>
  <!-- 个人中心 -->
  <div class="personal" id="personal">
    <common-header />

    <!-- <div class="bg ">
    </div> -->

    <div class="content relative">
      <img src="/images/personal/bg.png" class="w-full z-0 absolute" />

      <el-card class="box-card contentDiv">
        <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">设置</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 class="menuDiv">
          <div
            class="list pointer font-size-16"
            :class="activeMenu == item.url ? 'active' : ''"
            v-for="item in menuData"
            :key="item.name"
            @click="goToPage(item.url)"
          >
            {{ item.name }}
          </div>
        </div>
      </el-card>

      <router-view />
    </div>
  </div>
</template>

<script>
import CommonHeader from "@/components/CommonHeader/index.vue";
import { User } from "@element-plus/icons-vue";
//import { user_info } from "./components/MyCourse/api";
import { getFullUrl } from "@/utils/helper";

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 {
  components: { CommonHeader, User },
  data() {
    return {
      userInfo: {},
      userImg: "",
      badgeData: [icon1, icon2, icon3, icon4, icon5, icon6],
      isFocus: true,
      proData: [
        {
          name: "优秀作业",
          key: "kc_num",
          value: "20",
        },
        {
          name: "被关注数",
          key: "watch_num",
          value: "2698",
        },
        {
          name: "总积分",
          key: "followed",
          value: "2021",
        },
      ],
      activeMenu: "",
      menuData: [
        {
          name: "我的足迹",
          url: "xs-track",
        },
        {
          name: "我的作业",
          url: "xs-homework",
        },
        {
          name: "我的积分",
          url: "xs-credits",
        },
        {
          name: "我关注的人",
          url: "xs-attention",
        },
      ],
    };
  },
  methods: {
    initUserInfo() {
      // user_info().then((res) => {
      //   if (res.code == 1) {
      //     this.userInfo = res.data;
      //     this.proData.map((item) => {
      //       for (let key in this.userInfo) {
      //         if (item.key == key) {
      //           item.value = this.userInfo[key];
      //         }
      //       }
      //     });
      //   }
      // });
    },
    handleFocus() {
      this.isFocus = !this.isFocus;
    },
    goToPage(url) {
      this.activeMenu = url;
      this.$router.push({ name: url });
    },
    toSet() {
      this.$router.push({ name: "personal_components_sz" });
    },
    toBadge() {
      this.$router.push({ name: "personal_components_hz" });
    },
  },
  created() {
    this.activeMenu =
      this.$route.name.indexOf("course") != -1 ? "mycourse" : this.$route.name;

    this.initUserInfo();
  },
};
</script>

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

<style lang="scss" scoped>
.personal {
  background: #fcfeff;
  position: relative;

  .bg {
    position: absolute;
    width: 100%;
  }

  .pointer {
    cursor: pointer;
  }

  .content {
    width: 1440px;
    margin: auto;

    .contentDiv {
      margin: 15px 0;

      .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 {
              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: #339cd0;

              margin-left: 30px;
            }
          }

          .item + .item {
            margin-left: 30px;
          }
        }
      }

      .menuDiv {
        display: flex;
        margin-bottom: -10px;

        .list {
          margin: 0 30px;
          color: #949494;
          position: relative;
          line-height: 40px;

          &::after {
            content: "";
            width: 0;
            height: 2px;
            background: rgba(0, 131, 197, 0.8);
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            transition: width linear 0.1s;
          }

          &:hover {
            color: rgba(0, 131, 197, 0.8);
          }

          &.active {
            color: rgba(0, 131, 197, 0.8);

            &::after {
              width: 100%;
            }
          }
        }
      }
    }

    .el-card {
      background: #fff;
      position: relative;
    }
  }
}
</style>

<style lang="scss">
#personal {
  .el-card {
    border-radius: 12px;
    position: relative;
  }

  .contentDiv {
    .el-card {
      .el-card__body {
        padding-bottom: 0;
      }
    }

    .el-tabs__header {
      margin: 0;

      .el-tabs__nav-scroll::after {
        height: 0;
      }
    }
  }
}
</style>
