<template>
  <div>
    <Form :model="modelForm" ref="editForm" class="ivu-form-no-margin-bottom" :rules="rule" :label-width="100">
      <Form-item prop="configCode" :label="$t('module.configManage.groupCode')">
        <Input :disabled="!!modelForm.id" v-model="modelForm.configCode" placeholder="" size="small" maxlength="50"/>
      </Form-item>
      <Form-item prop="configName" :label="$t('module.configManage.groupName')">
        <Input v-model="modelForm.configName" placeholder="" size="small" maxlength="50"/>
      </Form-item>
      <!--<Form-item :label="$t('module.configManage.configValue')">
        <Input v-model="modelForm.configValue" placeholder="" size="small" maxlength="100"/>
      </Form-item>-->
      <Form-item :label="$t('module.configManage.description')">
        <Input v-model="modelForm.configDesc" type="textarea" :rows="3" placeholder="" size="small" maxlength="200"/>
      </Form-item>
      <Row :gutter="20" class="code-row-bg">
        <Col span="12" style="border:none;">
          <Form-item prop="enabled" :label="$t('common.status')">
            <el-radio v-model="modelForm.enabled" :label="1">{{$t('common.valid')}}</el-radio>
            <el-radio v-model="modelForm.enabled" :label="0">{{$t('common.invalid')}}</el-radio>
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    configInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      modelForm: {
        id: this.configInfo.id || "",
        configName: this.configInfo.configName || "",
        configCode: this.configInfo.configCode || "",
        configDesc: this.configInfo.configDesc || "",
        // description: this.configInfo.description || "",
        enabled: this.configInfo.enabled || 1,
        version: this.configInfo.version || 0
      },
      rule: {
        configCode: [
          {
            required: true,
            message: this.$t("module.configManage.enterGroupCode"),
            trigger: "blur"
          }
        ],
        configName: [
          {
            required: true,
            message: this.$t("module.configManage.enterGroupName"),
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {},
  created: function() {
    if (this.configInfo.id) {
      this.$emit("SetTitle", this.$t("module.configManage.editConfig"));
    } else {
      this.$emit("SetTitle", this.$t("module.configManage.createConfig"));
    }

    this.$emit("SetPageSize", 700);
    this.$emit("SetPageActions", [
      {
        text: this.$t("common.save"),
        theme: "primary",
        handle: () => {
          this.save();
        }
      },
      {
        text: this.$t("common.close"),
        theme: "primary",
        handle: () => {
          this.$emit("Close");
        }
      }
    ]);
  },
  // beforeMount: function() {},
  // mounted: function() {
  //   this.init();
  // },
  // beforeDestroy: function() {},
  // destroyed: function() {},
  methods: {
    // init() {
    //   if (this.config.id) {
    //     this.modelForm = {
    //       configId: this.config.id,
    //       configName: this.config.configName,
    //       configCode: this.config.configCode,
    //       description: this.config.description,
    //       enabled: this.config.enabled,
    //       version: this.config.version
    //     };
    //   }
    // },
    save() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          $store.dispatch("saveOrUpdateConfig", this.modelForm).then(response => {
            // //console.log(response);
            if (response.statusCode == '0') {
              let content;
              if (this.configInfo.id) {
                content = this.$t("module.valueSet.warning.editSuccess");
              } else {
                content = this.$t("module.valueSet.warning.createSuccess");
              }
              this.$Message.success({
                content: content,
                duration: 3
              });
              this.$emit("Close");
            } else {
              this.$Message.warning({
                content: this.$t("module.valueSet.warning.saveFailed"),
                duration: 3
              });
            }
          });
        } else {
          this.$Message.error({
            content: this.$t("module.valueSet.warning.formValidateFailed"),
            duration: 3
          });
          return 0;
        }
      });
    }
  },
  watch: {},
  directives: {}
};
</script>
