<template>
    <div class="h-full 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="setp === 2">
                <doc-icon type="doc-left" />
            </span>
            <span>肿瘤风险评估</span>
        </div>
        <div class="grow overflow-y-auto pb-5">
            <BaseForm ref="base" v-show="setp === 1"/>
            <QuestionForm ref="question" v-if="setp === 2"
                :species="species"/>
            <Result v-if="setp === 3" :info="resultInfo"/>
            <div class="bt-group">
                <van-button type="primary" block v-if="setp === 1"
                    @click="onNext">下一步</van-button>
                <van-button type="primary" block v-else-if="setp === 2"
                    @click="submit">提交</van-button>
            </div>
        </div>
        <div class="pb-5"></div>
    </div>
</template>

<script>
import BaseForm from './base.vue'
import QuestionForm from './Question.vue'
import Result from './Result.vue'
import { showNotify } from 'vant'
import { addSimpleScreen } from '@/tumour/api/screening.js'
import { fetchDataHandle } from '@/utils/common.js'

export default {
    components: {
        BaseForm,
        QuestionForm,
        Result
    },
    data() {
        return {
            // 操作步骤
            setp: 1,
            // 步骤1中选中的癌种
            species: [],
            // 基础用户信息
            baseInfo: {},
            // 提交结果信息
            resultInfo: {}
        }
    },
    computed: {
        routeQuery() {
            return this.$route.query
        },
        doctorId() {
            return this.routeQuery.doctorId
        }
    },
    created() {
        if (!this.doctorId) {
            showNotify({ type: 'warning', message: '未获取到医生信息', duration: 0 })
        }
        
    },
    methods: {
        init() {

        },
        onBack() {
            this.setp = 1
        },
        onNext() {
            if (!this.doctorId) return
            this.$refs.base.submit().then(res => {
                console.log(res)
                this.baseInfo = res
                this.species = res.species || []
                this.setp = 2
            })
        },
        submit() {
            this.$refs.question.submit().then(res => {
                const result = {
                    ...this.baseInfo,
                    details: res,
                    createdUserId: this.doctorId
                }
                const query = fetchDataHandle(result, {
                    species: 'arrToStr'
                })
                console.log(query)
                addSimpleScreen(query).then(res => {
                    this.resultInfo = {
                        species: result.species,
                        details: result.details,
                        unitName: res.data
                    }
                    this.setp = 3
                })
            })
        }
    }
}
</script>

<style lang="less" scoped>
.top-bar {
    position: relative;
    border-bottom: 1px solid #0000001A;
    .back-bt {
        position: absolute;
        left: .16rem;
    }
}
.bt-group {
    padding: 0 10%;
}
</style>