<template>
  <div :style="toolbarStyle">
    <div :style="groupStyle">
      <button @click="onZoomOut" :style="buttonStyle" title="缩小">
        −
      </button>
      <span :style="labelStyle">{{ Math.round(scale * 100) }}%</span>
      <button @click="onZoomIn" :style="buttonStyle" title="放大">
        +
      </button>
      <button @click="onZoomReset" :style="buttonStyle" title="重置">
        重置
      </button>
    </div>
    
    <div :style="groupStyle">
      <button 
        @click="onPreviousPage" 
        :style="buttonStyle" 
        title="上一页"
        :disabled="currentPage === 1"
      >
        上一页
      </button>
      <div :style="pageInputContainerStyle">
        <input
          type="number"
          :value="currentPage"
          @input="(e) => onPageChange(e.target.value)"
          min="1"
          :max="numPages"
          :style="pageInputStyle"
        />
        <span :style="pageLabelStyle">/ {{ numPages }}</span>
      </div>
      <button 
        @click="onNextPage" 
        :style="buttonStyle" 
        title="下一页"
        :disabled="currentPage === numPages"
      >
        下一页
      </button>
    </div>
    
    <div :style="progressContainerStyle">
      <div 
        :style="{
          ...progressBarStyle,
          width: numPages > 0 ? `${(currentPage / numPages) * 100}%` : '0%'
        }"
      />
    </div>
    
    <div v-if="!readOnly" :style="groupStyle">
      <button @click="onExport" :style="buttonStyle" title="导出批注">
        导出
      </button>
      <label :style="{ ...buttonStyle, cursor: 'pointer' }">
        导入
        <input
          type="file"
          accept=".json"
          @change="handleImportChange"
          :style="{ display: 'none' }"
        />
      </label>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  onZoomIn: {
    type: Function,
    required: true
  },
  onZoomOut: {
    type: Function,
    required: true
  },
  onZoomReset: {
    type: Function,
    required: true
  },
  onExport: {
    type: Function,
    required: true
  },
  onImport: {
    type: Function,
    required: true
  },
  scale: {
    type: Number,
    required: true
  },
  currentPage: {
    type: Number,
    required: true
  },
  numPages: {
    type: Number,
    required: true
  },
  onPreviousPage: {
    type: Function,
    required: true
  },
  onNextPage: {
    type: Function,
    required: true
  },
  onPageChange: {
    type: Function,
    required: true
  },
  readOnly: {
    type: Boolean,
    default: false
  }
})

const toolbarStyle = {
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  padding: '10px 20px',
  backgroundColor: '#f5f5f5',
  borderBottom: '1px solid #ddd',
  gap: '20px'
}

const groupStyle = {
  display: 'flex',
  alignItems: 'center',
  gap: '10px'
}

const buttonStyle = {
  padding: '6px 12px',
  border: '1px solid #ccc',
  borderRadius: '4px',
  backgroundColor: 'white',
  cursor: 'pointer',
  fontSize: '14px',
  transition: 'background-color 0.2s'
}

const labelStyle = {
  fontSize: '14px',
  minWidth: '50px',
  textAlign: 'center'
}

const pageInputContainerStyle = {
  display: 'flex',
  alignItems: 'center',
  gap: '4px'
}

const pageInputStyle = {
  width: '60px',
  padding: '4px 6px',
  border: '1px solid #ccc',
  borderRadius: '4px',
  fontSize: '14px',
  textAlign: 'center'
}

const pageLabelStyle = {
  fontSize: '14px',
  color: '#666'
}

const progressContainerStyle = {
  flex: 1,
  height: '4px',
  backgroundColor: '#e0e0e0',
  borderRadius: '2px',
  margin: '0 20px'
}

const progressBarStyle = {
  height: '100%',
  backgroundColor: '#2196f3',
  borderRadius: '2px',
  transition: 'width 0.3s ease'
}

const handleImportChange = (e) => {
  const file = e.target.files?.[0]
  if (file) {
    props.onImport(file)
  }
  e.target.value = ''
}
</script>