<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:inspection:title:pushRecord') }}</span>
    <div class="search">
      <el-form :inline="true" class="base-search-form">
        <!-- Called AE -->
        <el-form-item class="my_multiple" :label="$t('trials:inspection:search:CalledAE')">
          <el-select v-model="searchData.CalledAE" clearable 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="$t('trials:inspection:search:CallingAE')">
          <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:inspection:table:pushDate')">
          <el-date-picker v-model="dateValue" type="datetimerange" range-separator="-"
            :start-placeholder="$t('trials:uploadClinicalData:table:beginDate')"
            :end-placeholder="$t('trials:uploadClinicalData:table:endDate')" :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: 'StartTime', order: 'descending' }">
      <el-table-column type="index" width="40" />
      <!--Called AE-->
      <el-table-column prop="CalledAE" :label="$t('trials:inspection:table:CalledAE')" show-overflow-tooltip
        min-width="120">
      </el-table-column>
      <!--Calling AE-->
      <el-table-column prop="CallingAE" :label="$t('trials:inspection:table:CallingAE')" show-overflow-tooltip
        min-width="120">
      </el-table-column>
      <!--Calling AE IP-->
      <el-table-column prop="CallingAEIP" :label="$t('trials:inspection:table:CallingAEIP')" show-overflow-tooltip
        min-width="120">
      </el-table-column>
      <!--检查数量--->
      <el-table-column :label="$t('trials:inspection:table:StudyCount')" prop="StudyCount" min-width="90"
        show-overflow-tooltip sortable="custom" />
      <!--图像数量-->
      <el-table-column align="center" prop="FileCount" :label="$t('trials:inspection:table:FileCount')"
        show-overflow-tooltip min-width="100" sortable="custom"></el-table-column>
      <!--图像大小-->
      <el-table-column align="center" prop="FileSize" :label="$t('trials:inspection:table:FileSize')"
        show-overflow-tooltip min-width="100" sortable="custom">
        <template slot-scope="scope">
          <span>{{
            scope.row.FileSize && scope.row.FileSize > 0
              ? `${(scope.row.FileSize / 1024 / 1024).toFixed(2)}MB`
              : 0
          }}</span>
        </template>
      </el-table-column>
      <!--推送开始日期-->
      <el-table-column align="center" prop="StartTime" :label="$t('trials:inspection:table:StartTime')"
        show-overflow-tooltip min-width="180" sortable="custom"></el-table-column>
      <!--推送结束日期-->
      <el-table-column align="center" prop="EndTime" :label="$t('trials:inspection:table:EndTime')"
        show-overflow-tooltip min-width="180" sortable="custom"></el-table-column>
      <!--操作-->
      <el-table-column :label="$t('common:action:action')" min-width="80">
        <template slot-scope="scope">
          <!-- <el-button circle disabled icon="el-icon-view" :title="$t('trials:inspection:button:image')"
            @click.stop="image(scope.row)" /> -->
          <el-button circle icon="el-icon-info" :title="$t('trials:inspection:button:detail')"
            :disabled="!scope.row.UploadJsonStr" @click.stop="view(scope.row)" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
      @pagination="getList" />
    <base-model v-if="detail_model.visible" :config="detail_model">
      <template slot="dialog-body">
        <el-table :data="detailData" style="width: 100%">
          <el-table-column prop="PatientNameList" :label="$t('trials:inspection:table:PatientNameList')"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ Array.isArray(scope.row.PatientNameList) ? scope.row.PatientNameList.join(", ") : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="StudyInstanceUid" :label="$t('trials:inspection:table:StudyInstanceUid')"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="SuccessImageCount" :label="$t('trials:inspection:table:SuccessImageCount')">
          </el-table-column>
          <el-table-column prop="FailedImageCount" :label="$t('trials:inspection:table:FailedImageCount')">
          </el-table-column>
        </el-table>
      </template>
      <template slot="dialog-footer">
        <!-- 保存 -->
        <el-button size="small" type="primary" @click="detail_model.visible = false">
          {{ $t("common:button:confirm") }}
        </el-button>
      </template>
    </base-model>
  </el-dialog>
</template>
<script>
import Pagination from '@/components/Pagination'
import { getSCPImageUploadList } from '@/api/inspection.js'
import { getToken } from '@/utils/auth'
import BaseModel from '@/components/BaseModel'
const defaultSearchData = () => {
  return {
    CallingAE: null,
    CalledAE: null,
    CallingAEIP: null,
    StartTime: null,
    EndTime: null,
    PageIndex: 1,
    PageSize: 20,
    Asc: false,
    SortField: 'StartTime',
  }
}
export default {
  name: 'pushRecordList',
  components: { Pagination, BaseModel },
  props: {
    visible: {
      required: true,
      default: false,
    },
    calledAeList: {
      required: true,
      default: () => {
        return []
      },
    },
    callingAeList: {
      required: true,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      // 查询
      searchData: defaultSearchData(),
      dateValue: [],
      // 可加入项目列表
      loading: false,
      list: [],
      total: 0,
      detail_model: {
        visible: false,
        title: this.$t('trials:inspection:dialogTitle:detail'),
        width: '800px',
        appendToBody: true
      },
      detailData: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    view(row) {
      this.detailData = JSON.parse(row.UploadJsonStr).UploadList
      this.detail_model.visible = true
    },
    async getList() {
      let data = {}
      Object.keys(this.searchData).forEach((key) => {
        data[key] = this.searchData[key]
      })
      if (this.dateValue && this.dateValue[0] && this.dateValue[1]) {
        data.StartTime = this.$moment(this.dateValue[0]).format(
          'YYYY-MM-DD HH:mm:ss'
        )
        data.EndTime = this.$moment(this.dateValue[1]).format(
          'YYYY-MM-DD HH:mm:ss'
        )
      } else {
        data.StartTime = null
        data.EndTime = null
      }
      try {
        this.loading = true
        let res = await getSCPImageUploadList(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)
      }
    },
    // 查询
    handleSearch() {
      this.searchData.PageIndex = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.reset()
      this.getList()
    },
    // 初始化
    reset() {
      this.searchData = defaultSearchData()
      this.dateValue = []
    },
    // 表格排序
    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()
    },
    beforeCloseStudyDig() {
      this.$setOpenWindow()
      this.$emit('update:visible', false)
    },
    // 查看影像
    image(item) {
      let token = getToken()
      const routeData = this.$router.resolve({
        path: `/showdicom?studyId=${item.SCPStudyId}&TokenKey=${token}&type=Patient`,
      })
      let newWindow = window.open(routeData.href, '_blank')
      this.$setOpenWindow(newWindow)
    },
  },
}
</script>