<template>
    <BaseContainer>
        <div slot="search-container">
            <el-form :inline="true">
                <!-- 受试者编号 -->
                <el-form-item :label="$t('trials:pendingReadingTasks:table:subjectCode')">
                    <el-input v-model="searchData.SubjectCode" style="width: 130px" clearable />
                </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>
        <div slot="main-container">
            <el-table v-adaptive="{ bottomOffset: 75 }" :data="list" stripe height="100" @sort-change="handleSortChange"
                v-loading="loading">
                <el-table-column type="index" width="40" align="left" />
                <el-table-column prop="IsUrgent" :label="$t('trials:consistencyCheck:table:isUrgent')"
                    show-overflow-tooltip min-width="100">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.IsUrgent
                            ? 'danger' : 'primary'
                            ">{{ $fd('YesOrNo', scope.row.IsUrgent) }}</el-tag>
                    </template>
                </el-table-column>
                <!-- 受试者编号 -->
                <el-table-column prop="SubjectCode" min-width="100"
                    :label="$t('trials:pendingReadingTasks:table:subjectCode')" show-overflow-tooltip
                    sortable="custom" />
                <!-- 访视数量 -->
                <el-table-column prop="VisitCount" :label="$t('trials:pendingReadingTasks:table:VisitCount')"
                    show-overflow-tooltip sortable="custom" />
                <!-- dicom检查数量 -->
                <!-- <el-table-column prop="DicomStudyCount" :label="$t('trials:pendingReadingTasks:table:DicomStudyCount')"
                    show-overflow-tooltip sortable="custom" /> -->
                <!-- 非dicom检查数量 -->
                <!-- <el-table-column prop="NoneDicomStudyCount"
                    :label="$t('trials:pendingReadingTasks:table:NoneDicomStudyCount')" show-overflow-tooltip
                    sortable="custom" /> -->
                <!-- 标记访视数量 -->
                <el-table-column prop="MarkVisitCount" :label="$t('trials:pendingReadingTasks:table:MarkVisitCount')"
                    show-overflow-tooltip sortable="custom" />
                <!-- 标记dicom检查数量 -->
                <el-table-column prop="MarkDicomStudyCount"
                    :label="$t('trials:pendingReadingTasks:table:MarkDicomStudyCount')" show-overflow-tooltip
                    sortable="custom" />
                <!-- 标记非dicom检查数量 -->
                <el-table-column prop="MarkNoneDicomStudyCount"
                    :label="$t('trials:pendingReadingTasks:table:MarkNoneDicomStudyCount')" show-overflow-tooltip
                    sortable="custom" />
                <el-table-column :label="$t('common:action:action')" width="100" fixed="right">
                    <template slot-scope="scope">
                        <!-- 阅片 -->
                        <!-- <el-button :disabled="scope.row.ExistReadingApply" circle :title="scope.row.ExistReadingApply
                            ? $t(
                                'trials:pendingReadingTasks:button:ExistReadingApply'
                            )
                            : $t('trials:pendingReadingTasks:button:review')
                            " icon="el-icon-edit-outline" @click="handleReadImage(scope.row)" /> -->
                        <!-- 上传 -->
                        <el-button v-hasPermi="['role:ir']" circle icon="el-icon-upload2"
                            :title="$t('trials:pendingReadingTasks:button:upload')"
                            @click="openUploadImage(scope.row, 'upload')" />
                        <!-- 下载 -->
                        <el-button v-hasPermi="['role:ir']" circle icon="el-icon-download"
                            :title="$t('trials:pendingReadingTasks:button:download')"
                            @click="openUploadImage(scope.row, 'download')" />
                    </template>
                </el-table-column>
            </el-table>
            <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
                @pagination="getList" />
        </div>
        <upload-dicom-and-nonedicom v-if="uploadImageVisible" :SubjectId="uploadSubjectId"
            :SubjectCode="uploadSubjectCode" :Criterion="uploadTrialCriterion" :visible.sync="uploadImageVisible"
            :IsImageSegment="true" />
        <download-dicom-and-nonedicom v-if="downloadImageVisible" :SubjectId="uploadSubjectId"
            :SubjectCode="uploadSubjectCode" :Criterion="uploadTrialCriterion" :visible.sync="downloadImageVisible"
            :IsImageSegment="true" />
    </BaseContainer>
</template>
<script>
import BaseContainer from '@/components/BaseContainer'
import uploadDicomAndNonedicom from '@/components/uploadDicomAndNonedicom'
import downloadDicomAndNonedicom from '@/components/downloadDicomAndNonedicom'
import Pagination from '@/components/Pagination'
import { getTrialSubjectVisitMarkList } from "@/api/trials"
const searchDataDefault = () => {
    return {
        SubjectCode: '',
        PageIndex: 1,
        PageSize: 20,
    }
}
export default {
    name: "TargetSection",
    components: {
        BaseContainer,
        Pagination,
        'upload-dicom-and-nonedicom': uploadDicomAndNonedicom,
        'download-dicom-and-nonedicom': downloadDicomAndNonedicom,
    },
    props: {
        TrialReadingCriterionId: {
            type: String,
            default: ''
        },
        trialCriterionList: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            searchData: searchDataDefault(),
            loading: false,
            list: [],
            total: 0,

            // 上传
            downloadImageVisible: false,
            uploadImageVisible: false,
            uploadSubjectId: null,
            uploadSubjectCode: null,
            uploadTrialCriterion: {},
            uploadStatus: 'upload',
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        handleSearch() {
            this.searchData.PageIndex = 1
            this.getList()
        },
        handleReset() {
            this.searchData = searchDataDefault()
            this.getList()
        },
        async getList() {
            try {
                this.searchData.TrialId = this.$route.query.trialId
                this.searchData.TrialReadingCriterionId = this.TrialReadingCriterionId
                this.loading = true
                let res = await getTrialSubjectVisitMarkList(this.searchData)
                this.loading = false
                if (res.IsSuccess) {
                    this.list = res.Result.CurrentPageData
                    this.total = res.Result.TotalCount
                }
            } catch (err) {
                this.loading = false
                console.log(err)
            }
        },
        // 排序
        handleSortChange(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()
        },
        // 打开上传下载弹框
        openUploadImage(item, status) {
            this.uploadSubjectCode = item.SubjectCode
            this.uploadSubjectId = item.SubjectId
            let trialCriterion = this.trialCriterionList.find(item => item.TrialReadingCriterionId === this.TrialReadingCriterionId)
            this.uploadTrialCriterion = trialCriterion
            this.uploadStatus = status
            this[`${status}ImageVisible`] = true
        },
    }
}
</script>
<style lang="scss" scoped></style>