<template>
  <div class="card" data-state="#about">
    <div class="card-header">
      <div class="card-cover"
           style="background-image: url('https://pic.imgdb.cn/item/658af285c458853aef9177aa.jpg')"></div>
      <!--      <img class="card-avatar" src="https://pic.imgdb.cn/item/658af285c458853aef9177aa.jpg" alt="avatar">-->
      <el-avatar  v-if="user.avatar===null" class="card-avatar" alt="avatar"> {{user.userLogin}}</el-avatar>
      <el-avatar  v-if="user.avatar!==null" class="card-avatar" :src="user.avatar" alt="avatar"></el-avatar>
      <h1  v-if="user.nickname===null" class="card-fullname">{{user.userLogin}}</h1>
      <h1 v-if="user.nickname!==null" class="card-fullname">{{user.nickname}}</h1>
      <h2 v-if="user.roleId===1" class="card-jobtitle">common user</h2>
      <h2 v-if="user.roleId===0" class="card-jobtitle">Admin</h2>
    </div>
    <div class="card-main">
      <div class="card-section is-active" id="about">
        <div class="card-content">
          <div class="card-subtitle">ABOUT</div>
          <p class="card-desc">用户描述...
          </p>
        </div>
        <div class="card-content">
          <div class="card-subtitle">TIME OF REGISTRATION</div>
          <p class="card-desc">{{user.userRegistered}}
          </p>
        </div>
<!--        <div class="card-social">-->
<!--         -->
<!--        </div>-->
      </div>
      <div class="card-section" id="experience">
        <div class="card-content">
          <div class="card-subtitle">登录日志</div>
          <div class="card-timeline">
            <div v-if="loginLogs" v-for="(item,index) in loginLogs" :key="index" class="card-item" :data-year="item.loginTime.substring(0, 4)">
              <div v-if="item.loginIp" class="card-item-title">{{item.loginIp}} <span v-if="user.userLogin">: {{user.userLogin}}</span></div>
              <div v-if="item.loginTime" class="card-item-title">{{item.loginTime}}</div>
              <div v-if="item.location" class="card-item-desc">{{item.location}}</div>
            </div>

          </div>
        </div>
      </div>
      <div class="card-section" id="contact">
        <div class="card-content">
          <div class="card-subtitle">CONTACT</div>
          <div class="card-contact-wrapper">
<!--            <div class="card-contact">-->
<!--              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"-->
<!--                   stroke-width="2" stroke-linecap="round" stroke-linejoin="round">-->
<!--                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"></path>-->
<!--                <circle cx="12" cy="10" r="3"></circle>-->
<!--              </svg>-->
<!--              Algonquin Rd, Three Oaks Vintage, MI, 49128-->
<!--            </div>-->
            <div class="card-contact" v-if="user.phone">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                   stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path
                    d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"></path>
              </svg>
              {{user.phone}}
            </div>
            <div class="card-contact">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                   stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                <path d="M22 6l-10 7L2 6"></path>
              </svg>
              {{user.userEmail}}
            </div>
<!--            <button class="contact-me">注销账号</button>-->
          </div>
        </div>
      </div>
      <div class="card-section" id="update">
        <div class="card-content">
          <div class="card-subtitle">修改信息</div>
          <el-form :model="updateForm" :rules="rules" ref="updateForm" class="form">
            <el-form-item prop="avatar">
              <el-input
                  v-model="updateForm.avatar"
                  prefix-icon="el-icon-link"
                  placeholder="头像链接"
                  auto-complete="off"
              ></el-input>
            </el-form-item>
            <el-form-item prop="nickname">
              <el-input
                  v-model="updateForm.nickname"
                  prefix-icon="el-icon-user"
                  placeholder="昵称"
                  auto-complete="off"
              ></el-input>
            </el-form-item>
            <el-form-item prop="phone">
              <el-input
                  v-model="updateForm.phone"
                  prefix-icon="el-icon-phone"
                  placeholder="联系电话"
                  auto-complete="off"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <div class="login-btn" style="display: flex;flex-direction: row;justify-content: space-between">
                <el-button @click="resetForm('updateForm')">重置</el-button>
                <el-button type="primary" @click="updateUserInfo('updateForm')">确认
                </el-button
                >
              </div>
            </el-form-item>

          </el-form>
        </div>

      </div>
      <div class="card-buttons">
        <button data-section="#about" class="is-active">我的</button>
        <button data-section="#contact">联系方式</button>
        <button data-section="#experience">日志</button>
        <button data-section="#update">修改信息</button>
      </div>
    </div>

  </div>
</template>
<script>
import axios from "axios";
import Vue from "vue";

