<template>
  <BaseContainer>
    <template slot="search-container">
      <el-form :inline="true">
        <!--患者信息-->
        <el-form-item
          :label="
            $t('trials:visit:crcUpload:uploadDicomPacs:search:patientInfo')
          "
          prop="TrialSiteKeyInfo"
        >
          <el-input
            v-model="searchData.PatientInfo"
            size="small"
            clearable
            style="width: 190px"
            :placeholder="
              $t('trials:visit:crcUpload:uploadDicomPacs:search:placeholder')
            "
          />
        </el-form-item>
        <!--检查技术-->
        <el-form-item
          :label="
            $t('trials:visit:crcUpload:uploadDicomPacs:search:modalities')
          "
          prop="CalledAE"
        >
          <el-select v-model="searchData.Modalities" clearable>
            <el-option
              v-for="item of DicomModalityList"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!--检查日期-->
        <el-form-item
          :label="$t('trials:visit:crcUpload:uploadDicomPacs:search:studyTime')"
        >
          <el-date-picker
            v-model="datetimerange"
            type="datetimerange"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="handleDatetimeChange"
          />
        </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-button
            type="primary"
            icon="el-icon-plus"
            :disabled="tableSelectData.length <= 0"
            @click="handleAddList"
          >
            {{ $t("common:button:add") }}
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <template slot="main-container">
      <el-table
        v-loading="loading"
        v-adaptive="{ bottomOffset: 85 }"
        height="100"
        :data="list"
        class="table"
        @selection-change="handleSelectChange"
        @sort-change="handleSortByColumn"
        :default-sort="{ prop: 'StudyTime', order: 'descending' }"
      >
        <el-table-column type="selection" align="center" width="45" />
        <el-table-column type="index" width="50" />
        <!--患者信息-->
        <el-table-column
          :label="
            $t('trials:visit:crcUpload:uploadDicomPacs:table:patientMessage')
          "
          prop="PatientIdStr"
          min-width="140"
          show-overflow-tooltip
          sortable="custom"
        >
          <template slot="header">
            <el-tooltip placement="top">
              <div slot="content">
                {{ $t("trials:uploadDicomList:table:pId") }}<br />
                {{ $t("trials:uploadDicomList:table:patientName") }}<br />
                {{ $t("trials:uploadDicomList:table:pInfo") }}
              </div>
              <span>{{ $t("trials:uploadDicomList:table:patientInfo") }}</span>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <div style="line-height: 15px">
              <div>
                <span v-if="scope.row.PatientIdStr"
                  ><span style="font-weight: 500">PID: </span
                  >{{ scope.row.PatientIdStr }}</span
                >
                <span v-else style="color: #f44336">N/A</span>
              </div>
              <div>
                <span :class="[scope.row.PatientName ? '' : 'colorOfRed']">
                  {{ scope.row.PatientName ? scope.row.PatientName : "N/A" }}
                </span>
              </div>
              <div>
                <span :class="[scope.row.PatientSex ? '' : 'colorOfRed']">
                  {{ scope.row.PatientSex ? scope.row.PatientSex : "N/A" }},
                </span>

                <span :class="[scope.row.PatientAge ? '' : 'colorOfRed']">
                  {{ scope.row.PatientAge ? scope.row.PatientAge : "N/A" }},
                </span>

                <span :class="[scope.row.PatientBirthDate ? '' : 'colorOfRed']">
                  {{
                    scope.row.PatientBirthDate
                      ? scope.row.PatientBirthDate
                      : "N/A"
                  }}
                </span>
              </div>
            </div>
          </template>
        </el-table-column>
        <!--检查申请号-->
        <el-table-column
          :label="$t('trials:visit:crcUpload:uploadDicomPacs:table:accNumber')"
          prop="AccessionNumber"
          min-width="90"
          show-overflow-tooltip
          sortable="custom"
        />
        <!--检查模态-->
        <el-table-column
          :label="$t('trials:visit:crcUpload:uploadDicomPacs:table:modalities')"
          prop="Modalities"
          min-width="120"
          show-overflow-tooltip
          sortable="custom"
        />
        <!--检查部位-->
        <el-table-column
          :label="
            $t('trials:visit:crcUpload:uploadDicomPacs:table:bodyPartExamined')
          "
          prop="BodyPartExamined"
          min-width="120"
          show-overflow-tooltip
          sortable="custom"
        />
        <!--检查描述-->
        <el-table-column
          :label="
            $t('trials:visit:crcUpload:uploadDicomPacs:table:description')
          "
          prop="Description"
          min-width="160"
          show-overflow-tooltip
          sortable="custom"
        />
        <!--序列数量-->
        <el-table-column
          :label="
            $t('trials:visit:crcUpload:uploadDicomPacs:table:seriesCount')
          "
          prop="SeriesCount"
          show-overflow-tooltip
          sortable="custom"
        />
        <!--图像数量-->
        <el-table-column
          :label="
            $t('trials:visit:crcUpload:uploadDicomPacs:table:instanceCount')
          "
          prop="InstanceCount"
          show-overflow-tooltip
          sortable="custom"
        />
        <!--检查日期-->
        <el-table-column
          :label="$t('trials:visit:crcUpload:uploadDicomPacs:table:studyTime')"
          prop="StudyTime"
          min-width="160"
          show-overflow-tooltip
          sortable="custom"
        />
        <el-table-column :label="$t('common:action:action')" fixed="right">
          <template slot-scope="scope">
            <!-- 添加 -->
            <el-button
              :title="$t('common:button:add')"
              type="text"
              @click="handleAdd(scope.row)"
              >{{ $t("common:button:add") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <pagination
        class="page"
        :total="total"
        :page.sync="searchData.PageIndex"
        :limit.sync="searchData.PageSize"
        @pagination="getList"
      />
    </template>
  </BaseContainer>
</template>
      <script>
import {
  getVisitPatientStudyFilterList,
  submitVisitStudyBinding,
  getDicomModalityList,
} from "@/api/trials";
import BaseContainer from "@/components/BaseContainer";
import Pagination from "@/components/Pagination";
import moment from "moment";
const searchDataDefault = () => {
  return {
    PatientInfo: null,
    EarliestStudyTime: null,
    LatestStudyTime: null,
    Modalities: null,
    PageIndex: 1,
    PageSize: 20,
    Asc: true,
    SortField: "StudyTime",
  };
};
export default {
  components: { BaseContainer, Pagination },
  props: {
    subjectVisitId: {
      type: String,
      required: true,
    },
    subjectId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      moment,
      searchData: searchDataDefault(),
      list: [],
      total: 0,
      loading: false,
      datetimerange: [],
      tableSelectData: [],
      DicomModalityList: [],
    };
  },
  created() {
    this.getList();
    this.getDicomModalityList();
  },
  methods: {
    // 获取检查技术列表
    async getDicomModalityList() {
      try {
        let params = {
          TrialId: this.$route.query.trialId,
        };
        let res = await getDicomModalityList(params);
        if (res.IsSuccess) {
          this.DicomModalityList = res.Result;
        }
      } catch (err) {
        console.log(err);
      }
    },
    handleAddList() {
      if (this.tableSelectData.length < 0)
        return this.$message.warning(
          this.$t("trials:visit:crcUpload:uploadDicomPacs:message:notCheck")
        );
      let arr = this.tableSelectData.map((item) => item.SCPStudyId);
      this.submitVisitStudyBinding(arr);
    },
    handleAdd(row) {
      let arr = [row.SCPStudyId];
      this.submitVisitStudyBinding(arr);
    },
    // 添加检查
    async submitVisitStudyBinding(arr) {
      try {
        let data = {
          TrialId: this.$route.query.trialId,
          SubjectVisitId: this.subjectVisitId,
          SubjectId: this.subjectId,
          ScpStudyIdList: arr,
        };
        this.loading = true;
        let res = await submitVisitStudyBinding(data);
        this.loading = false;
        if (res.IsSuccess) {
          this.getList();
          this.$emit("getList");
        }
      } catch (err) {
        this.loading = false;
        console.log(err);
      }
    },
    // 表格选择
    handleSelectChange(selection) {
      // console.log(selection, "handleSelectChange");
      this.tableSelectData = selection;
    },
    getList() {
      this.loading = true;
      let data = {
        SubjectVisitId: this.subjectVisitId,
        SubjectId: this.subjectId,
        ...this.searchData,
      };
      getVisitPatientStudyFilterList(data)
        .then((res) => {
          this.loading = false;
          this.list = res.Result.CurrentPageData;
          this.total = res.Result.TotalCount;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleDatetimeChange(val) {
      if (val) {
        this.searchData.EarliestStudyTime = val[0];
        this.searchData.LatestStudyTime = val[1];
      } else {
        this.searchData.EarliestStudyTime = "";
        this.searchData.LatestStudyTime = "";
      }
    },
    handleSearch() {
      this.searchData.PageIndex = 1;
      this.getList();
    },
    // 重置列表查询
    handleReset() {
      this.datetimerange = null;
      this.handleDatetimeChange();
      this.searchData = searchDataDefault();
      this.getList();
    },
    // 排序
    handleSortByColumn(column) {
      if (column.order === "ascending") {
        this.searchData.Asc = true;
      } else {
        this.searchData.Asc = false;
      }
      this.searchData.SortField = column.prop;
      this.searchData.PageIndex = 1;
      this.getList();
    },
  },
};
</script>
      