<template>
  <base-model v-if="config.visible" :config="config">
    <template slot="dialog-body">
      <el-form ref="dicomForm" :model="form" label-width="100px" :rules="rules">
        <!-- 中心编号 -->
        <el-form-item
          :label="$t('trials:sitesList:table:siteId')"
          prop="TrialSiteCode"
        >
          <el-input v-model="siteData.TrialSiteCode" disabled />
        </el-form-item>
        <!-- 中心别称 -->
        <el-form-item
          :label="$t('trials:sitesList:table:siteName')"
          prop="TrialSiteAliasName"
        >
          <el-input v-model="siteData.TrialSiteAliasName" disabled />
        </el-form-item>
        <!-- AE -->
        <el-form-item
          :label="$t('trials:setting:siteList:dicomForm:dicomAE')"
          prop="CallingAE"
        >
          <el-input v-model="form.CallingAE" clearable maxlength="16" />
        </el-form-item>
        <!-- IP -->
        <el-form-item :label="$t('trials:setting:siteList:dicomForm:ip')">
          <el-input v-model="form.Ip" clearable />
        </el-form-item>
        <!-- PORT -->
        <el-form-item :label="$t('trials:setting:siteList:dicomForm:port')">
          <el-input v-model.number="form.Port" type="number" clearable />
        </el-form-item>
        <!-- 说明 -->
        <el-form-item
          :label="$t('trials:setting:siteList:dicomForm:description')"
          prop="Description"
        >
          <el-input v-model="form.Description" clearable />
        </el-form-item>
      </el-form>
    </template>
    <template slot="dialog-footer">
      <el-button
        type="primary"
        size="small"
        :disabled="loading"
        @click="config.visible = false"
      >
        {{ $t('common:button:cancel') }}
      </el-button>
      <el-button type="primary" size="small" :loading="loading" @click="save">
        {{ $t('common:button:save') }}
      </el-button>
    </template>
  </base-model>
</template>
<script>
import { addOrUpdateTrialSiteDicomAE } from '@/api/trials'
import BaseModel from '@/components/BaseModel'
export default {
  name: 'dicomForm',
  components: { BaseModel },
  data() {
    return {
      config: {
        visible: false,
        title: null,
        width: '600px',
        appendToBody: true,
      },
      form: {
        Id: null,
        CallingAE: null,
        Ip: null,
        Port: null,
        Description: null,
      },
      rules: {
        CallingAE: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
          {
            pattern: /[a-zA-Z0-9]/,
            message: this.$t('common:ruleMessage:CallingAEPattern'),
            trigger: 'blur',
          },
          {
            min: 1,
            max: 16,
            message: this.$t('common:ruleMessage:CallingAEPattern'),
            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',
          },
          {
            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',
          },
        ],
      },
      siteData: {},
      loading: false,
      status: 'add',
    }
  },
  methods: {
    open(siteData, data = null, status = 'add') {
      this.siteData = siteData
      this.status = status
      Object.keys(this.form).forEach((key) => {
        this.form[key] = null
      })
      if (data && status === 'edit') {
        Object.keys(this.form).forEach((key) => {
          this.form[key] = data[key]
        })
        this.form.Ip = data.IP
      }
      this.config.title = this.$t(
        'trials:trials-panel:setting:personnel-manage:dicomAETitle'
      )
        .replace('xxx', `${siteData.TrialSiteCode}`)
        .replace('yyy', `${siteData.TrialSiteAliasName}`)
      this.config.visible = true
    },
    // 保存
    async save() {
      try {
        let validate = await this.$refs.dicomForm.validate()
        if (!validate) return false
        this.loading = true
        this.form.TrialSiteId = this.siteData.TrialSiteId
        this.form.TrialId = this.$route.query.trialId
        let res = await addOrUpdateTrialSiteDicomAE(this.form)
        this.loading = false
        if (res.IsSuccess) {
          this.status === 'add'
            ? this.$t('common:message:savedSuccessfully')
            : this.$t('common:message:savedFail')
          this.$emit('getList')
          this.$emit('save')
          this.config.visible = false
        }
      } catch (err) {
        console.log(err)
        this.loading = false
      }
    },
  },
}
</script>
<style lang="scss" scoped></style>