<template>
    <div class="FullCheck">
        <div class="upload-container">
            <p class="title">{{ $t('trials:consistencyCheck:fullCheck:title') }}</p>
            <el-upload class="upload-demo" action accept=".xlsx,.xls" :before-upload="beforeUpload"
                :http-request="handleUploadFile" :on-preview="handlePreview" :show-file-list="true" :limit="1"
                :on-exceed="handleExceed">
                <el-button size="small" type="primary" :loading="loading">
                    {{ $t('trials:consistencyCheck:dialogButton:upload') }}
                </el-button>
                <span slot="tip" style="margin-left:10px;" class="el-upload__tip">
                    ({{ $t('trials:consistencyCheck:message:excelFileOnly') }})
                </span>
            </el-upload>
        </div>
        <el-table ref="consistencyTable" v-loading="loading" :element-loading-text="loadingText"
            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
            v-adaptive="{ bottomOffset: 60 }" :data="list" stripe height="100" @sort-change="handleSortByColumn">
            <el-table-column type="index" width="40" />
            <!-- 核查时间 -->
            <el-table-column prop="CreateTime" :label="$t('trials:consistencyCheck:fullCheck:table:createTime')"
                show-overflow-tooltip min-width="110" sortable="custom" />
            <!-- 影像检查记录 -->
            <el-table-column prop="FileName" :label="$t('trials:consistencyCheck:fullCheck:table:fileName')"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click.stop="download(scope.row, 'RelativePath')">{{
                        scope.row.FileName
                    }}</el-button>
                </template>
            </el-table-column>
            <!-- 核查状态 -->
            <el-table-column prop="CheckState" :label="$t('trials:consistencyCheck:fullCheck:table:checkState')"
                show-overflow-tooltip min-width="110" sortable="custom">
                <template slot-scope="scope">
                    <span>{{ $fd("fullCheckState", scope.row.CheckState) }}</span>
                </template>
            </el-table-column>
            <!-- 核查记录 -->
            <el-table-column prop="ResultPath" :label="$t('trials:consistencyCheck:fullCheck:table:resultPath')"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click.stop="download(scope.row, 'ResultPath')">{{
                        $t('trials:consistencyCheck:fullCheck:ResultPath')
                    }}</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
            @pagination="getList" />
    </div>
</template>
<script>
import { uploadVisitCheckExcel, getConsistencyCheckFileList } from '@/api/trials'
import Pagination from '@/components/Pagination'
import { downLoadFile } from '@/utils/stream.js'
const searchDataDefault = () => {
    return {
        PageIndex: 1,
        PageSize: 20,
        SortField: '',
        Asc: false
    }
}
export default {
    name: "FullCheck",
    components: {
        Pagination,
    },
    data() {
        return {
            loading: false,
            trialId: this.$route.query.trialId,
            searchData: searchDataDefault(),
            total: 0,
            list: [],
            loadingText: ''
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        async download(row, type) {
            let url = this.OSSclientConfig.basePath + row[type]
            let name = `DataReconciliation_${Date.now()}.xlsx`
            if (type === 'RelativePath') name = row.FileName
            await downLoadFile(url, name)
        },
        // 获取质疑列表
        getList() {
            this.loading = true
            this.searchData.TrialId = this.trialId
            getConsistencyCheckFileList(this.searchData)
                .then((res) => {
                    this.loading = false
                    this.list = res.Result.CurrentPageData
                    this.total = res.Result.TotalCount
                })
                .catch(() => {
                    this.loading = false
                })
        },
        beforeUpload(file) {
            // 检测文件类型是否符合要求
            if (this.checkFileSuffix(file.name)) {
                return true
            } else {
                // Must be xls or xlsx format
                this.$alert(this.$t('trials:consistencyCheck:message:xlsx'))

                return false
            }
        },
        handleUploadFile(param) {
            this.loading = true
            this.loadingText = this.$t('trials:consistencyCheck:fullCheck:loading')
            uploadVisitCheckExcel(this.trialId, param.file, true).then(res => {
                this.loadingText = ''
                this.loading = false
                // this.$emit('refreshTable')
                this.getList()
            }).catch(() => {
                this.loading = false
            })
        },
        handlePreview(file) {
            if (file.fullPath) {
                window.open(file.fullPath, '_blank')
            }
        },
        handleExceed(files, fileList) {
            // Upload is currently limited to 1 file
            this.$message.warning(this.$t('trials:consistencyCheck:message:onlyOneFile'))
        },
        checkFileSuffix(fileName) {
            var typeArr = ['xls', 'xlsx']
            var extendName = fileName.substring(fileName.lastIndexOf('.') + 1).toLocaleLowerCase()
            if (typeArr.indexOf(extendName) !== -1) {
                return true
            } else {
                return false
            }
        },
        // 排序
        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>
<style lang="scss" scoped>
.upload-container {
    height: 100px;
    display: flex;

    .title {
        margin: 0;
        line-height: 30px;
    }
}
</style>