<template>
  <el-container class="participant-container">
    <el-header style="height: 50px">
      <div class="filter-container">
        <!-- 患者ID/患者姓名 -->
        <span>{{ $t("trials:uploadDicomList:table:pId") }}:</span>
        <el-input v-model="searchData.PatientIdStr" size="mini" class="mr" clearable />
        <span>{{ $t("trials:uploadDicomList:table:patientName") }}:</span>
        <el-input v-model="searchData.PatientName" size="mini" class="mr" clearable />
        <!-- Called AE -->
        <span>{{ $t("trials:subject:table:CalledAE") }}</span>
        <el-select v-model="searchData.CalledAEList" clearable multiple class="mr">
          <el-option v-for="(item, index) of calledAeList" :key="index" :label="item" :value="item">
          </el-option>
        </el-select>
        <!-- Calling AE -->
        <span>{{ $t("trials:subject:table:CallingAE") }}</span>
        <el-select v-model="searchData.callingAE" clearable class="mr">
          <el-option v-for="(item, index) of callingAeList" :key="index" :label="item" :value="item">
          </el-option>
        </el-select>
        <!-- 查询 -->
        <el-button type="primary" size="mini" icon="el-icon-search" @click="handleSearch">
          {{ $t("common:button:search") }}
        </el-button>
        <!-- 重置 -->
        <el-button size="mini" type="primary" icon="el-icon-refresh-left" @click="handleReset">
          {{ $t("common:button:reset") }}
        </el-button>

        <el-button type="primary" size="mini" style="margin-left: auto" :disabled="tableSelectData.length === 0"
          :loading="btnLoading" icon="el-icon-plus" @click="handleAssign">
          {{ $t("common:button:add") }}
        </el-button>
      </div>
    </el-header>
    <el-main>
      <div class="data-table">
        <el-table ref="subjectPatientList" v-loading="loading" :data="list" stripe height="400"
          @selection-change="handleSelectChange" @sort-change="handleSortByColumn"
          :default-sort="{ prop: 'LatestPushTime', order: 'descending' }">
          <el-table-column type="selection" align="center" width="45" />
          <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>
          <!--Called AE-->
          <el-table-column prop="CalledAEList" label="Called AE" show-overflow-tooltip min-width="140">
            <template slot-scope="scope">
              <span v-for="(item, index) in scope.row.CalledAEList" :key="`CalledAEList${index}`">{{
                index === scope.row.CalledAEList.length - 1
                  ? item
                  : `${item}, `
              }}</span>
            </template>
          </el-table-column>
          <!--Calling AE-->
          <el-table-column prop="CallingAEList" label="Calling AE" show-overflow-tooltip min-width="140">
            <template slot-scope="scope">
              <span v-for="(item, index) in scope.row.CallingAEList" :key="`CallingAEList${index}`">{{
                index === scope.row.CallingAEList.length - 1
                  ? item
                  : `${item}, `
              }}</span>
            </template>
          </el-table-column>
          <!--检查数量-->
          <el-table-column prop="SCPStudyCount" :label="$t('trials:inspection:table:SCPStudyCount')"
            show-overflow-tooltip min-width="140" sortable="custom"></el-table-column>
          <!--最新接收时间-->
          <el-table-column prop="LatestPushTime" :label="$t('trials:inspection:table:latestReceiveTime')"
            show-overflow-tooltip min-width="140" sortable="custom"></el-table-column>
        </el-table>
      </div>
    </el-main>
    <div class="pagination" style="text-align: right; margin-top: 5px">
      <pagination :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
        @pagination="getList" />
    </div>
  </el-container>
</template>
<script>
import Pagination from "@/components/Pagination";
import { getPatientInitList } from "@/api/trials/subject.js";
import { getDicomCalledAEList, getDicomCallingAEList } from "@/api/dicomAE.js";
const defaultSearchData = () => {
  return {
    PatientIdStr: null,
    PatientName: null,
    CalledAEList: [],
    callingAE: null,
    ExperimentName: null,
    Asc: false,
    SortField: "LatestPushTime",
    PageIndex: 1,
    PageSize: 20,
  };
};
export default {
  name: "subjectPatientList",
  components: { Pagination },
  props: {
    visible: {
      required: true,
      default: false,
    },
    submitMessage: {
      required: true,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      // 查询
      searchData: defaultSearchData(),
      calledAeList: [],
      callingAeList: [],
      // 列表
      list: [],
      total: 0,
      loading: false,
      // 提交数据
      tableSelectData: [],
      btnLoading: false,
    };
  },
  created() {
    this.getList();
    this.getDicomCalledAEList();
    this.getDicomCallingAEList();
  },
  methods: {
    // 确定添加
    handleAssign() {
      this.$emit("addPatient", this.tableSelectData);
      this.beforeCloseStudyDig();
    },
    // 获取列表
    async getList() {
      let data = {};
      Object.keys(this.searchData).forEach((key) => {
        data[key] = this.searchData[key];
      });
      data.TrialId = this.$route.query.trialId;
      if (this.submitMessage.SubjectId.length === 36) {
        data.SubjectId = this.submitMessage.SubjectId;
      }
      try {
        this.loading = true;
        let res = await getPatientInitList(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);
      }
    },
    // 关闭弹框
    beforeCloseStudyDig() {
      this.$emit("update:visible", false);
    },
    // 表格选择
    handleSelectChange(selection) {
      // console.log(selection);
      this.tableSelectData = selection;
    },
    // 表格排序
    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();
    },
    // 查询
    handleSearch() {
      this.searchData.PageIndex = 1;
      this.getList();
    },
    // 重置
    handleReset() {
      this.searchData = defaultSearchData();
      this.$refs.subjectPatientList.clearSort();
      this.getList();
    },
    // 获取calledAE列表
    async getDicomCalledAEList() {
      try {
        let res = await getDicomCalledAEList();
        if (res.IsSuccess) {
          this.calledAeList = res.Result;
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 获取callingAE列表
    async getDicomCallingAEList() {
      try {
        let res = await getDicomCallingAEList();
        if (res.IsSuccess) {
          this.callingAeList = res.Result;
        }
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.participant-container {
  height: 100%;

  .el-header {
    .filter-container {
      display: flex;
      align-items: center;

      span {
        font-size: 13px;
        margin-right: 5px;
      }

      .mr {
        margin-right: 5px;
        width: 120px;
      }
    }
  }

  .el-main {
    padding: 0px;
  }

  .el-footer {
    padding: 0 20px;
  }
}
</style>