<template>
    <div class="h-full flex flex-col first-screen">
        <div class="shrink-0 flex pb-2 px-2 pt-3 items-center">
            <van-tabs shrink type="card" class="grow doc-tab-round" line>
                <van-tab title="全部" title-style="padding: 0 .2rem"></van-tab>
            </van-tabs>
            <doc-icon type="doc-menu" style="font-size:.2rem;color:#03053D"
                @click='openSearch' />
        </div>
        <div class='grow pt-1 relative min-h-0'>
            <div class='h-full overflow-y-auto px-2 pb-3' ref='list'>
                <van-pull-refresh v-model='loadingRefresh' @refresh='onRefresh'
                    :disabled='isRefreshDisable' style="min-height: 100%">
                    <van-list
                        v-model:loading='loading'
                        :finished='finished'
                        :finished-text="list.length ? '没有更多了' : ''"
                        :immediate-check='false'
                        @load='onMore'
                    >
                        <div class="flex flex-col gap-y-2.5">
                            <div class="py-3 px-4 doc-list-card" v-for='item in list' :key="item.id">
                                <div class="mb-4" @click="toDetail(item)">
                                    <span class="name mr-2">{{ item.residentName }}</span>
                                    <span class="tag mr-2">{{ item.currentAge }}岁</span>
                                    <span class="tag mr-2">{{ item.genderName }}</span>
                                </div>
                                <div class="flex flex-col gap-y-2.5" @click="toDetail(item)">
                                    <div>
                                        <span class="label">身份证号</span>
                                        <span>{{ item.idCard }}</span>
                                    </div>
                                    <div>
                                        <span class="label">筛查医生</span>
                                        <span>{{ item.screenDoctorName }}</span>
                                    </div>
                                    <div>
                                        <span class="label">初筛日期</span>
                                        <span>{{ item.screenDate }}</span>
                                    </div>
                                </div>
                                <div class="divider my-3"></div>
                                <div class="bt-group">
                                    <van-button round size="small" class="doc-btn-primary" @click="toDetail(item)">详情</van-button>
                                    <van-button round size="small" class="doc-btn-primary" @click="toScreen(item)">复筛</van-button>
                                    <van-button round size="small" class="doc-btn-primary" @click="onIgnore(item)">忽略</van-button>
                                </div>
                            </div>
                        </div>
                    </van-list>
                    <div class='text-center shrink-0 empty' v-if='!list.length'>
                        <img src='@/assets/image/doctor/empty.png' alt='' style='width: 1.2rem;'>
                        <p>暂无数据</p>
                    </div>
                </van-pull-refresh>
            </div>

            <van-popup v-model:show="searchVisible" position="top" :style="{ height: '70%' }"
                style="position: absolute;transition: none"
                :overlay-style="{ position: 'absolute' }"
                transition="viewer-fade"
                :teleport="$refs.list">
                <div class="h-full flex flex-col workbench-search-box">
                    <div class="px-4 py-3 grow overflow-y-auto">
                        <div class="mb-3">身份证号</div>
                        <van-field v-model="form.idCard" placeholder="请输入身份证号" maxlength="20"
                            class="doc-input">
                            <template #right-icon>
                                <IdCardScan />
                            </template>
                        </van-field>
                        <div class="my-3">居民姓名</div>
                        <van-field v-model="form.residentName" placeholder="输入居民姓名" maxlength="100"
                            class="doc-input"/>
                        <div class="my-3">初筛日期</div>
                        <div class="flex items-center">
                            <van-field v-model="form.startDate" placeholder="开始日期" readonly
                                class="doc-input"
                                @click="() => { dateShow = true, dateMark = 1 }"/>
                            <span class="px-2">~</span>
                            <van-field v-model="form.endDate" placeholder="结束日期" readonly
                                class="doc-input"
                                @click="() => { dateShow = true, dateMark = 2 }"/>
                        </div>
                        <van-popup v-model:show="dateShow" position="bottom" :teleport="$refs.list">
                            <van-date-picker @confirm="onDateConfirm" @cancel="dateShow = false" />
                        </van-popup>
                        <div class="my-3">数据来源</div>
                        <CheckBtn :options="store.getDict('CP00124')" v-model:value="form.source" column-2
                            class="check-btn-workbench"/>
                    </div>
                    <div class="text-16 flex shrink-0 text-center bt-group">
                        <div class="grow py-3" @click="reset">重置</div>
                        <div class="grow py-3 submit-btn" @click="search">确定</div>
                    </div>
                </div>
            </van-popup>
        </div>
    </div>
