<template>
  <BaseContainer>
    <template slot="search-container">
      <el-form :inline="true">
        <!-- 文件名称 -->
        <el-form-item :label="$t('trials:data-sync:table:fileName')" prop="FileName">
          <el-input v-model="searchData.FileName" size="small" clearable style="width: 120px" />
        </el-form-item>
        <!-- 文件路径 -->
        <el-form-item :label="$t('trials:data-sync:table:filePath')" prop="Path">
          <el-input v-model="searchData.Path" size="small" clearable  />
        </el-form-item>
        <!-- 任务状态 -->
        <el-form-item :label="$t('trials:data-sync:table:jobState')" prop="JobState">
          <el-select v-model="searchData.JobState" clearable style="width: 120px">
            <el-option 
              v-for="item of $d.JobState"
              :key="'JobState' + item.label" 
              :value="item.value" 
              :label="item.label" 
            />
          </el-select>
        </el-form-item>
        <!-- 任务开始日期 -->
        <el-form-item :label="$t('trials:data-sync:table:startTime')">
          <el-date-picker
            v-model="searchData.StartTime"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            :picker-options="beginPickerOption"
            style="width:140px;"
          />
        </el-form-item>
        <!-- 任务结束日期 -->
        <el-form-item :label="$t('trials:data-sync:table:endTime')">
          <el-date-picker
            v-model="searchData.EndTime"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            :picker-options="endpickerOption"
            style="width:140px;"
          />
        </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 v-loading="loading" v-adaptive="{ bottomOffset: 70 }" height="100" :data="list"
        class="table" @sort-change="handleSortByColumn" :default-sort="{ prop: 'CreateTime', order: 'descending' }">
        <el-table-column type="index" width="50" />
        <el-table-column :label="$t('trials:data-sync:table:jobCode')" prop="Id" min-width="90" show-overflow-tooltip/>
        <el-table-column :label="$t('trials:data-sync:table:fileName')" prop="FileName" min-width="90" show-overflow-tooltip sortable="custom">
        </el-table-column>
        <el-table-column :label="$t('trials:data-sync:table:filePath')" prop="Path" min-width="90" show-overflow-tooltip/>
        <el-table-column :label="$t('trials:data-sync:table:jobState')" prop="JobState" min-width="90" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.JobState === 1" type="info">
              {{ $fd('JobState', scope.row.JobState) }}
            </el-tag>
            <el-tag v-else-if="scope.row.JobState === 2" type="success">
              {{ $fd('JobState', scope.row.JobState) }}
            </el-tag>
            <el-tag v-else-if="scope.row.JobState === 3" type="danger" :title="scope.row.Msg">
              {{ $fd('JobState', scope.row.JobState) }}
            </el-tag>
            <el-tag v-else>{{ $fd('JobState', scope.row.JobState) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('trials:data-sync:table:startTime')" prop="StartTime" min-width="90" show-overflow-tooltip sortable="custom" />
        <el-table-column :label="$t('trials:data-sync:table:endTime')" prop="EndTime" min-width="90" show-overflow-tooltip sortable="custom" />
        <el-table-column :label="$t('trials:data-sync:table:createTime')" prop="CreateTime" min-width="90" show-overflow-tooltip sortable="custom" />
        
        
        <el-table-column :label="$t('common:action:action')" min-width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <!-- 再次执行 -->
            <el-button type="primary" size="mini" :disabled="scope.row.JobState !== 3" @click="execute(scope.row)">
              {{ $t('trials:data-sync:button:execute') }}
            </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 { getUploadFileSyncRecordList, batchAddSyncFileTask } from '@/api/file'
import BaseContainer from '@/components/BaseContainer'
import Pagination from '@/components/Pagination'
import moment from 'moment'
const searchDataDefault = () => {
  return {
    TrialId: '',
    StudyCode: '',
    SubjectCode: '',
    VisitName: '',
    FileUploadRecordId: '',
    JobState: null,
    FileName: '',
    Path: '',
    StartTime: '',
    EndTime: '',
    Asc: false,
    SortField: '',
    PageIndex: 1,
    PageSize: 20,
  }
}
export default {
  name: 'TaskList',
  components: { BaseContainer, Pagination },
  props: {
    fileUploadRecordId: {
      type: String,
      default: '',
    },
    path: {
      type: String,
      default: '',
    },
    rowInfo: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  data() {
    return {
      moment,
      searchData: searchDataDefault(),
      list: [],
      total: 0,
      loading: false,
      datetimerange: [],
      beginPickerOption: {
        disabledDate: time => {
          if (this.searchData.EndTime) {
            return time.getTime() >= new Date(this.searchData.EndTime).getTime()
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
      endpickerOption: {
        disabledDate: time => {
          if (this.searchData.StartTime) {
            return time.getTime() > Date.now() || time.getTime() <= new Date(this.searchData.StartTime).getTime() - 86400000
          } else {
            return time.getTime() > Date.now()
          }
        }
      }
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.searchData.Path = this.path
      this.searchData.FileUploadRecordId = this.fileUploadRecordId
      this.getList()
    })
  },
  methods: {
    async getList() {
      try {
        this.loading = true
        this.searchData.TrialId = this.$route.query.trialId
        if (Object.keys(this.rowInfo).length !== 0) {
          this.searchData.StudyCode = this.rowInfo.StudyCode
          this.searchData.SubjectCode = this.rowInfo.SubjectCode
          this.searchData.VisitName = this.rowInfo.VisitName
        }
        
        let res = await getUploadFileSyncRecordList(this.searchData)
        this.loading = false
        this.list = res.Result.CurrentPageData
        this.total = res.Result.TotalCount
      } catch(e) {
        this.loading = false
        console.log(e)
      }
    },
    async execute(row) {
      try {
        this.loading = true
        let params = {
          fileUploadRecordIdList: [row.FileUploadRecordId]
        }
        let res = await batchAddSyncFileTask(params)
        if (res.IsSuccess) {
          this.$message.success(this.$t('trials:data-sync:msg:executeSuccessfully')) //'执行成功！'
        }
        
        this.loading = false
        this.getList()
      } catch(e) {
        this.loading = false
        console.log(e)
      }
      
    },
    fileSizeFormatter(size) {
      if (!size) return
      return (size / Math.pow(1024, 2)).toFixed(3) + 'MB'
    },
    handleDatetimeChange(val) {
      if (val) {
        this.searchData.BeginDate = val[0]
        this.searchData.EndDate = val[1]
      } else {
        this.searchData.BeginDate = ''
        this.searchData.EndDate = ''
      }
    },
    handleSearch() {
      this.searchData.PageIndex = 1
      this.getList()
    },
    // 重置列表查询
    handleReset() {
      this.datetimerange = null
      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>