<!-- 订单详情 -->
<template>
    <div style="padding-bottom:1.1rem;text-align:center;">
        <div
            class="header"
            :class="{'free-clinic':reservationDetail.OrderStatus==2, 'group-booking':reservationDetail.OrderStatus==3}"
        >
            <img :src="reservationStatus" class="img" />
            <div class="text">
                <!-- 已完成 -->
                <span v-if="isDone">已完成</span>
                <span v-else>{{statusText[reservationDetail.Status]}}</span>
            </div>
            <div class="result" v-if="true">
                <!-- {{resultText}} -->
                <!-- 待就诊 -->
                <span v-if="reservationDetail.Status==1">
                    <!-- 已完成 -->
                    <span v-if="isDone">该坐诊已完成.感谢您对亮健优医的信任与支持,祝您身体健康.</span>
                    <span v-else-if="reservationDetail.OrderStatus==2">恭喜您获得义诊名额，请在预约时间点前10分钟到院就诊。</span>
                    <span v-else>恭喜您获得坐诊名额，请在预约时间点前10分钟到院就诊。</span>
                </span>

                <!-- 已报名 -->
                <span v-if="reservationDetail.Status==2">
                    <span
                        v-if="reservationDetail.OrderStatus==2"
                    >义诊名额将会 {{reservationDetail.AppointmentsEndTime | filterTime1}} 后再公布，届时留意公众号消息推送。</span>
                    <span
                        v-else
                    >当前已有{{reservationDetail.TotalCount}}人报名，还差{{reservationDetail.PeopleCounting-reservationDetail.TotalCount}}人报名，医生即可成行坐诊。如不能成行，预约费用将会原路退回。</span>
                </span>

                <!-- 已取消 -->
                <span v-if="reservationDetail.Status==3">您已取消了当前订单。</span>

                <!-- 后台取消 -->
                <span v-if="reservationDetail.Status==4">
                    <span
                        v-if="reservationDetail.OrderStatus==2"
                    >您报名[{{reservationDetail.DoctorName}}]医生{{reservationDetail.VisitDay | filterTime}}({{reservationDetail.VisitDay | getWeek}}) {{reservationDetail.TimeSlot}}的义诊专场由于名额有限，系统未为您分配到名额。请谅解。您可根据需要预约其他专场。</span>
                    <span v-else>很遗憾通知到您，由于当前坐诊预约人数过少，医生无法成行坐诊,系统已为您取消了报名。</span>
                </span>

                <!-- 预约失败 -->
                <span v-if="reservationDetail.Status==5">很遗憾通知到您，当前坐诊专场预约失败。</span>

                <!-- 待支付 -->
                <span v-if="reservationDetail.Status==6">订单将为您保留15分钟,请尽快支付</span>

                <!-- 已退款 -->
                <span v-if="reservationDetail.Status==7"></span>

                <!-- 退款失败 -->
                <span v-if="reservationDetail.Status==8">退款失败，请联系客服</span>

                <!--  某个状态值显示 -->
                <span
                    class="bold"
                    v-if="reservationDetail.Status==1||reservationDetail.Status==2"
                >请完善病历，更好方便医生提前做好诊断预判。</span>

                <!-- 完善病历 -->
                <div
                    class="btn"
                    @click="$router.push({name:'memberFile',query:{id:reservationDetail.FamilyMemberID}})"
                >完善病历</div>
            </div>
            <!-- 取消报名 TODO: 当前医生的专场 暂时不做-->
            <div class="result" v-else>
                {{resultText[1]}}
                <div class="otherDoctor">
                    <div class="title">当前医生还有以下专场</div>
                    <div class="activity">
                        <div
                            class="activity-list"
                            :class="{'free-clinic':true}"
                            v-for="num in 5"
                            :key="num"
                        >
                            <!-- 医生头像 -->
                            <van-image
                                :src="avatorImg[num]"
                                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>韶关市</div>
                            <div style="color:#b2b2b2;">2019年8月29日</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 待支付倒计时  普通坐诊和拼团坐诊 -->
            <div
                class="unpaied"
                v-if="reservationDetail.Status==6&&reservationDetail.OrderStatus!=2"
            >
                <div>支付倒计时：</div>
                <van-count-down
                    :time="reservationDetail.SurplusSecond"
                    @finish="changeStatus(reservationDetail)"
                ></van-count-down>
            </div>
        </div>

        <!-- 义诊助力 已报名时显示-->
        <div
            v-if="reservationDetail.Status==2&&reservationDetail.OrderStatus==2"
            class="firendsHelp"
        >
            <div class="left">
                <div>
                    幸运值：
                    <span>{{reservationDetail.TotalFraction}}</span>
                    正在加速中
                    <!-- {{reservationDetail.TotalFraction|filterLJValue}}助力中... -->
                </div>
                <div>找朋友帮忙，可提高被选中概率</div>
            </div>
            <div class="right" @click="$router.push({name:'friendHelp',query:{id:id}})">呼朋唤友来帮忙</div>
        </div>

        <!-- 基本预约医生信息 -->
        <div class="content">
            <div>
                <span>医生姓名</span>
                <span>{{reservationDetail.DoctorName }}</span>
            </div>
            <div>
                <span>医生职称</span>
                <span>{{reservationDetail.PositionalTitles|filterDoctorTitles }}</span>
            </div>
            <div>
                <span>科室名称</span>
                <span>{{reservationDetail.HospitalDepartments }}</span>
            </div>
            <div>
                <router-link
                    :to="'/HospitalDetail?id='+reservationDetail.HospitalId"
                    style="width: 100%;width: 100%;display: flex;justify-content: space-between;"
                >
                    <span>医院名称</span>
                    <span class="arrow-wrapper">
                        {{reservationDetail.HospitalName }}
                        <van-icon name="arrow" class="arrow" />
                    </span>
                </router-link>
            </div>
        </div>
        <!-- 基本预约信息 -->
        <div class="content">
            <div @click="goDetail">
                <span>坐诊专场</span>
                <span class="arrow-wrapper">
                    {{reservationDetail.DissertationName}}
                    <van-icon name="arrow" class="arrow" />
                </span>
            </div>

            <div
                @click="$router.push({name:'HospitalDetail',query:{id:reservationDetail.HospitalId}})"
            >
                <span>就诊地点</span>
                <span class="arrow-wrapper">
                    {{reservationDetail.CityAddress?reservationDetail.CityAddress:'未知'}}
                    <van-icon name="arrow" class="arrow" />
                </span>
            </div>

            <div>
                <span>就诊日期</span>
                <span>{{reservationDetail.VisitDay | getTime}}&nbsp;&nbsp;{{reservationDetail.VisitDay | getWeek}}</span>
            </div>

            <div>
                <span>就诊时段</span>
                <span>{{reservationDetail.TimeSlot }}</span>
            </div>
        </div>

        <div class="content">
            <div>
                <span>就诊人</span>
                <span>{{reservationDetail.FamilyMemberName}}</span>
            </div>
            <div>
                <span>预约费用</span>
                <!-- OrderStatus => 1 收费  2 => 义诊 3 => 拼团 -->
                <span style="color:red;" v-if="reservationDetail.OrderStatus==2">免费</span>
                <span style="color:red;" v-else>{{(+reservationDetail.Price) | getPrice}}元</span>
            </div>
        </div>
        <!-- 已完成不显示按钮 -->
        <div v-if="!isDone">
            <!-- 取消 -->
            <!-- 拼团成功不显示取消按钮 -->
            <div
                class="button"
                v-if="reservationDetail.Status==1&&reservationDetail.OrderStatus!=3  /** free-clinic 取消预约状态不显示 */"
                @click="dialogShow=true"
            >取消预约</div>
            <div
                class="button"
                v-else-if="reservationDetail.Status==2&&reservationDetail.OrderStatus!=3 /** free-clinic 取消报名状态不显示 */"
                @click="dialogShow=true"
            >取消报名</div>
        </div>

        <!-- 立即支付和取消订单  -->
        <div class="payAndCancel" v-if="reservationDetail.Status==6">
            <div class="orderCancel" @click="dialogShow=true">取消订单</div>
            <div class="orderPay" @click="goPay(id,reservationDetail.Price)">立即支付</div>
        </div>
        <!-- 确认框 -->
        <van-dialog
            v-model="dialogShow"
            title="是否确认取消？"
            show-cancel-button
            @confirm="confirmCancel"
        ></van-dialog>
    </div>
