<!--坐诊详情-->
<template>
    <div style="padding-bottom: 1.2rem;text-align: left">
        <div v-show="active == 0" class="headerBanner">
            <van-image
                fit="cover"
                :src="FreeClinicData.FlatPatternImg"
                style="text-align: center;width: 100%;line-height: 1.5rem;height: 100%;"
            >
                <template v-slot:error>图片加载失败...</template>
                <template v-slot:loading>
                    <van-loading type="spinner" size="50" />
                </template>
            </van-image>
        </div>
        <div v-show="active == 0" class="main">
            <div class="freeInfo">
                <van-image
                    round
                    fit="cover"
                    width=".8rem"
                    height=".8rem"
                    :src="FreeClinicData.DissertationImg?FreeClinicData.DissertationImg:require('@/assets/images/doctor.png')"
                />
                <div style="margin-left: .2rem;width: 84%;">
                    <h3>
                        {{FreeClinicData.DissertationName}}
                        <span
                            class="yzTag"
                            v-if="FreeClinicData.DissertationPattern ==2"
                        >专家1诊</span>
                    </h3>
                    <p>
                        {{FreeClinicData.VisitStartTime | getTime}} 至 {{FreeClinicData.VisitEndTime | getTime}}
                        <span
                            v-if="(FreeClinicData.DisNumber+DisNumber) > 30"
                            class="DisNumber"
                        >{{FreeClinicData.DisNumber+DisNumber}}人已报名</span>
                    </p>
                </div>
            </div>
            <p class="hint">{{FreeClinicData.DissertationIntro }}</p>
            <p
                class="hint"
                style="margin: .2rem 0;color: #000000;"
                @click="ruleShow = true"
            >更多规则说明 >></p>

            <div class="map">
                <router-link
                    :to="'/HospitalDetail?id='+FreeClinicData.HospitalId"
                    style="width: 100%;  "
                >
                    <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        <van-icon name="location" />
                        {{FreeClinicData.Address}}
                    </span>
                    <van-icon name="arrow" class="arrow" />
                    <!--<van-icon name="arrow" />-->
                </router-link>
            </div>

            <div class="doctorCtn">
                <div class="doctorItem" v-for="(item,index) in FreeClinicData.DissertDoctorList">
                    <p class="dTag">坐诊专家</p>
                    <router-link :to="'/doctorDetail?id='+item.ID" class="doctorInfo">
                        <van-image
                            round
                            fit="cover"
                            width=".8rem"
                            height=".8rem"
                            :src="item.HeadImg?item.HeadImg:require('@/assets/images/doctor.png')"
                        />
                        <div style="margin-left: .2rem;">
                            <h3>
                                {{item.DoctorName || '未设置'}}
                                <span>{{item.PositionalTitles | filterDoctorTitles}}</span>
                                <span v-if="FreeClinicData.DissertationPattern == 2">专家1诊</span>
                            </h3>
                            <p>{{item.HospitalDepartments || '未设置'}}</p>
                            <p>{{item.HospitalName || '未设置'}}</p>
                        </div>
                    </router-link>
                    <p class="doctorGoodAt">{{item.Skill || '未设置'}}</p>
                    <div class="doctorBtn">
                        <span
                            style="background-color:#FFB00F;margin-right: .2rem;"
                            @click="$router.push('/nextSpecial?id='+item.ID)"
                        >预约下次</span>
                        <span
                            :style="{'background-color':isNot?'#929395':''}"
                            @click="showTimeOption(item.ID,FreeClinicData.ID,index)"
                        >
                            {{loadingIndex != index?'报 名':''}}
                            <van-loading
                                v-if="loadingIndex == index"
                                type="spinner"
                                color="#fff"
                                size="16px"
                            />
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!--专题详情图文介绍-->
        <div v-show="active == 1" class="test">
            <div v-if="!FreeClinicData.KindeditorText" style="margin: .2rem 0 .2rem .2rem;">无详情</div>
            <div
                v-if="FreeClinicData.KindeditorText"
                v-html="FreeClinicData.KindeditorText"
                class="TextCtn"
            ></div>
        </div>
        <!--规则弹窗-->
        <van-popup
            v-model="ruleShow"
            position="bottom"
            round
            closeable
            style="height: 50vh;width: 100vw;"
        >
            <div class="rule">
                <p>规则</p>
                <div>
                    <p>报名时段：{{FreeClinicData.AppointmentsStartTime | getTime}} 至 {{FreeClinicData.AppointmentsEndTime | getTime}}</p>
                    <p v-if="FreeClinicData.DissertationPattern!=2">
                        成团条件：
                        <span>{{FreeClinicData.PeopleCounting || 0}}</span>人
                    </p>
                    <p>规则说明：</p>
                    {{FreeClinicData.RuleExplain || '未说明规则'}}
                </div>
            </div>
        </van-popup>
        <!--时间选择弹窗-->
        <van-popup
            v-model="timeShow"
            position="bottom"
            round
            closeable
            style="height: 50vh;width: 100vw;"
        >
            <div class="selectTime">
                <p>
                    <van-icon name="notes-o" size=".5rem" color="#4BA8FF" />选择日期
                </p>
                <div>
                    <van-dropdown-menu :overlay="false">
                        <van-dropdown-item v-model="timeActive" :options="dateArr" />
                    </van-dropdown-menu>
                    <div v-for="(Time,index) in TimeSlot" v-if="timeActive == index">
                        <div class="timeItem" v-for="item in Time.ListDate" @click="toJoin(item)">
                            <span>{{item.TimeSlot}}</span>
                            <span>
                                <!--义诊-->
                                <van-tag
                                    round
                                    type="primary"
                                    v-if="FreeClinicData.DissertationPattern == 2"
                                    :style="{marginRight: '.2rem;',backgroundColor:item.SourceNumber == 0 || isOver?'#7F7F7F':''}"
                                >{{isOver?'已过预约时间，不可挂号':(item.SourceNumber == 0? '无号':'可挂号')}}</van-tag>

                                <!--收费-->
                                <van-tag
                                    round
                                    type="primary"
                                    v-if="FreeClinicData.DissertationPattern != 2"
                                    :style="{marginRight: '.2rem;',backgroundColor:item.SurplusNumber == 0 || isOver?'#7F7F7F':''}"
                                >{{isOver?'已过预约时间，不可挂号':(item.SurplusNumber == 0? '无号':'余'+item.SurplusNumber)}}</van-tag>
                                <van-icon name="arrow" />
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>
        <div class="footerTab">
            <div @click="active=0">
                <img
                    v-show="active == 0"
                    :src="require('../../../assets/images/doctor-icon1.png')"
                    alt
                />
                <img
                    v-show="active == 1"
                    :src="require('../../../assets/images/doctor-icon2.png')"
                    alt
                />
                <span :style="{color:active == 0?'#4BA8FF':''}">专家预约</span>
            </div>
            <div @click="active=1">
                <img
                    v-show="active == 1"
                    :src="require('../../../assets/images/detail-icon1.png')"
                    alt
                />
                <img
                    v-show="active == 0"
                    :src="require('../../../assets/images/detail-icon2.png')"
                    alt
                />
                <span :style="{color:active == 1?'#4BA8FF':''}">详情介绍</span>
            </div>
        </div>
    </div>
