<template>
  <div class="specBox">
    <el-form
      :model="form"
      inline
      hide-required-asterisk
      ref="ruleForm"
      :rules="rules"
      label-width="20px"
    >
      <div class="fBtn">
        <el-button type="text" @click="valueSort">规格值排序</el-button>
        <el-button type="text" @click="delSpec">删除规则</el-button>
      </div>
      <el-form-item label=" " prop="name">
        <el-input v-model.trim="form.name" style="width: 220px"></el-input>
      </el-form-item>
      <div class="line"></div>
      <el-form-item
        label=" "
        :prop="'specAttrList.' + index + '.name'"
        v-for="(item, index) in form.specAttrList"
        :key="index"
        :rules="[{ required: true, validator: checkSpecVal, trigger: 'blur' }]"
      >
        <el-input v-model.trim="item.name"
          ><el-button
            @click="del(index)"
            style="margin-right: -60px"
            slot="suffix"
            type="text"
            >删除</el-button
          ></el-input
        >
      </el-form-item>
      <el-button @click="add" style="margin: 20px 0 0 0" type="text"
        >添加</el-button
      >
    </el-form>
    <el-dialog
      title="规格值排序"
      :visible.sync="dialogFormVisible"
      width="400px"
    >
      <div class="box" v-for="item in copyList" :key="item.name">
        <el-input-number
          style="width: 50px; margin-right: 10px"
          v-model="item.sort"
          :min="1"
          :max="20"
          label="描述文字"
          :controls="false"
        ></el-input-number>
        {{ item.name }}
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  model: {
    prop: "obj",
    event: "myInput",
  },
  props: {
    obj: {
      type: Array,
      default: {},
    },
    num: {
      type: Number,
    },
  },
  data() {
    var checkName = (rule, value, callback) => {
      if (!value) {
        callback(new Error("规格名不能为空"));
      } else {
        let isH = this.obj.filter((e) => e.name == value).length;
        isH > 1 ? callback(new Error("已存在")) : callback();
      }
    };
    return {
      rules: {
        name: [{ validator: checkName, trigger: "blur" }],
      },
      dialogFormVisible: false,
      copyList: [],
    };
  },
  computed: {
    form() {
      return this.obj[this.num];
    },
  },
  methods: {
    valueSort() {
      this.dialogFormVisible = true;
      this.copyList = JSON.parse(JSON.stringify(this.form.specAttrList));
    },
    submit() {
      this.form.specAttrList = this.copyList.sort((p, y) => p.sort - y.sort);
      console.log(this.form.specAttrList);
      this.dialogFormVisible = false;
    },
    add() {
      this.form.specAttrList.push({ name: "", sort: undefined });
    },
    del(index) {
      if (this.form.specAttrList.length == 1) {
        return this.$message({
          message: "属性值最少一条",
          type: "warning",
        });
      }
      this.form.specAttrList.splice(index, 1);
    },
    delSpec() {
      this.$confirm(
        "删除该规格类型后，当前的规格类型相关数据将丢失，确认要删除吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.obj.splice(this.num, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    checkSpecVal(rule, value, callback) {
      if (!value) {
        callback(new Error("规格值不能为空"));
      } else {
        let isH = this.form.specAttrList.filter((e) => e.name == value).length;
        isH > 1 ? callback(new Error("已存在")) : callback();
      }
    },
    submitForm() {
      let back;
      this.$refs["ruleForm"].validate((valid) => {
        back = valid;
      });
      return back;
    },
  },
};
</script>

<style lang="scss" scoped>
.specBox {
  border: 1px solid #ccc;
  padding-bottom: 20px;
  margin: 20px 20px 0;
  background: #fff;
  position: relative;
  .line {
    margin-top: 20px;
    border-top: 1px solid #ccc;
  }
  .fBtn {
    position: absolute;
    right: 30px;
    top: 20px;
  }
  .box {
    margin-left: 20px;
  }
  /deep/ {
    .el-input {
      // margin-top: 20px;
    }
    .el-form-item {
      margin-right: 60px;
    }
    .el-form-item__content {
      background: #fff !important;
    }
  }
}
</style>