<template>
  <el-empty :description="$t('user.selectItem')" :image-size="100" v-if="form.Id === '0' || form.Id === 0 || form.Id === '1' || form.Id === 1"></el-empty>
  <template v-else>
    <sc-title :title='$t(isEdit ? "edit" : "create")'></sc-title>
    <el-form :model="form" :rules="rules" ref="dialogForm" label-width="120px" :label-position="this.$TOOL.data.get('APP_LANG') == 'en-US' ? 'top' : 'left'">
        <el-form-item :label="$t('reportTemplate.name')" prop="Value">
            <el-input v-model="form.Value" clearable :placeholder="$t('thirdParty.inputName')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('reportTemplate.uniqueCode')" prop="Key">
            <el-input v-model="form.Key" clearable :placeholder="$t('reportTemplate.enterUniqueCode')"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="save" :loading="loading">{{$t('reportDesigner.save')}}</el-button>
        </el-form-item>
    </el-form>
  </template>
</template>

<script>
export default {
  emits: ['success', 'closed'],
  data() {
    return {
      isEdit: false,
      form: {
        Id: "0",
        Key: "",
        Value: "",
        ParentId: "",
        IsDefault: false
      },
      loading: false,
      rules: {
        Value: [
          {
            required: true,
            message: this.$t("thirdParty.inputName"),
            trigger: "blur",
          },
        ],
        Key: [
          {
            required: true,
            message: this.$t("reportTemplate.enterUniqueCode"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    //保存
    async save() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
            this.loading = true;
            var result = false;
            if (this.form.IsDefault) 
            {
              result = await this.$API.template.saveContentConfigToStorage.post(this.form, this.isEdit);
            }
            else
            {
              //处理动态数据
              var templateTagList = [];
              if (this.isEdit) 
              {
                templateTagList = this.$TOOL.data.get("activeTemplateTagList");
                if (templateTagList && templateTagList.length > 0) 
                {
                  //编辑
                  templateTagList.forEach(c => {
                    if (c.Id === this.form.Id)
                    {
                      c.Key = this.form.Key;
                      c.Value = this.form.Value;
                    }
                  });
                }
              }
              else{
                //新增
                var tempTag = {
                    Id: this.form.Id, 
                    Key: this.form.Key, 
                    Value: this.form.Value, 
                    ParentId: this.form.ParentId,
                    IsDefault: this.form.IsDefault
                };
                templateTagList.push(tempTag);
              }
              this.$TOOL.data.set("activeTemplateTagList", templateTagList);
              result = true;
            }
            if (result) {
                this.$message.success(this.$t("response.operateSuccess"));
                this.$emit("success");
            }
            else {
                this.$message.success(this.$t("reportDesigner.saveFail"));
            }
            this.loading = false;
        } else {
          return false;
        }
      });
    },
    //表单注入数据
    setData(data, flag) {
      this.isEdit = false;
      if (flag) {
        this.isEdit = true;
      }
      this.form.Key = "";
      this.form["Children"] = [];
      Object.assign(this.form, data)
    },
  },
};
</script>

<style scoped>
h2 {
  font-size: 17px;
  color: #3c4a54;
  padding: 0 0 30px 0;
}
.apilist {
  border-left: 1px solid #eee;
}

[data-theme="dark"] h2 {
  color: #fff;
}
[data-theme="dark"] .apilist {
  border-color: #434343;
}
</style>
