<template>
  <div class="usercenter">
    <div class="user">
      <a-dropdown placement="bottomCenter" :trigger="['hover']">
        <div
          class="userinfo"
          :style="{
            margin: '0 20px  0 0px',
            display: 'flex',
            color: 'white',
            alignItems: 'center',
          }"
        >
          <div :style="{ color: color }" class="userCenter">
            {{ userinfo.nickName }}
          </div>
          <a-icon
            type="caret-down"
            class="caret-down action"
            :style="{ color: color }"
          />
        </div>
        <a-menu slot="overlay">
             
          <a-sub-menu key="site" >
            <span slot="title"> <a-icon type="ie" />{{$t('站点选择')}}</span>
            <a-menu-item v-for="item in siteInfo" :key="item.id">
              <a
                v-if="item.domainUrl && item.indexUrl"
                :href="item.domainUrl + item.indexUrl"
                target="_blank"
              >{{ $t(item.name) }}</a>
              <a v-else> {{ $t(item.name) }}</a>
            </a-menu-item>
          </a-sub-menu>
          <a-menu-item  @click="showFormDialog(0)">
            <a-icon type="edit" />
            <span
              class="nav-text"
             
            >{{$t('修改个人信息')}}</span>
          </a-menu-item>
          <a-menu-item @click="showFormDialog(1)" v-if="isLocalAccount">
            <a-icon type="key" />
            <span class="nav-text" >{{$t('修改密码')}}</span>
          </a-menu-item>
          <a-menu-item @click="logout">
            <a-icon type="export" />
            <span class="nav-text" >{{$t('退出')}}</span>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
    <!-- 修改信息弹出框 -->
    <div class="user-dialog-form">
      <!-- 个人信息修改 -->
       <UpdateUserInfo
        v-if="showForm==0"
        @closePopForm="closeFormDialog"
      />
      <!-- 密码修改 -->
      <UpdatePass
        v-if="showForm==1 || userinfo.isNeedChangePwd"
        @changePwded="changePwded"
        @closePopForm="closeFormDialog"
        :isNeedChangePwd="userinfo.isNeedChangePwd" 
      />
    </div>
  </div>
</template>

<script>
import {logout} from '@/homeComponents/api/user'
import {  getAuthedSite ,getUserInfo} from '@/homeComponents/api/user'
import UpdateUserInfo from '@/homeComponents/views/user/UpdateUserInfo'
import UpdatePass from '@/homeComponents/views/user/UpdatePass'
import Watermark from "@/common/utils/watermark.js";

export default {
  props:['color'],
  components: {
    UpdateUserInfo,
    UpdatePass,
  },
  data () {
    return {
      siteInfo: '',
      showForm: -1, // 修改弹框
      userinfo:'',
      isLocalAccount:false
    }
  },
  created() {
    // //console.log(this.userinfo);
    getUserInfo().then(res=>{
      // console.log('个人信息',res.data);
      // console.log('个人信息');
      this.isLocalAccount  = res.data.isLocalAccount;

      this.userinfo = res.data
         setTimeout(() => {
        // Watermark.set(this.userinfo.nickName + ` ` + this.userinfo.no);
        Watermark.set(this.userinfo.nickName + ` ` + this.userinfo.no);
      }, 100);
    })
    getAuthedSite().then((res) => {
      this.siteInfo = res.data;
      //console.log(this.siteInfo);
    });
  },
  mounted () {},


  methods: {
    logout() {
      var token={
        token:window.localStorage.getItem('Access-Token').replace(/"/g,'') 
      }

      logout(token).then(() => {
        window.localStorage.removeItem("Access-Token");
        document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
        this.$router.go(0);
        
      });

      // var data ={

      //   token:window.localStorage.getItem('backmodeltoken')
      // }
      // logout(data).then(res=>{
      //   //console.log(res.data)
      // window.localStorage.removeItem("loginInfo");
      // window.localStorage.removeItem("backmodeltoken");
      // this.$router.push({ name: "login" });
      // this.$store.commit("setLoginInfo", {});
      // this.$store.commit("resetTabsInfo", []);
      // })
    },
    // 显示修改弹框
    showFormDialog (type) {
      this.showForm = type
    },
    // 关闭弹框
    closeFormDialog () {      
      this.showForm = -1
    },
    changePwded(){
       this.userinfo.isNeedChangePwd = false
    }
  },
}
</script>

<style lang="less" scoped>
body {
  align-items: center;
}

.userinfo {
  &:hover .caret-down {
    color: #13c2c2 !important;
    transform: rotate(180deg);
  }
  .caret-down {
    transition: 0.3s;
  }
}
</style>
