<template>
  <div class="goods-form-container">
    <div class="form-content">
      <el-steps :active="activeStep" finish-status="success" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="扩展信息"></el-step>
      </el-steps>
      <!-- 步骤一：基本信息 -->
      <div v-if="activeStep === 0" class="step-content">
        <el-form ref="form" :model="form" :rules="baseRules" label-width="110px">
          <el-form-item label="所属供应商" prop="supplierId">
            <el-select v-model="form.supplierId" placeholder="请选择所属供应商">
              <el-option v-for="(v,i) in supplierList" :key="i" :label="v.supplierName" :value="v.supplierId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品平台分类" prop="categoryId">
            <el-select v-model="form.categoryId" placeholder="请选择商品平台分类">
              <el-option v-for="(v,i) in typeList" :key="i" :label="v.categoryName" :value="v.categoryId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称" prop="title">
            <el-input v-model="form.title" placeholder="请输入商品名称" maxlength="30"></el-input>
          </el-form-item>
          <!-- <el-form-item label="商家编码" prop="merchantCode">
            <el-input v-model="form.merchantCode" placeholder="请输入商家编码" maxlength="30"></el-input>
          </el-form-item> -->
          <el-form-item label="商品图片" prop="images">
            <imageUpload v-model="form.images" :limit="5" />
            <div class="el-upload__tip" v-if="form.locationCode">推荐尺寸：
              <span style="color:rgb(245, 108, 108)">1:1</span>
            </div>
          </el-form-item>
          <el-form-item label="商品限购" prop="purchaseLimit">
            <div class="input-number">
              <el-input-number v-model="form.purchaseLimit" controls-position="right" :min="0" :precision="0"></el-input-number>
              <span class="sort-tip">0表示不限购</span>
            </div>
          </el-form-item>
          <el-form-item label="排序" prop="orderIndex">
            <div class="input-number">
              <el-input-number v-model="form.orderIndex" controls-position="right" :min="0" :precision="0"></el-input-number>
            </div>
          </el-form-item>
          <el-form-item label="是否新品" prop="newStatus" required>
            <el-radio-group v-model="form.newStatus">
              <el-radio :label="false">否</el-radio>
              <el-radio :label="true">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否置顶" prop="recommendStatus" required>
            <el-radio-group v-model="form.recommendStatus">
              <el-radio :label="false">否</el-radio>
              <el-radio :label="true">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否上下架" prop="recommendStatus" required>
            <el-radio-group v-model="form.shelvedStatus">
              <el-radio :label="false">否</el-radio>
              <el-radio :label="true">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="商品详情" prop="content">
            <editor style="width: 960px" v-model="form.content" :min-height="192" />
          </el-form-item>
        </el-form>
      </div>

      <!-- 步骤二：扩展信息 -->
      <div v-if="activeStep === 1" class="step-content">
        <el-form ref="form" :model="form" label-width="110px" :rules="baseRules">
          <el-form-item label="商品编号" prop="productCode">
            <el-input v-model="form.productCode" placeholder="请输入商品编号"></el-input>
          </el-form-item>
          <el-form-item label="商品单位" prop="unit">
            <el-input v-model="form.unit" placeholder="请输入商品单位"></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input-number v-model="form.salePrice" controls-position="right" :min="0" :precision="2"></el-input-number>
            <span class="showTip">
              是否显示价格
              <el-switch v-model="form.showPrice">
              </el-switch>
            </span>
          </el-form-item>
          <!-- <el-form-item label="市价" prop="marketPrice">
            <el-input-number v-model="form.marketPrice" controls-position="right" :min="0" :precision="2"></el-input-number>
          </el-form-item> -->
          <el-form-item label="所需兑换豆" prop="points">
            <el-input-number v-model="form.points" controls-position="right" :min="0" :precision="0"></el-input-number>
          </el-form-item>
          <el-form-item label="商品库存" prop="stock">
            <el-input-number v-model="form.stock" controls-position="right" :min="0" :precision="0"></el-input-number>
          </el-form-item>
          <el-form-item label="初始销量" prop="initialSales">
            <el-input-number v-model="form.initialSales" controls-position="right" :min="0" :precision="0"></el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <div class="form-footer">
        <el-button v-if="activeStep > 0" @click="prevStep">上一步</el-button>
        <el-button v-if="activeStep < 1" type="primary" @click="nextStep">下一步</el-button>
        <el-button v-else type="primary" :loading="buttonLoading" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { supplierList, productCategoryList, productAdd, productEdit, productInfo } from '@/api/pointsMall.js'
