/* eslint-disable */
<template>
  <BaseContainer>
    <template slot="search-container">
      <el-form :inline="true">
        <!-- 受试者编号 -->
        <el-form-item :label="$t('trials:downloadMonitor:table:subjectId')">
          <el-input
            v-model="searchData.SubjectCode"
            style="width: 120px"
            clearable
          />
        </el-form-item>
        <!-- IP -->
        <el-form-item :label="$t('trials:downloadMonitor:table:IP')">
          <el-input v-model="searchData.Ip" style="width: 120px" clearable />
        </el-form-item>
        <!-- 用户名称 -->
        <el-form-item :label="$t('trials:downloadMonitor:table:userName')">
          <el-input v-model="searchData.Name" style="width: 120px" clearable />
        </el-form-item>
        <!-- 用户类型 -->
        <el-form-item
          class="my_multiple"
          :label="$t('trials:downloadMonitor:table:userType')"
        >
          <el-select
            v-model="searchData.UserType"
            style="width: 140px"
            clearable
          >
            <el-option
              v-for="item of $d.UserType"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 影像类型 -->
        <el-form-item
          class="my_multiple"
          :label="$t('trials:downloadMonitor:table:imageType')"
        >
          <el-select
            v-model="searchData.ImageType"
            style="width: 140px"
            clearable
          >
            <el-option
              v-for="item of $d.downloadImageType"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('trials:downloadMonitor:table:downloadTime')">
          <el-date-picker
            v-model="datetimerange"
            type="datetimerange"
            :default-time="['00:00:00', '23:59:59']"
            :start-placeholder="$t('trials:loginLog:table:beginTime')"
            :end-placeholder="$t('trials:loginLog:table:endTime')"
            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-download"
            @click="handleExport"
          >
            {{ $t('common:button:export') }}
          </el-button> -->
        </el-form-item>
      </el-form>
    </template>
    <template slot="main-container">
      <el-table
        v-adaptive="{ bottomOffset: 60 }"
        v-loading="loading"
        :data="list"
        stripe
        height="100"
        @sort-change="handleSortByColumn"
        :default-sort="{ prop: 'DownloadStartTime', order: 'descending' }"
      >
        <el-table-column type="index" width="40" align="left" />
        <!-- 受试者编号 -->
        <el-table-column
          prop="SubjectCode"
          min-width="130"
          :label="$t('trials:downloadMonitor:table:subjectId')"
          show-overflow-tooltip
          sortable="custom"
        />
        <!-- IP -->
        <el-table-column
          prop="IP"
          min-width="80"
          :label="$t('trials:downloadMonitor:table:IP')"
          show-overflow-tooltip
          sortable="custom"
        />
        <!-- 访视名 -->
        <el-table-column
          prop="VisitName"
          min-width="100"
          :label="$t('trials:downloadMonitor:table:visitName')"
          show-overflow-tooltip
          sortable="custom"
        />
        <!-- 用户名 -->
        <el-table-column
          prop="UserName"
          min-width="100"
          :label="$t('trials:downloadMonitor:table:user')"
          show-overflow-tooltip
          sortable="custom"
        />
        <!-- 用户姓名 -->
        <el-table-column
          prop="UserFullName"
          min-width="100"
          :label="$t('trials:downloadMonitor:table:userName')"
          show-overflow-tooltip
          sortable="custom"
        />
        <!-- 用户类型 -->
        <el-table-column
          prop="VisitName"
          min-width="100"
          :label="$t('trials:downloadMonitor:table:userType')"
          show-overflow-tooltip
          sortable="custom"
        >
          <template slot-scope="scope">
            <span>
              {{ $fd('UserType', scope.row.UserTypeEnum) }}
            </span>
          </template>
        </el-table-column>
        <!-- 检查数量 -->
        <el-table-column
          prop="VisitName"
          min-width="100"
          :label="$t('trials:downloadMonitor:table:studyNum')"
          show-overflow-tooltip
          sortable="custom"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.DicomStudyCount + scope.row.NoneDicomStudyCount
            }}</span>
          </template>
        </el-table-column>
        <!-- 影像类型 -->
        <el-table-column
          prop="ImageType"
          min-width="150"
          :label="$t('trials:downloadMonitor:table:imageType')"
          show-overflow-tooltip
          sortable="custom"
        >
          <template slot-scope="scope">
            <el-tag>
              {{ $fd('downloadImageType', scope.row.ImageType) }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 下载影像数量 -->
        <el-table-column
          prop="ImageCount"
          min-width="100"
          :label="$t('trials:downloadMonitor:table:downloadImageNum')"
          show-overflow-tooltip
          sortable="custom"
        />
        <!-- 下载影像大小 -->
        <el-table-column
          prop="ImageSize"
          min-width="130"
          :label="$t('trials:downloadMonitor:table:downloadImageSize')"
          show-overflow-tooltip
          sortable="custom"
        >
          <template slot-scope="scope">
            {{ fileSizeFormatter(scope.row.ImageSize) }}
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column
          prop="IsSuccess"
          min-width="100"
          :label="$t('trials:downloadMonitor:table:status')"
          show-overflow-tooltip
          sortable="custom"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.IsSuccess ? 'success' : 'danger'">
              {{ $fd('downloadIsSuccess', scope.row.IsSuccess) }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 下载开始时间 -->
        <el-table-column
          prop="DownloadStartTime"
          min-width="130"
          :label="$t('trials:downloadMonitor:table:downloadStartTime')"
          show-overflow-tooltip
          sortable="custom"
        />
        <!-- 下载结束时间 -->
        <el-table-column
          prop="DownloadEndTime"
          min-width="130"
          :label="$t('trials:downloadMonitor:table:downloadEndTime')"
          show-overflow-tooltip
          sortable="custom"
        />
        <!-- 总共用时 -->
        <el-table-column
          prop="UploadIntervalStr"
          min-width="100"
          :label="$t('trials:downloadMonitor:table:totalTime')"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.UploadIntervalStr }}
          </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 { getTrialDownloadList } from '@/api/load'
