<script setup lang="ts">
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { changeGoodsCellsStock, clearGoodsCells } from "@/api/cabinet/cabinet-cell";
import { getGoodsInfo } from "@/api/shop/goods";

const props = defineProps({
  cellId: {
    type: Number,
    required: true
  },
  goodsId: {
    type: Number,
    required: true
  },
  goodsName: {
    type: String,
    required: true
  },
  currentStock: {
    type: Number,
    required: true
  },
  coverImg: {
    type: String,
    required: true
  },
  price: {
    type: Number,
    required: true
  }
});

const emit = defineEmits(['refresh', 'update:modelValue']);
const closeModal = () => {
  emit('update:modelValue', false);
};

const stockInput = ref(props.currentStock);
const isEditing = ref(false);

async function handleStockChange() {
  try {
    const { data } = await getGoodsInfo(props.goodsId);
    const remainingStock = data.stock - data.totalStock + props.currentStock;

    if (stockInput.value > remainingStock) {
      ElMessage.warning('分配数量不能超过剩余库存');
      stockInput.value = remainingStock;
      return;
    }

    await changeGoodsCellsStock(props.cellId, stockInput.value);
    ElMessage.success('库存更新成功');
    emit('refresh');
    isEditing.value = false;
  } catch (error) {
    console.error('库存调整失败', error);
  }
}

async function handleClearGoods() {
  try {
    await ElMessageBox.confirm(
      `确认要下架${props.goodsName}吗？`,
      '警告',
      { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
    );
    await clearGoodsCells(props.cellId);
    ElMessage.success('商品下架成功');
    emit('refresh');
    closeModal();
  } catch (error) {
    console.error('操作取消或失败', error);
  }
}
</script>

<template>
  <div class="config-modal">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="商品ID" >{{ props.goodsId }}</el-descriptions-item>
      <el-descriptions-item label="商品名称">{{ props.goodsName }}</el-descriptions-item>
      <el-descriptions-item label="商品图片">
        <el-image :src="coverImg" style="width: 100px; height: 100px" fit="contain" />
      </el-descriptions-item>
      <el-descriptions-item label="价格">{{ price }}</el-descriptions-item>
      <el-descriptions-item label="当前库存">
        <el-input-number v-model="stockInput" :min="0" :max="1000" :disabled="!isEditing" class="stock-input" />
        <el-button v-if="!isEditing" type="primary" size="small" @click="isEditing = true">修改</el-button>
        <el-button v-if="isEditing" type="success" size="small" @click="handleStockChange">保存</el-button>
      </el-descriptions-item>
    </el-descriptions>

    <div class="action-buttons">
      <el-button type="danger" @click="handleClearGoods">
        下架商品
      </el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.config-modal {
  padding: 20px;
}

.action-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}

.stock-input {
  margin-right: 12px;
}
</style>