<template>
  <!-- 添加或修改测试单表对话框 -->
  <el-drawer
    :title="form.id ? '编辑' : '新增'"
    :visible.sync="visible"
    width="700px"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="选择属性" prop="parentId">
        <el-select
          v-model="form.parentId"
          placeholder="请选择属性"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="(v, i) in topList"
            :key="i"
            :label="v.name"
            :value="v.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="输入属性值" prop="name">
        <el-input v-model="form.name" placeholder="请输入属性值" />
      </el-form-item>
      <el-form-item label="排序" prop="orderIndex">
        <el-input-number
          v-model="form.orderIndex"
          :min="1"
          label="排序"
          :precision="0"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm"
        >确 定</el-button
      >
      <el-button @click="cancel">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script>
import { skusAdd, skusEdit } from "@/api/shopSku.js";
export default {
  name: "shopSkuDialog",
  props: {
    topList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      buttonLoading: false,
      visible: false,
      form: {
        parentId: 0,
      },
      // 表单校验
      rules: {
        name: [{ required: true, message: "请输入属性值", trigger: "blur" }],
        parentId: [
          { required: true, message: "请选择属性", trigger: "change" },
        ],
        orderIndex: [
          { required: true, message: "请输入排序号", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    open(form) {
      if (form) {
        this.form = Object.assign({}, form);
      }
      this.visible = true;
    },
    // 取消按钮
    cancel() {
      this.visible = false;
      this.form = {
        parentId: 0,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (!this.form.parentId) {
            this.form.parentId = 0;
          }
          this.buttonLoading = true;
          if (this.form.id != null) {
            skusEdit(this.form)
              .then((response) => {
                if (response.code === 200) {
                  this.$modal.msgSuccess("修改成功");
                  this.$emit("submit");
                  this.cancel();
                }
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            skusAdd(this.form)
              .then((response) => {
                if (response.code === 200) {
                  this.$modal.msgSuccess("新增成功");
                  this.$emit("submit");
                  this.cancel();
                }
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
  },
};
</script>
