<template>
  <div>
    <CategorySelector
      :isDisabled="showStatus !== status.SPU_LIST"
    ></CategorySelector>
    <SpuList
      @setShowStatus="changeStatus"
      @getSpuInfo="saveSpuinfo"
      v-if="status.SPU_LIST === showStatus"
    ></SpuList>
    <SpuForm
      @setShowStatus="changeStatus"
      :newSpuInfo="newSpuInfo"
      v-if="status.SPU_FORM === showStatus"
    ></SpuForm>
    <SkuForm
      v-model="showStatus"
      v-bind:status.sync="showStatus"
      :newSpuInfo="newSpuInfo"
      v-if="status.SKU_FORM === showStatus"
    ></SkuForm>
  </div>
</template>

<script>
import CategorySelector from "@/components/CategorySelector";
import SpuList from "@/views/product/spu/components/SpuList/SpuList.vue";
import SpuForm from "@/views/product/spu/components/SpuForm";
import SkuForm from "@/views/product/spu/components/SkuForm";
export default {
  name: "Spu",
  components: { CategorySelector, SpuList, SpuForm, SkuForm },
  data() {
    return {
      status: {
        SPU_LIST: 1,
        SPU_FORM: 2,
        SKU_FORM: 3,
      },
      showStatus: 1,
      newSpuInfo: {},
    };
  },
  methods: {
    // 1. 实现组件间的切换
    changeStatus(status) {
      this.showStatus = status;
    },
    // 2. 添加或更新
    saveSpuinfo(spuInfo) {
      this.newSpuInfo = {
        // 此时传过去的是两个数组是null会报错
        ...spuInfo,
        spuImageList: [],
        spuSaleAttrList: [],
      };
    },
  },
};
</script>

<style lang="less" scoped></style>