</template>

<script>
import { getBeSecondScreenByPage, addIgnoreRecord } from '@/api/doctor/workbench.js'
import { useStore } from '@/doctor/store'
import CheckBtn from '@/doctor/components/checkBtn/CheckBtn.vue'
import IdCardScan from '@/doctor/components/idCardScan/IdCardScan.vue'

const DefaultForm = {
    // 数据来源,[DC00051]
    source: undefined,
    // 状态
    status: undefined,
    // 初筛日期-截止日期
    startDate: undefined,
    // 初筛日期-开始日期
    endDate: undefined,
    // 姓名
    residentName: undefined,
    // 身份证号
    idCard: undefined
}

export default {
    name: 'TableFirstScreen',
    components: {
        CheckBtn,
        IdCardScan
    },
    props: {
        searchType: { default: 1  }
    },
    data() {
        return {
            store: useStore(),
            list: [],
            pagination: {
                total: 0,
                pageIndex: 1,
                pageSize: 8
            },
            loading: false,
            finished: false,
            loadingRefresh: false,
            isRefreshDisable: false,
            // 搜索弹出框
            searchVisible: false,
            // 时间选择
            dateShow: false,
            // 判断对哪一个日期赋值
            dateMark: 0,
            form: { ...DefaultForm },
        }
    },
    created() {
        this.load()
    },
    mounted() {
        const list = this.$refs.list
        list.addEventListener('scroll', () => {
            if (list.scrollTop > 0) {
                this.isRefreshDisable = true
            } else {
                this.isRefreshDisable = false
            }
        })
    },
    methods: {
        load(loading = true) {
            const query = {
                pageIndex: this.pagination.pageIndex,
                pageSize: this.pagination.pageSize,
                searchType: this.searchType,
                serveType: 2,
                ...this.form
            }
            getBeSecondScreenByPage(query, loading).then(res => {
                if (this.pagination.pageIndex === 1) {
                    this.list = []
                } 
                this.list = this.list.concat(res.data.dataList || [])
                this.pagination.total = res.data.total || 0
                this.finished = this.list.length >= this.pagination.total
            }).finally(() => {
                this.loading = false
                this.loadingRefresh = false
            })
        },
        search() {
            this.pagination.pageIndex = 1
            this.load()
            this.searchVisible = false
        },
        reset() {
            this.form = { ...DefaultForm }
            this.rangeDate = []
            this.search()
        },
        onMore() {
            this.pagination.pageIndex++
            this.load(false)
        },
        onRefresh() {
            this.pagination.pageIndex = 1
            this.load()
        },
        openSearch() {
            this.searchVisible = !this.searchVisible
        },
        onDateConfirm({ selectedValues }) {
            const result = selectedValues.join('-')
            if (this.dateMark === 1) {
                this.form.startDate = result
            } else if (this.dateMark === 2) {
                this.form.endDate = result
            }
            this.dateShow = false
            this.dateMark = 0
        },
        toDetail(record) {
            if (!record) return
            if (record.residentInfoId == null) {
                this.$message.info('暂时无法查看 详情信息')
                return
            }
            this.$router.push({
                path: '/doctor/patient-detail',
                query: {
                    residentInfoId: record.residentInfoId
                }
            })
        },
        toScreen(record) {
            if (record.residentInfoId == null) {
                this.$message.info('暂时无法进行筛查')
                return
            }
            this.$router.push({
                path: '/doctor/screening/secondForm',
                query: {
                    residentInfoId: record.residentInfoId
                }
            })
        },
        onIgnore(record) {
            let params={
                relationId:record.screenId,
                ignoreType:2,
            }
            addIgnoreRecord(params).then(() => {
                this.list = this.list.filter(e => e.screenId !== record.screenId)
                setTimeout(() => {
                    this.$message.info('操作成功')
                }, 800);
            })
        }
    },
    watch: {
        searchType() {
            this.onRefresh()
        },
        'store.refreshMark'() {
            this.onRefresh()
        }
    }
}
</script>

<style lang="less" scoped>

</style>