<template>
    <el-popover trigger="click" placement="top" :width="400">
        <div class="proportion-container">
            <div class="section">
                <h3>选择比例</h3>
                <div class="proportion-options">
                    <div 
                        v-for="item in proportionOptions" 
                        :key="item.value"
                        class="proportion-item"
                        :class="{ active: proportion === item.value }"
                        :style="getProportionStyle(item.value)"
                        @click="selectProportion(item.value)"
                    >
                        {{ item.label }}
                    </div>
                </div>
            </div>

            <div class="section">
                <h3>选择分辨率</h3>
                <div class="resolution-options">
                    <div 
                        v-for="item in resolutionOptions" 
                        :key="item.value"
                        class="resolution-item"
                        :class="{ active: resolution === item.value }"
                        @click="selectResolution(item.value)"
                    >
                        {{ item.label }}
                    </div>
                </div>
            </div>

            <div class="section">
                <h3>尺寸(px)</h3>
                <div class="size-inputs">
                    <div class="input-group">
                        <label>W</label>
                        <input type="number" v-model.number="width" @input="updateWidth">
                    </div>
                    <div class="lock-icon">🔒</div>
                    <div class="input-group">
                        <label>H</label>
                        <input type="number" v-model.number="height" @input="updateHeight">
                    </div>
                </div>
            </div>
        </div>
        <template #reference>
            <div class="choice-btn">
                <img src="@/assets/dialog/originalImage.svg" alt="" style="width: 16px;">
                <span>{{ proportion }}</span>
            </div>
        </template>
    </el-popover>
</template>

<script setup>
import { computed, ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: '1:1'
  }
})

const emit = defineEmits(['update:modelValue', 'update:width', 'update:height'])

const proportion = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const proportionOptions = [
  { value: '智能', label: '智能' },
  { value: '21:9', label: '21:9' },
  { value: '16:9', label: '16:9' },
  { value: '3:2', label: '3:2' },
  { value: '4:3', label: '4:3' },
  { value: '1:1', label: '1:1' },
  { value: '3:4', label: '3:4' },
  { value: '2:3', label: '2:3' },
  { value: '9:16', label: '9:16' }
]

const resolutionOptions = [
  { value: '1k', label: '标清 1K' },
  { value: '2k', label: '高清 2K' },
  { value: '4k', label: '超清 4K' }
]

const resolution = ref('2k')
const width = ref(2048)
const height = ref(2048)

const selectProportion = (value) => {
  proportion.value = value
  updateDimensionsByProportion(value)
}

const selectResolution = (value) => {
  resolution.value = value
  updateDimensionsByResolution(value)
}

const updateDimensionsByProportion = (proportionValue) => {
  if (proportionValue === '智能') {
    return
  }
  const [w, h] = proportionValue.split(':').map(Number)
  const aspectRatio = w / h
  if (width.value > height.value) {
    height.value = Math.round(width.value / aspectRatio)
  } else {
    width.value = Math.round(height.value * aspectRatio)
  }
  emitUpdateDimensions()
}

const updateDimensionsByResolution = (resolutionValue) => {
  let baseSize
  switch (resolutionValue) {
    case '1k':
      baseSize = 1024
      break
    case '2k':
      baseSize = 2048
      break
    case '4k':
      baseSize = 4096
      break
    default:
      baseSize = 2048
  }
  
  if (proportion.value === '智能') {
    width.value = baseSize
    height.value = baseSize
  } else {
    const [w, h] = proportion.value.split(':').map(Number)
    const aspectRatio = w / h
    if (aspectRatio > 1) {
      width.value = baseSize
      height.value = Math.round(baseSize / aspectRatio)
    } else {
      height.value = baseSize
      width.value = Math.round(baseSize * aspectRatio)
    }
  }
  emitUpdateDimensions()
}

const updateWidth = () => {
  if (proportion.value !== '智能') {
    const [w, h] = proportion.value.split(':').map(Number)
    const aspectRatio = w / h
    height.value = Math.round(width.value / aspectRatio)
  }
  emitUpdateDimensions()
}

const updateHeight = () => {
  if (proportion.value !== '智能') {
    const [w, h] = proportion.value.split(':').map(Number)
    const aspectRatio = w / h
    width.value = Math.round(height.value * aspectRatio)
  }
  emitUpdateDimensions()
}

const emitUpdateDimensions = () => {
  emit('update:width', width.value)
  emit('update:height', height.value)
}

const getProportionStyle = (value) => {
  if (value === '智能') {
    return {
      '--width': '20px',
      '--height': '20px'
    }
  }
  const [w, h] = value.split(':').map(Number)
  const aspectRatio = w / h
  const baseSize = 20
  
  if (aspectRatio > 1) {
    return {
      '--width': `${baseSize}px`,
      '--height': `${Math.round(baseSize / aspectRatio)}px`
    }
  } else {
    return {
      '--width': `${Math.round(baseSize * aspectRatio)}px`,
      '--height': `${baseSize}px`
    }
  }
}

// 初始化
updateDimensionsByResolution(resolution.value)
</script>

<style lang="less" scoped>
.choice-btn{
  display: flex;
  height: 40px;
  padding: 0 15px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: #ffffff;
  cursor: pointer;
  position: relative;
}
.choice-btn:hover{
  background: #E5E7EB;
}

.proportion-container{
  padding: 10px;
}

.section{
  margin-bottom: 20px;
  
  &:last-child{
    margin-bottom: 0;
  }
  
  h3{
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
    color: #666;
  }
}

.proportion-options{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-bottom: 16px;
  background-color: #F8F9FA;
  padding: 5px;
}

.proportion-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 5px;
  width: auto;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
  border-radius: 5px;
  text-align: bottom;

  
  &::before{
    content: '';
    width: var(--width, 20px);
    height: var(--height, 20px);
    background: #f0f0f0;
    border-radius: 4px;
    transition: all 0.2s ease;
  }
  
  &:hover{
    background: #e0e0e0;
  }
  
  &.active{
    background: #ffffff;
  }
}

.resolution-options{
  display: flex;
  padding: 5px;
  align-items: center;
  align-self: stretch;
  border-radius: 10px;
  background: #F8F9FA;
  gap: 10px;
}

.resolution-item{
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  transition: all 0.2s ease;
  background: #f5f5f5;
  color: #666;
  
  &:hover{
    background: #e0e0e0;
  }
  
  &.active{
    background: #ffffff;
    color: #000000;
    font-weight: 500;
  }
}

.size-inputs{
  display: flex;
  align-items: center;
  gap: 10px;
}

.input-group{
  flex: 1;
  position: relative;
  
  label{
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    font-size: 14px;
    color: #666;
    pointer-events: none;
  }
  
  input{
    width: 100%;
    padding: 12px 12px 12px 30px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    background: #f9f9f9;
    
    &:focus{
      outline: none;
      border-color: #1890ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }
  }
}

.lock-icon{
  font-size: 16px;
  color: #999;
  cursor: pointer;
  
  &:hover{
    color: #666;
  }
}
</style>