<template>
    <van-nav-bar
        title="我的预约"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-form @submit="myPreForm">
        <div class="my-form">
            <van-field
                v-model="examStatus"
                name="examStatus"
                is-link
                readonly
                placeholder="请选择体检状态"
                @click="showPicker = true"
                style="width: 80%;"
                autocomplete="off"
            />
            <van-popup v-model:show="showPicker" round position="bottom">
                <van-picker
                    :columns="columns"
                    @cancel="showPicker = false"
                    @confirm="onConfirm"
                />
            </van-popup>
            <van-button 
                type="primary" 
                native-type="submit"
                style="font-size: 16px;"
            >
                查询
            </van-button>
        </div>
    </van-form>
        <div class="tip">提示：向左滑动，取消预约</div>
        <!-- 待体检模块 -->
        <div 
            class="my-pre-area" 
            v-for="(item, index) in readyExamedList" 
            :key="index"
            v-if="upperStatus === 4 || upperStatus === 2"
            @click="seeReport(item.id, item.combName)"
        >
            <van-swipe-cell style="width: 100%; height: 100%">
                <div class="swipe-container">
                    <div class="lef">
                        <img :src="readyExamImg" alt="">
                    </div>
                    <div class="rig">
                        <h1>{{ item.hospitalName }}</h1>
                        <h2>
                            {{ item.combName }}
                            <span v-if="readyExamedList[index].setMealPrice !== null">
                                ￥{{ readyExamedList[index].setMealPrice }}
                            </span>
                        </h2>
                        <h3>预约时间：{{ item.phyAppontTime }}</h3>
                    </div>
                </div>
                <template #right>
                    <van-button 
                        style="height: 100%;" 
                        square 
                        type="danger" 
                        text="取消" 
                        @click="cancel(item.setMealType, item.id)"
                    />
                </template>
            </van-swipe-cell> 
        </div>
        <!-- 已取消模块 -->
        <div 
            class="my-pre-area" 
            v-for="(item, index) in isCanceledList" 
            :key="index"
            v-if="upperStatus === 4 || upperStatus === 1"
            @click="seeReport(item.id, item.combName)"
        >
                <div class="swipe-container">
                    <div class="lef">
                        <img :src="isCanceledImg" alt="">
                    </div>
                    <div class="rig">
                        <h1>{{ item.hospitalName }}</h1>
                        <h2>
                            {{ item.combName }}
                            <span v-if="isCanceledList[index].setMealPrice !== null">
                                ￥{{ isCanceledList[index].setMealPrice }}
                            </span>
                        </h2>
                        <h3>预约时间：{{ item.phyAppontTime }}</h3>
                    </div>
                </div>
        </div>
        <!-- 已体检模块 -->
        <div 
            class="my-pre-area" 
            v-for="(item, index) in isExamedList" 
            :key="index"
            v-if="upperStatus === 4 || upperStatus === 3"
            @click="seeReport(item.id, item.combName)"
        >
            <van-swipe-cell style="width: 100%; height: 100%">
                <div class="swipe-container">
                    <div class="lef">
                        <img :src="isExamedImg" alt="">
                    </div>
                    <div class="rig">
                        <h1>{{ item.hospitalName }}</h1>
                        <h2>
                            {{ item.combName }}
                            <span v-if="isExamedList[index].setMealPrice !== null">
                                ￥{{ isExamedList[index].setMealPrice }}
                            </span>
                        </h2>
                        <h3>预约时间：{{ item.phyAppontTime }}</h3>
                    </div>
                </div>
            </van-swipe-cell> 
        </div>
</template>

