<template>
  <div class="container">
    <el-tabs v-model="activeTab" @tab-click="tabChange">
      <el-tab-pane label="基本信息" name="basicInfo">
        <BasicInfoForm
          ref="basicInfoRef"
          @updateActiveTab="updateActiveTab"
          @update-data="handleBasicInfoUpdate"
          :propFormData="formData"
        />
      </el-tab-pane>
      <el-tab-pane label="价格及成本" name="sku">
        <SkuForm
          ref="skuRef"
          :basicInfoData="basicInfoData"
          @updateActiveTab="updateActiveTab"
          :propFormData="formData"
          :category_id="formData.category_id"
          :hire_or_sail="hire_or_sail"
          :skuSn="skuSn"
        />
      </el-tab-pane>
      <el-tab-pane label="商品详情" name="description">
        <DescriptionForm
          ref="descriptionRef"
          @updateActiveTab="updateActiveTab"
          :propFormData="formData"
        />
      </el-tab-pane>
      <el-tab-pane label="其它设置" name="other">
        <OtherForm
          ref="otherRef"
          @updateActiveTab="updateActiveTab"
          :propFormData="formData"
        />
      </el-tab-pane>
    </el-tabs>
    <div class="footer">
      <el-button :loading="formLoading" type="primary" @click="submitForm"
        >保存</el-button
      >
      <el-button @click="back">返回</el-button>
    </div>
  </div>
</template>
<script>
import BasicInfoForm from "./BasicInfo";
import DescriptionForm from "./Description";
import OtherForm from "./Other";
import SkuForm from "./Sku";
import * as API_Goods from "@/api/goods";

export default {
  name: "goodsEditForm",
  components: { BasicInfoForm, DescriptionForm, OtherForm, SkuForm },
  data() {
    return {
      activeTab: "basicInfo", // tab激活的窗口
      formLoading: false,
      formData: {}, // 表单数据
      id: null, // 商品id
      hire_or_sail: "",
      skuSn: "",
      basicInfoData:""
    };
  },
  methods: {
    handleBasicInfoUpdate(data) {
      this.basicInfoData = data;
    },
    tabChange(val) {
      if (val.name == "sku") {
        this.skuSn = sessionStorage.getItem("sn");
      }
    },
    /** 初始化 */
    init() {
      this.hire_or_sail = this.$route.params.hire_or_sail;
      const { id } = this.$route.params;
      if (id) {
        this.id = id;
        this.GET_GoodsDetail();
      }
    },
    /** 查询商品详情 */
    async GET_GoodsDetail() {
      this.formData = await API_Goods.getGoodsInfo(this.id);
      console.log("formData:",this.formData);
      /* this.formData.image_list=this.formData.images.split(',') */
      this.formData.haveSpec = this.formData.spec;
      this.formData.haveSn = this.formData.have_sn;
    },
    /** 提交表单 */
    async submitForm() {
      this.formLoading = true;
      try {
        // 校验各表单
        await this.$refs.basicInfoRef.validateForm();
        await this.$refs.skuRef.validateForm();
        await this.$refs.descriptionRef.validateForm();
        await this.$refs.otherRef.validateForm();
        // 深拷贝一份数据bar_code
        this.formData.bar_code = this.formData.product_list[0].bar_code;
        this.formData.sn_code = this.formData.product_list[0].sn_code;
        const formDataCopy = this.MixinClone(this.formData);
        formDataCopy.spec = formDataCopy.haveSpec;
        formDataCopy.have_sn = formDataCopy.haveSn;
        formDataCopy.hire_or_sail = this.hire_or_sail;
        if (formDataCopy.haveSpec) {
          formDataCopy.product_list.map((item) => {
            item.spec_name = item.spec_list.map(el=>{
              return el.spec_value;
            })
          });
        }

        if (this.id) {
          console.log(formDataCopy);
          await API_Goods.editGoods(this.id, formDataCopy);
          sessionStorage.removeItem("sn");
          this.$message.success("修改成功");
        } else {
          await API_Goods.addGoods(formDataCopy);
          sessionStorage.removeItem("sn");
          this.$message.success("添加成功");
        }
        this.back();
      } finally {
        this.formLoading = false;
      }
    },
    /** 返回商品列表 */
    back() {
      this.$store.dispatch("delCurrentViews", {
        view: this.$route,
        $router: this.$router,
      });
      this.$router.push({ name: "productFile" });
    },
    /** 更新激活的tab */
    updateActiveTab(activeTab) {
      this.activeTab = activeTab;
    },
  },
  watch: {
    $route: {
      immediate: true,
      handler(newVal) {
        if (newVal.name === "goodsAddForm" || newVal.name === "goodsEditForm") {
          this.init();
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #fff;
  margin: 10px;
  padding: 25px;
}
.footer {
  text-align: center;
  margin-top: 10px;
}
</style>
