<!-- 拼团记录 -->
<template>
    <div class="container">
        <van-tabs
            v-model="orderStatus"
            swipeable
            color="#388bff"
            title-active-color="#388bff"
            sticky
            animated
            @change="changeTab"
        >
            <van-tab
                :title="item.title"
                :name="item.name"
                v-for="(item,index) in tabArr"
                :key="index"
            >
                <div class="min-height-90">
                    <van-list
                        v-model="loading"
                        :finished="visitOrder[orderStatus].finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                    >
                        <!-- 预约记录id -->
                        <van-cell
                            v-for="(subitem,subindex) in visitOrder[item.name].orderArr"
                            :key="subindex"
                            class="order-list"
                            @click="$router.push({name:'reservationDetail',query:{id:subitem.ID}})"
                        >
                            <!-- 就诊时间 -->
                            <div class="time">
                                <div
                                    class="time-left"
                                >{{subitem.VisitDay | getTime}}&nbsp;&nbsp;{{subitem.VisitDay |getWeek}}</div>
                                <div class="time-right">{{subitem.TimeSlot}}</div>
                            </div>

                            <div class="info">
                                <!-- 医生头像 -->
                                <van-image
                                    :src="subitem.HeadImg?subitem.HeadImg:require('@/assets/images/doctor.png')"
                                    width="1.27rem"
                                    height="1.27rem"
                                    fit="cover"
                                    round
                                    class="img"
                                ></van-image>
                                <!-- 医生信息 -->
                                <div class="recordInfo">
                                    <!-- 姓名 -->
                                    <div class="name">
                                        {{subitem.DoctorName}}
                                        <span
                                            v-if="subitem.PositionalTitles"
                                        >{{subitem.PositionalTitles |filterDoctorTitles}}</span>
                                    </div>
                                    <!-- 科室 -->
                                    <div class="department">{{subitem.HospitalDepartments}}</div>
                                </div>
                            </div>
                            <!-- 预约人及状态 -->
                            <div class="patient-status">
                                <!-- <div class="img"></div> -->
                                <span>
                                    预约人：
                                    <span>{{subitem.FamilyMemberName}}</span>
                                </span>
                                <div
                                    class="status"
                                    :class="{blue:subitem.Status==1||subitem.Status==2,
                                        red:subitem.Status==5||subitem.Status==6||subitem.Status==8}"
                                >{{subitem.Status | filterOrderStatus(subitem.OrderStatus,subitem.VisitDay)}}</div>
                            </div>
                            <!-- 待支付状态 去支付 -->
                            <div class="goPay" v-if="subitem.Status==6">
                                <!-- 待支付倒计时 -->
                                <div class="unpaied">
                                    <div>支付倒计时：</div>
                                    <van-count-down
                                        :time="subitem.SurplusSecond"
                                        @finish="changeStatus(subitem)"
                                    ></van-count-down>
                                </div>
                                <div
                                    class="button-pay"
                                    @click.stop="goPay(subitem.ID,subitem.Price)"
                                >去支付</div>
                            </div>
                        </van-cell>
                    </van-list>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
    var isLoading = false;
    export default {
        name: "allOrder",
        data() {
            return {
                /** tab组件 on */
                // Status (integer, optional): 订单状态 1待就诊 2，已完成 ，3已退款 ，4 已取消 5，待支付
                tabArr: [
                    {
                        title: "全部",
                        name: "0"
                    },
                    {
                        title: "待支付",
                        name: "5"
                    },
                    {
                        title: "待就诊",
                        name: "1"
                    },
                    {
                        title: "已完成",
                        name: "2"
                    },
                    {
                        title: "已退款",
                        name: "4" // 本来是3
                    }
                    // {
                    //     title: "已取消",
                    //     name: "4"
                    // }
                ],
                /** tab组件 end*/

                // 订单
                visitOrder: {
                    "0": {
                        orderArr: [],
                        pageIndex: 0, // 页码
                        finished: false
                    }, //全部
                    "1": {
                        pageIndex: 0, // 页码
                        orderArr: [],
                        finished: false
                    }, //待就诊
                    "2": {
                        pageIndex: 0, // 页码
                        orderArr: [],
                        finished: false
                    }, // 已完成
                    "4": {
                        pageIndex: 0, // 页码
                        orderArr: [],
                        finished: false
                    }, // 已退款
                    // "4": {
                    //     pageIndex: 0, // 页码
                    //     orderArr: [],
                    //     finished: false
                    // }, // 已取消
                    "5": {
                        pageIndex: 0, // 页码
                        orderArr: [],
                        finished: false //是否已加载完成，加载完成后不再触发load事件
                    } // 待支付
                },
                orderStatus: "0", // 当前订单状态
                pageSize: 10, //页面数量
                index: 1, // 数量
                loading: false, //加载中
                // 倒计时格式
                timeData: {
                    minutes: 0,
                    seconds: 0
                }
            };
        },
        methods: {
            //获取订单记录
            GetOrderList() {
                let status = this.orderStatus;
                let pageIndex = this.visitOrder[status].pageIndex;
                this.$set(this.visitOrder[status], "pageIndex", pageIndex + 1);
                pageIndex = pageIndex + 1;
                // console.log(status, pageIndex);
                this.$http
                    .GetByOrderList({
                        Status: +status,
                        pageIndex: pageIndex,
                        pageSize: this.pageSize
                    })
                    .then(({ data }) => {
                        // this.visitOrder[status].loading = false;
                        this.loading = false;
                        isLoading = false;
                        if (data.IsSuccess) {
                            let retArr = data.ResultObject;

                            retArr = retArr.map(v => {
                                // 循环待支付状态 // 请求待支付状态
                                if (v.Status == 6) {
                                    // 支付截至时间
                                    // v.time =
                                    //     +new Date(v.CreateTime) + 15 * 60 * 1000;
                                    // // 支付剩余时间
                                    // v.timeRemaining = v.time - Date.now(); //如果为负值  则取消

                                    // 返回的是毫秒数
                                    if (v.SurplusSecond <= 0) {
                                        // 保存订单时间为15分钟 超过时间改变状态为 取消状态
                                        v.Status = 3;
                                    }
                                }

                                return v;
                            });

                            // 设置状态数据
                            this.$set(this.visitOrder[status], "orderArr", [
                                ...this.visitOrder[status].orderArr,
                                ...retArr
                            ]);
                            if (retArr.length < 10) {
                                // this.finished = true;
                                this.visitOrder[status].finished = true;
                            }
                        } else {
                            this.$toast(data.ResultMsg);
                        }
                    });
            },
            // 加载完成
            onLoad() {
                // 请求数据
                if (this.visitOrder[this.orderStatus].finished) return;
                if (isLoading) return;

                isLoading = true;
                this.GetOrderList();
            },
            // 改变tab
            changeTab(name) {
                if (this.visitOrder[name].finished) return; // 没有更多 不请求数据
                if (this.visitOrder[name].orderArr.length > 0) return; // 请求第一次后不再请求

                if (isLoading) return;
                isLoading = true;
                this.GetOrderList();
            },
            // 去支付
            goPay(ordercode, price) {
                this.$router.push({
                    name: "confirmPay",
                    query: {
                        ordercode,
                        price
                    }
                });
            },
            // 倒计时结束  改变状态为取消  改为重新刷新
            changeStatus(item) {
                // item.Status = 3;
                location.reload();
            }
        }
    };
