<template>
  <el-dialog v-dialogDrag :visible.sync="visible" :close-on-click-modal="false" custom-class="upload-dialog"
    :fullscreen="true" :before-close="beforeClosePitentDig">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="$t('trials:subject:title:studyList')" name="patient">
        <!-- <span slot="title">{{ this.$t("trials:subject:title:studyList") }}</span> -->
        <el-table ref="patientStudyList" v-loading="loading" :data="list" stripe height="300px">
          <el-table-column type="index" width="40" />
          <!--患者ID-->
          <el-table-column prop="PatientIdStr" :label="$t('trials:uploadDicomList:table:pId')" show-overflow-tooltip
            min-width="140" sortable="custom"></el-table-column>
          <!--患者姓名-->
          <el-table-column prop="PatientName" :label="$t('trials:uploadDicomList:table:patientName')"
            show-overflow-tooltip min-width="140" sortable="custom"></el-table-column>
          <!--出生日期-->
          <el-table-column prop="PatientBirthDate" :label="$t('trials:inspection:table:birthdate')"
            show-overflow-tooltip min-width="140" sortable="custom"></el-table-column>
          <!--性别-->
          <el-table-column prop="PatientSex" :label="$t('trials:trials-myinfo:form:gender')" show-overflow-tooltip
            min-width="140" sortable="custom">
            <template slot-scope="scope">
              <span>{{ $fd("Sex", scope.row.PatientSex) }}</span>
            </template>
          </el-table-column>
          <!--操作-->
          <el-table-column :label="$t('common:action:action')" width="80"
            v-if="hasPermi(['trials:trials-panel:subject:delPatient'])">
            <template slot-scope="scope">
              <el-button v-hasPermi="['trials:trials-panel:subject:delPatient']" circle icon="el-icon-delete"
                :title="$t('trials:subject:patientStudyList:button:delete')" @click.stop="remove(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane :label="$t('trials:subject:title:confirmVistList')" name="confirmVistList">
        <confirmVistList v-if="activeName === 'confirmVistList'" ref="confirmVisitFromPatientStudy" :Patient="Patient"
          :submitMessage="submitMessage" :status="status" :showTitle="false" @close="beforeClosePitentDig" />
      </el-tab-pane>
    </el-tabs>

  </el-dialog>
</template>
<script>
import { deleteSubjectPatientBinding } from "@/api/inspection.js";
import confirmVistList from "@/views/trials/trials-inspection/components/confirm-visit-list.vue";
export default {
  name: "patientStudyList",
  components: { confirmVistList },
  props: {
    visible: {
      required: true,
      default: false,
    },
    list: {
      required: true,
      default: () => {
        return [];
      },
    },
    SubjectId: {
      required: true,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      activeName: 'patient',
      submitMessage: { SubjectId: null, TrialId: null, TrialCode: null, ResearchProgramNo: null },
      status: "visit", // 页面当前状态  trial 绑定患者  visit 确认访视
      Patient: {},
    };
  },
  methods: {
    handleClick(v) {
      this.activeName = v.name
      if (v.name === 'confirmVistList') {
        this.submitMessage.TrialId = this.$route.query.trialId
        this.submitMessage.TrialCode = this.$route.query.trialCode
        this.submitMessage.ResearchProgramNo = this.$route.query.researchProgramNo
        this.submitMessage.SubjectId = this.SubjectId
        this.Patient.PatientId = this.list.map(item => item.PatientId)
        this.$nextTick(() => {
          this.$refs.confirmVisitFromPatientStudy.getList()
        })
      }
    },
    beforeClosePitentDig() {
      this.$emit("update:visible", false);
    },
    async remove(item) {
      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: item.PatientId,
          SubjectId: this.SubjectId,
          TrialId: this.$route.query.trialId,
        };
        this.loading = true;
        let res = await deleteSubjectPatientBinding(params);
        this.loading = false;
        if (res.IsSuccess) {
          this.$message.success(this.$t("common:message:removeSuccessfully"));
          //   this.$emit("update:visible", false);
          this.$emit("getList");
          let index = this.list.findIndex(
            (i) => i.PatientId === item.PatientId
          );
          let list = [...this.list];
          list.splice(index, 1);
          this.$emit("update:list", list);
        }
      } catch (err) {
        this.loading = false;
        console.log(err);
      }
    },
  },
};
</script>