<template>
  <el-dialog
    title="编辑商品图片"
    :visible.sync="visible"
    width="800px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
     <div class="edit-tip">
    正在编辑商品: <strong>{{ formData.name }}</strong> 
    (条码: {{ formData.barcode || '无条码' }})
  </div>

    <el-form ref="editForm" :model="formData" label-width="100px" label-position="right">
      <!-- 主图编辑 -->
      <!-- <el-form-item label="当前主图">
        <el-image
          v-if="formData.thumb"
          :src="formData.thumb"
          style="width: 100px; height: 100px; object-fit: cover; border: 1px solid #eee;"
          :preview-src-list="[formData.thumb, ...getSubImages(formData.product_image_list)]"
        />
        <span v-else class="text-gray-500">暂无主图</span>
      </el-form-item> -->

      <el-form-item
        label="上传新主图"
        prop="newThumb"
        :rules="[
          { required: true, message: '请上传新的商品主图', trigger: 'change' }
        ]"
      >
        <upload
            height="100px"
            :image="formData.newThumb"
            width="100px"
            @upImage="handleMainImageUpload"
        />
        <div class="el-form-item__error" style="padding-top: 10px;">
          <span>支持 JPG, PNG 格式，建议尺寸 800x800px</span>
        </div>
      </el-form-item>

      <!-- 副图编辑 -->
      <!-- <el-form-item label="商品副图">
        <div class="sub-images-container">
      <div v-for="(item, index) in formData.product_image_list" :key="item.id || index" class="sub-image-item">
        <upload
          v-if="item.uploadNew"
          height="80px"
          :image="item.newImageUrl || item.imageUrl"
          width="80px"
          @upImage="(url) => handleSubImageUpload(url, index)"
        />
        <el-image
          v-else
          :src="item.imageUrl"
          style="width: 80px; height: 80px; object-fit: cover; border: 1px solid #eee;"
          :preview-src-list="[formData.thumb, ...getSubImages(formData.product_image_list)]"
          :preview-index="index + 1"
        />
        <div class="sub-img-actions">
          <el-button 
            size="mini" 
            type="text" 
            icon="el-icon-edit" 
            @click="toggleEditSubImage(index)"
          />
          <el-button 
            size="mini" 
            type="text" 
            icon="el-icon-delete" 
            @click="deleteSubImage(index)"
          />
        </div>
      </div>

          <div class="add-sub-image" @click="addSubImage">
            <i class="el-icon-plus" />
            <span>添加副图</span>
          </div>
        </div>
      </el-form-item> -->
    </el-form>

    <template #footer>
      <el-button @click="handleClose">{{ __('取消') }}</el-button>
      <el-button type="primary" @click="handleSubmit">{{ __('提交修改') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import upload from '@/components/upload'
import { URL } from '@/config'
import { saveBatchBarcode } from '@/api/goodsTool';

export default {
  name: 'ImgEdit',
  components: { 
    upload
  },
  data() {
    return {
      visible: false,
      formData: {
        id: '',
        name: '',
        barcode: '', // 条码
        thumb: '',
        newThumb: '',
        product_image_list: [],
        original_product_image_list: [], // 保存原始副图数据
        original_thumb: '' // 保存原始主图数据
      },
    }
  },
  methods: {
    // 获取副图URL列表用于预览
    getSubImages(imageList) {
      return (imageList || []).map(item => item.imageUrl).filter(url => url);
    },
  // 子组件open方法
  open(row) {
    if (!row || !row.id) {
      this.$message.error('无效的商品数据');
      return;
    }
    
    // 保存原始数据
    const originalProductImages = JSON.parse(JSON.stringify(row.product_image_list || []));
    const originalThumb = row.thumb || '';
    
    // 初始化表单数据（添加barcode）
    this.formData = {
      id: row.id,
      name: row.name || '未知名称',
      barcode: row.barcode || '', // 新增条码字段
      thumb: originalThumb,
      newThumb: originalThumb,
      original_thumb: originalThumb,
      product_image_list: originalProductImages.map(item => ({
        ...item,
        uploadNew: false,
        newImageUrl: ''
      })),
      original_product_image_list: originalProductImages
    };
    
    this.visible = true;
    this.$nextTick(() => {
      this.$refs.editForm?.clearValidate();
    });
  },

    handleClose() {
      this.visible = false;
      this.formData = {
        id: '',
        name: '',
        thumb: '',
        newThumb: '',
        product_image_list: [],
        original_product_image_list: [],
        original_thumb: ''
      };
      this.$refs.editForm?.clearValidate();
    },

    // 主图上传
    handleMainImageUpload(imageUrl) {
      this.formData.newThumb = imageUrl;
    },

    //副图上传
    handleSubImageUpload(imageUrl, index) {
      if (this.formData.product_image_list[index]) {
        const item = this.formData.product_image_list[index];
        item.newImageUrl = imageUrl;
        item.imageUrl = imageUrl; // 更新最终显示URL
        item.uploadNew = false; // 退出编辑状态
        item.tmpUrl = ''; // 清空临时URL
      }
    },

    // 切换编辑副图状态
    toggleEditSubImage(idx) {
      const item = this.formData.product_image_list[idx];
      if (item.uploadNew) {
        // 取消编辑：恢复原始URL
        if (item.tmpUrl) {
          item.imageUrl = item.tmpUrl;
          item.tmpUrl = ''; // 清空临时URL
        }
        item.newImageUrl = '';
      } else {
        // 进入编辑：保存当前URL到临时变量
        item.tmpUrl = item.imageUrl;
      }
      item.uploadNew = !item.uploadNew;
    },

    // 删除副图
    deleteSubImage(index) {
      this.formData.product_image_list.splice(index, 1);
    },

    addSubImage() {
      const max = this.formData.product_image_list.reduce((p, c) => Math.max(p, c.seq || 0), 0);
      this.formData.product_image_list.push({
        id: null,
        productId: this.formData.id,
        imageUrl: '',
        newImageUrl: '',
        uploadNew: true, // 默认进入编辑状态
        tmpUrl: '', // 初始化临时URL
        isMain: false,
        seq: max + 1,
        status: 1
      });
    },

    async handleSubmit() {
      try {
        await this.$refs.editForm.validate();

        // 准备提交数据 - 保持不变的字段使用原始数据
        const submitData = [
          {
            id: this.formData.id,
            name: this.formData.name,
            // 主图：使用新上传的或原始的
            thumb: this.formData.newThumb || this.formData.original_thumb,
            // 副图：如果没有修改则使用原始数据，否则使用修改后的数据
            product_image_list: this.hasSubImagesChanged() 
              ? this.formData.product_image_list.filter(item => item.imageUrl).map((item, index) => ({
                  id: item.id,
                  productId: this.formData.id,
                  imageUrl: item.imageUrl,
                  isMain: false,
                  seq: index + 1,
                  status: 1
                }))
              : this.formData.original_product_image_list
          }
        ];

        console.log('提交更新商品图片请求:', submitData);
        const response = await saveBatchBarcode(submitData);

        if (response.status === 200) {
          this.$message.success('商品图片修改成功！');
          this.handleClose();
          this.$emit('success');
        } else {
          this.$message.error('修改失败: ' + (response.msg || '未知错误'));
        }
      } catch (error) {
        console.error('提交修改失败:', error);
        if (error.name !== 'ValidateError') {
          this.$message.error('修改失败，请稍后重试');
        }
      }
    },

    // 判断副图是否有修改
    hasSubImagesChanged() {
      // 如果副图数量不同，说明有修改
      if (this.formData.product_image_list.length !== this.formData.original_product_image_list.length) {
        return true;
      }
      
      // 检查每张图片是否有修改
      for (let i = 0; i < this.formData.product_image_list.length; i++) {
        const newItem = this.formData.product_image_list[i];
        const originalItem = this.formData.original_product_image_list[i];
        
        if (!originalItem || newItem.imageUrl !== originalItem.imageUrl) {
          return true;
        }
      }
      
      return false;
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-tip {
  color: #666;
  padding: 8px 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  margin-bottom: 16px;
  font-size: 13px;
}

.sub-images-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 10px 0;
  
  .sub-image-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    
    .sub-img-actions {
      display: flex;
      gap: 5px;
      
      .el-button {
        color: #666;
        padding: 0;
        
        &:hover {
          color: #409eff;
        }
      }
      
      .el-button:nth-child(2):hover {
        color: #f56c6c;
      }
    }
  }
  
  .add-sub-image {
    width: 80px;
    height: 80px;
    border: 1px dashed #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #999;
    
    .el-icon-plus {
      font-size: 20px;
      margin-bottom: 5px;
    }
    
    &:hover {
      border-color: #409eff;
      color: #409eff;
    }
  }
}

::v-deep .el-form-item { 
  margin-bottom: 20px; 
}
</style>