</script>
<style lang='less' scoped>
    @blue: #52a2ff;
    @red: #ff0000;
    @yellow: #ffb00f;
    @gray: #999999;

    .gay-block {
        height: 0.02rem;
        background-color: #f6f6f6;
        margin: 0.35rem 0 0.13rem;
    }
    .container {
        // background: #f9f9fa;
        font-size: 0.28rem;
        color: #333;
        text-align: left;

        // 影响tab组件样式
        /deep/ .van-tabs__wrap--scrollable .van-tab {
            flex: 1 !important;
        }

        .min-height-90 {
            // min-height: 92vh;
        }

        .order-list {
            width: 7.1rem;
            box-shadow: 3px 4px 10px 0px rgba(218, 218, 218, 0.25);
            border-radius: 0.1rem;
            background-color: #ffffff;
            margin: 0 auto 0.2rem;
            font-size: 0.24rem;

            &:nth-of-type(1) {
                margin-top: 0.2rem;
            }

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

            .info {
                display: flex;
                justify-content: space-between;
                padding: 0.2rem 0;

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

                .recordInfo {
                    display: flex;
                    flex: 1;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: flex-start;
                    .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;
                color: #999999;
                span {
                    font-size: 0.22rem;
                }

                .status {
                    height: 0.44rem;
                    border-radius: 0.24rem;
                    line-height: 0.44rem;
                    margin-left: auto;
                    text-align: center;
                    font-size: 0.3rem;
                    color: #000;
                    &.red {
                        color: @red;
                    }
                    &.blue {
                        color: @blue;
                    }
                    &.yellow {
                        color: @yellow;
                    }
                    &.gray {
                        color: @gray;
                    }
                }
            }

            // 支付按钮
            .goPay {
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-top: solid #f6f6f6 0.02rem;
                text-align: right;
                margin-top: 0.1rem;
                .button-pay {
                    display: inline-block;
                    width: 1.6rem;
                    height: 0.5rem;
                    line-height: 0.5rem;
                    background-color: #ffb00f;
                    box-shadow: 0.01rem 0.02rem 0.09rem 0rem
                        rgba(255, 176, 15, 0.35);
                    border-radius: 0.25rem;
                    color: #fff;
                    text-align: center;
                    margin-top: 0.1rem;
                }
                // 倒计时
                .unpaied {
                    display: flex;
                    align-items: center;
                    font-size: 14px;

                    // 倒计时
                    .van-count-down {
                        color: red;
                    }
                    .time-item {
                        display: inline-block;
                        width: 22px;
                        margin-right: 5px;
                        color: #fff;
                        font-size: 12px;
                        text-align: center;
                        background-color: #1989fa;
                    }
                }
            }
        }
    }
</style>