export default {
  name: "PersonalInfoCard",
  data() {
    return {
      user:{
        avatar:null,
        id:null,
        nickname:null,
        phone:null,
        userEmail:null,
        userLogin:null,
        userRegistered:null,
        roleId:null
      },
      loginLogs:[],
      updateForm:{
        avatar:null,
        nickname:null,
        phone:null,
      },
      rules: {
        avatar: [
          // required：规则，o：失去焦点触发
          {required: true, message: "请输入头像链接", trigger: "blur"},
        ],
        nickname: [{required: true, message: "请输入昵称", trigger: "blur"}],
        phone: [{required: true, message: "请输入联系电话", trigger: "blur"}],
      },
    }
  },
  mounted() {
    this.getUserAllInfo();
    this.getUserLoginLogs();
    const buttons = document.querySelectorAll(".card-buttons button");
    const sections = document.querySelectorAll(".card-section");
    const card = document.querySelector(".card");

    const handleButtonClick = e => {
      const targetSection = e.target.getAttribute("data-section");
      const section = document.querySelector(targetSection);
      targetSection !== "#about" ?
          card.classList.add("is-active") :
          card.classList.remove("is-active");
      card.setAttribute("data-state", targetSection);
      sections.forEach(s => s.classList.remove("is-active"));
      buttons.forEach(b => b.classList.remove("is-active"));
      e.target.classList.add("is-active");
      section.classList.add("is-active");
    };

    buttons.forEach(btn => {
      btn.addEventListener("click", handleButtonClick);
    });
  },
  created() {

  },
  computed: {},
  methods: {
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    updateUserInfo(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (localStorage.getItem("Authorization") && localStorage.getItem("userId")) {
            let _this=this;
            axios({
              method: 'get',
              url: '/api/updateUserDetails',
              params: {
                avatar:this.updateForm.avatar,
                nickname:this.updateForm.nickname,
                id:localStorage.getItem('userId'),
                phone:this.updateForm.phone,
              }
            }).then(function (res) {
              if(res.data.code!==200){
                Vue.prototype.$notify.error({
                  title: '错误',
                  message: "修改失败！",
                  offset: 0
                });
              }else{
                Vue.prototype.$notify.success({
                  title: 'OK',
                  message: "修改成功！",
                  offset: 0
                });
                _this.getUserAllInfo();
              }
            }).catch((error) => {
              // Vue.prototype.$notify.error({
              //   title: '错误',
              //   message: error,
              //   offset: 0
              // });
            })
          } else {
            Vue.prototype.$notify.error({
              title: '错误',
              message: "登录状态失效，请重新登录！",
              offset: 0
            });
          }
        }
      })

    },
    getUserAllInfo() {
      let _this = this;
      if (localStorage.getItem("Authorization") && localStorage.getItem("userId")) {
        axios({
          method: 'get',
          url: '/api/getUserDetailes',
          params: {
            id: localStorage.getItem("userId")
          }
        }).then(function (res) {
          if(res.data){
            _this.user.avatar=res.data.avatar;
            _this.user.id=res.data.id;
            _this.user.nickname=res.data.nickname;
            _this.user.phone=res.data.phone;
            _this.user.userEmail=res.data.userEmail;
            _this.user.userLogin=res.data.userLogin;
            _this.user.userRegistered=res.data.userRegistered;
            _this.user.roleId=res.data.roleId;
          }
        }).catch((error) => {
          // Vue.prototype.$notify.error({
          //   title: '错误',
          //   message: error,
          //   offset: 0
          // });
        })
      } else {
        Vue.prototype.$notify.error({
          title: '错误',
          message: "登录状态失效，请重新登录！",
          offset: 0
        });
      }

    },
    getUserLoginLogs() {
      let _this = this;
      if (localStorage.getItem("Authorization") && localStorage.getItem("userId")) {
        axios({
          method: 'get',
          url: '/api/getUserLoginLogs',
          params: {
            userId: localStorage.getItem("userId")
          }
        }).then(function (res) {
          if(res.data){
            _this.loginLogs=res.data;
          }
        }).catch((error) => {
          // Vue.prototype.$notify.error({
          //   title: '错误',
          //   message: error,
          //   offset: 0
          // });
        })
      } else {
        Vue.prototype.$notify.error({
          title: '错误',
          message: "登录状态失效，请重新登录！",
          offset: 0
        });
      }

    },
  }

}
</script>
<style scoped>
* {
  box-sizing: border-box;
}


.card {
  width: 340px;
  margin: auto;
  overflow-y: auto;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  background-color: var(--theme-bg-color);
  color: var(--theme-color);
  display: flex;
  transition: 0.3s;
  flex-direction: column;
  border-radius: 10px;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
  top: 20px;
  left: 20px;
}

.card[data-state="#about"] {
  height: 450px;
}

.card[data-state="#about"] .card-main {
  padding-top: 0;
}

.card[data-state="#contact"] {
  height: 430px;
}

.card[data-state="#experience"] {
  height: 550px;
}

.card.is-active .card-header {
  height: 80px;
}

.card.is-active .card-cover {
  height: 100px;
  top: -50px;
}

.card.is-active .card-avatar {
  transform: none;
  left: 20px;
  width: 50px;
  height: 50px;
  bottom: 10px;
}

.card.is-active .card-fullname,
.card.is-active .card-jobtitle {
  left: 86px;
  transform: none;
}

.card.is-active .card-fullname {
  bottom: 18px;
  font-size: 19px;
}

.card.is-active .card-jobtitle {
  bottom: 16px;
  letter-spacing: 1px;
  font-size: 10px;
}