</template>

<script>
    import Map from "@/components/map";
    export default {
        name: "freeClinicDetail",
        components: { Map },
        name: "freeClinicDetail",
        data() {
            return {
                timeShow: false, // 控制侧边栏选择时间段
                ruleShow: false, // 控制规则弹窗
                active: 0, // 控制底部切换
                timeActive: 0, //选择时间段的默认下标 与 dateArr 有关联
                dateArr: [], // 存放可选择的日期
                TimeSlot: [], //存放医生就诊时间段,
                ID: "", // 坐诊ID 用来获取坐诊详情，由上级页面传来
                FreeClinicData: {}, //坐诊专题详细资料
                doctorId: "", // 选中的医生ID
                timeSot: "", //存放选中的时间段
                loadingIndex: -1,
                isOver: false, // 是否预约报名时间已过，过了报名时间不可在预约
                isNot: false //是否处在预告中，还没开始报名
            };
        },
        created() {
            this.ID = this.$route.query.id || "";
            this.GetDissertationDTO();
        },
        methods: {
            // 获得该医生的就诊日期和就诊时间段
            showTimeOption(doctorId, freeClinicId, index) {
                // 未到报名时间不可预约
                if (this.isNot) {
                    return;
                }

                if (!doctorId || !freeClinicId) {
                    this.$toast("发生错误");
                    return;
                }
                this.doctorId = doctorId;
                this.loadingIndex = index;
                this.$http
                    .GetDissertaionDetail(doctorId, freeClinicId)
                    .then(res => {
                        if (res.data.IsSuccess) {
                            this.loadingIndex = -1;
                            var data = res.data.ResultObject;
                            // 取出日期复制给 下拉菜单组件 start
                            var arr = [];
                            for (var i = 0; i < data.length; i++) {
                                arr.push({
                                    text: data[i].VisitDay.split("T")[0],
                                    value: i
                                });
                            }
                            this.dateArr = arr;
                            // 取出日期复制给 下拉菜单组件 end

                            // 时间段排序 start
                            data.forEach((value, index) => {
                                var ListDate = value.ListDate.sort((a, b) => {
                                    return (
                                        parseInt(a.TimeSlot) - parseInt(b.TimeSlot)
                                    );
                                });
                                data[index].ListDate = ListDate;
                            });
                            // 时间段排序 end
                            this.TimeSlot = data;
                            this.timeShow = true;
                        } else {
                            this.$toast(res.data.ResultMsg);
                        }
                    });
            },

            // 选择时间段去报名
            toJoin(e) {
                if (this.isOver) {
                    this.$toast("已过预约时间，不可挂号");
                    return;
                }

                if (e.SourceNumber == 0) {
                    this.$toast("当前时段无号源，请选择其他时间段");
                    return;
                }

                var AddOrders = {
                    DoctorID: this.doctorId, //医生id ,
                    DissertationID: this.ID, //专题id ,
                    DissertationDetailID: this.TimeSlot[this.timeActive].ID, //对应那一天的主键id ,
                    DissertationDateID: e.ID //对应哪个时段的主键id
                };

                sessionStorage.setItem("AddOrders", JSON.stringify(AddOrders));

                this.$router.push({ path: "/join" });
            },

            GetDissertationDTO() {
                this.$http.GetDissertationDTO(this.ID).then(res => {
                    // console.log(res)
                    if (res.data.IsSuccess) {
                        var data = res.data.ResultObject;
                        this.FreeClinicData = data;
                        this.isOver =
                            new Date(data.AppointmentsEndTime) <= new Date()
                                ? true
                                : false;
                        this.isNot =
                            new Date(data.AppointmentsStartTime) >= new Date()
                                ? true
                                : false;

                        // 分享
                        try {
                            window.UEShare(res.data.DissertationName);
                        } catch (error) {}
                    } else {
                        this.$toast(res.data.ResultMsg);
                    }
                });
            }
        },
        filters: {}
    };