<script setup lang="ts">

    import { ref, onMounted } from 'vue'
    import { getPreOrderInfo, cancelPort } from '../../api/MyPreOrder'
    import { showConfirmDialog, showToast } from 'vant'
    import { useRouter } from 'vue-router'
    import Crypoto from '../../api/AesCbc'
    import isCanceledImg from '../../static/isCanceled.png'
    import readyExamImg from '../../static/readyExam.png'
    import isExamedImg from '../../static/isExamed.png'

    const cry: any = new Crypoto()
    const router = useRouter()
    const examStatus = ref<any>('')
    const showPicker = ref<boolean>(false)
    const examStatusNum = ref<number>(0)
    const orderList = ref<any[]>([])

    // 定义列表的三种状态
    const isExamedList = ref<any[]>([])
    const readyExamedList = ref<any[]>([])
    const isCanceledList = ref<any[]>([])

    // 定义三种套餐状态的id值
    const readyExamId = ref<any>('')
    const isExamedId = ref<any>('')
    const isCanceledId = ref<any>('')

    // 定义显示状态码
    const upperStatus = ref<number>(4)

    // 下拉框字段
    const columns = ref<any[]>([
        { text: '全部', value: 4 },
        { text: '已取消', value: 1 },
        { text: '待体检', value: 2 },
        { text: '已体检', value: 3 },
    ])

    // 点击返回上一页
    const onClickLeft = () => {
        history.back()
    }

    // 表单详细信息，通过改变状态码控制各个模块的显示
    const myPreForm = (res: any) => {
        res.examStatus = examStatusNum.value
        if (res.examStatus === 1) {
            upperStatus.value = 1
        } else if (res.examStatus === 2) {
            upperStatus.value = 2
        } else if (res.examStatus === 3) {
            upperStatus.value = 3
        } else if (res.examStatus === 4) {
            upperStatus.value = 4
        }
    }

    // 取消
    const cancel = (mealType: any, id: any) => {
        console.log(id)
        showConfirmDialog({
            title: '确认取消体检吗？',
            width: '7rem'
        }).then(() => {
            cancelPort({
                token: localStorage.getItem('token'),
                cancelId: cry.encrypt(id),
                mealType
            }).then((res: any) => {
                console.log(res, '取消预约')
                showToast({
                    message: '取消成功！',
                    icon: 'success',
                    duration: 1500,
                    onClose: () => {
                        history.go(0)
                    }
                })
            }).catch((err: any) => {
                console.log(err)
            })
        }).catch(() => {
            // 取消确认框
        })
    }

    // 查看不同预约单的内容，跳转页面
    const seeReport = (
        packageId: any, 
        packageName: any
    ) => {
    router.push({
            path: '/preOrderReceipt',
            query: {
                id: packageId,
                combName: packageName
            }
        })
    }

    // 弹出框确认
    const onConfirm = (res: any) => {
        showPicker.value = false
        examStatus.value = res.selectedOptions[0].text
        examStatusNum.value = res.selectedOptions[0].value
    }

    // 请求体检预约信息，1取消 2待体检 3已体检
    const fetchPreOrderInfo = () => {
        getPreOrderInfo({
            token: localStorage.getItem('token')
        }).then((res: any) => {
            console.log(res, 'aaa')
            if (res.data.obj === 'isnull') {
                showToast({
                    message: '未找到预约记录！',
                    icon: 'fail',
                    duration: 1500
                })
            } else {
                console.log(res)
                orderList.value = res.data.obj
                for (let i = 0; i < res.data.obj.length; i++) {
                    if (Number(res.data.obj[i].ifCancel) === 1) {
                        isCanceledList.value.push(res.data.obj[i])
                        isCanceledId.value = res.data.obj[i].id
                    } else if (Number(res.data.obj[i].ifCancel) === 2) {
                        readyExamedList.value.push(res.data.obj[i])
                        readyExamId.value = res.data.obj[i].id
                    } else if (Number(res.data.obj[i].ifCancel) === 3) {
                        isExamedList.value.push(res.data.obj[i])
                        isExamedId.value = res.data.obj[i].id
                    }
                }
            }
        }).catch((err: any) => {
            console.log(err)
        })
    }

    onMounted(() => {
        fetchPreOrderInfo()
    })

</script>

<style scoped lang="scss">
    .my-form{
        width: 96%;
        height: 1rem;
        margin: 0.2rem auto;
        margin-bottom: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
    }
    .tip{
        width: 92%;
        font-size: 16px;
        box-sizing: border-box;
        padding: 0.1rem;
        margin: 0.3rem auto;
        color: #9c9898;
    }
    .my-pre-area{
        width: 94%;
        margin: 0.1rem auto;
        border-radius: 0.1rem;
        box-sizing: border-box;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .swipe-container{
            width: 100%; 
            height: 100%; 
            display: flex; 
            justify-content: space-between;
            .lef{
                width: 24%;
                height: 2.4rem;
                img{
                    position: absolute;
                    top: -51%;
                    left: -43%;
                    width: 150%;
                    height: 150%;
                }
            }
            .rig{
                width: 76%;
                height: 100%;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
                padding: 0.3rem 0.3rem 0.3rem 0;
                margin-right: 0;
                h1{
                    font-size: 18px;
                    font-weight: bold;
                    margin-bottom: 0.3rem;
                }
                h2{
                    width: 100%;
                    display: flex;
                    font-size: 16px;
                    justify-content: space-between;
                    margin-bottom: 0.3rem;
                    span{
                        color: red;
                    }
                }
                h3{
                    font-size: 14px;
                }
            }
        }
    }
</style>