<template>
  <el-dialog
    :visible.sync="visible"
    :close-on-click-modal="false"
    :title="title"
    width="500px"
    custom-class="base-dialog-wrapper"
    append-to-body
    :before-close="handleCancel"
    v-dialogDrag
  >
    <el-form
      ref="editVisitForm"
      :model="form"
      :rules="rules"
      size="small"
      label-width="100px"
    >
      <div class="base-dialog-body">
        <!--AE Title-->
        <el-form-item :label="$t('system:dicom:form:AETitle')" prop="CalledAE">
          <el-input v-model.trim="form.CalledAE" clearable maxlength="16" />
        </el-form-item>
        <!--IP-->
        <el-form-item :label="$t('system:dicom:form:IP')" prop="IP">
          <el-input v-model.trim="form.IP" clearable />
        </el-form-item>
        <!--Port-->
        <el-form-item :label="$t('system:dicom:form:Port')" prop="Port">
          <el-input v-model.number="form.Port" type="number" clearable />
        </el-form-item>
        <!--Modality-->
        <el-form-item :label="$t('system:dicom:form:Modality')" prop="Modality">
          <el-input v-model="form.Modality" clearable />
        </el-form-item>
        <!--Description-->
        <el-form-item
          :label="$t('system:dicom:form: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: this.$t("common:ruleMessage:specify"),
            trigger: "blur",
          },
          {
            pattern: /[a-zA-Z0-9]/,
            message: this.$t("common:ruleMessage:CalledAEPattern"),
            trigger: "blur",
          },
          {
            min: 1,
            max: 16,
            message: this.$t("common:ruleMessage:CalledAEPattern"),
            trigger: "blur",
          },
        ],
        IP: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (
                value === "" ||
                typeof value === "undefined" ||
                value == null
              ) {
                callback(new Error(this.$t("common:ruleMessage:ipPattern")));
              } else {
                const reg =
                  /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
                if (!reg.test(value) && value !== "") {
                  callback(new Error(this.$t("common:ruleMessage:ipPattern")));
                } else {
                  callback();
                }
              }
            },
            message: this.$t("common:ruleMessage:ipPattern"),
            trigger: "blur",
          },
        ],
        Port: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: "blur",
          },
          {
            type: "number",
            min: 0,
            max: 65535,
            message: this.$t("common:ruleMessage:portPattern"),
            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>