<template>
  <div class="app-container">
    <div style="margin-bottom: 10px">
      <el-button @click="cancel">返回</el-button>
      <el-steps :active="active" align-center finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="拓展信息"></el-step>
      </el-steps>
    </div>
    <!-- 基础数据 -->
    <goodsAddTab1 ref="goodsAddTab1Ref" v-show="active == 0" />
    <!-- 多规格商品数据 -->
    <goodsAddTab2
      ref="goodsAddTab2Ref"
      v-show="active == 1 && !form.singleSku"
      :productPaymentMode="form.productPaymentMode"
    />
    <!-- 单规格商品数据 -->
    <goodsAddTab3
      ref="goodsAddTab3Ref"
      v-show="active == 1 && form.singleSku"
      :productPaymentMode="form.productPaymentMode"
    />

    <el-form label-width="120px">
      <el-form-item label="">
        <el-button v-show="active == 0" @click="next">下一步</el-button>
        <el-button v-show="active > 0" @click="step">上一步</el-button>
        <el-button
          v-if="$route.query.type != 'show' && active > 0"
          :loading="buttonLoading"
          type="primary"
          @click="submitForm"
          >保 存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { shopProductAdd, shopProductEdit, shopProductInfo } from "@/api/goods";
import goodsAddTab1 from "./components/goodsAddTab1.vue";
import goodsAddTab2 from "./components/goodsAddTab2.vue";
import goodsAddTab3 from "./components/goodsAddTab3.vue";

export default {
  components: { goodsAddTab1, goodsAddTab2, goodsAddTab3 },
  data() {
    return {
      buttonLoading: false,
      active: 0,
      form: {},
    };
  },
  created() {
    if (this.$route.query.productId) {
      this.getDetails(this.$route.query.productId);
    }
  },
  methods: {
    // 下一步
    next() {
      this.$refs["goodsAddTab1Ref"].validate().then((res) => {
        // console.log(res);
        if (res.valid) {
          this.active = 1;
          this.form = {
            ...this.form,
            ...res.value,
          };
        }
      });
    },
    // 上一步
    step() {
      this.active = 0;
    },
    // 获取商品详情
    getDetails(id) {
      shopProductInfo(id).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          let data = {
            ...res.data,
            logisticsTemplateId: res.data.logisticsTemplateId
              ? res.data.logisticsTemplateId
              : undefined,
          };
          this.form = data;
          this.$nextTick(() => {
            if (this.$refs.goodsAddTab1Ref)
              this.$refs.goodsAddTab1Ref.setEditData(data);

            if (data.singleSku) {
              if (this.$refs.goodsAddTab3Ref)
                this.$refs.goodsAddTab3Ref.setEditData(
                  data.productSkuSetList[0]
                );
            } else {
              if (this.$refs.goodsAddTab2Ref)
                this.$refs.goodsAddTab2Ref.setEditData(
                  data.skuTable,
                  data.productSkuSetList
                );
            }
          });
        }
      });
    },
    // 取消
    cancel() {
      if (this.$route.query.queryParams) {
        localStorage.setItem("queryParams", this.$route.query.queryParams);
      }
      this.$router.go(-1);
    },

    // 提交
    submitForm() {
      this.$refs[this.form.singleSku ? "goodsAddTab3Ref" : "goodsAddTab2Ref"]
        .validate()
        .then((res) => {
          if (res.valid) {
            // console.log(res.value);
            // console.log(this.form);
            let url = this.form.productId ? shopProductEdit : shopProductAdd;
            this.buttonLoading = true;
            let images = [];
            if (this.form.images && typeof this.form.images == "string") {
              images = this.form.images.split(",");
            } else {
              images = this.form.images;
            }
            url({
              ...this.form,
              ...res.value,
              images,
            })
              .then((res) => {
                this.buttonLoading = false;
                if (res.code != 200) {
                  return false;
                }
                this.$modal.msgSuccess("保存成功");
                this.cancel();
              })
              .catch((err) => {
                this.buttonLoading = false;
              });
          } else {
            this.$modal.msgError(res.message);
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form {
  width: 1000px;
}
.hint {
  font-size: 12px;
  color: red;
}
.map-box {
  width: calc(100% - 120px);
  height: 300px;
  margin-bottom: 30px;
  box-sizing: border-box;
  margin-left: 120px;
}
.flex {
  display: flex;
  margin-bottom: 10px;
  .el-button {
    margin-left: 10px;
  }
}
h3 {
  width: 160px;
  font-weight: 700;
  text-align: right;
}
.flex-bet {
  display: flex;
  justify-content: space-between;
}
.showTip {
  display: inline-block;
  margin-left: 20px;
  font-weight: 700;
  color: #606266;
}

.selected {
  background-color: #909399;
  color: white;
  border-radius: 4px;
}
::v-deep .el-calendar-table .el-calendar-day {
  height: 47px !important;
}
</style>
