<template>
  <div>
    <el-form ref="dicomConfigForm" v-loading="loading" :model="form" label-width="300px" style="width: 800px"
      :rules="rules" size="small">
      <!-- pacs直连 -->
      <el-form-item :label="$t('trials:dicomCfg:form:pacsLine')" prop="IsPACSConnect">
        <el-radio-group v-model="form.IsPACSConnect" :disabled="form.IsTrialPACSConfirmed && !isEdit"
          @change="changeConnect">
          <el-radio v-for="item of $d.PACSConnectMode" :key="item.id" :label="item.value">
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <template v-if="form.IsPACSConnect">
        <!--AE名称-->
        <el-form-item :label="$t('trials:dicomCfg:form:CalledAE')" prop="CalledAE">
          <p class="form_p copyBox">
            {{ form.CalledAE }}
            <el-tooltip placement="right" effect="light" v-if="form.CalledAE">
              <div slot="content">{{ $t('common:button:tip:copy') }}</div>
              <i class="el-icon-document-copy" @click.stop="copyLink"></i>
            </el-tooltip>
          </p>
        </el-form-item>
        <!-- IP地址 -->
        <el-form-item :label="$t('trials:dicomCfg:form:Ip')" prop="Ip">
          <p class="form_p">{{ form.Ip }}</p>
        </el-form-item>
        <!-- 端口 -->
        <el-form-item :label="$t('trials:dicomCfg:form:Port')" prop="Port">
          <p class="form_p">{{ form.Port }}</p>
        </el-form-item>
        <!--状态-->
        <el-form-item :label="$t('trials:dicomCfg:form:IsTestOK')" prop="IsTestOK" style="position: relative">
          <el-tag :type="form.IsTestOK ? 'success' : 'danger'" effect="plain" v-if="form.IsTestOK !== null">
            {{ $fd('DicomTest', form.IsTestOK) }}
          </el-tag>
          <!-- 测试DICOM AE style="position: absolute; right: 100px; top: 0"-->
          <el-button v-if="
            hasPermi(['trials:trials-panel:setting:trial-config:save']) &&
            form.IsPACSConnect
          " style="margin-left: 10px" type="primary" size="mini" @click.stop="testSCPServerConnect">
            {{ $t('common:button:DicomTest') }}
          </el-button>
        </el-form-item>
      </template>
      <el-form-item>
        <!-- 保存 -->
        <el-button v-if="
          form.IsTrialPACSConfirmed === false &&
          hasPermi(['trials:trials-panel:setting:trial-config:save'])
        " type="primary" @click="addOrUpdateDicomAE">
          {{ $t('common:button:save') }}
        </el-button>
        <!-- 配置确认:disabled="!form.IsTestOK" -->
        <el-button v-if="
          form.IsTrialPACSConfirmed === false &&
          hasPermi(['trials:trials-panel:setting:trial-config:save'])
        " type="primary" @click="handleConfirm">
          {{ $t('trials:trialCfg:button:confirm') }}
        </el-button>
        <!-- 配置更新 -->
        <el-button v-if="
          form.IsTrialPACSConfirmed === true &&
          !isEdit &&
          hasPermi(['trials:trials-panel:setting:trial-config:save'])
        " type="primary" @click="isEdit = true">
          {{ $t('trials:trialCfg:button:update') }}
        </el-button>
        <!-- 配置更新确认:disabled="!form.IsTestOK" -->
        <el-button v-if="
          form.IsTrialPACSConfirmed === true &&
          isEdit &&
          hasPermi(['trials:trials-panel:setting:trial-config:save'])
        " type="primary" @click="handleUpdate">
          {{ $t('trials:trialCfg:button:updateAndConfirm') }}
        </el-button>
        <!-- 取消 -->
        <el-button v-if="
          form.IsTrialPACSConfirmed === true &&
          isEdit &&
          hasPermi(['trials:trials-panel:setting:trial-config:save'])
        " type="primary" @click.stop="confirmCancel">
          {{ $t('common:button:cancel') }}
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 配置信息签名框 -->
    <el-dialog v-if="signVisible" :visible.sync="signVisible" :close-on-click-modal="false" width="600px"
      custom-class="base-dialog-wrapper">
      <div slot="title">
        <span style="font-size: 18px">{{ $t('common:dialogTitle:sign') }}</span>
        <span style="font-size: 12px; margin-left: 5px">{{
          `(${$t('common:label:sign')}${currentUser})`
        }}</span>
      </div>
      <SignForm ref="signForm" :sign-code-enum="signCode" @closeDialog="closeSignDialog" />
    </el-dialog>
    <!-- 配置信息确认框 -->
    <el-dialog v-if="confirmVisible" :visible.sync="confirmVisible" :close-on-click-modal="false" width="600px"
      :title="$t('trials:trialCfg:dialogTitle:cfgConfirm')" custom-class="base-dialog-wrapper">
      <div class="base-dialog-body">
        <el-table :data="confirmData" border style="width: 100%" size="small">
          <!-- 配置项 -->
          <el-table-column prop="Name" :label="$t('trials:trialCfg:table:cfgItem')" show-overflow-tooltip />
          <!-- 配置值 -->
          <el-table-column prop="NewVal" :label="$t('trials:trialCfg:table:cfgVal')" show-overflow-tooltip />
        </el-table>
      </div>
      <div class="base-dialog-footer" style="text-align: right; margin-top: 10px">
        <!-- 确认 -->
        <el-button size="small" type="primary" @click="handleConfirmConfigData">
          {{ $t('trials:trialCfg:button:confirmCfg') }}
        </el-button>
      </div>
    </el-dialog>

    <!-- 配置信息更新框 -->
    <el-dialog v-if="updateVisible" :visible.sync="updateVisible" :close-on-click-modal="false" width="600px"
      :title="$t('trials:trialCfg:dialogTitle:cfgConfirm')" custom-class="base-dialog-wrapper">
      <div class="base-dialog-body">
        <el-table :data="confirmData" border style="width: 100%" size="small">
          <!-- 配置项 -->
          <el-table-column prop="Name" :label="$t('trials:trialCfg:table:cfgItem')" show-overflow-tooltip />
          <!-- 配置值（更改前） -->
          <el-table-column prop="OldVal" :label="`${$t('trials:trialCfg:table:cfgVal')} （${$t(
            'trials:trialCfg:table:beforeChange'
          )}）`" show-overflow-tooltip />
          <!-- 配置值（更改后） -->
          <el-table-column prop="NewVal" :label="`${$t('trials:trialCfg:table:cfgVal')} （${$t(
            'trials:trialCfg:table:updated'
          )}）`" show-overflow-tooltip>
            <template slot-scope="scope">
              <span :class="{ fontColor: scope.row.NewVal !== scope.row.OldVal }">{{ scope.row.NewVal }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="base-dialog-footer" style="text-align: right; margin-top: 10px">
        <!-- 确认 -->
        <el-button size="small" type="primary" @click="handleUpdateConfigData">
          {{ $t('trials:trialCfg:button:confirmCfg') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getTrialDicomAE,
  addOrUpdateDicomAE,
  testSCPServerConnect,
  ConfigTrialPACSInfoConfirm,
  getTrialPacsConfigInfo,
} from '@/api/trials'
import SignForm from '@/views/trials/components/newSignForm'
import const_ from '@/const/sign-code'
export default {
  name: 'dicomConfig',
  components: { SignForm },
  data() {
    return {
      loading: false,
      form: {
        IsTestOK: null,
        IsPACSConnect: true,
        IsTrialPACSConfirmed: false,
        CalledAE: null,
        Ip: null,
        Port: null,
        Modality: null,
      },
      initialForm: {},
      rules: {
        IsPACSConnect: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
        ],
        CalledAE: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
          {
            validator: (rule, value, callback) => {
              let reg = /[a-zA-Z0-9]/
              if (!reg.test(value) && value !== '') {
                callback(
                  new Error(this.$t('common:ruleMessage:CallingAEPattern'))
                )
              } else {
                callback()
              }
            },
            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',
          },
        ],
      },
      isEdit: false,
      Id: null,
      signVisible: false,
      signCode: null,
      currentUser: zzSessionStorage.getItem('userName'),
      confirmData: [],
      confirmVisible: false,
      updateVisible: false,
      defaultObj: {},
    }
  },
  methods: {
    copyLink() {
      this.$copyText(
        `${this.$t('trials:dicomCfg:form:CalledAE')}: ${this.form.CalledAE
        }\n${this.$t('trials:dicomCfg:form:Ip')}: ${this.form.Ip}\n${this.$t(
          'trials:dicomCfg:form:Port'
        )}: ${this.form.Port}\n${this.$t(
          'trials:dicomCfg:form:Description'
        )}: ${this.$t('trials:dicomCfg:Description:message').replace(
          'xxx',
          this.$company()
        )}`
      )
        .then((res) => {
          // 复制成功
          this.$message.success(
            this.$t('trials:researchRecord:message:copySuccessfully')
          )
        })
        .catch(() => {
          // 复制失败
          this.$alert(this.$t('trials:researchRecord:message:copyFailed'))
        })
    },
    // 获取默认值
    async getTrialPacsConfigInfo() {
      try {
        let param = {
          TrialId: this.$route.query.trialId,
        }
        let res = await getTrialPacsConfigInfo(param)
        if (res.IsSuccess) {
          this.defaultObj = res.Result
        }
      } catch (err) {
        console.log(err)
      }
    },
    changeConnect(val) {
      if (!val) {
        this.form.CalledAE = null
        this.form.Ip = null
        this.form.Port = null
        this.form.Modality = null
        this.form.IsTestOK = null
      } else {
        this.form.CalledAE = this.defaultObj.TrialCalledAE
        this.form.Ip = this.defaultObj.Ip
        this.form.Port = this.defaultObj.Port
        this.testSCPServerConnect()
      }
    },
    initForm(res) {
      this.getInfo()
      this.getTrialPacsConfigInfo()
    },
    // 取消配置更新
    confirmCancel() {
      this.isEdit = false
      this.form = { ...this.initialForm }
    },
    // 测试dicomAE
    async testSCPServerConnect() {
      try {
        let validate = await this.$refs.dicomConfigForm.validate()
        if (!validate) return
        let data = {
          CalledAE: this.form.CalledAE,
          Ip: this.form.Ip,
          Port: this.form.Port,
        }
        this.loading = true
        let d = await testSCPServerConnect(data)
        this.loading = false
        if (d.IsSuccess) {
          this.form.IsTestOK = d.Result
        }
      } catch (err) {
        console.log(err)
        this.loading = false
      }
    },
    // 获取配置
    async getInfo() {
      try {
        let data = {
          TrialId: this.$route.query.trialId,
        }
        this.loading = true
        let res = await getTrialDicomAE(data)
        this.loading = false
        if (res.IsSuccess) {
          res.Result = res.Result || {}
          this.form.IsPACSConnect = res.OtherInfo.IsPACSConnect
          this.form.IsTrialPACSConfirmed = res.OtherInfo.IsTrialPACSConfirmed
          if (!res.OtherInfo.IsTrialPACSConfirmed) {
            this.isEdit = true
          }
          this.form.IsTestOK = res.Result.IsTestOK || null
          this.form.CalledAE = res.Result.CalledAE
          this.form.Ip = res.Result.IP
          this.form.Port = res.Result.Port
          this.Id = res.Result.Id

          this.initialForm.IsPACSConnect = res.OtherInfo.IsPACSConnect
          this.initialForm.IsTrialPACSConfirmed =
            res.OtherInfo.IsTrialPACSConfirmed
          this.initialForm.IsTestOK = res.Result.IsTestOK
          this.initialForm.CalledAE = res.Result.CalledAE
          this.initialForm.Ip = res.Result.IP
          this.initialForm.Port = res.Result.Port
        }
      } catch (err) {
        console.log(err)
        this.loading = false
      }
    },
    // 新增或修改配置
    async addOrUpdateDicomAE() {
      try {
        let validate = await this.$refs.dicomConfigForm.validate()
        if (!validate) return
        if (this.Id && !this.form.IsPACSConnect) {
          this.form.Id = this.Id
        } else {
          this.form.Id = null
        }
        this.form.TrialId = this.$route.query.trialId
        this.loading = true
        let res = await addOrUpdateDicomAE(this.form)
        this.loading = false
        if (res.IsSuccess) {
          // this.$emit("refresh");
          this.Id = res.Result
          return res.Result || res.IsSuccess
        }
        return false
      } catch (err) {
        console.log(err)
        this.loading = false
        return false
      }
    },
    // 关闭签名框
    closeSignDialog(isSign, signInfo) {
      if (isSign) {
        this.signConfirm(signInfo)
      } else {
        this.signVisible = false
      }
    },
    async signConfirm(signInfo) {
      try {
        let data = {
          data: {
            TrialId: this.$route.query.trialId,
            IsPACSConnect: this.form.IsPACSConnect,
            IsTrialPACSConfirmed: true,
          },
          signInfo,
        }
        let res = await ConfigTrialPACSInfoConfirm(data)
        if (res.IsSuccess) {
          this.signVisible = false
          this.confirmVisible = false
          this.updateVisible = false
          this.isEdit = false
          res = await this.addOrUpdateDicomAE()
          if (res) this.$emit('refresh')
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 配置更新
    handleUpdateConfigData() {
      const { DicomConfigUpdates } = const_.processSignature
      this.signCode = DicomConfigUpdates
      this.signVisible = true
    },
    // 配置确认
    handleConfirmConfigData() {
      const { DicomConfigConfirmation } = const_.processSignature
      this.signCode = DicomConfigConfirmation
      this.signVisible = true
    },
    // 打开配置信息确认框
    handleConfirm() {
      this.$refs['dicomConfigForm'].validate(async (valid) => {
        if (!valid) return
        if (!this.form.IsTestOK && this.form.IsPACSConnect)
          return this.$message.warning(
            this.$t('trials:dicomCfg:message:IsTestNo')
          )
        this.getConfigArr()
        this.confirmVisible = true
      })
    },

    // 打开配置信息更新框
    handleUpdate() {
      this.$refs['dicomConfigForm'].validate(async (valid) => {
        if (!valid) return
        if (!this.form.IsTestOK && this.form.IsPACSConnect)
          return this.$message.warning(
            this.$t('trials:dicomCfg:message:IsTestNo')
          )
        this.getConfigArr()
        this.updateVisible = true
      })
    },
    // 配置信息数组结构
    getConfigArr() {
      this.confirmData = [
        {
          Name: this.$t('trials:dicomCfg:form:pacsLine'), // pacs直连
          NewVal: this.$fd('PACSConnectMode', this.form.IsPACSConnect),
          OldVal: this.$fd('PACSConnectMode', this.initialForm.IsPACSConnect),
        },
        {
          Name: this.$t('trials:dicomCfg:form:CalledAE'), // AE名称
          NewVal: this.form.CalledAE,
          OldVal: this.initialForm.CalledAE,
        },
        {
          Name: this.$t('trials:dicomCfg:form:Ip'), // IP地址
          NewVal: this.form.Ip,
          OldVal: this.initialForm.Ip,
        },
        {
          Name: this.$t('trials:dicomCfg:form:Port'),
          NewVal: this.form.Port,
          OldVal: this.initialForm.Port,
        },
        {
          Name: this.$t('trials:dicomCfg:form:IsTestOK'), // 状态
          NewVal: this.$fd('DicomTest', this.form.IsTestOK),
          OldVal: this.$fd('DicomTest', this.initialForm.IsTestOK),
        },
      ]
    },
  },
}
</script>
<style lang="scss" scoped>
.fontColor {
  color: red;
}

.form_p {
  margin: 0;
}

.copyBox {
  cursor: pointer;
}
</style>