<template>
  <view class="editor-wrapper">
    <view class="item-list">
      <view 
        v-for="(item, index) in items" 
        :key="item.id" 
        class="editor-item"
      >
        <view class="drag-handle">
          <text class="drag-ic">⋮⋮</text>
        </view>
        <view class="item-content">
          <view class="thumb-box" @click="handleUploadImage(index)">
            <image v-if="item.imageUrl" :src="item.imageUrl" mode="aspectFill" class="thumb-img"></image>
            <view v-else class="upload-ph">
              <text class="plus">+</text>
            </view>
            <view class="remove-btn" @click.stop="$emit('remove', index)">
              <text class="remove-txt">×</text>
            </view>
          </view>
          <view class="form-box">
            <view class="field-group">
              <text class="field-label">图片名称：</text>
              <input 
                class="field-input" 
                :value="item.name" 
                @input="e => updateItem(index, 'name', e.detail.value)"
                placeholder="请输入图片名称" 
              />
            </view>
            <view class="field-group">
              <text class="field-label">链接地址：</text>
              <view class="link-input-row">
                <input 
                  class="field-input link-input" 
                  :value="item.link.value" 
                  @input="e => updateLink(index, e.detail.value)"
                  placeholder="请输入链接路径或 URL" 
                />
                <view class="link-picker-btn" @click="$emit('select-link', index)">
                  <text class="link-ic">🔗</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 上下移动按钮 -->
        <view class="move-actions">
          <view class="move-btn" @click="$emit('move', index, -1)" v-if="index > 0">
            <text class="move-ic">↑</text>
          </view>
          <view class="move-btn" @click="$emit('move', index, 1)" v-if="index < items.length - 1">
            <text class="move-ic">↓</text>
          </view>
        </view>
      </view>
    </view>

    <view v-if="items.length < max" class="add-action">
      <view class="btn-add-item" @click="$emit('add')">
        <text class="btn-add-txt">添加图片</text>
      </view>
    </view>
    <view v-else class="max-tip">
      <text class="max-tip-txt">最多添加 {{ max }} 张图片</text>
    </view>
  </view>
</template>

<script setup lang="uts">
import { type ConfigItem } from '@/pages/mall/admin/decoration/components/types.uts'

const props = defineProps<{
  items: ConfigItem[]
  max: number
}>()

const emit = defineEmits(['add', 'remove', 'move', 'upload', 'select-link', 'update-item'])

const handleUploadImage = (index: number) => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      emit('update-item', { index, key: 'imageUrl', value: res.tempFilePaths[0] })
    }
  })
}

const updateItem = (index: number, key: string, value: string) => {
  emit('update-item', { index, key, value })
}

const updateLink = (index: number, value: string) => {
  const link = { ...props.items[index].link, value }
  emit('update-item', { index, key: 'link', value: link })
}
</script>

<style scoped lang="scss">
.editor-wrapper { margin-top: 10px; }

.editor-item {
  display: flex;
  flex-direction: row;
  padding: 16px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  margin-bottom: 16px;
  position: relative;
  background-color: #fafafa;
}

.drag-handle {
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}
.drag-ic { color: #ccc; font-size: 18px; }

.item-content { flex: 1; display: flex; flex-direction: row; gap: 20px; }

.thumb-box {
  width: 100px;
  height: 60px;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.thumb-img { width: 100%; height: 100%; border-radius: 4px; }
.upload-ph { font-size: 24px; color: #999; }
.remove-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.remove-txt { font-size: 12px; line-height: 1; }

.form-box { flex: 1; }
.field-group { display: flex; flex-direction: row; align-items: center; margin-bottom: 12px; }
.field-label { width: 70px; font-size: 13px; color: #666; }
.field-input { flex: 1; height: 32px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 10px; font-size: 13px; background-color: #fff; }

.link-input-row { flex: 1; display: flex; flex-direction: row; align-items: center; }
.link-picker-btn { width: 32px; height: 32px; border: 1px solid #dcdfe6; border-left: none; border-radius: 0 4px 4px 0; display: flex; align-items: center; justify-content: center; cursor: pointer; background-color: #fff; }
.link-ic { font-size: 14px; }
.link-input { border-radius: 4px 0 0 4px; }

.add-action { margin-top: 10px; }
.btn-add-item {
  width: 120px;
  height: 36px;
  background-color: #1890ff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-add-txt { color: #fff; font-size: 14px; }

.max-tip { margin-top: 12px; }
.max-tip-txt { color: #ff4d4f; font-size: 12px; }

.move-actions { display: flex; flex-direction: column; gap: 10px; padding-left: 10px; }
.move-btn { cursor: pointer; color: #1890ff; font-size: 16px; }
</style>
