<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="分组名称:" prop="cmdName">
        <el-input v-model="form.cmdName" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="标识符:" prop="cmdKey">
        <el-input
          v-model="form.cmdKey"
          :disabled="form.cmdId"
          placeholder="请输入标识符"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
const cmdTypeOption = {
  UP: "上报",
  DOWN: "下发"
};
export default {
  name: "GroupForm",
  props: {
    paramIdx: {
      type: Number,
      default: 0
    },
    tempType: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      cmdTypeOption,
      form: {},
      // 表单校验
      rules: {
        cmdName: [
          { required: true, message: "分组名称不能为空", trigger: "blur" },
        ],
        cmdKey: [
          { required: true, message: "标识符不能为空", trigger: "blur" },
        ],
        cmdType: [
          { required: true, message: "分组类型不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    if (this.tempType !== 'add' && this.paramIdx >= 0) {
      this.getParamIten(this.paramIdx)
    }
  },
  methods: {
    getParamIten(idx) {
      var that = this
       this.$store.dispatch("GetGroupItem", idx).then(res => {
        console.log(res)
        that.form = JSON.parse(JSON.stringify(res));
      })
    },
    /** 提交验证 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 新增和修改操作
          if (this.tempType === 'add') {
            this.$store.dispatch("AddGroup", this.form)
          } else if (this.tempType === 'update') {
            this.$store.dispatch('EditGroup', { 'item':　this.form, 'idx': this.paramIdx })
          }
          this.$emit('ok')
        }
      });
    },
  },
};
</script>
