<template>
  <div class="imgs-container">
    <div class="filter">
      <el-input
        v-model="filter.name"
        class="input_item"
        clearable
        placeholder="请输入商品名字"
        prefix-icon="el-icon-search"
      />
      <el-input
        v-model="filter.barcode"
        class="input_item"
        clearable
        placeholder="请输入商品条码"
        prefix-icon="el-icon-barcode"
      />
      <el-select
        v-model="filter.barcodeEmty"
        clearable
        placeholder="条码是否为空"
        class="input_item"
      >
        <el-option label="无条码" value="yes" />
        <el-option label="有条码" value="no" />
      </el-select>
      <el-button size="medium" type="primary" @click="handleSearch">
        查询
      </el-button>
      <el-button size="medium" @click="handleReset">重置</el-button>
      <el-button size="medium" type="warning" @click="handleBatchEdit">
        批量编辑
      </el-button>
    </div>
    <div class="list">
      <el-table
        ref="imgTable"
        :data="tableData"
        style="width: 100%"
        border
        stripe
        :empty-text="tableData.length === 0 ? '暂无商品数据' : '加载中...'"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="操作" width="220">
          <template #default="scope">
            <el-button
              plain
              size="mini"
              type="primary"
              @click="handleEdit(scope.row)"
            >
              编辑图片
            </el-button>
            <el-button
              plain
              size="mini"
              type="success"
              @click="handleSaveSingle(scope.row)"
              :loading="scope.row.saveLoading"
            >
              保存条码
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="商品条码" width="180">
          <template #default="scope">
            <el-input
              v-model="scope.row.barcode"
              placeholder="请输入商品条码"
              clearable
              size="small"
              class="barcode-input"
              :disabled="scope.row.saveLoading"
              @change="handleBarcodeChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="商品主图" width="180px">
          <template #default="scope">
            <div v-if="scope.row.thumb" class="img-group">
              <el-image
                :src="scope.row.thumb"
                :preview-src-list="[scope.row.thumb]"
                class="img-thumb"
                fit="cover"
                :title="scope.row.name || '商品主图'"
              />
            </div>
            <span v-else class="no-data">无主图</span>
          </template>
        </el-table-column>
        <el-table-column label="商品副图" width="200px">
          <template #default="scope">
            <div class="sub-img-group">
              <div 
                v-for="(item, index) in scope.row.product_image_list || []" 
                :key="item.id || index" 
                class="sub-img-item"
              >
                <el-image
                  :src="item.imageUrl"
                  :preview-src-list="[scope.row.thumb, ...(scope.row.product_image_list || []).map(img => img.imageUrl)]"
                  :preview-index="index + 1"
                  class="sub-img-thumb"
                  fit="cover"
                  :title="`副图${index + 1}`"
                  @error="() => {
                    if (scope.row.product_image_list && scope.row.product_image_list[index]) {
                      scope.row.product_image_list[index].imageUrl = '';
                    }
                  }"
                />
              </div>
              <span v-if="!(scope.row.product_image_list && scope.row.product_image_list.length)" class="no-data">无副图</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="name" width="300">
          <template #default="scope">
            <div class="text-ellipsis" :title="scope.row.name">
              {{ scope.row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品id" prop="id" width="120px" />
        <el-table-column label="分类" prop="category" width="120" />
        <el-table-column label="价格" width="120">
          <template #default="scope">
            {{ Number(scope.row.price).toFixed(2) }} 元
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createdAt" width="180" />
        <el-table-column label="更新时间" prop="updatedAt" width="180" />
      </el-table>

      <el-pagination
        background
        :current-page="pagination.pageNum"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :disabled="pagination.total === 0"
      />
    </div>
    <batchEditBarcode ref="batchEditBarcodeRef" @success="handleEditSuccess" />
    <img-edit ref="imgEditRef" @success="handleEditSuccess" />
  </div>
</template>

<script>
import GoodsToolApi from '@/api/goodsTool'
import batchEditBarcode from './batchEditBarcode.vue'
import imgEdit from './imgEdit.vue'

export default {
  components: {
    batchEditBarcode,
    imgEdit
  },
  data() {
    return {
      tableData: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        pages: 0,
      },
      filter: {
        name: '', 
        barcode: '', 
        barcodeEmty: '', // 条码是否为空: 'yes'无条码, 'no'有条码
      },
      multipleSelection: [],
      imgEditRef: null,
      batchEditBarcodeRef: null,
    }
  },
  mounted() {
    this.handleImgList()
  },
  methods: {
    async handleImgList() {
      try {
        const params = {
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize,
          ...(this.filter.name && { name: this.filter.name }),
          ...(this.filter.barcode && { barcode: this.filter.barcode }),
          ...(this.filter.barcodeEmty && {
            barcodeEmty: this.filter.barcodeEmty,
          }),
        }

        const res = await GoodsToolApi.getImgList(params)

        this.tableData = (res.records || []).map(item => ({
          ...item,
          saveLoading: false,
          originalBarcode: item.barcode,
        }))
        this.pagination.total = res.total || 0
        this.pagination.pages = res.pages || 0
        this.pagination.current = res.current || 1

      } catch (error) {
        this.$message.error('获取数据失败，请重试')
        this.tableData = []
      }
    },

    // 查询
    handleSearch() {
      this.pagination.pageNum = 1
      this.handleImgList()
    },

      // 重置查询条件
    handleReset() {
      this.filter = {
        name: '',
        barcode: '',
        barcodeEmty: '',
      }
      this.pagination.pageNum = 1
      this.handleImgList()
    },

    // 分页切换
    handleCurrentChange(pageNum) {
      this.pagination.pageNum = pageNum
      this.handleImgList()
    },

    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
      this.pagination.pageNum = 1
      this.handleImgList()
    },

    // 表格选中
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 批量编辑
    handleBatchEdit() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请先选中需要编辑的商品');
        return;
      }
      this.$refs.batchEditBarcodeRef.open(this.multipleSelection);
    },

    // 单条保存（提交当前行条码修改）
    async handleSaveSingle(row) {
      // 条码未修改则不提交
      if (row.barcode === row.originalBarcode) {
        this.$message.info('商品条码未修改，无需保存');
        return;
      }

      // 校验：条码格式
      if (row.barcode && row.barcode.length > 50) {
        this.$message.warning('商品条码长度不能超过50个字符');
        return;
      }

      try {
        // 显示加载状态，禁用输入和按钮
        row.saveLoading = true;

        // 调用接口提交（复用批量编辑接口，单条也按数组格式传参）
        const updateData = [{
          id: row.id,
          barcode: row.barcode || '', // 空值也提交（清除条码）
        }];
        let res=await GoodsToolApi.saveBatchBarcode(updateData);
        if(res.status==200){
          // 保存成功：更新原始条码，提示用户
          row.originalBarcode = row.barcode;
          this.$message.success('商品条码保存成功');
        }else{
          this.$message.error('操作异常');
        }
      } catch (error) {
        // 保存失败：回滚条码，提示错误
        row.barcode = row.originalBarcode;
        this.$message.error('保存失败，请重试');
        console.error('单条保存条码失败：', error);
      } finally {
        // 无论成功失败，关闭加载状态
        row.saveLoading = false;
      }
    },


    handleBarcodeChange(row) {
      if (row.barcode && row.barcode.length > 50) {
        this.$message.warning('商品条码长度不能超过50个字符');
      }
    },

    // 编辑成功后刷新列表（批量编辑成功后调用）
    handleEditSuccess() {
      this.handleImgList();
      this.$refs.imgTable?.clearSelection();
      this.multipleSelection = [];
    },
    
    handleEdit(row) {
        this.$refs.imgEditRef?.open(row);
    },
  },
}
</script>

<style lang="scss" scoped>
.filter {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  margin-bottom: 15px;
  gap: 10px;
  border-radius: 5px;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
  background: #fff;
  flex-wrap: wrap;
}

.input_item {
  width: 200px;
}

.list {
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 5px;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
}

.img-group {
  position: relative;
  display: inline-block;
}

.img-thumb {
  width: 50px;
  height: 50px;
  cursor: pointer;
  border-radius: 3px;
}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-data {
  color: #999;
  font-size: 12px;
}

.barcode-input {
  width: 100%;
}

::v-deep .el-table__cell {
  vertical-align: middle !important;
}

::v-deep .el-pagination {
  margin-top: 10px;
  text-align: right;
}

.sub-img-group {
  display: flex;          
  flex-wrap: nowrap;      
  gap: 4px;               
  align-items: center;
  overflow-x: auto;       // 如果太多图允许横向滚动
}

.sub-img-item {
  flex: 0 0 auto;         
}

.sub-img-thumb {
  width:  46px;
  height: 46px;
  border-radius: 3px;
  object-fit: cover;
  cursor: pointer;
}
</style>