<!-- 手术预约详情 -->
<template>
    <div>
        <van-skeleton title :row="20" :loading="loading">
            <div class="wrapper">
                <!-- 预约状态信息 -->
                <div class="banner" :class="`status${status}`" :data-statusTips="statusTips[0]">
                    <div class="status">{{statusTips[0]}}</div>
                    <div class="tips">{{statusTips[1]}}</div>
                    <div
                        class="btn"
                        @click="$router.push({name:'memberFile',query:{id:surgeryDetail.FamilyMemberID}})"
                    >完善病历</div>
                </div>
                <!-- 就诊人 -->
                <div class="order-wrapper" style="margin-top:-.8rem;">
                    <!-- :value="surgeryDetail.FamilyMemberName" -->
                    <van-cell
                        title="就诊人"
                        :icon="icon.iconOfPatient"
                        :value="surgeryDetail.FamilyMemberName "
                    />
                    <van-cell
                        title="病历说明"
                        :icon="icon.iconCaseHistory"
                        :value="surgeryDetail.DiagnosisResult"
                        is-link
                        :to="`medicalHistoryDetail?pageType=1&id=${surgeryDetail.MedicalFileID}`"
                    />
                </div>
                <!-- 手术信息 -->
                <div class="order-wrapper">
                    <van-cell
                        title="手术医生"
                        :value="surgeryDetail.DoctorName"
                        v-if="status==3"
                        is-link
                        :to="`doctorDetail?id=${surgeryDetail.DoctorID}`"
                    />
                    <van-cell title="科室名称" :value="surgeryDetail.HospitalDepartments" />
                    <van-cell
                        title="医生职称"
                        :value="surgeryDetail.PositionalTitles | filterDoctorTitles"
                    />
                    <van-cell title="手术日期" :value="surgeryDetail.OperationTime|getTime" />
                    <van-cell
                        title="手术时间"
                        :value="surgeryDetail.OperationTime|gettime"
                        v-if="status==3"
                    />
                    <van-cell title="手术城市" :value="surgeryDetail.AreaName" />
                    <van-cell
                        title="手术医院"
                        :value="surgeryDetail.HospitalName"
                        v-if="status==3"
                        is-link
                        :to="'/HospitalDetail?id='+surgeryDetail.HospitalID"
                    />
                </div>
                <!-- 手机号 -->
                <div class="order-wrapper">
                    <van-cell title="通知手机号" :value="surgeryDetail.OperationPhone" />
                    <van-cell title="订金" :value="price" value-class="red" />
                </div>
                <!-- 支付按钮 -->
                <div class="payAndCancel" v-if="status==1">
                    <div class="orderPay" @click="goPay(surgeryDetail.ID,surgeryDetail.Price)">立即支付</div>
                    <div class="payCancel" @click="dialogShow=true;">取消支付</div>
                </div>
            </div>
        </van-skeleton>
        <!-- 确认框 -->
        <van-dialog
            v-model="dialogShow"
            title="是否确认取消？"
            show-cancel-button
            @confirm="confirmCancel"
        ></van-dialog>
    </div>
