<template>
    <van-nav-bar
        title="体检报告"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-field
        v-model="value1"
        left-icon="search"
        placeholder="查找报告"
        style="width: 95%; margin: 0.2rem auto; height: 40px !important"
        @update:model-value="reportChange"
        autocomplete="off"
    />
    <div class="search-area">
        <h2 style="font-size: 16px; font-weight: bold;">请选择体检年度</h2>
            <van-field
                v-model="yearValue"
                is-link
                readonly
                placeholder="请选择年份"
                @click="showYearPicker = true"
                style="width: 33%; height: 40px !important"
            />
            <van-popup v-model:show="showYearPicker" round position="bottom">
                <van-date-picker
                    v-model="currentDate"
                    title="选择年份"
                    :max-date="maxDate"
                    :columns-type="columnsType"
                    @confirm="confirmYearPicker"
                    @cancel="cancelYearPicker"
                />
            </van-popup>
            <van-field
                v-model="typeValue"
                is-link
                readonly
                placeholder="体检类型"
                @click="showTypePicker = true"
                style="width: 33%; height: 40px !important"
            />
            <van-popup v-model:show="showTypePicker" round position="bottom">
                <van-picker
                    :columns="typeColumns"
                    @confirm="confirmTypePicker"
                    @cancel="cancelTypePicker"
                />
            </van-popup>
    </div>
    <div class="report-area">
        <div class="single-report" v-for="(item, index) in reportInfo" :key="index">
            <div class="report-leftit">{{ item.fixedValue }}</div>
            <div class="report-rigval">
                <div class="rig-upper">{{ item.mealName }}</div>
                <div class="rig-lower">
                    <span>{{ item.createTime }}</span>
                    <van-button 
                        style="height: 100%; border-radius: 15px; background-color: #02a7f0; color: #fff;"
                        @click="checkPdf(item.physicalAddress)"
                    >
                        查看报告
                    </van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

    import { ref, onMounted } from 'vue'
    import { getReport } from '../../api/ExamReport'
    import Crypoto from "../../api/AesCbc.ts";
    // import { useRouter } from 'vue-router'

    // const router = useRouter()
    const cry: any = new Crypoto()
    const value1 = ref<any>('')
    const yearValue = ref<any>([new Date().getFullYear()])
    const showYearPicker = ref<boolean>(false)
    const typeValue = ref<any>('')
    const typeNum = ref<any>('')
    const showTypePicker = ref<boolean>(false)
    const columnsType = ref<any[]>(['year'])
    const currentDate = ref<any>([new Date().getFullYear()])
    const reportInfo = ref<any>('')
    // const loadPath = ref<String>('http://112.29.103.165:1616/YSpeaManager/statics/')
    const loadPath = ref<String>('http://112.29.103.165:1616/medicalDocumentation/statics/')
    const maxDate = ref<any>(new Date(new Date().getFullYear(), 1, 1))
    const typeColumns = ref<any[]>([
        { text: '普通体检', value: 0 },
        { text: '职业体检', value: 1 }
    ])
    
    const onClickLeft = () => {
        history.back()
    }

    // 查找报告输入框变化
    const reportChange = (changeVal: any) => {
        console.log(changeVal, 'change')
        fetchReport(changeVal, yearValue.value, typeNum.value)
    }

    // 确认年份选择器
    const confirmYearPicker = (res: any) => {
        console.log(res, 'year')
        yearValue.value = res.selectedValues[0]
        showYearPicker.value = false
        fetchReport(value1.value, yearValue.value, typeNum.value)
    }

    // 取消年份选择器
    const cancelYearPicker = () => {
        showYearPicker.value = false
    }

    // 确认类型选择器
    const confirmTypePicker = (res: any) => {
        console.log(res, 'type')
        typeValue.value = res.selectedOptions[0].text
        typeNum.value = res.selectedValues[0]
        showTypePicker.value = false
        fetchReport(value1.value, yearValue.value, typeNum.value)
    }

    // 取消类型选择器
    const cancelTypePicker = () => {
        showTypePicker.value = false
    }

    // 查看报告pdf
    const checkPdf = (pdfUrl: any) => {
        console.log(pdfUrl, loadPath)
        /* router.push({
            path: '/checkPdf',
            query: {
                pdfUrl
            }
        }) */
        window.open(loadPath.value + pdfUrl)
    }

    // 获取体检报告
    const fetchReport = (name: any, year: any, type: any) => {
        getReport({
            name: cry.encrypt(name),
            data: year,
            type: cry.encrypt(type),
            token: localStorage.getItem('token')
        }).then((res: any) => {
            console.log(res)
            reportInfo.value = res.data.obj
            console.log(reportInfo.value)
        }).catch((err: any) => {
            console.log(err)
        })
    }

    onMounted(() => {
        if (!localStorage.getItem('token')) {
            return false
        } else {
            fetchReport('', yearValue.value, '')
        }
    })

</script>

<style scoped lang="scss">
    .search-area{
        width: 95%;
        display: flex;
        margin: 0.2rem auto;
        justify-content: space-between;
        align-items: center;
    }
    .report-area{
        width: 95%;
        margin: 0.2rem auto;
        .single-report{
            width: 100%;
            height: 2.4rem;
            margin-bottom: 0.15rem;
            display: flex;
            border: 1px solid #d7d7d7;
            .report-leftit{
                width: 8%;
                height: 100%;
                background-color: #8fc7c7;
                color: #fff;
                font-size: 16px;
                box-sizing: border-box;
                padding: 0.1rem;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
            }
            .report-rigval{
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                .rig-upper, .rig-lower{
                    width: 100%;
                    height: 30%;
                    box-sizing: border-box;
                    padding: 0 0.4rem;
                    display: flex;
                    align-items: center;
                    font-size: 18px;
                }
                .rig-lower{
                    justify-content: space-between;
                }
            }
        }
    }
</style>