<template>
  <div class="Mall4j prod-info-page release-goods">
    <div class="prod-main-containers">
      <!-- 步骤 -->
      <div class="post-step">
        <div
          class="step-item"
          :class="{'active': postingSteps === 1 || postingSteps === 2 || postingSteps === 3}"
        >
          <!-- 01、选择商品类目 -->
          <div class="step-txt">
            01、{{ $t('product.prodInfo.selectCommodityCategory') }}
          </div>
        </div>
        <div
          class="step-item"
          :class="{'active': postingSteps === 2 || postingSteps === 3}"
        >
          <!-- 02、编辑商品信息 -->
          <div class="step-txt">
            02、{{ $t('product.prodInfo.editProductInformation') }}
          </div>
        </div>
        <div
          class="step-item"
          :class="{'active': postingSteps === 3}"
        >
          <!-- 03、编辑商品详情 -->
          <div class="step-txt">
            03、{{ $t('product.prodInfo.productDetails') }}
          </div>
        </div>
      </div>

      <!-- 内容 -->
      <div class="prod-content">
        <!-- 01、选择商品类目 -->
        <div
          v-show="postingSteps === 1"
          class="prod-content-item"
        >
          <SelectCategory
            ref="selectCategoryRef"
            v-model:dataForm="dataForm"
            @get-category-selected="getCategorySelected"
          />
        </div>
        <!-- 02、编辑商品信息 -->
        <SypplierProduct
          v-show="postingSteps === 2"
          ref="sypplierProductRef"
          :spu-mold="dataForm.spuMold"
          @next-step="nextStep"
        />
        <!-- 03 商品详情 -->
        <ProductDetails
          v-show="postingSteps===3"
          ref="productDetailsRef"
          @update-content="onUpdateContent"
        />
      </div>
    </div>
    <div class="foot-btn">
      <div class="inner">
        <div v-if="postingSteps === 1">
          <el-button
            type="primary"
            @click="next"
          >
            {{ $t('product.prodInfo.selectOkNext') }}
          </el-button>
        </div>
        <div v-if="postingSteps === 2">
          <el-button
            v-if="!dataForm.spuId"
            plain
            @click="postingSteps=1"
          >
            {{ $t('product.prodInfo.back') }}
          </el-button>
          <el-button
            v-permission="['product:spu:save']"
            type="primary"
            plain
            @click="saveNext2"
          >
            {{ $t('product.prodInfo.save') }}
          </el-button>
          <el-button
            type="primary"
            @click="next2"
          >
            {{ $t('product.prodInfo.next') }}
          </el-button>
        </div>
        <div v-if="postingSteps === 3">
          <el-button
            plain
            @click="postingSteps=2"
          >
            {{ $t('product.prodInfo.back') }}
          </el-button>
          <el-button
            type="primary"
            @click="saveNext2"
          >
            {{ $t('product.prodInfo.save') }}
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import SelectCategory from './components/select-category.vue'
import SypplierProduct from './components/sypplier-product.vue'
import ProductDetails from './components/product-details.vue'
import { ElMessage } from 'element-plus'
import * as api from '@/api/product/prod-info'
import { toRefs } from 'vue'

const route = useRoute()

const Data = reactive({
  dataForm: {
    spuId: route.query.spuId || null, // 商品id
    spuMold: 0,
    goodsType: 1,
    categoryId: null, // 分类id
    shopCategoryId: null, // 店铺分类id
    nameZh: '', // 中文商品名称
    nameEn: '', // 英文商品名称
    sellingPointZh: '', // 中文商品卖点
    sellingPointEn: '', // 英文商品卖点
    detailEn: '',
    detailZh: '',
    brandId: null, // 品牌id（非必选）
    imgUrls: '', // 轮播图 多个图片逗号分隔
    isCompose: 0, // 是否为组合商品0普通商品，1组合商品
    mainImgUrl: '', // 商品主图
    hasSkuImg: 1, // sku是否含有图片 0无 1有
    scoreFee: 0, // 积分价格（非必填）
    seq: 0, // 商品排序（非必填）
    spuAttrValues: [], // 商品属性值列表
    deliveryMode: {
      hasShopDelivery: true,
      hasUserPickUp: false,
      hasCityDelivery: false
    }, // 配送方式
    deliveryTemplateId: '', // 运费模板id
    detail: '', // 详情信息（非必填）
    skuList: [], // sku列表
    totalStock: 0, // 商品总库存
    video: '', // 商品视频
    brand: null // 品牌
  },
  basicAttrs: [], // 基本属性列表
  salesAttrs: [], // 销售属性列表
  originalSalesAttrs: [], // 起初的(不变的)销售属性
  selectedCategories: [], // 选中的平台分类
  value: null,
  skuTree: [],
  sku: [],
  content: '',
  postingSteps: 1, // 步骤条
  language: 1 // 语言
})

const { dataForm, postingSteps } = toRefs(Data)

onMounted(() => {
  init()
})

const selectCategoryRef = ref(null)
const sypplierProductRef = ref(null)
const productDetailsRef = ref(null)

const init = () => {
  const spuId = route.query.spuId
  nextTick(() => {
    if (!spuId) {
      selectCategoryRef.value.init(false, false)
      return
    }
    Data.postingSteps = 2
    api.getProdInfoPage(spuId).then(data => {
      Data.dataForm = data
      // 回显分类
      selectCategoryRef.value.init(data.categoryId, data.shopCategoryId)
      // 配送方式
      Data.dataForm.deliveryMode = JSON.parse(data.deliveryMode)
      sypplierProductRef.value.init(data)
      productDetailsRef.value.init(data)
      sypplierProductRef.value.getAttrsByCategoryId(data.categoryId, data)
    })
  })
}

// 获取子组件返回分类数据
const getCategorySelected = (selectedCategories, parentId) => {
  if (selectedCategories) {
    Data.selectedCategories = selectedCategories
    Data.dataForm.categoryId = parentId
  }
}

const prodStore = useProdStore()

const next = () => {
  if (Data.dataForm.categoryId) {
    Data.postingSteps = 2
    sypplierProductRef.value.getAttrsByCategoryId(prodStore.platProdCategory.threeCat.id, Data.dataForm)
  } else {
    ElMessage.error($t('product.prodInfo.selectPlatformTips'))
  }
}
const next2 = () => {
  sypplierProductRef.value.submitFormNext()
}

const nextStep = () => {
  Data.postingSteps = 3
}

const saveNext2 = () => {
  sypplierProductRef.value.submitForm()
}

// 更新商品详情
const onUpdateContent = (content) => {
  sypplierProductRef.value.updateDetail(content)
}

</script>

<style scoped lang="scss">
@use "index.scss";
</style>
