<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"
        >
          <el-input
            v-model="form.CalledAE"
            style="width: 80%"
            :disabled="form.IsTrialPACSConfirmed && !isEdit"
            clearable
            maxlength="16"
          />
        </el-form-item>
        <!-- IP地址 -->
        <el-form-item :label="$t('trials:dicomCfg:form:Ip')" prop="Ip">
          <el-input
            v-model="form.Ip"
            style="width: 80%"
            :disabled="form.IsTrialPACSConfirmed && !isEdit"
            clearable
          />
        </el-form-item>
        <!-- 端口 -->
        <el-form-item :label="$t('trials:dicomCfg:form:Port')" prop="Port">
          <el-input
            v-model.number="form.Port"
            type="number"
            clearable
            style="width: 80%"
            :disabled="form.IsTrialPACSConfirmed && !isEdit"
          />
        </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 -->
          <el-button
            v-if="
              isEdit &&
              hasPermi(['trials:trials-panel:setting:trial-config:save']) &&
              form.IsPACSConnect
            "
            type="primary"
            style="position: absolute; right: 100px; top: 0"
            @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,
} 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",
          },
          {
            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",
          },
        ],
      },
      isEdit: false,
      Id: null,
      signVisible: false,
      signCode: null,
      currentUser: zzSessionStorage.getItem("userName"),
      confirmData: [],
      confirmVisible: false,
      updateVisible: false,
    };
  },
  methods: {
    changeConnect(val) {
      if (!val) {
        this.form.CalledAE = null;
        this.form.Ip = null;
        this.form.Port = null;
        this.form.Modality = null;
        this.form.IsTestOK = null;
      }
    },
    initForm(res) {
      this.getInfo();
    },
    // 取消配置更新
    confirmCancel() {
      this.isEdit = false;
      this.form = { ...this.initialForm };
    },
    // 测试dicomAE
    async testSCPServerConnect() {
      try {
        let res = await this.addOrUpdateDicomAE();
        if (!res) return;
        this.loading = true;
        let d = await testSCPServerConnect(res);
        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.Id = this.Id;
        }
        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");
          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;
}
</style>