<template>
  <BaseContainer>
    <!-- 搜索框 -->
    <template slot="search-container">
      <el-form :inline="true" class="base-search-form">
        <!-- 患者ID/患者姓名 -->
        <el-form-item :label="$t('trials:uploadDicomList:table:pId')">
          <el-input
            v-model="searchData.PatientIdStr"
            style="width: 100px"
            clearable
          />
        </el-form-item>
        <el-form-item :label="$t('trials:uploadDicomList:table:patientName')">
          <el-input
            v-model="searchData.PatientName"
            style="width: 100px"
            clearable
          />
        </el-form-item>
        <!-- Called AE -->
        <el-form-item class="my_multiple" label="Called AE">
          <el-select
            v-model="searchData.CalledAEList"
            clearable
            multiple
            style="width: 140px"
          >
            <el-option
              v-for="(item, index) of calledAeList"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- Calling AE -->
        <el-form-item class="my_multiple" label="Calling AE">
          <el-select
            v-model="searchData.callingAE"
            clearable
            style="width: 140px"
          >
            <el-option
              v-for="(item, index) of callingAeList"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 研究名称 -->
        <el-form-item :label="$t('trials:trials-list:table:researchName')">
          <el-input
            v-model="searchData.ExperimentName"
            style="width: 100px"
            clearable
          />
        </el-form-item>
        <!-- 最新接收时间 -->
        <el-form-item :label="$t('trials:inspection:table:latestReceiveTime')">
          <el-date-picker
            v-model="dateValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <!-- 查询 -->
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">
            {{ $t("common:button:search") }}
          </el-button>
          <!-- 重置 -->
          <el-button
            type="primary"
            icon="el-icon-refresh-left"
            @click="handleReset"
          >
            {{ $t("common:button:reset") }}
          </el-button>
        </el-form-item>
      </el-form>
    </template>

    <!-- 检查列表 -->
    <template slot="main-container">
      <el-table
        ref="inspectionList"
        v-loading="loading"
        v-adaptive="{ bottomOffset: 60 }"
        :data="list"
        stripe
        height="100"
        @sort-change="handleSortByColumn"
        :default-sort="{ prop: 'LatestPushTime', order: 'descending' }"
      >
        <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"
        ></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="TrialList"
          :label="$t('trials:trials-list:table:researchName')"
          show-overflow-tooltip
          min-width="160"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleOpenDialog(scope.row, 'research')"
              v-for="(item, index) in scope.row.TrialList"
              :key="`TrialList${index}`"
            >
              <span>{{
                index === scope.row.TrialList.length - 1
                  ? `${item.ExperimentName}（${item.VisitCount}）`
                  : `${item.ExperimentName}（${item.VisitCount}），`
              }}</span>
            </el-button>
            <!-- <span v-else>{{ scope.row.VisitName }}</span> -->
          </template>
        </el-table-column>
        <!-- 检查数 -->
        <el-table-column
          prop="StudyCount"
          :label="$t('trials:studyList:table:count')"
          show-overflow-tooltip
          min-width="160"
          sortable="custom"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.StudyCount >= 1"
              type="text"
              @click="handleOpenDialog(scope.row, 'study')"
            >
              <span>{{ scope.row.StudyCount }}</span>
            </el-button>
            <span v-else>{{ scope.row.StudyCount }}</span>
          </template>
        </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-column :label="$t('common:action:action')" width="250">
          <template slot-scope="scope">
            <el-button
              circle
              icon="el-icon-plus"
              :title="$t('trials:inspection:button:addTrials')"
              @click.stop="handleOpenDialog(scope.row, 'add')"
            />
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <pagination
        class="page"
        :total="total"
        :page.sync="searchData.PageIndex"
        :limit.sync="searchData.PageSize"
        @pagination="getList"
      />
    </template>

    <!--研究项目列表-->
    <researchTrialsList
      v-if="researchTrialsVisible"
      :visible.sync="researchTrialsVisible"
      :Patient="selectPatient"
      @getList="getList"
      @handleOpenDialog="handleOpenDialog"
    />
    <!--可加入项目列表-->
    <addTrialsList
      v-if="addTrialsVisible"
      :visible.sync="addTrialsVisible"
      :Patient="selectPatient"
      @getList="getList"
      @handleOpenDialog="handleOpenDialog"
    />
    <!--查看检查列表-->
    <viewStudyList
      v-if="studyTrialsVisible"
      :visible.sync="studyTrialsVisible"
      :Patient="selectPatient"
    />
  </BaseContainer>
</template>
<script>
import BaseContainer from "@/components/BaseContainer";
import Pagination from "@/components/Pagination";
import researchTrialsList from "./components/research-trials-list";
import addTrialsList from "./components/add-trials-list";
import viewStudyList from "./components/view-study-list";
import { getPatientList } from "@/api/inspection.js";
import { getDicomCalledAEList, getDicomCallingAEList } from "@/api/dicomAE.js";

const defaultSearchData = () => {
  return {
    PatientIdStr: null,
    PatientName: null,
    CalledAEList: [],
    callingAE: null,
    ExperimentName: null,
    Asc: false,
    BeginPushTime: null,
    EndPushTime: null,
    SortField: "LatestPushTime",
    PageIndex: 1,
    PageSize: 10,
  };
};
export default {
  name: "inspection",
  components: {
    BaseContainer,
    Pagination,
    researchTrialsList,
    addTrialsList,
    viewStudyList,
  },
  data() {
    return {
      // 查询
      searchData: defaultSearchData(),
      calledAeList: [],
      callingAeList: [],
      dateValue: [],
      // 检查列表
      total: 0,
      loading: false,
      list: [],
      // 选中的患者
      selectPatient: {},
      // 研究项目列表
      researchTrialsVisible: false,
      // 可加入项目列表
      addTrialsVisible: false,
      // 查看检查列表
      studyTrialsVisible: false,
    };
  },
  created() {
    this.getDicomCalledAEList();
    this.getDicomCallingAEList();
    this.getList();
  },
  methods: {
    // 获取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);
      }
    },
    // 获取列表数据
    async getList() {
      let data = {};
      Object.keys(this.searchData).forEach((key) => {
        data[key] = this.searchData[key];
      });
      if (this.dateValue[0] && this.dateValue[1]) {
        data.BeginPushTime = this.dateValue[0].toISOString();
        data.EndPushTime = this.dateValue[1].toISOString();
      } else {
        data.BeginPushTime = null;
        data.EndPushTime = null;
      }
      try {
        this.loading = true;
        let res = await getPatientList(data);
        this.loading = false;
        if (res.IsSuccess) {
          this.list = res.Result.CurrentPageData;
          this.total = res.Result.TotalCount;
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 查询
    handleSearch() {
      this.searchData.PageIndex = 1;
      this.getList();
    },
    // 重置
    handleReset() {
      this.searchData = defaultSearchData();
      this.$refs.inspectionList.clearSort();
      this.dateValue = [];
      this.getList();
    },
    // 表格排序
    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();
    },
    // 打开弹框
    handleOpenDialog(item, key) {
      this[`${key}TrialsVisible`] = true;
      this.selectPatient = item;
    },
  },
};
</script>
<style lang="scss" scoped>
</style>