<template>
    <div class="h-full pb-5 flex flex-col ">
        <div class="p-3 text-16 text-black text-center shrink-0 top-bar">
            <span class="back-bt" @click="onBack" v-if="step >= 2">
                <doc-icon type="doc-left" />
            </span>
            <span>慢病自我初筛</span>
        </div>
        <div class="grow overflow-y-auto">
            <IdCheck v-show="step === 1"/>
            <CheckTip v-if="step === 2"/>
            <!-- 居民基础信息 -->
            <BaseInfo v-else-if="step === 3"/>
            <!-- 筛查表单 -->
            <ScreenInfo v-else-if="step === 4"/>
            
        </div>
    </div>
</template>

<script>
import { showNotify } from 'vant'
import IdCheck from './IdCheck.vue'
import CheckTip from './CheckTip.vue'
import BaseInfo from './BaseInfo.vue'
import ScreenInfo from './ScreenInfo.vue'

export default {
    components: {
        IdCheck,
        CheckTip,
        BaseInfo,
        ScreenInfo
    },
    data() {
        return {
            // 操作步骤
            step: 1,
            setpHistory: [1],
            // 查询信息
            checkInfo: {}
        }
    },
    provide() {
        return {
            checkInfo: this.checkInfo
        }
    },
    computed: {
        routeQuery() {
            return this.$route.query
        },
        doctorId() {
            return this.routeQuery.doctorId
        }
    },
    created() {
        if (!this.doctorId) {
            showNotify({ type: 'warning', message: '未获取到医生信息', duration: 0 })
        }
    },
    methods: {
        onNext(step) {
            this.step = step ? step : this.step + 1
            this.setpHistory.push(this.step)
        },
        onBack() {
            if (this.step === 1) return
            this.setpHistory.pop()
            this.step = this.setpHistory[this.setpHistory.length - 1]
        }
    }
} 
</script>

<style lang="less" scoped>
.top-bar {
    position: relative;
    border-bottom: 1px solid #3C3C435C;
    .back-bt {
        position: absolute;
        left: .16rem;
    }
}
</style>