</script>
<style scoped lang="less">
    .headerBanner {
        width: 100%;
        height: 2.5rem;
        background-color: #fff;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .DisNumber {
        float: right;
        color: #ff0000;
        font-size: 0.26rem;
    }
    .TextCtn {
        box-sizing: border-box;
        padding: 0.3rem;
        box-sizing: border-box;
        width: 7.5rem;
        word-wrap: break-word;
        text-align: left;
        overflow: auto;
        font-size: 0.3rem;
        /deep/ img {
            width: 100%;
            display: block;
        }
    }
    .Tag(@color1,@color2) {
        width: 1.1rem;
        height: 0.38rem;
        display: inline-block;
        border-radius: 15px 15px 15px 0;
        background: linear-gradient(left top, @color1, @color2);
        text-align: center;
        line-height: 0.38rem;
        font-size: 0.22rem;
        color: #ffffff;
        vertical-align: bottom;
    }
    .main {
        width: 7.1rem;
        margin: 0 auto;
        border-radius: 5px;
        padding-top: 0.2rem;
        .freeInfo {
            display: flex;
            margin-top: 0.2rem;
            align-items: center;
            margin-bottom: 0.2rem;
            > div {
                text-align: left;
                h3 {
                    font-size: 0.34rem;
                    color: #333333;
                    margin-bottom: 0.1rem;
                    > span {
                        .Tag(#ff9002, #ff6700);
                    }
                }
            }
        }
        .hint {
            text-align: left;
            line-height: 1.4;
            font-size: 0.24rem;
            color: #666666;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }
        .map {
            font-size: 0.26rem;
            color: #4ba8ff;
            height: 0.6rem;
            line-height: 0.6rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0px 4px 5px 4px #f1f1f2;
            border-radius: 5px;
            box-sizing: border-box;
            padding: 0 0.2rem;
            > a {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
    }
    .doctorCtn {
        margin-top: 0.2rem;
        .doctorItem {
            box-sizing: border-box;
            padding: 0.2rem;
            margin-bottom: 0.2rem;
            box-shadow: 0px 4px 5px 4px #f1f1f2;
            background-color: #fff;
            .dTag {
                .Tag(#23a8ff, #007eff);
                margin-bottom: 0.1rem;
            }
            .doctorInfo {
                display: flex;
                align-items: center;
                > div:nth-child(2) {
                    > h3 {
                        font-size: 0.34rem;
                        color: #333333;
                        line-height: 1.2;
                        > span:nth-child(1) {
                            font-size: 0.26rem;
                            margin-right: 0.1rem;
                        }
                        > span:nth-child(2) {
                            .Tag(#ff9002, #ff6700);
                        }
                    }
                    > p {
                        line-height: 1.2;
                        font-size: 0.26rem;
                        color: #333333;
                    }
                }
            }
            .doctorGoodAt {
                font-size: 0.24rem;
                color: #666666;
                line-height: 1.4;
                margin-top: 0.2rem;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                line-clamp: 4;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
            .doctorBtn {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                margin-top: 0.35rem;
                > div {
                    font-size: 0.26rem;
                    color: #999999;
                    > span:nth-child(1) {
                        color: #4ca0ff;
                    }
                    > span:nth-child(2) {
                        font-size: 0.32rem;
                        color: #ff0000;
                        margin-left: 0.3rem;
                    }
                }
                > span {
                    display: inline-block;
                    width: 1.6rem;
                    height: 0.5rem;
                    line-height: 0.5rem;
                    text-align: center;
                    border-radius: 25px;
                    background-color: #4ca0ff;
                    color: #fff;
                    font-size: 0.26rem;
                }
            }
        }
    }
    .selectTime {
        box-sizing: border-box;
        padding: 0.2rem 0.3rem;
        > p {
            font-size: 0.32rem;
            color: #0e0e0e;
            i {
                vertical-align: sub;
                margin-right: 0.1rem;
            }
        }
        .timeItem {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.2rem;
            height: 0.6rem;
            > span {
                font-size: 0.26rem;
            }
        }
    }
    .rule {
        box-sizing: border-box;
        padding: 0.3rem;
        font-size: 0.26rem;
        color: #000000;
        > p {
            font-size: 0.32rem;
            color: #0e0e0e;
            text-align: center;
            margin-bottom: 0.3rem;
        }
        > div {
            p {
                line-height: 1.3;
            }
        }
    }
    .footerTab {
        width: 100vw;
        display: flex;
        position: fixed;
        left: 0;
        bottom: 0;
        height: 1rem;
        background-color: #fff;
        justify-content: center;
        align-items: center;
        box-shadow: 0px -2px 20px 0px #ddd;
        > div {
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img {
                width: 0.4rem;
                margin-bottom: 0.1rem;
            }
        }
    }
</style>
