<template>
  <el-dialog
    :visible.sync="visible"
    :close-on-click-modal="false"
    :fullscreen="true"
    custom-class="upload-dialog"
    :before-close="beforeCloseStudyDig"
  >
    <span slot="title">
      <span
        >{{ $t('trials:uploadDicomList:table:patientInfo') }}（{{
          Patient.PatientIdStr
        }}，{{ Patient.PatientName }}）</span
      >|<span>
        {{
          $t('trials:inspection:research-trials-list:table:joinTrialsNumber')
        }}（{{ total }}）</span
      ></span
    >
    <!-- <div class="top">
      <p>
        <span
          >{{ $t('trials:uploadDicomList:table:patientInfo') }}（{{
            Patient.PatientIdStr
          }}，{{ Patient.PatientName }}）</span
        >|<span>
          {{
            $t('trials:inspection:research-trials-list:table:joinTrialsNumber')
          }}（{{ total }}）</span
        >
      </p>
      <el-button type="primary" @click="addTrials">
        {{ $t("trials:inspection:button:addTrials") }}
      </el-button>
    </div> -->
    <!--参与项目列表-->
    <el-table
      ref="researchTrialsList"
      v-loading="loading"
      v-adaptive="{ bottomOffset: 60 }"
      :data="list"
      stripe
      height="100"
      @sort-change="handleSortByColumn"
      :default-sort="{ prop: 'CreateTime', order: 'descending' }"
    >
      <el-table-column type="index" width="40" />
      <!--研究方案号-->
      <el-table-column
        prop="ResearchProgramNo"
        :label="$t('trials:trials-list:table:researchNumber')"
        show-overflow-tooltip
        min-width="120"
        sortable
      ></el-table-column>
      <!--试验名称-->
      <el-table-column
        prop="ExperimentName"
        :label="$t('trials:trials-list:table:experimentName')"
        show-overflow-tooltip
        min-width="120"
        sortable
      ></el-table-column>
      <!--申办方-->
      <el-table-column
        prop="Sponsor"
        :label="$t('trials:trials-list:table:sponsor')"
        show-overflow-tooltip
        min-width="120"
        sortable
      ></el-table-column>
      <!--匹配受试者编号-->
      <el-table-column
        prop="Code"
        :label="$t('trials:inspectionTrials:table:subjectId')"
        show-overflow-tooltip
        min-width="140"
        sortable
      ></el-table-column>
      <!--姓名-->
      <el-table-column
        prop="ShortName"
        :label="$t('trials:researchStaff:table:Name')"
        show-overflow-tooltip
        min-width="120"
        sortable
      ></el-table-column>
      <!--年龄-->
      <el-table-column
        prop="Age"
        :label="$t('trials:subject:table:age')"
        show-overflow-tooltip
        min-width="120"
        sortable
      ></el-table-column>
      <!--性别-->
      <el-table-column
        prop="Sex"
        :label="$t('trials:subject:table:gender')"
        show-overflow-tooltip
        min-width="100"
        sortable
      >
        <template slot-scope="scope">
          <span>{{ $fd('Sex', scope.row.Sex) }}</span>
        </template>
      </el-table-column>
      <!--状态-->
      <el-table-column
        prop="TrialStatusStr"
        :label="$t('trials:trials-list:table:status')"
        show-overflow-tooltip
        min-width="100"
        sortable
      >
        <template slot-scope="scope">
          <el-tag
            :type="
              ['info', 'primary', 'warning', 'danger'][
                ['Initializing', 'Ongoing', 'Completed', 'Stopped'].indexOf(
                  scope.row.TrialStatusStr
                )
              ]
            "
            >{{ $fd('TrialStatusEnum', scope.row.TrialStatusStr) }}</el-tag
          >
        </template></el-table-column
      >
      <!--加入时间-->
      <el-table-column
        prop="CreateTime"
        :label="$t('trials:staff:table:joinTime')"
        show-overflow-tooltip
        min-width="140"
        sortable
      ></el-table-column>
      <!--操作-->
      <el-table-column :label="$t('common:action:action')" min-width="100">
        <template slot-scope="scope">
          <!-- 详情 -->
          <el-button
            circle
            icon="el-icon-view"
            :title="$t('trials:trials-list:action:panel')"
            @click.stop="detail(scope.row)"
          />
          <!-- 移除项目 -->
          <el-button
            circle
            v-hasPermi="['trials:trialsInspection:delTrials']"
            icon="el-icon-delete"
            :title="$t('common:button:remove')"
            @click.stop="remove(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <pagination
      class="page"
      :total="total"
      :page.sync="searchData.PageIndex"
      :limit.sync="searchData.PageSize"
      @pagination="getList"
    />
  </el-dialog>
</template>
<script>
import Pagination from '@/components/Pagination'
import {
  getPatientJoinedTrialList,
  deleteSubjectPatientBinding,
} from '@/api/inspection.js'
const defaultSearchData = () => {
  return {
    PageIndex: 1,
    PageSize: 20,
    Asc: false,
    SortField: 'CreateTime',
  }
}
export default {
  name: 'researchTrialsList',
  components: { Pagination },
  props: {
    visible: {
      required: true,
      default: false,
    },
    Patient: {
      required: true,
      default: () => {
        return {}
      },
    },
  },
  created() {
    this.getList()
  },
  data() {
    return {
      // 参与项目列表
      searchData: defaultSearchData(),
      total: 0,
      loading: false,
      list: [],
    }
  },
  methods: {
    // 关闭弹框
    beforeCloseStudyDig() {
      this.$emit('update:visible', false)
    },
    // 加入项目
    addTrials() {
      this.$emit('update:visible', false)
      this.$emit('handleOpenDialog', this.Patient, 'add')
    },
    // 获取列表
    async getList() {
      let data = {
        PatientId: this.Patient.PatientId,
        ...this.searchData,
      }
      try {
        this.loading = true
        let res = await getPatientJoinedTrialList(data)
        this.loading = false
        if (res.IsSuccess) {
          this.list = res.Result.CurrentPageData
          this.total = res.Result.TotalCount
        }
      } catch (err) {
        this.loading = false
        console.log(err)
      }
    },
    // 详情
    detail(item) {
      this.$emit('update:visible', false)
      let query = {
        trialId: item.TrialId,
        trialCode: item.Code,
        researchProgramNo: item.ResearchProgramNo,
      }
      this.$router.push({
        path: '/trials/trials-panel/subject/subject-list',
        query,
      })
    },
    // 表格排序
    handleSortByColumn(sort) {
      this.searchData.SortField = sort.prop
      if (sort.order === 'ascending') this.searchData.Asc = true
      if (sort.order === 'descending') this.searchData.Asc = false
      if (!sort.order) this.searchData.SortField = null
      this.getList()
    },
    // 移除项目
    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: this.Patient.PatientId,
          SubjectId: item.SubjectId,
          TrialId: item.TrialId,
        }
        this.loading = true
        let res = await deleteSubjectPatientBinding(params)
        this.loading = false
        if (res.IsSuccess) {
          this.getList()
          this.$message.success(this.$t('common:message:removedSuccessfully'))
          this.$emit('getList')
        }
      } catch (err) {
        this.loading = false
        console.log(err)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.top {
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>