<template>
    <div class="pb-5 flex flex-col" style="height: 100vh;">
        <div class="p-3 text-16 text-black text-center shrink-0 top-bar">
            <span class="back-bt" v-if="step >= 2">
                <span @click="onClose" v-if="[5].includes(step)">
                    <doc-icon type="doc-close" />
                </span>
                <span @click="onBack" v-else>
                    <doc-icon type="doc-left" />
                </span>
            </span>
            <span>居民慢病筛查</span>
        </div>
        <div class="grow overflow-y-auto">
            <div ref="top"></div>
            <IdCheck v-show="step === 1"/>
            <CheckTip v-if="step === 2"/>
            <!-- 居民基础信息 -->
            <BaseInfo v-else-if="step === 3"/>
            <!-- 筛查表单 -->
            <ScreenInfo v-else-if="step === 4"/>
            <!-- 筛查结果 -->
            <Result v-else-if="step === 5"/>
        </div>
    </div>
</template>

<script>
import { computed } from 'vue'
import { showNotify } from 'vant'
import { backHome } from '@/utils/common.js'
import IdCheck from './IdCheck.vue'
import CheckTip from './CheckTip.vue'
import BaseInfo from './BaseInfo.vue' 
import ScreenInfo from './ScreenInfo.vue'
import Result from './Result.vue'

export default {
    components: {
        IdCheck,
        CheckTip,
        BaseInfo,
        ScreenInfo,
        Result
    },
    data() {
        return {
            // 操作步骤
            step: 1,
            setpHistory: [1],
            // 查询信息
            checkInfo: {},
            // 表单暂时保存的信息
            recordForm: {}
        }
    },
    provide() {
        return {
            checkInfo: computed(() => this.checkInfo),
            recordForm: computed(() => this.recordForm)
        }
    },
    computed: {
        routeQuery() {
            return this.$route.query
        },
        doctorId() {
            return this.routeQuery.doctorId
        }
    },
    created() {
        if (!this.doctorId) {
            showNotify({ type: 'warning', message: '未获取到医生信息' })
            return
        }
        this.recordForm.doctorId = this.doctorId
    },
    methods: {
        onNext(step) {
            this.step = step ? step : this.step + 1
            this.setpHistory.push(this.step)
            const dom = this.$refs.top
            console.log(dom)
            dom && dom.scrollIntoView()
        },
        onBack() {
            if (this.step === 1) return
            this.setpHistory.pop()
            this.step = this.setpHistory[this.setpHistory.length - 1]
            if (this.step === 1) {
                this.recordForm = {}
                this.checkInfo = {}
                this.recordForm.doctorId = this.doctorId
            }
        },
        onClose() {
            backHome()
        }
    }
} 
</script>

<style lang="less" scoped>
@import '../../../utils/common.less';
</style>