<template>
  <el-dropdown trigger="click" class="study-selector-dropdown" @command="onCommand">
    <div class="selector-trigger">
      <el-icon class="trigger-icon"><OfficeBuilding /></el-icon>
      <span class="current-study-name">{{ study.currentStudy?.name || TEXT.common.empty.selectProject }}</span>
      <el-icon class="arrow-icon"><ArrowDown /></el-icon>
    </div>
    <template #dropdown>
      <el-dropdown-menu class="study-dropdown">
        <el-dropdown-item command="workbench">
          <el-icon><OfficeBuilding /></el-icon>返回工作台选择项目
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { useStudyStore } from "../store/study";
import { OfficeBuilding, ArrowDown } from "@element-plus/icons-vue";
import { TEXT } from "../locales";

const router = useRouter();
const study = useStudyStore();

const onCommand = async (cmd: any) => {
  if (cmd === "workbench") {
    study.clearCurrentStudy();
    await router.push("/workbench");
  }
};
</script>

<style scoped>
.selector-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background-color: #fafafa;
  border: 1px solid var(--ctms-border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.selector-trigger:hover {
  background-color: var(--ctms-primary-light);
  border-color: var(--ctms-primary-hover);
}

.trigger-icon {
  color: var(--ctms-primary);
  font-size: 16px;
}

.current-study-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ctms-text-main);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arrow-icon {
  font-size: 12px;
  color: var(--ctms-text-secondary);
}

.study-dropdown {
  max-height: 320px;
  overflow-y: auto;
  min-width: 220px;
}

</style>
