<!-- 预约记录 -->
<template>
    <div style="padding-top:.2rem;">
        <van-skeleton title avatar :row="3" :loading="isloading">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                v-if="recordList.length"
            >
                <!-- 预约记录id -->
                <van-cell
                    v-for="(item,index) in recordList"
                    :key="index"
                    class="record-list"
                    @click="$router.push({name:'reservationDetail',query:{id:item.ID}})"
                >
                    <div class="time">
                        <div
                            class="time-left"
                        >{{item.VisitDay |getTime}}&nbsp;&nbsp;{{item.VisitDay |getWeek}}</div>
                        <div class="time-right">{{item.TimeSlot}}</div>
                    </div>

                    <div class="info">
                        <!-- 医生头像 -->
                        <van-image
                            :src="item.HeadImg"
                            width="1.27rem"
                            height="1.27rem"
                            fit="cover"
                            round
                            class="img"
                        >
                            <template v-slot:error>
                                <img
                                    :src="require('@/assets/images/doctor.png')"
                                    style="width:100%"
                                />
                            </template>
                        </van-image>
                        <!-- 医生信息 -->
                        <div class="recordInfo">
                            <!-- 姓名 -->
                            <div class="name">
                                {{item.DoctorName}}
                                <span
                                    v-if="item.PositionalTitles"
                                >{{item.PositionalTitles |filterDoctorTitles}}</span>
                            </div>
                            <!-- 科室 -->
                            <div class="department">{{item.HospitalDepartments}}</div>
                            <!-- 预约人及状态 -->
                            <div class="patient-status">
                                <div class="img"></div>
                                <span>
                                    预约人：
                                    <span>{{item.FamilyMemberName}}</span>
                                </span>
                                <div
                                    class="status"
                                    :class="{fail:item.Status>=3 || Date.now() - new Date(item.VisitDay)>0}"
                                >{{item.Status|reservationStatus(item.VisitDay)}}</div>
                            </div>
                        </div>
                    </div>
                </van-cell>
            </van-list>
            <div style="font-size:1rem;padding-top:1rem;" v-else>无预约记录</div>
        </van-skeleton>
        <van-skeleton title avatar :row="3" :loading="isloading" v-for="num in 4" :key="num"></van-skeleton>
    </div>
</template>
<script>
    export default {
        name: "reservationRecord",
        data() {
            return {
                /** 预约记录 */
                recordList: [],
                pageIndex: 1, // 页码
                pageSize: 10, //页面数量
                loading: false, //加载中
                isloading: true, //页面是否在加载中
                finished: false //是否已加载完成，加载完成后不再触发load事件
            };
        },
        methods: {
            //获取预约记录
            GetOrderList() {
                this.$http
                    .GetOrderList({
                        name: "",
                        pageIndex: this.pageIndex,
                        pageSize: this.pageSize
                    })
                    .then(({ data }) => {
                        this.loading = false;
                        this.isloading = false;
                        // console.log(data);
                        if (data.IsSuccess) {
                            this.recordList = [
                                ...this.recordList,
                                ...data.ResultObject
                            ];

                            if (data.ResultObject.length < 10) {
                                this.finished = true;
                            }
                            // 成功
                        } else {
                            // 失败
                            this.$toast.fail(data.ResultMsg);
                        }
                    });
            },
            // 加载完成
            onLoad() {
                this.pageIndex++;
                this.GetOrderList();
            }
        },
        created() {
            this.GetOrderList();
        },
        filters: {
            // status  1  =>预约成功（当前时间大于就诊时间为`已经完成` 否则为·待就诊·）  2  =>已经报名 3  =>  已经取消 4  =>  系统已经取消
            // 预约成功并且当前时间大于预约时间  为已经完成   否则为待就诊
            reservationStatus(index, VisitDay) {
                let time = Date.now() - new Date(VisitDay);
                let obj = {
                    1: (() => {
                        return time > 0 ? "已完成" : "待就诊";
                        // return "已完成";
                    })(),
                    2: "已报名",
                    3: "已取消",
                    4: "已取消",
                    5: "已取消"
                };
                return obj[index];
            },
            getWeek(value) {
                if (value) {
                    var arr = [
                        "周日",
                        "周一",
                        "周二",
                        "周三",
                        "周四",
                        "周五",
                        "周六"
                    ];
                    return arr[new Date(value).getDay()];
                }
            }
        }
    };
</script>
<style lang='less' scoped>
    .record-list {
        border-radius: 0.1rem;
        box-shadow: 0rem 0.05rem 0.14rem 0rem rgba(153, 153, 153, 0.2);
        background-color: #ffffff;
        width: 7.02rem;
        margin: 0 auto 0.2rem;
        font-size: 0.24rem;

        .time {
            display: flex;
            justify-content: space-between;
            border-bottom: 0.02rem solid #f2f6ff;
            padding: 0.28rem;
            padding-bottom: 0.2rem;
            .time-left {
                color: #000;
            }
            .time-right {
                color: #cfcfcf;
            }
        }

        .info {
            height: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0.28rem;

            > .img {
                margin-right: 0.2rem;
            }

            .recordInfo {
                display: flex;
                flex: 1;
                flex-direction: column;
                justify-content: space-around;
                align-items: flex-start;
                height: 1.7rem;
                .name {
                    font-size: 0.28rem;
                    color: #000000;
                    font-weight: 900;
                    span {
                        font-size: 0.22rem;
                        color: #fff;
                        padding: 0.05rem 0.1rem;
                        background-color: #fd5b5b;
                        border-radius: 0.1rem;
                        margin-left: 0.2rem;
                    }
                }

                .department {
                    font-size: 0.24rem;
                    color: #7f7f7f;
                }

                .patient-status {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    .img {
                        position: relative;
                        width: 0.24rem;
                        height: 0.24rem;
                        background-color: #efbd32;
                        border-radius: 50%;
                        margin-right: 0.2rem;
                        &::after,
                        &::before {
                            content: "";
                            position: absolute;
                            bottom: 0.05rem;
                            left: 50%;
                            margin-left: -0.07rem;
                            background-color: #fff;
                            width: 0.14rem;
                            height: 0.07rem;
                            border-radius: 0.07rem 0.07rem 0 0;
                        }

                        &::after {
                            width: 0.08rem;
                            height: 0.08rem;
                            bottom: 0.11rem;
                            margin-left: -0.04rem;
                            border-radius: 50%;
                        }
                    }
                    span {
                        font-size: 0.22rem;
                    }

                    .status {
                        width: 1.47rem;
                        height: 0.44rem;
                        background-color: #00abff;
                        border-radius: 0.24rem;
                        line-height: 0.44rem;
                        margin-left: auto;
                        text-align: center;
                        color: #fff;
                        &.fail {
                            color: #000;
                            background-color: rgb(155, 155, 155);
                        }
                    }
                }
            }
        }
    }
</style>