.card-header {
  position: relative;
  display: flex;
  height: 200px;
  flex-shrink: 0;
  width: 100%;
  transition: 0.3s;
}

.card-header * {
  transition: 0.3s;
}

.card-cover {
  width: 100%;
  height: 100%;
  position: absolute;
  height: 160px;
  top: -20%;
  left: 0;
  will-change: top;
  background-size: cover;
  background-position: center;
  filter: blur(30px);
  transform: scale(1.2);
  transition: 0.5s;
}

.card-avatar {
  width: 100px;
  height: 100px;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  -o-object-position: center;
  object-position: center;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  left: 50%;
  cursor: pointer;
  transform: translateX(-50%) translateY(-64px);
}

.card-fullname {
  position: absolute;
  bottom: 0;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  transform: translateY(-10px) translateX(-50%);
  left: 50%;
}

.card-jobtitle {
  position: absolute;
  bottom: 0;
  font-size: 11px;
  white-space: nowrap;
  font-weight: 500;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-7px);
}

.card-main {
  position: relative;
  flex: 1;
  display: flex;
  padding-top: 10px;
  flex-direction: column;
}

.card-subtitle {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
}

.card-content {
  padding: 20px;
}

.card-desc {
  line-height: 1.6;
  color: var(--theme-color);
  font-size: 14px;
  margin: 0;
  font-weight: 400;
  font-family: "DM Sans", sans-serif;
}

.card-social {
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 30px;
}

.card-social svg {
  fill: #a5b5ce;
  width: 16px;
  display: block;
  transition: 0.3s;
}

.card-social a {
  color: var(--theme-color);
  height: 32px;
  width: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  background-color: rgba(93, 133, 193, 0.05);
  border-radius: 50%;
  margin-right: 10px;
}

.card-social a:hover svg {
  fill: #637faa;
}

.card-social a:last-child {
  margin-right: 0;
}

.card-buttons {
  display: flex;
  background-color: var(--theme-bg-color);
  margin-top: auto;
  color: var(--theme-color);
  position: sticky;
  bottom: 0;
  left: 0;
}

.card-buttons button {
  flex: 1 1 auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: 0;
  font-size: 13px;
  border: 0;
  padding: 15px 5px;
  cursor: pointer;
  color: #5c5c6d;
  transition: 0.3s;
  font-family: "Jost", sans-serif;
  font-weight: 500;
  outline: 0;
  border-bottom: 3px solid transparent;
}

.card-buttons button.is-active, .card-buttons button:hover {
  color: #2b2c48;
  border-bottom: 3px solid #8a84ff;
  background: linear-gradient(to bottom, rgba(127, 199, 231, 0) 0%, rgba(207, 204, 255, 0.2) 44%, rgba(211, 226, 255, 0.4) 100%);
}

.card-section {
  display: none;
}

.card-section.is-active {
  display: block;
  -webkit-animation: fadeIn 0.6s both;
  animation: fadeIn 0.6s both;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translatey(40px);
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translatey(40px);
  }
  100% {
    opacity: 1;
  }
}

.card-timeline {
  margin-top: 30px;
  position: relative;
}

.card-timeline:after {
  background: linear-gradient(to top, rgba(134, 214, 243, 0) 0%, #516acc 100%);
  content: "";
  left: 42px;
  width: 2px;
  top: 0;
  height: 100%;
  position: absolute;
  content: "";
}

.card-item {
  position: relative;
  padding-left: 60px;
  padding-right: 20px;
  padding-bottom: 30px;
  z-index: 1;
}

.card-item:last-child {
  padding-bottom: 5px;
}

.card-item:after {
  content: attr(data-year);
  width: 10px;
  position: absolute;
  top: 0;
  left: 37px;
  width: 8px;
  height: 8px;
  line-height: 0.6;
  border: 2px solid #fff;
  font-size: 11px;
  text-indent: -35px;
  border-radius: 50%;
  color: rgba(134, 134, 134, 0.7);
  background: linear-gradient(to bottom, #a0aee3 0%, #516acc 100%);
}

.card-item-title {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 5px;
}

.card-item-desc {
  font-size: 13px;
  color: #6f6f7b;
  line-height: 1.5;
  font-family: "DM Sans", sans-serif;
}

.card-contact-wrapper {
  margin-top: 20px;
}

.card-contact {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--theme-color);
  font-family: "DM Sans", sans-serif;
  line-height: 1.6;
  cursor: pointer;
}

.card-contact + .card-contact {
  margin-top: 16px;
}

.card-contact svg {
  flex-shrink: 0;
  width: 30px;
  min-height: 34px;
  margin-right: 12px;
  transition: 0.3s;
  padding-right: 12px;
  border-right: 1px solid #dfe2ec;
}

.contact-me {
  border: 0;
  outline: none;
  background: linear-gradient(to right, rgba(83, 200, 239, 0.8) 0%, rgba(81, 106, 204, 0.8) 96%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  color: #fff;
  padding: 12px 16px;
  width: 100%;
  border-radius: 5px;
  margin-top: 25px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  font-family: "Jost", sans-serif;
  transition: 0.3s;
}
</style>