<template>
  <div :class="wrpCls">
    <!-- User avatar/name removed for local OSS build -->
    <select-lang :class="prefixCls" />
    <a-tooltip :title="$t('app.setting.tooltip')">
      <span :class="prefixCls" @click="handleSettingClick">
        <a-icon type="setting" style="font-size: 16px;" />
      </span>
    </a-tooltip>
  </div>
</template>

<script>
import SelectLang from '@/components/SelectLang'

export default {
  name: 'RightContent',
  components: {
    SelectLang
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-global-header-index-action'
    },
    isMobile: {
      type: Boolean,
      default: () => false
    },
    topMenu: {
      type: Boolean,
      required: true
    },
    theme: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      apiBase: 'https://api.quantdinger.com/'
    }
  },
  methods: {
    handleSettingClick () {
      // 触发设置抽屉显示事件
      this.$root.$emit('show-setting-drawer')
    }
  },
  computed: {
    wrpCls () {
      return {
        'ant-pro-global-header-index-right': true,
        [`ant-pro-global-header-index-${(this.isMobile || !this.topMenu) ? 'light' : this.theme}`]: true
      }
    }
  }
}
</script>

<style lang="less">
@import '~ant-design-vue/es/style/themes/default.less';

/* 浅色主题（默认） */
.ant-pro-global-header-index-right {
  .ant-pro-global-header-index-action {
    color: rgba(0, 0, 0, 0.65);
    transition: all 0.3s;

    &:hover {
      color: @primary-color;
      background: rgba(0, 0, 0, 0.04);
    }
  }
}

/* 暗黑主题 - 强制覆盖 */
/* 只要 body 或 layout 有 dark/realdark 类，就应用这些样式 */
body.dark,
body.realdark,
.ant-layout.dark,
.ant-layout.realdark,
.ant-pro-layout.dark,
.ant-pro-layout.realdark {
  /* 覆盖 Header 右侧容器内所有文本颜色 */
  .ant-pro-global-header-index-right {
    color: rgba(255, 255, 255, 0.85) !important;

    * {
      color: rgba(255, 255, 255, 0.85) !important;
    }

    /* 操作按钮 */
    .ant-pro-global-header-index-action {
      color: rgba(255, 255, 255, 0.85) !important;

      &:hover {
        color: #1890ff !important;
        background: rgba(255, 255, 255, 0.08) !important;
      }
    }

    /* 头像 */
    .ant-pro-account-avatar {
      .antd-pro-global-header-index-avatar {
        background: rgba(255, 255, 255, 0.25) !important;
      }
    }

    /* 下拉菜单触发器（包含图标） */
    .ant-pro-drop-down,
    .ant-dropdown-trigger {
      color: rgba(255, 255, 255, 0.85) !important;

      &:hover {
        color: #1890ff !important;
        background: rgba(255, 255, 255, 0.08) !important;
      }

      .anticon {
        color: rgba(255, 255, 255, 0.85) !important;
      }
    }
  }
}
</style>
