<template>
  <div class="page">
    <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div style="text-align: center">
              <div class="el-upload">
                <img :src="Avatar" class="avatar">
                <p>{{ userData.username }}，欢迎您</p>
              </div>
            </div>
            <ul class="user-info">
              <li><div style="height: 100%"><el-icon><i-ep-UserFilled /></el-icon> 登录账号<div class="user-right">{{ userData.username }}</div></div></li>
              <li><el-icon><i-ep-Avatar /></el-icon> 用户昵称 <div class="user-right">{{ userData.name }}</div></li>
              <li><el-icon><i-ep-User /></el-icon> 手机号 <div class="user-right"> {{ userData.phone }}</div></li>
              <li v-if="(userData.isAdmin === 1 && localDeploy) || userData.isAdmin === 0"><el-icon><i-ep-User /></el-icon> 当前账户时长 <div class="user-right"> {{ userData.remainingTimes }} (秒)</div></li>
              <li>
                <el-icon><i-ep-edit /></el-icon> 安全设置
                <div class="user-right">
                  <a @click="editDialogVisible = true">修改密码</a>
                </div>
              </li>
                <!-- <li v-if="userData.isAdmin === '1' && userData.localDeploy">
                  <el-icon><i-ep-Pointer /></el-icon> 视频制作统计  
                  <div class="user-right">
                    <a @click="videoDialogVisible = true">查看</a>
                  </div>
                </li> -->
                <li  v-if="userData.isAdmin === 0">
                  <el-icon><i-ep-Pointer /></el-icon>密钥  
                  <div class="user-right">
                    <a @click="router.push('/secretKey')">查看</a>
                  </div>
                </li>
            </ul>
          </div>
        </el-card>
        <el-dialog v-model="editDialogVisible" title="修改密码"  width="40%" :before-close="handleClose" >
          <edit-pass @close="handleClose"></edit-pass>
        </el-dialog>
  </div>
</template>
<script setup>
import editPass from '../editPass/index.vue'
import { useRoute, useRouter } from "vue-router";
import { getUser, privateDeployAdminCurrent, current, localDeployApi } from "@/apis/home.js";
const route = useRoute();
const router = useRouter();
const Avatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
const editDialogVisible = ref(false)
const handleClose = () => {
  editDialogVisible.value = false;
};

const userData = ref({
  username: '',
  name: '',
  remainingTimes: '',
  phone: '',
  isAdmin: '',
  localDeploy: ''
});
const localDeploy = ref('')
const getData = async () => {
    let userRes = await getUser()
    let localDeployRes = await localDeployApi()
    userData.value = userRes.data
    localStorage.setItem("username", userRes.data.username);
    localStorage.setItem("isAdmin", userRes.data.isAdmin); // isAdmin=1，为管理人员(邃芒后台) , isAdmin=0,为API接入方登录后台 isAmin=1&&localDeploy=true,就是私有化部署的管理后台
    userData.value.localDeploy = localDeployRes.data
    localDeploy.value = localDeployRes.data
    localStorage.setItem("localDeploy", localDeployRes.data); 
// 当前账户时长
    let res = userData.isAdmin === 1 && localDeploy ? await privateDeployAdminCurrent() : await current()
    userData.value.remainingTimes = res.data.remainingTimes
   
}

onMounted(async () => {
  getData()
});
</script>
<style lang="scss" scoped>
.page{
  padding: 30px
}
.user-info {
    padding-left: 0;
    list-style: none;
    li{
      border-bottom: 1px solid #F0F3F4;
      padding: 11px 0;
      font-size: 13px;
    }
    .user-right {
      float: right;
      a{
        color: #317EF3;
      }
    }
  }
</style>