<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:imageInspect:viewStudy:message:viewStudy") }}（{{
        $t("trials:imageInspect:viewStudy:message:patientInfo")
      }}：{{ Patient.PatientIdStr }}，{{ Patient.PatientName }}）</span
    >
    <div class="search">
      <el-form :inline="true" class="base-search-form">
        <!-- 检查类型 -->
        <el-form-item
          :label="$t('trials:imageInspect:viewStudy:table:modality')"
        >
          <el-select
            v-model="searchData.Modalities"
            clearable
            style="width: 140px"
          >
            <el-option
              v-for="item of $d.Modality"
              :key="item.id"
              :label="item.value"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 检查日期 -->
        <el-form-item
          :label="$t('trials:imageInspect:viewStudy:table:studyDate')"
        >
          <el-date-picker
            v-model="dateValue"
            type="datetimerange"
            :range-separator="$t('baseForm:daterange:rangeSeparator')"
            :start-placeholder="$t('imageInspect:daterange:startPlaceholder')"
            :end-placeholder="$t('imageInspect:daterange:endPlaceholder')"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
          >
          </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>
    </div>
    <!--检查列表-->
    <el-table
      ref="viewStudyList"
      v-loading="loading"
      v-adaptive="{ bottomOffset: 60 }"
      :data="list"
      stripe
      height="100"
      @sort-change="handleSortByColumn"
      :default-sort="{ prop: 'StudyTime', order: 'descending' }"
    >
      <el-table-column type="index" width="40" />
      <!--检查描述-->
      <el-table-column
        align="center"
        prop="Description"
        :label="$t('trials:imageInspect:viewStudy:table:studyDescription')"
        show-overflow-tooltip
        min-width="120"
        sortable="custom"
      ></el-table-column>
      <!--检查类型-->
      <el-table-column
        align="center"
        prop="Modalities"
        :label="$t('trials:imageInspect:viewStudy:table:modality')"
        show-overflow-tooltip
        min-width="120"
        sortable="custom"
      ></el-table-column>
      <!--Called AE-->
      <el-table-column
        prop="CalledAE"
        :label="$t('trials:imageInspect:viewStudy:table:CalledAE')"
        show-overflow-tooltip
        min-width="120"
      >
      </el-table-column>
      <!--Calling AE-->
      <el-table-column
        prop="CallingAE"
        :label="$t('trials:imageInspect:viewStudy:table:CallingAE')"
        show-overflow-tooltip
        min-width="120"
      >
      </el-table-column>
      <!--序列数量-->
      <el-table-column
        align="center"
        prop="SeriesCount"
        :label="$t('trials:imageInspect:viewStudy:table:seriesCount')"
        show-overflow-tooltip
        min-width="100"
        sortable="custom"
      ></el-table-column>
      <!--图像数量-->
      <el-table-column
        align="center"
        prop="InstanceCount"
        :label="$t('trials:imageInspect:viewStudy:table:instanceCount')"
        show-overflow-tooltip
        min-width="100"
        sortable="custom"
      ></el-table-column>
      <!--检查日期-->
      <el-table-column
        align="center"
        prop="StudyTime"
        :label="$t('trials:imageInspect:viewStudy:table:studyDate')"
        show-overflow-tooltip
        min-width="180"
        sortable="custom"
      ></el-table-column>
      <!--操作-->
      <el-table-column :label="$t('common:action:action')" min-width="150">
        <template slot-scope="scope">
          <!-- 影像 -->
          <el-button
            circle
            icon="el-icon-view"
            :title="$t('trials:imageInspect:viewStudy:button:image')"
            @click.stop="image(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 { getPatientStudyList } from "@/api/trials.js";
import { getToken } from "@/utils/auth";

const defaultSearchData = () => {
  return {
    Modalities: null,
    EarliestStudyTime: null,
    LatestStudyTime: null,
    PatientId: null,
    Asc: false,
    SortField: "StudyTime",
  };
};
export default {
  name: "viewStudyList",
  components: { Pagination },
  props: {
    visible: {
      required: true,
      default: false,
    },
    Patient: {
      required: true,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      // 查询
      searchData: defaultSearchData(),
      dateValue: [],
      // 可加入项目列表
      loading: false,
      list: [],
      newWindow: null,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 关闭弹框
    beforeCloseStudyDig() {
      if (this.newWindow) {
        this.newWindow.close();
      }
      this.$emit("update:visible", false);
    },
    // 获取列表
    async getList() {
      let data = {};
      Object.keys(this.searchData).forEach((key) => {
        data[key] = this.searchData[key];
      });
      data.PatientId = this.Patient.PatientId;
      if (this.dateValue && this.dateValue[0] && this.dateValue[1]) {
        data.EarliestStudyTime = this.dateValue[0];
        data.LatestStudyTime = this.dateValue[1];
      } else {
        data.EarliestStudyTime = null;
        data.LatestStudyTime = null;
      }

      try {
        this.loading = true;
        let res = await getPatientStudyList(data);
        this.loading = false;
        if (res.IsSuccess) {
          this.list = res.Result.CurrentPageData;
        }
      } catch (err) {
        this.loading = false;
        console.log(err);
      }
    },
    // 查询
    handleSearch() {
      this.searchData.PageIndex = 1;
      this.getList();
    },
    // 重置
    handleReset() {
      this.reset();
      this.getList();
    },
    // 初始化
    reset() {
      this.searchData = defaultSearchData();
      this.dateValue = [];
    },
    // 查看影像
    image(item) {
      let token = getToken();
      const routeData = this.$router.resolve({
        path: `/showdicom?studyId=${item.SCPStudyId}&TokenKey=${token}&type=Patient`,
      });
      this.newWindow = window.open(routeData.href, "_blank");
    },
    // 查看报告
    report() {},
    // 表格排序
    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();
    },
  },
};
</script>
<style lang="scss" scoped>
</style>