<template>
  <div class="page-commodity-add">
    <el-tabs value="baseInfo">
      <el-tab-pane label="基础信息" name="baseInfo">
        <product-base-info ref="productBaseInfo"></product-base-info>
      </el-tab-pane>
    </el-tabs>

    <el-tabs value="serviceInfo">
      <el-tab-pane label="商品服务" name="serviceInfo">
        <product-service-info ref="productServiceInfo"></product-service-info>
      </el-tab-pane>
    </el-tabs>

    <div class="actions-container">
      <el-button
        type="primary"
        icon="el-icon-finished"
        class="action-button"
        :loading="loading"
        @click="handleSubmit"
      >
        立即发布商品
      </el-button>
    </div>
  </div>
</template>

<script>
import ProductBaseInfo from "./components/base-info.vue";
import ProductServiceInfo from "./components/service-info.vue";

import CommodityService from "@/api/commodity";

export default {
  name: "PageCommodityAdd",
  components: {
    ProductBaseInfo,
    ProductServiceInfo,
  },
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    /**
     * 立即发布商品;
     */
    handleSubmit() {
      const baseInfo = this.$refs.productBaseInfo.getInfo();
      if (!baseInfo) {
        return false;
      }

      const serviceInfo = this.$refs.productServiceInfo.getInfo();
      if (!serviceInfo) {
        return false;
      }

      // 在基础信息对象上构建请求参数；
      baseInfo.featureItems = serviceInfo;
      baseInfo.enable = true;

      const _this = this;
      _this.loading = true;
      CommodityService.save(baseInfo)
        .then((val) => {
          _this.$message.success(val.msg);

          // 重置输入；
          _this.$refs.productBaseInfo.resetInfo();
          _this.$refs.productServiceInfo.resetInfo();
        })
        .catch((err) => {
          _this.$message.error(err);
        })
        .finally(() => {
          _this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-commodity-add {
  .actions-container {
    .title {
      font-size: 24px;
      font-weight: bold;
    }

    .action-button {
      font-size: 16px;
      font-weight: 600;
      margin-top: 8px;
    }
  }

  ::v-deep.el-tabs__item {
    font-size: 18px;
    font-weight: 700;
  }
}
</style>