</template>
<script>
    // 小图标
    import { iconOfPatient, iconCaseHistory } from "@/assets/js/icon.js";
    export default {
        name: "surgeryDetail",
        data() {
            return {
                status: 1, //2,3
                icon: {
                    iconOfPatient,
                    iconCaseHistory
                },
                dialogShow: false, // 确认弹窗
                loading: true, // 页面加载中
                surgeryDetail: {}, // 手术预约详情
                id: "" // 详情id
            };
        },
        mounted() {
            setTimeout(_ => (this.loading = false), 1000); // 页面加载完成
        },
        methods: {
            init() {
                // 获取预约id
                let id = this.$route.query.id;
                if (id) this.id = this.$route.query.id;
                else this.$router.back();
            },
            // 获取预约手术记录
            GetOrder() {
                this.$http.GetOrder(this.id).then(({ data }) => {
                    if (data.IsSuccess) {
                        this.surgeryDetail = data.ResultObject;
                        this.status = data.ResultObject.Status;

                        // 已取消状态变为预约失败
                        // if (this.status == 5) {
                        //     this.status = 4;
                        // }

                        // ResultObject  为空
                        if (!data.ResultObject) {
                            setTimeout(_ => {
                                this.$router.back();
                            }, 500);
                        }
                    } else {
                        this.$toast(data.ResultMsg);
                        setTimeout(_ => {
                            this.$router.back();
                        }, 500);
                    }
                });
            },
            // 去支付
            goPay(ordercode, price) {
                this.$router.push({
                    name: "confirmPay",
                    query: {
                        ordercode,
                        price,
                        type: 2 // 手术预约状态
                    }
                });
            },
            // 取消订单
            cancelOrder() {
                this.$http.cancelOrder(this.id).then(res => {
                    if (res.data.IsSuccess) {
                        this.$toast("取消预约成功");
                        this.GetOrder();
                    } else {
                        // 失败
                        this.$toast(res.data.ResultMsg);
                    }
                });
            },
            confirmCancel() {
                this.cancelOrder();
            }
        },
        created() {
            this.init();
            this.GetOrder();
        },
        computed: {
            // 状态提示
            statusTips() {
                if (this.status == 1) {
                    return ["待支付", "您正在进行手术预约,请尽快支付。"];
                } else if (this.status == 2) {
                    return [
                        "待审核",
                        "手术预约已登记成功，待平台审核后，会为您安排行程，请保持手机畅通。为了方便效率推进，请完善个人病历。"
                    ];
                } else if (this.status == 3) {
                    return [
                        "预约成功",
                        `手术预约已成功，已为您安排了[${this.surgeryDetail.DoctorName}]医生进行手术，为了方便效率推进，请完善个人病历。`
                    ];
                } else if (this.status == 4) {
                    return [
                        "预约失败",
                        "很遗憾的通知您，由于近期医生行程满档，本次您的手术预约没有成功，费用将在7个工作日内由客服联系您退回。"
                    ];
                } else if (this.status == 5) {
                    return ["已取消", "取消了当前手术预约订单"];
                } else if (this.status == 6) {
                    return [
                        "退款失败",
                        "很遗憾的通知您，手术预约费用退款失败,请联系客服！"
                    ];
                }
            },
            // 价格
            price() {
                return (this.surgeryDetail.Price / 100).toFixed(2) + "元";
            }
        },
        filters: {
            gettime(value) {
                return value.split("T")[1];
            }
        }
    };
</script>
<style lang='less' scoped>
    // 预约信息模块
    .red {
        color: red;
    }

    .order-wrapper {
        width: 7.1rem;
        background-color: #ffffff;
        box-shadow: 0.03rem 0.04rem 0.1rem 0rem rgba(218, 218, 218, 0.25);
        border-radius: 0.2rem;
        margin: 0 auto 0.2rem;
        overflow: hidden;
        /deep/ .van-cell__title {
            flex: none;
        }
        /deep/ .van-cell__value {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 0.2rem;
        }
    }

    .wrapper {
        background: #f9f9fa;
        min-height: 100vh;
        padding-bottom: 0.5rem;
        text-align: left;
        .banner {
            position: relative;
            height: 4.34rem;
            background: url("../../../assets/images/surgery/banner.png") no-repeat
                top/100%;
            color: #ffffff;
            padding: 0.4rem 0.2rem;
            line-height: 1.5;

            .status {
                font-size: 0.44rem;
                line-height: 0.9rem;
            }
            .tips {
                width: 4.05rem;
                font-size: 0.24rem;
                line-height: 0.3rem;
            }
            .btn {
                margin-top: 0.36rem;
                display: inline-block;
                padding: 0 0.33rem;
                height: 0.48rem;
                line-height: 0.48rem;
                background-color: #ffffff;
                box-shadow: 0.02rem 0.02rem 0.13rem 0rem rgba(77, 175, 255, 0.61);
                border-radius: 0.24rem;
                color: #48a2fd;
            }

            &::before {
                content: attr(data-statusTips);
                position: absolute;
                right: 0.56rem;
                top: 0.96rem;
                width: 2.25rem;
                height: 0.68rem;
                font-size: 0.41rem;
                line-height: 0.68rem;
                background-color: #62dde0;
                border-radius: 0.1rem;
                text-align: center;
            }
            &.status1::before,
            &.status4::before,
            &.status5::before,
            &.status6::before {
                background-color: #ff6965;
            }
            &.status2::before {
                background-color: #62dde0;
            }
            &.status3::before {
                background-color: #62a5f0;
            }
        }
    }

    // 待支付
    .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: rgba(0, 81, 255, 0.986);
            box-shadow: 0.01rem 0.02rem 0.09rem 0rem rgba(255, 176, 15, 0.35);
            border-radius: 0.34rem;
            margin: 0 0.2rem;
        }
        .orderPay {
            text-align: center;
            color: #fff;
        }
        // 取消支付
        .payCancel {
            text-align: center;
            color: #fff;
            background-color: red;
        }
    }
</style>