<template>
  <el-dialog
    :visible.sync="visible"
    :close-on-click-modal="false"
    :fullscreen="true"
    custom-class="upload-dialog"
    :before-close="beforeCloseStudyDig"
  >
    <span slot="title"
      >{{ $t("trials:inspection:button:addTrials") }}（{{
        $t("trials:uploadDicomList:table:patientInfo")
      }}：{{ Patient.PatientIdStr }}，{{ Patient.PatientName }}）</span
    >
    <div class="top">
      <p class="line">{{ $t("trials:inspection:message:checkAddTrials") }}</p>
      <el-form
        ref="submitMessageForm"
        :inline="true"
        :model="submitMessage"
        class="demo-form-inline"
        :rules="rules"
        :label-width="isEN?'170px':'130px'"
      >
        <div>
          <!--项目-->
          <el-form-item
            :label="$t('trials:workbench:label:trialsStats')"
            prop="TrialId"
            label-width="50px"
          >
            <trialsSelect
              :options="trialList"
              :data.sync="submitMessage"
              :status="status"
            />
          </el-form-item>
          <div style="display: inline-block">
            <!--受试者编号-->
            <el-form-item
              :label="$t('trials:crcQuestion:table:subjectId')"
              prop="SubjectId"
            >
              <el-select
                v-model="submitMessage.SubjectId"
                clearable
                filterable
                :disabled="status === 'visit' || !submitMessage.TrialId"
                style="width: 300px"
              >
                <el-option
                  v-for="item in subjectIdList"
                  :key="item.SubejctId"
                  :label="
                    item.ShortName || item.Sex
                      ? `${item.SubjectCode}（${item.ShortName}，${
                          item.Sex ? $fd('Sex', item.Sex) : ''
                        }）`
                      : item.SubjectCode
                  "
                  :value="item.SubejctId"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!--添加受试者-->
            <el-button
              type="primary"
              v-if="status === 'trial' && submitMessage.TrialId"
              @click="addSubject_model.visible = true"
            >
              {{ $t("trials:selectSubject:button:add") }}
            </el-button>
            <div>
              <el-form-item
                :label="$t('trials:study:tabpane:bindPatient')"
                :style="{ opacity: bindPatientTip ? 1 : 0 }"
              >
                <span v-if="bindPatientTip">{{
                  bindPatientTip.map((item) => item.PatientIdStr).join(", ")
                }}</span>
              </el-form-item>
            </div>
          </div>
          <div class="btnBox">
            <!--确认添加按钮-->
            <el-button
              type="primary"
              v-if="status === 'trial'"
              @click="addTrials"
              :loading="btnLoading"
            >
              {{ $t("trials:addRP:button:confirmAddPR") }}
            </el-button>
            <!--移除按钮-->
            <el-button
              type="primary"
              v-else
              @click="remove"
              :loading="btnLoading"
            >
              {{ $t("common:button:remove") }}
            </el-button>
          </div>
        </div>
      </el-form>
    </div>
    <confirmVisitList
      ref="confirmVisit"
      :Patient="PatientData"
      :submitMessage="submitMessage"
      :status="status"
      @close="beforeCloseStudyDig"
    />
    <base-model v-if="addSubject_model.visible" :config="addSubject_model">
      <template slot="dialog-body">
        <el-form
          ref="addSubjectForm"
          :inline="true"
          :model="addSubjectForm"
          class="demo-form-inline"
          :rules="addSubjectrules"
        >
          <!--受试者编号-->
          <el-form-item
            :label="$t('trials:addSuject:form:subjectCode')"
            prop="SubjectCode"
            label-width="150px"
          >
            <el-input
              v-model="addSubjectForm.SubjectCode"
              :maxlength="14"
              clearable
              @input="
                addSubjectForm.SubjectCode = addSubjectForm.SubjectCode.replace(
                  /[^0-9a-zA-Z\_\-]/g,
                  ''
                )
              "
              @focus="errMessage = null"
            ></el-input>
            <span class="errTip" v-if="errMessage">{{ errMessage }}</span>
          </el-form-item>
        </el-form>
      </template>
      <template slot="dialog-footer">
        <el-button type="primary" @click="addSubject">
          {{ $t("common:button:confirm") }}
        </el-button>
        <el-button @click="addSubject_model.visible = false">
          {{ $t("common:button:cancel") }}
        </el-button>
      </template>
    </base-model>
  </el-dialog>
