<template>
    <div>
        <el-tabs type="border-card" v-model="activeName">
            <template v-for="item in tabPaneList">
                <el-tab-pane :label="$t(`uploadDicomAndNonedicom:label:TargetSection_${item}`)" :name="item">
                    <BaseContainer v-if="activeName == item">
                        <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: 85 }" :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">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.MarkIVUSVisitCount || 0
                                            }}</span>
                                    </template>
                                </el-table-column>
                                <!-- 标记访视数量 -->
                                <el-table-column prop="MarkVisitCount"
                                    :label="$t('trials:pendingReadingTasks:table:MarkOCTVisitCount')"
                                    show-overflow-tooltip sortable="custom">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.MarkOCTVisitCount ||
                                            0
                                            }}</span>
                                    </template>
                                </el-table-column>
                                <!-- 标记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 prop="LatestDownloadTime" min-width="100"
                                    :label="$t('trials:pendingReadingTasks:table:latestDownloadTime')"
                                    show-overflow-tooltip sortable="custom" />
                                <!-- 上传时间 -->
                                <el-table-column prop="LatestUploadTime" min-width="100"
                                    :label="$t('trials:pendingReadingTasks:table:latestUploadTime')"
                                    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', 'role:pm', 'role:apm']" circle
                                            icon="el-icon-upload2"
                                            :title="$t('trials:pendingReadingTasks:button:upload')"
                                            @click="openUploadImage(scope.row, 'upload')" />
                                        <!-- 下载 -->
                                        <el-button v-hasPermi="['role:ir', 'role:pm', 'role:apm']" 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" :forbid="forbid" />
                        <download-dicom-and-nonedicom v-if="downloadImageVisible" :SubjectId="uploadSubjectId"
                            :SubjectCode="uploadSubjectCode" :Criterion="uploadTrialCriterion"
                            :visible.sync="downloadImageVisible" :IsImageSegment="true" :forbid="forbid" />
                    </BaseContainer>
                </el-tab-pane>
            </template>

        </el-tabs>
    </div>

</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: '',
        State: 0,
        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 []
            }
        },
        forbid: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            activeName: '0',
            tabPaneList: ['0', '1', '2'],
            searchData: searchDataDefault(),
            loading: false,
            list: [],
            total: 0,

            // 上传
            downloadImageVisible: false,
            uploadImageVisible: false,
            uploadSubjectId: null,
            uploadSubjectCode: null,
            uploadTrialCriterion: {},
            uploadStatus: 'upload',
        }
    },
    watch: {
        downloadImageVisible(v) {
            if (!v) {
                this.getList()
            }
        },
        uploadImageVisible(v) {
            if (!v) {
                this.getList()
            }
        },
        activeName() {
            this.getList()
        }
    },
    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.searchData.State = this.activeName
                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>