<template>
    <BaseContainer class="reuploa-audit-wrapper">
        <!-- 搜索框 -->
        <template slot="search-container">
            <el-form :inline="true">
                <!-- 中心编号 -->
                <el-form-item :label="$t('trials:reuploadAudit:table:siteId')">
                    <el-select v-model="searchData.TrialSiteId" clearable filterable style="width: 120px"
                        placeholder="">
                        <el-option v-for="(item, index) of siteOptions" :key="index" :label="item.TrialSiteCode"
                            :value="item.TrialSiteId" />
                    </el-select>
                </el-form-item>
                <!-- 受试者编号 -->
                <el-form-item :label="$t('trials:reuploadAudit:table:subjectId')">
                    <el-input v-model="searchData.SubjectCode" style="width: 100px" clearable />
                </el-form-item>
                <!-- 访视名称 -->
                <el-form-item :label="$t('trials:reuploadAudit:table:visitName')">
                    <el-select v-model="searchData.VisitPlanArray" style="width: 200px" clearable multiple
                        :collapse-tags="true" placeholder="">
                        <el-option v-for="(item, index) of visitPlanOptions" :key="index" :label="item.VisitName"
                            :value="item.VisitNum">
                            <span style="float: left">{{ item.VisitName }}</span>
                        </el-option>
                        <el-option key="Other" label="Out of Plan" value="1.11" />
                    </el-select>
                </el-form-item>
                <!-- 申请人 -->
                <el-form-item class="my_multiple" :label="$t('trials:reuploadAudit:table:CreateUserId')">
                    <el-select v-model="searchData.CreateUserId" style="width: 140px" clearable placeholder="">
                        <el-option v-for="(item) of userOptions" :key="item.CreateUserId" :label="item.FullName"
                            :value="item.CreateUserId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 申请人角色 -->
                <el-form-item class="my_multiple" :label="$t('trials:reuploadAudit:table:ApplyUserRole')">
                    <el-select v-model="searchData.ApplyUserRole" style="width: 140px" clearable placeholder="">
                        <el-option v-for="(item) of $d.ImageBackApplyEnum" :key="item.id" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 申请时间 -->
                <el-form-item :label="$t('trials:reuploadAudit:table:createTime')">
                    <el-date-picker v-model="timeListC" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                        type="datetimerange" :default-time="['00:00:00', '23:59:59']" @change="changeTimeListC"
                        style="width: 360px" />
                </el-form-item>
                <!-- 审核状态 -->
                <el-form-item :label="$t('trials:reuploadAudit:table:auditState')" class="my_multiple">
                    <el-select v-model="searchData.ImageBackState" clearable style="width: 140px" placeholder="">
                        <el-option v-for="item of $d.ImageBackstateEnum" :key="item.id" :value="item.value"
                            :label="item.label" />
                    </el-select>
                </el-form-item>
                <!-- 审核通过时间 -->
                <el-form-item :label="$t('trials:reuploadAudit:table:auditTime')">
                    <el-date-picker v-model="timeList" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                        type="datetimerange" :default-time="['00:00:00', '23:59:59']" @change="changeTimeList"
                        style="width: 360px" />
                </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-button type="primary" @click="handleExport"
                        v-if="hasPermi(['trials:trials-panel:visit:reupload-audit:export'])">
                        {{ $t('common:button:export') }}
                    </el-button>
                </el-form-item>
            </el-form>
        </template>

        <!-- 重传审批列表 -->
        <template slot="main-container">
            <el-table ref="reuploadAuditList" v-loading="loading" v-adaptive="{ bottomOffset: 60 }" :data="list" stripe
                height="100" @sort-change="handleSortByColumn">
                <!-- 是否加急 -->
                <el-table-column prop="IsUrgent" :label="$t('trials:reuploadAudit:table:isUrgent')"
                    show-overflow-tooltip width="120" sortable="custom">
                    <template slot-scope="scope">
                        <el-button v-if="
                            scope.row.IsUrgent &&
                            hasPermi(['trials:trials-panel:visit:reuploa-audit:set-urgent'])
                        " type="danger" size="mini" :disabled="!(userTypeEnumInt === 1 || userTypeEnumInt === 3)"
                            @click="handleUrgentStatus(scope.row)">
                            {{ $fd('YesOrNo', scope.row.IsUrgent) }}
                        </el-button>
                        <el-button v-else-if="
                            !scope.row.IsUrgent &&
                            hasPermi(['trials:trials-panel:visit:reuploa-audit:set-urgent'])
                        " size="mini" type="primary" :disabled="!(userTypeEnumInt === 1 || userTypeEnumInt === 3)"
                            @click="handleUrgentStatus(scope.row)">
                            {{ $fd('YesOrNo', scope.row.IsUrgent) }}
                        </el-button>
                        <span v-else>
                            <el-tag v-if="scope.row.IsUrgent" type="danger">
                                {{ $fd('YesOrNo', scope.row.IsUrgent) }}
                            </el-tag>
                            <el-tag v-else type="primary">
                                {{ $fd('YesOrNo', scope.row.IsUrgent) }}
                            </el-tag>
                        </span>
                    </template>
                </el-table-column>
                <!-- 中心编号 -->
                <el-table-column prop="TrialSiteCode" :label="$t('trials:reuploadAudit:table:siteId')"
                    show-overflow-tooltip sortable="custom" min-width="120px" />
                <!-- 受试者编号 -->
                <el-table-column prop="SubjectCode" :label="$t('trials:reuploadAudit:table:subjectId')"
                    show-overflow-tooltip sortable="custom" min-width="140px" />
                <!-- 访视名称 -->
                <el-table-column prop="VisitName" :label="$t('trials:reuploadAudit:table:visitName')"
                    show-overflow-tooltip sortable="custom" min-width="120px">
                </el-table-column>
                <!-- 最晚拍片日期 -->
                <el-table-column prop="LatestScanDate" :label="$t('trials:reuploadAudit:table:lScanDate')"
                    show-overflow-tooltip min-width="170" sortable="custom">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" :content="`${scope.row.EarliestScanDate
                            ? moment(scope.row.EarliestScanDate).format('YYYY-MM-DD')
                            : ''
                            } ~ ${scope.row.LatestScanDate
                                ? moment(scope.row.LatestScanDate).format('YYYY-MM-DD')
                                : ''
                            }`" placement="top">
                            <span>
                                {{
                                    scope.row.LatestScanDate
                                        ? moment(scope.row.LatestScanDate).format('YYYY-MM-DD')
                                        : ''
                                }}
                            </span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <!-- 提交时间 -->
                <el-table-column prop="SubmitTime" :label="$t('trials:reuploadAudit:table:SubmitTime')"
                    show-overflow-tooltip sortable="custom" min-width="150px" />
                <!-- 申请人 -->
                <el-table-column prop="CreateUserFullName" :label="$t('trials:reuploadAudit:table:createUserFullName')"
                    show-overflow-tooltip sortable="custom" min-width="120px" />
                <!-- 申请人角色 -->
                <el-table-column prop="ApplyUserRole" :label="$t('trials:reuploadAudit:table:applyUserRole')"
                    show-overflow-tooltip sortable="custom" min-width="120px">
                    <template slot-scope="scope">
                        <span>{{ $fd('ImageBackApplyEnum',
                            scope.row.ApplyUserRole) }}</span>
                    </template>
                </el-table-column>
                <!-- 申请原因 -->
                <el-table-column prop="ApplyReason" :label="$t('trials:reuploadAudit:table:ApplyReason')"
                    show-overflow-tooltip sortable="custom" min-width="120px" />
                <!-- 申请时间 -->
                <el-table-column prop="CreateTime" :label="$t('trials:reuploadAudit:table:createTime')"
                    show-overflow-tooltip sortable="custom" min-width="150px" />
                <!-- 审核状态 -->
                <el-table-column prop="ImageBackState" :label="$t('trials:reuploadAudit:table:imageBackState')"
                    show-overflow-tooltip sortable="custom" min-width="120px">
                    <template slot-scope="scope">
                        <el-tag :type="['warning', '', 'danger'][scope.row.ImageBackState]">{{ $fd('ImageBackstateEnum',
                            scope.row.ImageBackState) }}</el-tag>
                    </template>
                </el-table-column>
                <!-- 备注 -->
                <el-table-column prop="ResultRemark" :label="$t('trials:reuploadAudit:table:ResultRemark')"
                    show-overflow-tooltip sortable="custom" min-width="120px" />
                <!-- 审核时间 -->
                <el-table-column prop="AuditTime" :label="$t('trials:reuploadAudit:table:auditTime')"
                    show-overflow-tooltip sortable="custom" min-width="150px" />
                <el-table-column :label="$t('common:action:action')" fixed="right"
                    v-if="hasPermi(['trials:trials-panel:visit:reupload-audit:agree'])" min-width="120px">
                    <template slot-scope="scope">
                        <el-button :title="$t('trials:reuploadAudit:button:imageBack')"
                            v-hasPermi="['trials:trials-panel:visit:reupload-audit:agree']" circle
                            :disabled="scope.row.ImageBackState > 0" icon="el-icon-edit-outline" size="mini"
                            @click="audit(scope.row)" />
                        <!-- <el-button :title="$t('trials:reuploadAudit:button:auditNo')"
                            v-hasPermi="['trials:trials-panel:visit:reupload-audit:refuse']"
                            :disabled="scope.row.ImageBackState > 0" circle icon="el-icon-close" size="mini"
                            @click="audit(scope.row, 2)" /> -->
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页组件 -->
            <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
                @pagination="getList" />
        </template>
        <base-model v-if="config.visible" :config="config">
            <template slot="dialog-body">
                <el-form ref="imageBackform" :model="form" class="demo-form-inline" :rules="rules"
                    :label-width="isEN ? '150px' : '100px'">
                    <el-form-item :label="$t('trials:reuploadAudit:table:Matters')" prop="Matters">
                        <span>{{ rowData.title }}</span>
                    </el-form-item>
                    <el-form-item :label="$t('trials:reuploadAudit:form:ApplyReason')" prop="ApplyReason">
                        <span>{{ rowData.ApplyReason }}</span>
                    </el-form-item>
                    <el-form-item :label="$t('trials:reuploadAudit:form:IsAgree')" prop="IsAgree">
                        <el-radio-group v-model="form.IsAgree">
                            <el-radio :label="true">{{ $t('trials:reuploadAudit:button:auditYes') }}</el-radio>
                            <el-radio :label="false">{{ $t('trials:reuploadAudit:button:auditNo') }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item :label="$t('trials:reuploadAudit:form:ResultRemark')" prop="ResultRemark">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder=""
                            v-model="form.ResultRemark">
                        </el-input>
                    </el-form-item>
                </el-form>
            </template>
            <template slot="dialog-footer">
                <el-button type="primary" @click="auditImageBack" :loading="loading">
                    {{ $t('common:button:confirm') }}
                </el-button>
                <el-button @click="config.visible = false" :loading="loading">
                    {{ $t('common:button:cancel') }}
                </el-button>
            </template>
        </base-model>
    </BaseContainer>
</template>
<script>
import {
    getImageBackList,
    getTrialSiteSelect,
    auditImageBack,
    getImageBackApplyUserList,
    getTrialVisitStageSelect
} from '@/api/trials'
import BaseContainer from '@/components/BaseContainer'
import Pagination from '@/components/Pagination'
import moment from 'moment'
import baseModel from '@/components/BaseModel'
import { GetImageBackList_Export } from '@/api/export'
const searchDataDefault = () => {
    return {
        TrialId: null,
        TrialSiteId: null,
        SubjectCode: null,
        CreateUserId: null,
        ApplyUserRole: null,
        ApplyBeginTime: null,
        ApplyEndTime: null,
        ImageBackState: null,
        AuditBeginTime: null,
        AuditEndTime: null,
        VisitName: null,
        VisitPlanArray: [],
        PageIndex: 1,
        PageSize: 20,
        Asc: false,
        SortField: 'CreateTime'
    }
}
export default {
    name: 'QcCheck',
    components: {
        BaseContainer,
        Pagination,
        baseModel
    },
    data() {
        return {
            searchData: searchDataDefault(),
            total: 0,
            list: [],
            loading: false,
            siteOptions: [],
            userOptions: [],
            visitPlanOptions: [],
            timeListC: [],
            timeList: [],
            trialId: null,
            moment,
            rowData: {},
            config: {
                visible: false,
                title: this.$t("trials:reuploadAudit:confirmMessage:imageBack"),
                width: '500px',
                appendToBody: true,
            },
            form: {
                IsAgree: null,
                ResultRemark: null
            },
            rules: {
                IsAgree: [
                    {
                        required: true,
                        message: this.$t('common:ruleMessage:select'),
                        trigger: ['blur', 'change'],
                    },
                ],
            }
        }
    },
    computed: {
        isEN() {
            return this.$i18n.locale !== 'zh'
        },
    },
    watch: {
        list(val) {
            this.doLayout()
        },
    },
    mounted() {
        this.trialId = this.$route.query.trialId
        this.getList()
        this.getSite()
        this.getUser()
        this.getVisitPlanOptions()
    },
    methods: {
        async audit(row) {
            try {
                this.rowData = Object.assign({}, row)
                this.rowData.title = `${row.CreateUserFullName} (${this.$fd('ImageBackApplyEnum', row.ApplyUserRole)}) ${this.$t('trials:reuploadAudit:title:imageBack').replace('xxx', row.SubjectCode).replace('yyy', row.VisitName)}`
                Object.keys(this.form).forEach(key => {
                    this.form[key] = null
                })
                this.config.visible = true
            } catch (err) {
                console.log(err)
                this.loading = false
            }
        },
        async auditImageBack() {
            try {
                let validate = await this.$refs.imageBackform.validate()
                if (!validate) return false
                let params = Object.assign({}, this.form)
                params.IamgeBackRecordId = this.rowData.Id
                // return console.log(params)
                this.loading = true
                let res = await auditImageBack(params)
                this.loading = false
                if (res.IsSuccess) {
                    this.config.visible = false
                    this.getList()
                }
            } catch (err) {
                this.loading = false
                console.log(err)
            }

        },
        getList() {
            this.loading = true
            this.searchData.TrialId = this.trialId
            getImageBackList(this.searchData)
                .then((res) => {
                    this.loading = false
                    this.list = res.Result.CurrentPageData
                    this.total = res.Result.TotalCount
                    this.OtherInfo = res.OtherInfo
                })
                .catch(() => {
                    this.loading = false
                })
        },
        // 获取site下拉框数据
        getSite() {
            getTrialSiteSelect(this.trialId).then((res) => {
                this.siteOptions = res.Result
            })
        },
        // 获取访视下拉框数据
        getVisitPlanOptions() {
            getTrialVisitStageSelect(this.trialId).then((res) => {
                this.visitPlanOptions = res.Result
            })
        },
        // 获取申请人下拉框数据
        getUser() {
            getImageBackApplyUserList({
                TrialId: this.trialId
            }).then((res) => {
                this.userOptions = res.Result
            })
        },
        doLayout() {
            const scope = this
            this.$nextTick(() => {
                scope.$refs.reuploadAuditList.doLayout()
            })
        },
        // 重置
        handleReset() {
            this.searchData = searchDataDefault()
            this.timeList = []
            this.getList()
            this.timeListC = []
            this.$nextTick(() => {
                this.$refs.reuploadAuditList.clearSort()
            })
        },
        // 查询
        handleSearch() {
            this.searchData.PageIndex = 1
            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()
        },
        changeTimeList() {
            if (this.timeList) {
                this.searchData.AuditBeginTime = this.timeList[0]
                this.searchData.AuditEndTime = this.timeList[1]
            } else {
                this.searchData.AuditBeginTime = null
                this.searchData.AuditEndTime = null
            }
        },
        changeTimeListC() {
            if (this.timeListC) {
                this.searchData.ApplyBeginTime = this.timeListC[0]
                this.searchData.ApplyEndTime = this.timeListC[1]
            } else {
                this.searchData.ApplyBeginTime = null
                this.searchData.ApplyEndTime = null
            }
        },
        handleExport() {
            return GetImageBackList_Export(this.searchData)
        }
    },
}
</script>
<style lang="scss">
.reuploa-audit-wrapper {
    position: relative;

    .remark {
        position: absolute;
        left: 5px;
        bottom: 7px;
        font-size: 12px;
    }

    height: 100%;

    .qc-dialog {
        .el-dialog__headerbtn {
            top: 10px;
            font-size: 30px;
        }

        .el-dialog__body {
            height: calc(100% - 70px);
            padding: 0 10px;

            .qc-dialog-body {
                padding: 10px 20px;
                height: 100%;
                overflow-y: auto;
            }
        }

        .link-breadcrumb {
            cursor: pointer;
            color: #428bca;
        }
    }

    .box-title {
        padding: 12px;
        margin-bottom: 10px;
        background-color: #dcdfe6;
    }

    .status-primary-circle {
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 18px;
        border-radius: 50%;
        border: 1px solid #f56c6c;
        color: #f56c6c;
        font-size: 10px;
    }

    .manuals-dialog-container {
        margin-top: 50px !important;
        width: 75%;
        height: 80%;

        .el-dialog__body {
            padding: 10px;
            height: calc(100% - 50px) !important;
        }

        .el-dialog__header {
            position: relative;
        }
    }

    .manuals-full-dialog-container {
        .el-dialog__body {
            padding: 10px;
            height: calc(100% - 50px) !important;
        }

        .el-dialog__header {
            position: relative;
        }
    }
}
</style>