</template>
<script>
import Pagination from "@/components/Pagination";
import trialsSelect from "./trials-select.vue";
import confirmVisitList from "./confirm-visit-list.vue";
import BaseModel from "@/components/BaseModel";
import {
  getPatientJoinTrialInitSelectList,
  getTrialSubejctSelectList,
  addSubjectPatientBinding,
  deleteSubjectPatientBinding,
  verifyTrialSubject,
} from "@/api/inspection.js";
export default {
  name: "addTrialsList",
  components: { Pagination, trialsSelect, confirmVisitList, BaseModel },
  props: {
    visible: {
      required: true,
      default: false,
    },
    Patient: {
      required: true,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      // 绑定项目相关提交数据
      status: "trial", // 页面当前状态  trial 绑定项目  visit 确认访视
      trialList: [],
      btnLoading: false,
      submitMessage: {
        SubjectId: null,
        TrialId: null,
        TrialCode: null,
        ResearchProgramNo: null,
      },
      PatientData: {},
      subjectIdList: [], // 受试者列表
      rules: {
        TrialId: [
          {
            required: true,
            message: this.$t("trials:inspection:message:checkAddTrials"),
            trigger: "change",
          },
        ],
        SubjectId: [
          {
            required: true,
            message: this.$t("trials:inscept:rules:selectOrInputSubject"),
            trigger: "change",
          },
        ],
      },
      // 新增受试者
      addSubject_model: {
        visible: false,
        title: this.$t("trials:selectSubject:button:add"),
        width: "500px",
        appendToBody: true,
      },
      addSubjectForm: {
        SubjectCode: null,
      },
      addSubjectrules: {
        SubjectCode: [
          {
            required: true,
            message: this.$t("trials:subject:format:notSubject"),
            trigger: ["blur", "change"],
          },
          {
            validator: (rule, value, callback) => {
              let flag = this.subjectIdList.some(
                (item) => item.SubjectCode === value
              );
              if (flag) {
                callback(
                  new Error(this.$t("trials:addSubject:format:hasSubject"))
                );
              } else {
                callback();
              }
            },
            message: this.$t("trials:addSubject:format:hasSubject"),
            trigger: ["blur", "change"],
          },
        ],
      },
      errMessage: null,
    };
  },
  computed: {
    bindPatientTip() {
      if (!this.submitMessage.SubjectId) return false;
      let PatientList = [];
      this.subjectIdList.some((item) => {
        if (
          item.SubejctId === this.submitMessage.SubjectId &&
          item.PatientList &&
          item.PatientList.length > 0
        ) {
          PatientList.push(...item.PatientList);
        }
      });
      if (PatientList.length <= 0) return false;
      return PatientList;
    },
    isEN(){
      return this.$i18n.locale !== 'zh'
    }
  },
  created() {
    this.getTrialList();
  },
  watch: {
    "submitMessage.TrialId": {
      handler() {
        if (this.submitMessage.TrialId) {
          this.getTrialSubejctSelectList(this.submitMessage.TrialId);
        } else {
          this.subjectIdList = [];
        }
      },
    },
    "addSubject_model.visible": {
      handler() {
        if (!this.addSubject_model.visible) {
          this.addSubjectForm.SubjectCode = null;
        }
      },
    },
  },
  methods: {
    // 新增受试者(前端操作未同步后端)
    async addSubject() {
      try {
        this.errMessage = null;
        let validate = await this.$refs.addSubjectForm.validate();
        if (!validate) return;
        let data = {
          TrialId: this.submitMessage.TrialId,
          SubjectCode: this.addSubjectForm.SubjectCode,
        };
        let res = await verifyTrialSubject(data);
        if (res.IsSuccess) {
          let subject = {
            SubjectCode: this.addSubjectForm.SubjectCode,
            SubejctId: this.addSubjectForm.SubjectCode,
          };
          this.subjectIdList.unshift(subject);
          this.submitMessage.SubjectId = this.addSubjectForm.SubjectCode;
          this.addSubject_model.visible = false;
        }
      } catch (err) {
        console.log(err);
        if (err.Code === 5) {
          this.getTrialSubejctSelectList(this.submitMessage.TrialId, null);
          this.$emit("getList");
          this.errMessage = err.ErrorMessage;
        }
      }
    },
    // 获取受试者列表
    async getTrialSubejctSelectList(id, SubjectId = null) {
      let data = {
        TrialId: id,
      };
      try {
        let res = await getTrialSubejctSelectList(data);
        if (res.IsSuccess) {
          this.subjectIdList = res.Result || [];
          this.submitMessage.SubjectId = SubjectId;
          if (SubjectId) {
            this.$nextTick(() => {
              Object.keys(this.Patient).forEach((key) => {
                this.PatientData[key] = this.Patient[key];
              });
              let patient = this.bindPatientTip
                ? this.bindPatientTip.map((item) => item.PatientId)
                : [];
              this.PatientData.PatientId = [this.Patient.PatientId, ...patient];
              this.$refs.confirmVisit.getList(true);
              this.$refs.confirmVisit.getSubjectVisitSelectList();
            });
          }
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 关闭弹框
    beforeCloseStudyDig() {
      this.$emit("update:visible", false);
    },
    // 加入项目
    async addTrials() {
      if (this.btnLoading) return;
      try {
        let validate = await this.$refs.submitMessageForm.validate();
        if (!validate) return;
        let data = {
          TrialId: this.submitMessage.TrialId,
          PatientIdList: [this.Patient.PatientId],
        };
        if (this.submitMessage.SubjectId.length === 36) {
          data.SubjectId = this.submitMessage.SubjectId;
        } else {
          data.SubjectCode = this.submitMessage.SubjectId;
        }
        this.btnLoading = true;
        let res = await addSubjectPatientBinding(data);
        this.btnLoading = false;
        if (res.IsSuccess) {
          this.submitMessage.SubjectId = res.Result;
          this.getTrialSubejctSelectList(
            this.submitMessage.TrialId,
            res.Result
          );
          this.$message.success(this.$t("common:message:addedSuccessfully"));
          this.status = "visit";
          this.$emit("getList");
        }
      } catch (err) {
        this.btnLoading = false;
        console.log(err);
      }
    },
    // 移除项目
    async remove() {
      try {
        let confirm = await this.$confirm(
          this.$t("trials:sitesList:message:removeSite"),
          {
            type: "warning",
            distinguishCancelAndClose: true,
            confirmButtonText: this.$t("common:button:confirm"),
            cancelButtonText: this.$t("recompose:button:cancel"),
          }
        );
        if (confirm !== "confirm") return;
        let params = {
          PatientId: this.Patient.PatientId,
          SubjectId: this.submitMessage.SubjectId,
          TrialId: this.submitMessage.TrialId,
        };
        this.btnLoading = true;
        let res = await deleteSubjectPatientBinding(params);
        this.btnLoading = false;
        if (res.IsSuccess) {
          this.getTrialSubejctSelectList(this.submitMessage.TrialId);
          this.$refs.confirmVisit.reset(true);
          this.status = "trial";
          this.$message.success(this.$t("common:message:removedSuccessfully"));
          this.$emit("getList");
          this.$refs.confirmVisit.changeVisitStatus(true);
        }
      } catch (err) {
        this.btnLoading = false;
        console.log(err);
      }
    },
    // 获取项目列表
    async getTrialList() {
      let data = {};
      data.PatientId = this.Patient.PatientId;
      try {
        let res = await getPatientJoinTrialInitSelectList(data);
        if (res.IsSuccess) {
          this.trialList = res.Result;
        }
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.errTip {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 100%;
  left: 0;
}
.top {
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.btnBox {
  float: right;
}
.search {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .form {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.line {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &::after {
    display: block;
    content: "";
    flex: 1;
    height: 1px;
    border-top: 1px solid #ddd;
  }
}
.selectAndBtn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.demo-form-inline {
  width: 100%;
}
</style>