</template>
<script>
    export default {
        name: "reservationDetail",
        data() {
            return {
                avatorImg: [""], //取消报名推荐医生头像
                statusText: {
                    1: "预约成功",
                    2: "已报名",
                    3: "已取消",
                    4: "后台取消",
                    5: "预约失败",
                    6: "待支付",
                    7: "已退款",
                    8: "退款失败"
                },
                reservationDetail: {}, //预约详情信息
                // 弹出框
                dialogShow: false,
                id: "" //预约id
            };
        },
        methods: {
            init() {
                // console.log(weixin);
                this.id = this.$route.query.id;
                this.GetOrdersDetailsDTO();
            },
            // 取消报名
            confirmCancel() {
                this.$http
                    .CancelOrder(this.reservationDetail.OrderStatus, this.id)
                    .then(({ data }) => {
                        this.$toast(data.ResultMsg);
                        this.GetOrdersDetailsDTO();
                    });
            },
            // 获取订单详情
            GetOrdersDetailsDTO() {
                // loading
                this.$toast.loading("加载中...");

                this.$http.GetOrdersDetailsDTO(this.id).then(({ data }) => {
                    this.$toast.clear();
                    if (data.IsSuccess) {
                        let retObj = data.ResultObject || {};

                        // 待支付倒计时
                        if (retObj.Status == 6) {
                            // // 支付截至时间
                            // retObj.time =
                            //     +new Date(retObj.CreateTime) + 15 * 60 * 1000;
                            // // 支付剩余时间
                            // retObj.timeRemaining = retObj.time - Date.now(); //如果为负值  则取消

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

                        this.reservationDetail = retObj;
                        // 成功
                    } else {
                        // 失败
                        this.$toast.fail(data.ResultMsg);
                    }

                    // 分享
                    try {
                        window.UEShare(this.reservationDetail.DissertationName);
                    } catch (error) {}
                });
            },
            // 去支付
            goPay(ordercode, price) {
                this.$router.replace({
                    name: "confirmPay",
                    query: {
                        ordercode,
                        price
                    }
                });
            },
            // 倒计时结束  改变状态为取消
            changeStatus(obj) {
                obj.Status = 3;
            },
            // 去详情
            goDetail() {
                // 拼优医专场
                if (this.reservationDetail.OrderStatus == 3) {
                    return this.$router.push({
                        name: "unionDetail",
                        query: { id: this.reservationDetail.DissertationID }
                    });
                }

                // 普通坐诊详情
                this.$router.push({
                    name: "freeClinicDetail",
                    query: { id: this.reservationDetail.DissertationID }
                });
            }
        },
        computed: {
            //当前预约状态
            //预约状态img
            reservationStatus() {
                let statusImg = {
                    1: require("@/assets/images/success.png"), //预约成功
                    2: require("@/assets/images/complete.png"), //已经报名
                    3: require("@/assets/images/cancel.png"), //取消
                    4: require("@/assets/images/cancel.png"), //系统取消
                    5: require("@/assets/images/cancel.png"), //预约失败
                    6: require("@/assets/images/complete.png"), //待支付
                    7: require("@/assets/images/cancel.png"), //已退款
                    8: require("@/assets/images/cancel.png") //退款失败
                };
                return statusImg[this.reservationDetail.Status];
            },
            //预约结束事时间
            appointmentsEndTime() {
                let newDate = new Date(this.reservationDetail.AppointmentsEndTime);
                let year = newDate.getFullYear();
                let month = newDate.getMonth() + 1;
                let day = newDate.getDate();
                return year + "年" + month + "月" + day + "日";
            },
            //是否完成
            isDone() {
                var time = -1;
                try {
                    time =
                        Date.now() -
                        new Date(
                            this.reservationDetail.VisitDay.split("T")[0]
                                .split("-")
                                .join("/") + " 18:00:00"
                        );
                } catch (error) {}
                return time > 0 && this.reservationDetail.Status == 1;
            }
        },
        created() {
            //需要预约id
            if (!this.$route.query.id) {
                this.$router.back();
            }
            this.init();
        },
        filters: {
            //获取周几
            getWeek(value) {
                if (value) {
                    var arr = [
                        "周日",
                        "周一",
                        "周二",
                        "周三",
                        "周四",
                        "周五",
                        "周六"
                    ];
                    return arr[new Date(value).getDay()];
                }
            },
            filterTime1(value) {
                if (value) {
                    let newDate = value.split("T")[0].split("-");
                    let newDateStr =
                        newDate[0] + "年" + newDate[1] + "月" + newDate[2] + "日";
                    return newDateStr;
                }
            }
        }
    };
</script>
<style lang='less' scoped>
    .header {
        position: relative;
        background: url("../../../assets/images/signup-bg1.png") no-repeat top/100%;

        .free-clinic() {
            &::before {
                position: absolute;
                top: 0.08rem;
                left: 0;
                content: "专家1诊";
                width: 1.47rem;
                height: 0.54rem;
                line-height: 0.54rem;
                background-color: #fff;
                border-radius: 0 0.27rem 0.27rem 0;
                opacity: 0.9;
                font-size: 0.26rem;
                color: #0f85ff;
            }
        }
        // 专家1诊  和 拼优医
        &.group-booking,
        &.free-clinic {
            .free-clinic();
        }
        &.group-booking::before {
            content: "拼优医";
        }

        .img {
            width: 3.34rem;
            margin: 0.12rem auto 0.14rem;
        }

        .text {
            font-size: 0.3rem;
            color: #fff;
            font-weight: 600;
            margin-bottom: 0.3rem;
        }

        .result {
            position: relative;
            width: 7rem;
            padding: 0.5rem 0.5rem 0.3rem;
            margin: 0 auto;
            background-color: #ffffff;
            box-shadow: 0rem 0.04rem 0.12rem 0rem rgba(0, 110, 233, 0.44);
            border-radius: 0.1rem;
            font-size: 0.3rem;
            text-align: left;
            line-height: 1.5;
            font-weight: 600;
            span {
                color: #2c3e50;
                font-weight: 600;
            }
            span.bold {
                color: #ec0000;
            }

            .btn {
                width: 2rem;
                line-height: 0.54rem;
                height: 0.54rem;
                bottom: -0.252rem;
                text-align: center;
                color: #fff;
                background-color: #00a0e9;
                box-shadow: 0rem 0.04rem 0.12rem 0rem rgba(0, 110, 233, 0.44);
                border-radius: 0.27rem;
                margin: 0.3rem auto 0;
                font-size: 0.26rem;
            }

            .otherDoctor {
                .title {
                    font-weight: 600;
                    text-align: center;
                    font-size: 0.24rem;
                    color: #00a0e9;
                    margin: 0.3rem auto;
                }

                .activity {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-around;
                    .activity-list {
                        position: relative;
                        width: 40%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        text-align: center;

                        // 专家1诊
                        &.free-clinic::before {
                            position: absolute;
                            top: 1.1rem;
                            left: 50%;
                            transform: translateX(-50%);
                            content: "义诊";
                            color: #fff;
                            width: 0.6rem;
                            height: 0.3rem;
                            font-size: 0.26rem;
                            line-height: 0.3rem;
                            background-color: #fd5b5b;
                            border-radius: 0.04rem;
                            z-index: 1;
                        }
                    }
                }
            }
        }

        // 倒计时
        .unpaied {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            height: 0.6rem;
            // 倒计时
            .van-count-down {
                color: red;
            }
        }
    }

    // 助力
    .firendsHelp {
        height: 1.3rem;
        margin-top: 0.2rem;
        padding: 0.3rem 0.2rem 0.3rem 0.3rem;
        background-image: linear-gradient(0deg, #ffd918 0%, #fffab3 100%);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
            text-align: left;
            font-size: 0.32rem;
            line-height: 1.3;
            color: #ff6007;
            span {
                font-size: 0.42rem;
            }
        }

        .right {
            padding: 0 0.18rem;
            height: 0.6rem;
            line-height: 0.6rem;
            background-image: linear-gradient(0deg, #ff0400 0%, #fd9e55 100%);
            box-shadow: 0.01rem 0.02rem 0.05rem 0rem rgba(254, 59, 30, 0.35);
            border-radius: 0.1rem;
            font-size: 0.28rem;
            color: #fffed7;
            animation: Scale 0.5s infinite alternate;
        }
    }

    .content {
        width: 7.02rem;
        margin: 0.3rem auto 0;
        background-color: #ffffff;
        box-shadow: 0rem 0.05rem 0.14rem 0rem rgba(153, 153, 153, 0.2);
        border-radius: 0.1rem;
        padding: 0 0.22rem;

        > div {
            display: flex;
            justify-content: space-between;
            height: 1.07rem;
            line-height: 1.07rem;
            font-size: 0.24rem;
            text-align: left;
            border-bottom: 0.02rem solid #f2f2f2;
            &:nth-last-of-type(1) {
                border-bottom: none;
            }

            span {
                display: block;
                &:nth-of-type(1) {
                    color: #000;
                    margin-right: 0.26rem;
                    flex-shrink: 0;
                }

                &:nth-of-type(2) {
                    color: #999;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                &.arrow-wrapper {
                    position: relative;
                    padding-right: 0.4rem;
                    .arrow {
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
            }
        }
    }

    // 待支付
    .payAndCancel {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 7.5rem;
        height: 0.98rem;
        background-color: #ffffff;
        box-shadow: 0rem -0.01rem 0.26rem 0rem rgba(0, 34, 58, 0.07);
        padding: 0 0.2rem;
        div {
            width: 2.13rem;
            height: 0.68rem;
            line-height: 0.68rem;
            background-color: #ffb00f;
            box-shadow: 0.01rem 0.02rem 0.09rem 0rem rgba(255, 176, 15, 0.35);
            border-radius: 0.34rem;
            margin: 0 0.2rem;
        }
        .orderPay {
            color: #fff;
        }
        .orderCancel {
            color: #000;
            background-color: #fff;
            border: solid #ccc 0.02rem;
        }
    }
</style>
