<template>
  <el-dialog
    :visible.sync="visible"
    :close-on-click-modal="false"
    :title="title"
    width="500px"
    custom-class="base-dialog-wrapper"
    append-to-body
  >
    <el-form
      ref="editVisitForm"
      :model="form"
      :rules="rules"
      size="small"
      label-width="150px"
    >
      <div class="base-dialog-body">
        <!--AE Title-->
        <el-form-item label="AE Title" prop="CalledAE">
          <el-input v-model="form.CalledAE" clearable />
        </el-form-item>
        <!--IP-->
        <el-form-item label="IP" prop="IP">
          <el-input v-model="form.IP" clearable />
        </el-form-item>
        <!--Port-->
        <el-form-item label="Port" prop="Port">
          <el-input v-model="form.Port" type="number" clearable />
        </el-form-item>
        <!--Modality-->
        <el-form-item label="Modality" prop="Modality">
          <el-input v-model="form.Modality" clearable />
        </el-form-item>
        <!--Description-->
        <el-form-item label="Description" prop="Description">
          <el-input v-model="form.Description" clearable />
        </el-form-item>
      </div>
      <div
        class="base-dialog-footer"
        style="text-align: right; margin-top: 10px"
      >
        <el-form-item style="text-align: right">
          <el-button
            size="small"
            type="primary"
            :disabled="btnLoading"
            @click="handleCancel"
          >
            {{ $t("common:button:cancel") }}
          </el-button>
          <el-button
            size="small"
            type="primary"
            :loading="btnLoading"
            @click="setAE"
          >
            {{ $t("common:button:save") }}
          </el-button>
        </el-form-item>
      </div>
    </el-form>
  </el-dialog>
</template>
<script>
import { setDiicomAE } from "@/api/dicomAE.js";
export default {
  name: "editDicom",
  props: {
    visible: {
      require: true,
      default: false,
    },
    title: {
      require: true,
      default: "",
    },
    dicom: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      form: {
        CalledAE: null,
        IP: null,
        Port: null,
        Modality: null,
        Description: null,
        Id: null,
      },
      rules: {
        CalledAE: [
          { required: true, message: "请输入AE Title", trigger: "blur" },
        ],
        IP: [{ required: true, message: "请输入IP", trigger: "blur" }],
        Port: [{ required: true, message: "请输入pORT", trigger: "blur" }],
      },
      btnLoading: false,
    };
  },
  watch: {
    dicom: {
      handler() {
        Object.keys(this.form).forEach((key) => {
          this.form[key] = this.dicom[key];
        });
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    handleCancel() {
      Object.keys(this.form).forEach((key) => {
        this.form[key] = null;
      });
      this.$refs.editVisitForm.clearValidate();
      this.$emit("update:visible", false);
    },
    // 新增或修改
    async setAE() {
      try {
        let validate = await this.$refs.editVisitForm.validate();
        if (!validate) return;
        this.btnLoading = true;
        let res = await setDiicomAE(this.form);
        if (res.IsSuccess) {
          if (this.form.Id) {
            this.$message.success(
              this.$t("common:message:updatedSuccessfully")
            );
          } else {
            this.$message.success(this.$t("common:message:addedSuccessfully"));
          }
          this.btnLoading = false;
          this.handleCancel();
          this.$emit("getList");
        } else {
          this.$message.error(res.errorMessage);
        }
      } catch (err) {
        this.btnLoading = false;
        console.log(err);
      }
    },
  },
};
</script>