import ImageUpload from "@/components/ImageUpload";
import Editor from "@/components/Editor";

export default {
  name: "GoodsForm",
  components: {
    ImageUpload,
    Editor,
  },
  data () {
    return {
      title: "新增商品",
      activeStep: 0,
      form: {
        supplierId: undefined,
        freeShippingStatus: true,
        categoryId: undefined,
        title: undefined,
        productCode: undefined,
        images: undefined,
        purchaseLimit: undefined,
        newStatus: false,
        recommendStatus: false,
        content: undefined,
        marketPrice: undefined,
        salePrice: undefined,
        points: undefined,
        stock: undefined,
        initialSales: undefined,
        freeShipping: undefined,
        orderIndex: 0,
        shelvedStatus: true,
        showPrice: true
      },
      baseRules: {
        supplierId: [
          { required: true, message: "请选择所属供应商", trigger: "change" },
        ],
        categoryId: [
          { required: true, message: "请选择商品平台分类", trigger: "change" },
        ],
        title: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        images: [
          { required: true, message: "请上传商品图片", trigger: "blur" },
        ],
        purchaseLimit: [
          { required: true, message: "请输入商品限购", trigger: "change" },
        ],
        content: [
          { required: true, message: "请输入商品详情", trigger: "change" },
        ],
        productCode: [
          { required: true, message: "请输入商品编号", trigger: "change" },
        ],
        marketPrice: [
          { required: true, message: "请输入市价", trigger: "change" },
        ],
        salePrice: [
          { required: true, message: "请输入商品价格", trigger: "change" },
        ],
        points: [
          { required: true, message: "请输入所需兑换豆", trigger: "change" },
        ],
        stock: [
          { required: true, message: "请输入商品库存", trigger: "change" },
        ],
        initialSales: [
          { required: true, message: "请输入初始销量", trigger: "change" },
        ],
        orderIndex: [
          { required: true, message: "请输入排序", trigger: "change" },
        ],
        unit: [
          { required: true, message: "请输入商品单位", trigger: "change" },
        ],
      },
      supplierList: [],
      typeList: [],
      buttonLoading: false
    };
  },
  created () {
    this.getSupplierList();
    this.getProductCategoryList();
    if (this.$route.query.productId) {
      this.getDetails(this.$route.query.productId)
    }
  },
  mounted () {
    document.documentElement.scrollTop = 0
  },
  methods: {
    getDetails (id) {
      productInfo(id).then(res => {
        res.data.images = res.data.images.join(",");
        this.form = res.data;
      })
    },
    getSupplierList () {
      supplierList().then(res => {
        this.supplierList = res.data
      })
    },
    getProductCategoryList () {
      productCategoryList().then(res => {
        this.typeList = res.data
      })
    },
    nextStep () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.activeStep++;
        }
      })
    },
    prevStep () {
      this.activeStep--;
      this.$refs["form"].clearValidate();
    },
    cancel () {
      if (this.$route.query.queryParams) {
        localStorage.setItem('queryParams', this.$route.query.queryParams)
      }
      this.$router.go(-1)
    },
    submitForm () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let formCopy = JSON.parse(JSON.stringify(this.form))
          console.log(formCopy)
          formCopy.images = formCopy.images.split(",");
          formCopy.marketPrice = formCopy.salePrice;
          this.buttonLoading = true;
          if (this.form.productId != null) {
            productEdit(formCopy).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.cancel()
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            productAdd(formCopy).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.cancel()
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form {
  width: 1000px;
}
.goods-form-container {
  padding: 20px;
  background: #fff;
  min-height: calc(100vh - 84px);

  .form-header {
    margin-bottom: 30px;
  }

  .form-content {
    .el-steps {
      margin: 0 0 30px;
    }

    .step-content {
      margin: 20px 0;
    }
  }

  .form-footer {
    margin-top: 30px;
    text-align: center;
  }
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;

  &:hover {
    border-color: #409eff;
  }
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.upload-tip {
  color: #909399;
  font-size: 12px;
  margin-top: 5px;
}

.el-select {
  width: 100%;
}
::v-deep .input-number {
  display: flex;
  .sort-tip {
    flex-shrink: 0;
  }
  .el-input {
    width: 200px;
    .el-input__inner {
      text-align: center;
    }
  }
}

.sort-tip {
  color: #909399;
  font-size: 12px;
  margin-left: 10px;
}
.showTip {
  display: inline-block;
  margin-left: 20px;
  font-weight: 700;
  color: #606266;
}
</style>
