<template>
  <!-- 商品详情表单容器 -->
  <el-card class="form-container" shadow="never">
    <!-- 步骤条：显示当前所处的步骤 -->
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="填写商品信息"></el-step>
      <el-step title="填写商品促销"></el-step>
      <el-step title="填写商品属性"></el-step>
      <el-step title="选择商品关联"></el-step>
    </el-steps>

    <!-- 商品基本信息组件 -->
    <product-info-detail
      v-show="showStatus[0]"
      v-model="productParam"
      :is-edit="isEdit"
      @nextStep="nextStep">
    </product-info-detail>

    <!-- 商品促销信息组件 -->
    <product-sale-detail
      v-show="showStatus[1]"
      v-model="productParam"
      :is-edit="isEdit"
      @nextStep="nextStep"
      @prevStep="prevStep">
    </product-sale-detail>

    <!-- 商品属性组件 -->
    <product-attr-detail
      v-show="showStatus[2]"
      v-model="productParam"
      :is-edit="isEdit"
      @nextStep="nextStep"
      @prevStep="prevStep">
    </product-attr-detail>

    <!-- 商品关联信息组件 -->
    <product-relation-detail
      v-show="showStatus[3]"
      v-model="productParam"
      :is-edit="isEdit"
      @prevStep="prevStep"
      @finishCommit="finishCommit">
    </product-relation-detail>
  </el-card>
</template>

<script>
import ProductInfoDetail from './ProductInfoDetail'; // 商品信息组件
import ProductSaleDetail from './ProductSaleDetail'; // 商品促销组件
import ProductAttrDetail from './ProductAttrDetail'; // 商品属性组件
import ProductRelationDetail from './ProductRelationDetail'; // 商品关联组件
import { createProduct, getProduct, updateProduct } from '@/api/product'; // API 导入

// 定义默认的商品参数数据结构
const defaultProductParam = {
  albumPics: '', // 商品相册图片
  brandId: null, // 品牌ID
  brandName: '', // 品牌名称
  deleteStatus: 0, // 删除状态
  description: '', // 商品描述
  detailDesc: '', // 详情描述
  detailHtml: '', // 电脑端详情
  detailMobileHtml: '', // 移动端详情
  detailTitle: '', // 详情标题
  feightTemplateId: 0, // 运费模板ID
  flashPromotionCount: 0, // 秒杀数量
  flashPromotionPrice: 0, // 秒杀价格
  giftPoint: 0, // 赠送积分
  giftGrowth: 0, // 成长值
  keywords: '', // 关键词
  lowStock: 0, // 库存预警值
  name: '', // 商品名称
  newStatus: 0, // 新品状态
  originalPrice: 0, // 原价
  price: 0, // 价格
  skuStockList: [], // SKU库存列表
  productAttributeValueList: [], // 商品属性值列表
  promotionStartTime: '', // 促销开始时间
  promotionEndTime: '', // 促销结束时间
  publishStatus: 0, // 发布状态
  sale: 0, // 销售量
  stock: 0, // 库存
};

export default {
  name: 'ProductDetail', // 组件名称
  components: {
    ProductInfoDetail,
    ProductSaleDetail,
    ProductAttrDetail,
    ProductRelationDetail,
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false, // 是否为编辑模式，默认是新增
    },
  },
  data() {
    return {
      active: 0, // 当前步骤索引
      productParam: Object.assign({}, defaultProductParam), // 商品参数对象
      showStatus: [true, false, false, false], // 控制步骤组件显示状态
    };
  },
  created() {
    // 如果是编辑模式，获取商品数据
    if (this.isEdit) {
      getProduct(this.$route.query.id).then((response) => {
        this.productParam = response.data; // 加载编辑的商品数据
      });
    }
  },
  methods: {
    // 隐藏所有步骤的内容
    hideAll() {
      for (let i = 0; i < this.showStatus.length; i++) {
        this.showStatus[i] = false;
      }
    },
    // 上一步操作
    prevStep() {
      if (this.active > 0) {
        this.active--; // 回退到上一步
        this.hideAll(); // 隐藏所有步骤
        this.showStatus[this.active] = true; // 显示当前步骤
      }
    },
    // 下一步操作
    nextStep() {
      if (this.active < this.showStatus.length - 1) {
        this.active++; // 跳到下一步
        this.hideAll(); // 隐藏所有步骤
        this.showStatus[this.active] = true; // 显示当前步骤
      }
    },
    // 提交表单数据
    finishCommit(isEdit) {
      this.$confirm('是否要提交该产品？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        if (isEdit) {
          // 编辑模式下更新商品数据
          updateProduct(this.$route.query.id, this.productParam).then(() => {
            this.$message({
              type: 'success',
              message: '修改成功',
              duration: 1000,
            });
            this.$router.back(); // 返回上一页
          });
        } else {
          // 新增模式下创建商品数据
          createProduct(this.productParam).then(() => {
            this.$message({
              type: 'success',
              message: '提交成功',
              duration: 1000,
            });
            location.reload(); // 刷新页面
          });
        }
      });
    },
  },
};
</script>

<style>
/* 容器样式 */
.form-container {
  width: 960px;
  margin: 0 auto;
}

.form-inner-container {
  width: 800px;
  margin: 0 auto;
}
</style>
