<template>
  <div class="file-toolbar">
    <!-- 第一行：视图切换 + 搜索框 + 上传/新建 -->
    <div class="toolbar-top">
      <el-button-group>
        <el-button :type="currentMode === 'table' ? 'primary' : ''" @click="changeMode('table')">
          <el-icon><List /></el-icon>
        </el-button>
        <el-button :type="currentMode === 'grid' ? 'primary' : ''" @click="changeMode('grid')">
          <el-icon><Grid /></el-icon>
        </el-button>
      </el-button-group>

      <el-input
        v-model="searchText"
        placeholder="搜索文件..."
        clearable
        class="search-input"
        @keyup.enter="doSearch"
        @input="onSearchInput"
      >
        <template #prefix><el-icon><Search /></el-icon></template>
      </el-input>

      <el-button-group v-if="menuType === 'my-files'">
        <el-button type="primary" @click="$emit('upload')">
          <el-icon><Upload /></el-icon>
          <span style="margin-left: 4px">上传文件</span>
        </el-button>
        <el-button @click="$emit('newFolder')">
          <el-icon><FolderAdd /></el-icon>
          <span style="margin-left: 4px">新建文件夹</span>
        </el-button>
      </el-button-group>
      
      <el-button type="danger" v-if="menuType === 'trash'" @click="$emit('emptyTrash')">
        <el-icon><Delete /></el-icon>
        <span style="margin-left: 4px">清空回收站</span>
      </el-button>
    </div>

    <!-- 第二行：前进后退 + 路径 -->
    <div class="toolbar-bottom">
      <div class="path-controls">
        <el-button v-if="showBack" @click="$emit('goBack')" circle title="返回上级">
          <el-icon><Back /></el-icon>
        </el-button>
        <span class="current-path">{{ currentPath }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { List, Grid, Upload, FolderAdd, Delete, Back, Search } from '@element-plus/icons-vue'

const props = defineProps({
  viewMode: { type: String, default: 'table' },
  searchKeyword: { type: String, default: '' },
  menuType: { type: String, default: 'my-files' },
  currentPath: { type: String, default: '/' },
  showBack: { type: Boolean, default: false }
})

const emit = defineEmits([
  'update:viewMode', 
  'update:searchKeyword', 
  'search', 
  'refresh', 
  'upload', 
  'newFolder', 
  'emptyTrash',
  'goBack'
])

const currentMode = ref(props.viewMode)
const searchText = ref(props.searchKeyword)

watch(() => props.viewMode, (val) => {
  currentMode.value = val
})

watch(() => props.searchKeyword, (val) => {
  searchText.value = val
})

const changeMode = (mode) => {
  currentMode.value = mode
  emit('update:viewMode', mode)
}

const onSearchInput = (val) => {
  emit('update:searchKeyword', val)
}

const doSearch = () => {
  emit('search')
}
</script>

<style scoped>
.file-toolbar {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  gap: 12px;
  padding: 12px 16px;
}

.toolbar-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-input {
  flex: 1;
}

.toolbar-bottom {
  display: flex;
  align-items: center;
}

.path-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.current-path {
  font-size: 13px;
  color: #606266;
  word-break: break-all;
}
</style>
