<template>
  <el-dialog
    :visible.sync="visible"
    :close-on-click-modal="false"
    :title="title"
    width="600px"
    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="150px"
    >
      <div class="base-dialog-body">
        <!--PacsTypeEnum-->
        <el-form-item
          :label="$t('system:dicom:form:PacsTypeEnum')"
          prop="PacsTypeEnum"
        >
          <el-select
            v-model="form.PacsTypeEnum"
            placeholder=""
            style="width: 100%"
          >
            <el-option
              v-for="item in $d.PacsType"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!--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="ModalityList"
        >
          <el-select
            v-model="form.ModalityList"
            placeholder=""
            style="width: 100%"
            clearable
            multiple
          >
            <el-option
              v-for="item in $d.modalType"
              :key="item.id"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <!--影像时间范围-->
        <el-form-item
          :label="$t('system:dicom:form:timeFrame')"
          prop="PacsSearchMaxDays"
        >
          <el-input
            v-model.number="form.PacsSearchMaxDays"
            type="number"
            clearable
          />
        </el-form-item>
        <!--最大拉取数量-->
        <el-form-item
          :label="$t('system:dicom:form:MaxStudyCount')"
          prop="MaxStudyCount"
        >
          <el-input
            v-model.number="form.MaxStudyCount"
            type="number"
            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>
        <!--是否支持多模态-->
        <el-form-item
          :label="$t('system:dicom:form:IsSupportMutiModality')"
          prop="IsSupportMutiModality"
        >
        <el-switch
          v-model="form.IsSupportMutiModality"
          :active-text="$fd('YesOrNo', true)"
          :inactive-text="$fd('YesOrNo', false)"
          :active-value="true"
          :inactive-value="false"
        >
        </el-switch>
        </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,
        ModalityList: null,
        Description: null,
        Id: null,
        PacsTypeEnum: null,
        PacsSearchMaxDays: null,
        MaxStudyCount: null,
        IsSupportMutiModality: false
      },
      rules: {
        PacsTypeEnum: [
          {
            required: true,
            message: this.$t('common:ruleMessage:select'),
            trigger: 'blur',
          },
        ],
        ModalityList: [
          {
            required: true,
            message: this.$t('common:ruleMessage:select'),
            trigger: 'blur',
          },
          {
            validator: (rule, value, callback) => {
              if (!value || (Array.isArray(value) && value.length <= 0)) {
                callback(new Error(this.$t('common:ruleMessage:select')))
              } else {
                callback()
              }
            },
          },
        ],
        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',
          },
        ],
        PacsSearchMaxDays: [
          {
            required: true,
            message: this.$t('common:ruleMessage:PacsSearchMaxDaysPattern'),
            trigger: 'blur',
          },
          {
            type: 'number',
            min: 0,
            // max: 365,
            message: this.$t('common:ruleMessage:PacsSearchMaxDaysPattern'),
            trigger: 'blur',
          },
          {
            validator: (rule, value, callback) => {
              if (
                value &&
                (String(value).includes('.') ||
                  new RegExp(/\D/g).test(String(value)))
              ) {
                callback(
                  new Error(
                    this.$t('common:ruleMessage:PacsSearchMaxDaysPattern')
                  )
                )
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
        ],
        MaxStudyCount: [
          // {
          //   required: true,
          //   message: this.$t('common:ruleMessage:MaxStudyCountPattern'),
          //   trigger: 'blur',
          // },
          {
            validator: (rule, value, callback) => {
              if (
                value &&
                (String(value).includes('.') ||
                  new RegExp(/\D/g).test(String(value)))
              ) {
                callback(
                  new Error(this.$t('common:ruleMessage:MaxStudyCountPattern'))
                )
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
        ],
        Port: [
          {
            required: true,
            message: this.$t('common:ruleMessage:portPattern'),
            trigger: 'blur',
          },
          {
            type: 'number',
            min: 0,
            max: 65535,
            message: this.$t('common:ruleMessage:portPattern'),
            trigger: 'blur',
          },
          {
            validator: (rule, value, callback) => {
              if (
                value &&
                (String(value).includes('.') ||
                  new RegExp(/\D/g).test(String(value)))
              ) {
                callback(new Error(this.$t('common:ruleMessage:portPattern')))
              } else {
                callback()
              }
            },
            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>