<template>
  <div class="navbar">
    <el-popover
      ref="fundPopupRef"
      trigger="click"
      placement="bottom-end"
      :width="300"
      :show-arrow="false"
    >
      <div class="fund-popup">
        <div class="amount" >
          <span >{{ ibFoundAmount }}</span>
          <span style="font-weight: 400;margin-left: 10px;" >USD</span>
        </div>
        <div style="font-weight: 400;" >{{ t('home.commissionWallet') }}</div>
        <div style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
          <router-link to="/capital/fundout" v-slot="{ navigate }" class="small-btn" >
              <el-button type="primary" size="small" style="width: 100%;" @click="navigate" >{{ t('home.goldout') }}</el-button>
          </router-link>
          <router-link to="/capital/fundTransfer" v-slot="{ navigate }" class="small-btn" >
              <el-button type="primary" size="small" style="width: 100%;" class="dark-btn" @click="navigate" >{{ t('home.transfer') }}</el-button>
          </router-link>
        </div>
      </div>
      <template #reference>
        <div class="ib-fund" v-if="userInfo && userInfo.user_type == 1" >
          <span class="amount">{{ ibFoundAmount }}</span>
          <span>USD</span>
        </div>
      </template>
    </el-popover>
    <router-link to="/capital" v-slot="{ navigate }" >
      <el-button type="primary" class="cus-btn" @click="navigate" >{{ t('home.goldin') }}</el-button>
    </router-link>
    <router-link to="/profile" v-slot="{ navigate }" >
      <div class="userInfo" @click="navigate" >
        <svg-icon icon-class="headIcon" class="head" />
        <span>{{ t('personal.personalData') }}</span>
      </div>
    </router-link>
    <el-badge :hidden="countUnread < 1" is-dot style="margin-right: 36px;margin-top: 6px;" @click="noticeRef.switchShow()" >
      <svg-icon icon-class="notice" style="width: 21px;height: 23px;margin-top: -5px;cursor: pointer;" />
    </el-badge>
    <i18n :options="userLang" :showIcon="false" @change="changeLang" />
    <svg-icon icon-class="logout" style="width: 23px;height: 23px;cursor: pointer;margin-left: 20px;" @click="logout" />
  </div>
  <notice ref="noticeRef" @close="handleClose"/>
</template>

<script setup>
import { inject, ref, onMounted, onUnmounted } from "vue";
import I18n from '@/components/I18n'
import useUserStore from '@/store/modules/user'
import { useLocale } from 'element-plus'
import { serverLang, clientLang } from '@/utils/i18n'
import { setLoveLanguage } from '@/api/common'
import { getNoticeByUserId } from '@/api/notice'
import { getIbFund } from '@/api/ib'
// import { useRoute, useRouter } from 'vue-router'
import { eventBus } from '@/utils/event-bus';
// import { ElLoading } from 'element-plus'
import Notice from './Notice'

onMounted(() => {
  eventBus.$on('fund-event', loadFundData);
})

onUnmounted(() => {
  eventBus.$off('fund-event', loadFundData);
})

const { t } = useLocale()
const userStore = useUserStore()
const userLang = useUserStore.applyLanguage
const openMsg = inject('openMsg')
const { proxy } = getCurrentInstance();
const userInfo = ref(userStore.userInfo)
const ibFoundAmount = ref('0.00')
const noticeRef = ref(null)
const countUnread = ref(0)

function lodaData() {  
  loadFundData();
  loadNotice();
}

function loadFundData() {
  if (userInfo.value.user_type == 1) {
    getIbFund().then(resp => {
      if (resp.data.amount) {
        ibFoundAmount.value = resp.data.amount.toFixed(3)
      } else {
        ibFoundAmount.value = '0.000'
      }
    })
  }
}

const router = useRouter()
 
//监听当前路由
watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
  lodaData();
  if (proxy.$refs.fundPopupRef) {
    proxy.$refs.fundPopupRef.hide()
  }
}, { immediate: true })

function logout() {
  openMsg({
    title: t('common.showModallogout'),
    width: '600',
    status: 'warning',
    btn: {
      cancel: {
        text: t('common.cancelText')
      },
      ok: {
        text: t('common.okText')
      }
    }
  }).then(() => {
    userStore.logOut().then(() => {
      location.href = '/index';
    })
  }).catch(()=> {})
}

function changeLang(lang) {
  setLoveLanguage({
    qcc_language: serverLang()
  }).then(() => {
    window.location.reload()
  })
  const currentRoute = router.currentRoute.value;
  router.replace(currentRoute);
}

function loadNotice() {
  getNoticeByUserId().then(resp => {
    if (resp.data) {
      let count = 0;
      for (let index = 0; index < resp.data.length; index++) {
        const element = resp.data[index];
        if (element.status == 0) {
          count++
        }
      }
      countUnread.value = count
    }
  })
}

function handleClose(countUnreadNum) {
  countUnread.value = countUnreadNum
}

</script>

<style lang='scss' scoped>
.navbar {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px;
  height: 96px;
  overflow: hidden;
  position: relative;

  :deep(.el-badge__content) {
    border: none;
    background-color: #ff0000;
  }

  .ib-fund {
    display: flex;
    align-items: flex-end;
    height: 40px;
    font-size: 18px;
    font-weight: 500;
    margin-right: 18px;
    cursor: pointer;

    .amount {
      font-size: 36px;
      font-weight: 700;
      line-height: 36px;
    }
  }

  .cus-btn {
    margin-right: 50px;
  }

  .userInfo {
    margin-right: 36px;
    font-size: 18px;
    cursor: pointer;

    .head {
      width: 18px;
      height: 18px;
      margin-right: 5px;
    }
  }
}

.fund-popup {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  padding: 10px;

  .amount {
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    color: #000;
  }

  .small-btn {
    width: 45%;
  }
}
</style>
