<template>
  <el-form
    ref="subjectForm"
    v-loading="loading"
    :model="form"
    :rules="rules"
    size="small"
    label-width="100px"
  >
    <div class="base-dialog-body">
      <!-- 患者编号 -->
      <el-form-item :label="$t('trials:uploadDicomList:table:pId')">
        <el-input v-model="form.PatientId" disabled />
      </el-form-item>
      <!-- 受试者编号 -->
      <el-form-item :label="$t('trials:subject:table:subjectId')" prop="Code">
        <el-input v-model="form.Code" clearable />
      </el-form-item>
      <!-- 姓名 -->
      <el-form-item :label="$t('trials:uploadDicomList:table:patientName')">
        <el-input v-model="form.ShortName" clearable />
      </el-form-item>
      <!-- 年龄 -->
      <el-form-item :label="$t('trials:subject:table:age')" prop="Age">
        <el-input v-model.number="form.Age" type="number" clearable />
      </el-form-item>
      <!-- 性别 -->
      <el-form-item :label="$t('trials:subject:table:gender')">
        <el-select v-model="form.Sex" clearable filterable style="width: 100%">
          <el-option
            v-for="item of $d.Sex"
            :key="item.id"
            :label="item.label"
            :value="String(item.value)"
          />
        </el-select>
      </el-form-item>
      <!-- 出生日期 -->
      <el-form-item :label="$t('trials:inspection:table:birthdate')">
        <el-date-picker
          v-model="form.BirthDate"
          type="date"
          :placeholder="$t('trials:inspection:placeholder:date')"
          style="width: 100%"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
    </div>
    <div class="base-dialog-footer" style="text-align: right; margin-top: 10px">
      <el-form-item>
        <!-- 取消 -->
        <el-button
          :disabled="btnLoading"
          size="small"
          type="primary"
          @click="handleCancel"
        >
          {{ $t("common:button:cancel") }}
        </el-button>
        <!-- 保存 -->
        <el-button
          size="small"
          type="primary"
          :loading="btnLoading"
          @click="handleSave"
        >
          {{ $t("common:button:save") }}
        </el-button>
      </el-form-item>
    </div>
  </el-form>
</template>
<script>
import { addOrUpdateSubjectHir } from "@/api/trials";
export default {
  name: "SubjectForm",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
    otherInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },

  data() {
    return {
      form: {
        Code: "",
        ShortName: "",
        PatientList: [],
        PatientId: "",
        TrialId: "",
        Id: "",
        Age: null,
        Sex: null,
        BirthDate: null,
      },
      rules: {
        Code: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: "blur",
          },
          { max: 50, message: `${this.$t("common:ruleMessage:maxLength")} 50` },
        ],
        Age: [
          {
            pattern: /^[1-9]\d*$/,
            message: this.$t("trials:subject:formRule:checkAge"),
            trigger: "blur",
          },
          {
            type: "number",
            min: 1,
            max: 200,
            message: this.$t("trials:subject:formRule:numberAge"),
            trigger: "blur",
          },
        ],
      },
      btnLoading: false,
      siteOptions: [],
      loading: false,
      trialId: "",
    };
  },
  computed: {
    isEdit() {
      return !!this.form.Id && this.hasPermi(["role:crc"]);
    },
  },
  mounted() {
    this.trialId = this.$route.query.trialId;
    this.initForm();
  },
  methods: {
    async initForm() {
      if (Object.keys(this.data).length > 0) {
        for (const k in this.form) {
          if (this.data.hasOwnProperty(k)) {
            this.form[k] = this.data[k];
          }
        }
      }
      this.form.TrialId = this.trialId;
      this.form.PatientList.forEach((item, index) => {
        if (index === this.form.PatientList.length - 1) {
          this.form.PatientId += `${item.PatientIdStr}`;
        } else {
          this.form.PatientId += `${item.PatientIdStr}, `;
        }
      });
    },
    handleSave() {
      this.$refs.subjectForm.validate((valid) => {
        if (!valid) return;
        this.btnLoading = true;
        let data = {};
        Object.keys(this.form).forEach((key) => {
          data[key] = this.form[key];
        });
        // data.BirthDate = data.BirthDate ? new Date(data.BirthDate).toISOString() : null;
        delete data.PatientId;
        delete data.PatientList;
        addOrUpdateSubjectHir(data)
          .then((res) => {
            this.btnLoading = false;
            this.$emit("getList");
            this.$emit("close");
            this.$message.success(this.$t("common:message:savedSuccessfully"));
          })
          .catch(() => {
            this.btnLoading = false;
          });
      });
    },
    handleCancel() {
      this.$emit("close");
    },
  },
};
</script>
