<template>
    <div class="ViewPeriod">
        <div class="top-wrapper">
            <el-form :inline="true">
                <!-- 阅片期类型 -->
                <el-form-item :label="$t('trials:rpManage:viewPeriod:table:ReadingSetType')">
                    <el-select v-model="searchData.ReadingSetType" placeholder="" style="width:100px;" clearable>
                        <el-option v-for="item in $d.ReadingSetType" :key="item.id" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 阅片期名称 -->
                <el-form-item :label="$t('trials:rpManage:viewPeriod:table:ModuleName')">
                    <el-input v-model="searchData.ModuleName" style="width:100px;" clearable />
                </el-form-item>
                <!-- 中心编号 -->
                <el-form-item :label="$t('trials:rpManage:viewPeriod:table:TrialSiteId')">
                    <el-select v-model="searchData.TrialSiteId" placeholder="" style="width:100px;" clearable>
                        <el-option v-for="(site, index) of siteOptions" :key="index" :label="site.TrialSiteCode"
                            :value="site.Id" />
                    </el-select>
                </el-form-item>
                <!-- 受试者编号 -->
                <el-form-item :label="$t('trials:rpManage:viewPeriod:table:SubjectCode')">
                    <el-input v-model="searchData.SubjectCode" style="width:100px;" clearable />
                </el-form-item>
                <!-- 来源 -->
                <el-form-item :label="$t('trials:rpManage:viewPeriod:table:ReadModuleAddTypeEnum')">
                    <el-select v-model="searchData.ReadModuleAddTypeEnum" placeholder="" style="width:100px;" clearable>
                        <el-option v-for="item in $d.ReadModuleAddType" :key="item.id" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="small" @click="getList">
                        {{ $t('common:button:search') }}
                    </el-button>
                    <el-button type="primary" icon="el-icon-refresh-left" size="small" @click="handleReset">
                        {{ $t('common:button:reset') }}
                    </el-button>
                </el-form-item>
            </el-form>

        </div>
        <div class="main-wrapper">
            <el-table v-loading="loading" :data="list" stripe style="width: 100%" height="400"
                @sort-change="handleSortChange">
                <el-table-column type="index" width="40" />
                <!-- 阅片期类型 -->
                <el-table-column prop="ReadingSetType" :label="$t('trials:rpManage:viewPeriod:table:ReadingSetType')"
                    sortable="custom" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ $fd('ReadingSetType', scope.row.ReadingSetType) }}
                    </template>
                </el-table-column>
                <!-- 阅片期名称 -->
                <el-table-column prop="ModuleName" :label="$t('trials:rpManage:viewPeriod:table:ModuleName')"
                    sortable="custom" show-overflow-tooltip />
                <!-- 中心编号 -->
                <el-table-column prop="SiteCode" :label="$t('trials:rpManage:viewPeriod:table:SiteCode')"
                    sortable="custom" show-overflow-tooltip />
                <!-- 受试者编号 -->
                <el-table-column prop="SubjectCode" :label="$t('trials:rpManage:viewPeriod:table:SubjectCode')"
                    sortable="custom" show-overflow-tooltip />
                <!-- 截止访视 -->
                <el-table-column prop="VisitName" :label="$t('trials:rpManage:viewPeriod:table:VisitName')"
                    sortable="custom" show-overflow-tooltip />
                <!-- 最晚拍片日期 -->
                <el-table-column prop="LatestScanDate" :label="$t('trials:rpManage:viewPeriod:table:LatestScanDate')"
                    sortable="custom" show-overflow-tooltip />
                <!-- 来源 -->
                <el-table-column prop="ReadModuleAddTypeEnum"
                    :label="$t('trials:rpManage:viewPeriod:table:ReadModuleAddTypeEnum')" sortable="custom"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{ $fd('ReadModuleAddType', scope.row.ReadModuleAddTypeEnum) }}</span>
                    </template>
                </el-table-column>
                <!-- 任务状态 -->
                <el-table-column prop="IsGenerateTask" :label="$t('trials:rpManage:viewPeriod:table:IsGenerateTask')"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{ $fd('IsGenerateTask', scope.row.IsGenerateTask) }}</span>
                    </template>
                </el-table-column>
                <!-- 生成时间 -->
                <el-table-column prop="GenerateTaskTime"
                    :label="$t('trials:rpManage::viewPeriod:table:GenerateTaskTime')" show-overflow-tooltip />
            </el-table>
            <!-- 分页组件 -->
            <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
                @pagination="getList" />
        </div>
    </div>
</template>
<script>
import { getReadModulePageList } from '@/api/trials'
import Pagination from '@/components/Pagination'
const searchDataDefault = () => {
    return {
        TrialId: null,
        TrialSiteId: null,
        TrialReadingCriterionId: null,
        ModuleName: null,
        SubjectCode: null,
        ReadingSetType: null,
        VisitName: null,
        ReadModuleAddTypeEnum: null,
        PageIndex: 1,
        PageSize: 20,
        Asc: false,
        SortField: ''
    }
}
export default {
    name: "ViewPeriod",
    components: {
        Pagination
    },
    props: {
        siteOptions: {
            type: Array,
            default: () => {
                return []
            }
        },
        TrialReadingCriterionId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            searchData: searchDataDefault(),
            list: [],
            total: 0,
            loading: false,
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        async getList() {
            try {
                this.searchData.TrialId = this.$route.query.TrialId
                this.searchData.TrialReadingCriterionId = this.TrialReadingCriterionId
                this.loading = true
                let res = await getReadModulePageList(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)
            }
        },
        handleReset() {
            this.searchData = searchDataDefault()
            this.getList()
        },
        // 排序
        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()
        },
    }
}
</script>
<style lang="scss" scoped>
.ViewPeriod {
    margin-bottom: 10px;
}
</style>