<template>
  <van-sticky>
    <div class="sticky flex" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
      <div class="left flex">
        <!-- <img class="user" src="/img/user/user.png" alt="极度证券"> -->
        <div>
          <!-- 交易 -->
          {{ $t('tab.tab3') }}
        </div>
      </div>
      <div class="right flex">
        <msgIcon></msgIcon>
        <van-popover
          v-model="showPopover"
          placement="bottom-end"
          trigger="click"
        >
          <div class="popover-body">
            <div class="item flex" @click="goDepositUrl('/deposit')">
              <img class="icon14" src="/img/account/icon14.png" alt="极度证券">
              <div>
                <!-- 存款 -->
                {{ $t('home.l13') }}
              </div>
            </div>
            <div class="item flex" @click="$router.push('/convert')">
              <img class="icon14" src="/img/account/icon15.png" alt="极度证券">
              <div>
                <!-- 划转 -->
                {{ $t('home.l15') }}
              </div>
            </div>
            <div class="item flex" @click="$router.push('/chat')">
              <img class="icon14" src="/img/account/icon17.png" alt="极度证券">
              <div>
                <!-- 客服 -->
                {{ $t('home.l16') }}
              </div>
            </div>
            <div class="item flex" @click="$router.replace('/')">
              <img class="icon14" src="/img/account/icon16.png" alt="极度证券">
              <div>
                <!-- 首页 -->
                {{ $t('tab.tab1') }}
              </div>
            </div>
          </div>
          <template #reference>
            <img class="icon" src="/img/icon/meau.png" alt="极度证券">
          </template>
        </van-popover>
      </div>
      <!-- <authIdentity v-if="authShow" @cancel="authShow = false" /> -->
    </div>
    <van-popup v-model="depositPopShow" position="right" :style="{ width: '100%' }">
      <depositPop :url="depositUrl" @cancel="depositPopShow = false" />
    </van-popup>
  </van-sticky>
</template>
<script>
// import authIdentity from "@/components/authIdentity";
import selectDepositPop from "@/mixins/selectDepositPop";
export default {
  components: {
    // authIdentity
  },
  mixins: [selectDepositPop],
  data () {
    return {
      showPopover: false,
      authShow: false,
    }
  },
  deactivated () {
    this.authShow = false
    this.showPopover = false
  },
  activated() {
    this.authShow = false
    this.showPopover = false
  },
}
</script>
<style lang="less" scoped>
.sticky {
  background-color: #fff;
  padding: 12px 18px 5px;
  justify-content: space-between;
  .left {
    column-gap: 8px;
    font-size: 22px;
    font-weight: 600;
  }
  .user {
    width: 32px;
  }
  .right {
    column-gap: 16px;
  }
  .icon {
    cursor: pointer;
    width: 24px;
    display: block;
  }
}
.popover-body {
  .item {
    cursor: pointer;
    height: 42px;
    padding-left: 16px;
    padding-right: 8px;
    color: #2C2C2C;
    font-size: 14px;
    min-width: 122px;
    max-width: 180px;
    line-height: 1;
    &+.item {
      border-top: 1px solid #E9E9E9;
    }
  }
  .icon14 {
    width: 22px;
    margin-right: 8px;
  }
}
</style>