import Pagination from '@/components/Pagination'
import BaseContainer from '@/components/BaseContainer'
const searchDataDefault = () => {
  return {
    SortField: 'DownloadStartTime',
    Asc: false,
    PageIndex: 1,
    PageSize: 20,
    TrialId: '',
    IsSuccess: null,
    StudyCode: null,
    DownloadStartTime: null,
    DownloadEndTime: null,
    Ip: null,
    ImageType: null,
    UserType: null,
    Name: null,
  }
}
export default {
  components: { BaseContainer, Pagination },
  data() {
    return {
      list: [],
      total: 0,
      loading: false,
      searchData: searchDataDefault(),
      datetimerange: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      this.searchData.TrialId = this.$route.query.trialId
      getTrialDownloadList(this.searchData)
        .then((res) => {
          this.list = res.Result.CurrentPageData
          this.total = res.Result.TotalCount
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 获取site下拉框数据
    getSite() {
      getTrialSiteSelect(this.trialId).then((res) => {
        this.siteOptions = res.Result
      })
    },
    // 获取访视下拉框数据
    getVisitPlanOptions() {
      getTrialVisitStageSelect(this.trialId).then((res) => {
        this.visitPlanOptions = res.Result
      })
    },
    fileSizeFormatter(size) {
      if (!size) return
      return (size / Math.pow(1024, 2)).toFixed(3) + 'M'
    },
    handleReset() {
      this.searchData = searchDataDefault()
      this.datetimerange = []
      this.getList()
    },
    handleSearch() {
      this.searchData.PageIndex = 1
      this.getList()
    },
    // 排序
    handleSortByColumn(column) {
      if (column.order === 'ascending') {
        this.searchData.Asc = true
      } else {
        this.searchData.Asc = false
      }
      this.searchData.SortField = column.prop
      this.getList()
    },
    handleDatetimeChange(val) {
      if (val) {
        this.searchData.DownloadStartTime = val[0]
        this.searchData.DownloadEndTime = val[1]
      } else {
        this.searchData.DownloadStartTime = ''
        this.searchData.DownloadEndTime = ''
      }
    },
  },
}
</script>