<template>
  <div class="personal-panel">
    <div class="personal-desc" :style="{'background':this.$store.state.app.themeColor}">
        <div class="avatar-container">
          <img class="avatar" :src="require('@/assets/user.png')" />
        </div>
        <div class="name-role">
          <span class="sender">{{ user.name }} - {{ user.role }}</span>
        </div>
        <div class="registe-info">
          <span class="registe-info">
            <li class="fa fa-clock-o"></li>
            {{ user.registeInfo }}
          </span>
        </div>
    </div>

    <div class="main-operation">
        <span class="main-operation-item">
          <el-button size="small" icon="fa fa-male"> 个人中心</el-button>
        </span>
        <span class="main-operation-item">
          <el-button size="small" icon="fa fa-key" @click=openPasswordDialog()> 修改密码</el-button>
        </span>
    </div>

    <div class="personal-footer" @click="logout">
      <li class="fa fa-sign-out"></li>
      {{$t("common.logout")}}
    </div>
    <!--备份还原界面-->
    <!-- <backup ref="backupDialog" @afterRestore="afterRestore"></backup> -->

    <el-dialog :modal-append-to-body='false'  title="修改密码" :visible.sync="updatePasswordDialogVisible" width="25%">
      <el-form :model="item">
        <el-input placeholder="请输入原密码" v-model="item.password" show-password maxlength = 8 minlength = 6  ></el-input>
        <div style="margin: 20px 0;">
        </div>
        <el-input placeholder="请输入新密码 6~8位" v-model="item.newpassword" show-password maxlength = 8 minlength = 6></el-input>
        <div style="margin: 20px 0;"/>
        <el-input placeholder="再次输入新密码 6~8位" v-model="item.newpasswordagain" show-password maxlength = 8 minlength = 6></el-input>
        <div style="margin: 20px 0;"/>
      </el-form>

        <div slot="footer" class="dialog-footer">
        <el-button @click="updatePasswordDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click = updatePassword() >确 定</el-button>
      </div>
    </el-dialog>


  </div>

</template>

<script>
import Cookies from "js-cookie"
import router from '@/router'
//import Backup from "@/views/Backup/Backup"
export default {
  name: 'PersonalPanel',
  components:{

  },
  props: {
    user: {
      type: Object,
      default: {
        name: "admin",
        avatar: "@/assets/user.png",
        role: "超级管理员",
        registeInfo: "注册时间：2018-12-25 "
      }
    }
  },
  data() {
    return {
      updatePasswordDialogVisible : false,
      item :{
          newpassword : "",
          newpasswordagain : "",
          password : ""
      }
    }

  },
  methods: {
    // 退出登录
    logout: function() {
      this.$confirm("确认退出吗?", "提示", {
        type: "warning"
      })
      .then(() => {
        sessionStorage.removeItem("user")
        this.deleteCookie("token")
        this.$router.push("/login")
        this.$api.login.logout().then((res) => {
          }).catch(function(res) {
        })
      })
      .catch(() => {})
    },
    // 删除cookie
    deleteCookie: function(name) {
        Cookies.remove(name)
    },
    // 打开备份还原界面
    showBackupDialog: function() {
      this.$refs.backupDialog.setBackupVisible(true)
    },
    // 成功还原之后，重新登录
    afterRestore: function() {
        this.$refs.backupDialog.setBackupVisible(false)
        sessionStorage.removeItem("user")
        this.deleteCookie("token")
        this.$router.push("/login")
        this.$api.login.logout().then((res) => {
          }).catch(function(res) {
        })
    },
    openPasswordDialog:function () {
      this.updatePasswordDialogVisible = true;
      this.item = {
        newpassword: "",
        newpasswordagain: "",
        password: ""
      }
    },
    updatePassword: function () {
      var rex = /^[\w_-]{6,18}$/
      if(this.item.password == ''){
          this.$message({message: '请输入原密码', type: 'error'})
          return;
        }
        if(this.item.newpassword == ''){
          this.$message({message: '请输入新密码 ', type: 'error'})
          return;
        }
        if(!rex.test(this.item.newpassword)){
          this.$message({message: '新密码不规范', type: 'error'})
          return;
        }
      if(this.item.newpassword == this.item.password){
        this.$message({message: '新旧密码一致', type: 'error'})
        return;
      }
        if(this.item.newpassword != this.item.newpasswordagain){
          this.$message({message: '新密码不一致', type: 'error'})
          return;
        }
      this.$api.getlist.updatePassword(this.item).then((res) => {
        if(res.code == 200) {
          this.$message({ message: '操作成功', type: 'success' })
          this.updatePasswordDialogVisible = false;
          //this.$refs['item'].resetFields()
          Cookies.remove("token")
          router.push('/login')
        }else {
          this.$message({message: '操作失败, ' + res.message, type: 'error'})
        }
      });
  },
  mounted() {
  }
  }
}
</script>

<style scoped>
.personal-panel {
  font-size: 14px;
  width: 280px;
  text-align: center;
  border-color: rgba(180, 190, 190, 0.2);
  border-width: 1px;
  border-style: solid;
  background: rgba(182, 172, 172, 0.1);
  margin: -14px;
}
.personal-desc {
  padding: 15px;
  color: #fff;
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 90px;
}
.name-role {
  font-size: 16px;
  padding: 5px;
}
.personal-relation {
  font-size: 16px;
  padding: 12px;
  margin-right: 1px;
  background: rgba(200, 209, 204, 0.3);
}
.relation-item {
  padding: 12px;
}
.relation-item:hover {
  cursor: pointer;
  color: rgb(19, 138, 156);
}
.main-operation {
  padding: 8px;
  margin-right: 1px;
  /* background: rgba(175, 182, 179, 0.3); */
  border-color: rgba(201, 206, 206, 0.2);
  border-top-width: 1px;
  border-top-style: solid;
}
.main-operation-item {
  margin: 15px;
}
.other-operation {
  padding: 15px;
  margin-right: 1px;
  text-align: left;
  border-color: rgba(180, 190, 190, 0.2);
  border-top-width: 1px;
  border-top-style: solid;
}
.other-operation-item {
  padding: 12px;
}
.other-operation-item:hover {
  cursor: pointer;
  background: #9e94941e;
  color: rgb(19, 138, 156);
}
.personal-footer {
  margin-right: 1px;
  font-size: 14px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  border-color: rgba(180, 190, 190, 0.2);
  border-top-width: 1px;
  border-top-style: solid;
}
.personal-footer:hover {
  cursor: pointer;
  color: rgb(19, 138, 156);
  background: #b1a6a61e;
}
</style>
