<!--拼优医详情-->
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <main class="main">

        <div class="headerBanner">
            <van-image
                    fit="cover"
                    width="7.5rem"
                    height="3.22rem"
                    :src="UnionData.FlatPatternImg"
            >
                <template v-slot:loading>
                    <van-loading type="spinner" size="25"/>
                </template>
            </van-image>
        </div>

        <div class="container">
            <div class="unionName">
                <van-image
                        round
                        fit="cover"
                        width=".8rem"
                        height=".8rem"
                        :src="UnionData.DissertationImg?UnionData.DissertationImg:require('@/assets/images/union/union-icon.png')"
                        style="margin-right: .3rem;"
                >
                    <template v-slot:loading>
                        <van-loading type="spinner" size="20"/>
                    </template>
                </van-image>
                <div style="width: 5.8rem;">
                    <h3>{{UnionData.DissertationName}}</h3>
                    <p>诊金：
                        <span
                                @click="FirstGuideShow = true"
                                :style="{'z-index':FirstGuideShow?'10000':'1'}"
                                class="FirstGuideShow"
                        >￥{{UnionData.AppointmentsPrice | getPrice}}~{{UnionData.NoSameCityPrice | getPrice}}
                            <van-icon name="warning-o" size=".32rem" color="#9A9CA5" style="vertical-align: top;"/>
                        </span>
                    </p>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="unionOption">
                <div>
                    <span>活动时间：</span>
                    <p>{{UnionData.AppointmentsStartTime | getTime}}〜{{UnionData.AppointmentsEndTime | getTime}}</p>
                </div>
                <div>
                    <span>坐诊时间：</span>
                    <p>{{UnionData.VisitStartTime | getTime}}〜{{UnionData.VisitEndTime | getTime}}</p>
                </div>
                <div>
                    <span>接诊人数：</span>
                    <p><span style="color:#4ca0ff;">{{UnionData.PeopleCounting}}</span>人</p>
                </div>
                <div @click="RuleShow = true;">
                    <span>活动规则</span>
                    <van-icon name="arrow"/>
                </div>
                <div @click="IntroduceShow = true">
                    <span>医生简介</span>
                    <van-icon name="arrow"/>
                </div>
            </div>
        </div>

        <div class="">
            <div class="unionList">

                <div class="unionListAll" @click="MoreUnionShow = true"
                     v-if="UnionData.List && UnionData.List.length > 2 ">

                    <p>这些人正在拼优医，可参与拼优医</p>
                    <span>查看全部 <van-icon name="arrow" size=".3rem" color="#333333"
                                         style="vertical-align: text-bottom;"/></span>
                </div>

                <div class="unionList-ctn">
                    <div
                            class="unionItem"
                            v-for="(item,index) in UnionData.List"
                            v-if="index <= 1"
                            @click="(item.PeopleCounting - item.TotalCount) >= 0 && item.Status ==1?UnionAlert(item):''"
                    >
                        <div class="flexTop">
                            <div class="unionItemInfo">
                                <van-image
                                        round
                                        fit="cover"
                                        width="1rem"
                                        height="1rem"
                                        :src="item.HeadImg"
                                        style="margin-right: .3rem;"
                                >
                                    <template v-slot:loading>
                                        <van-loading type="spinner"/>
                                    </template>
                                </van-image>
                                <h3>{{item.NickName || '未知'}}</h3>
                            </div>

                            <div class="unionItemTime" v-if="IsOver">
                                <p>已过预约时间</p>
                            </div>
                            <div class="unionItemTime" v-else-if="!IsOver && item.Status !=2 && item.PeopleCounting - item.TotalCount !=0">
                                <p>还差<span style="color:#ff0000">{{item.PeopleCounting - item.TotalCount}}</span>名成员</p>
                                <p>剩余：{{item.DownTime}}</p>
                            </div>
                            <div style="color:#24ac1e;" class="unionItemTime" v-else-if="item.Status ==2">
                                <!--<p>已成团</p>-->
                            </div>

                        </div>
                        <div class="flexBottom">
                            <div class="unionItemLocation">
                                <p @click.stop="$router.push({path:'/HospitalDetail',query:{id:item.HospitalID}})">
                                    <u>活动地点：</u>
                                    <span>
                                        <van-icon name="location" color="#4CA0FF" size=".33rem"
                                                  style="vertical-align: text-bottom;"/>{{item.HospitalName}}
                                    </span>
                                </p>
                                <p><u>就诊时间：</u><span>{{item.VisitDay | getTime}} {{item.VisitDay | getWeek}}</span></p>
                            </div>
                                                    <!--无号源 已过报名预约结束时间 已开团的 按钮变灰色-->
                            <div
                                    :class="(item.PeopleCounting - item.TotalCount) <= 0 || IsOver || item.Status ==2?'unionItemBtn disableBtn':'unionItemBtn'"
                                    :DissertationDetailID="item.DissertationDetailID"
                            >去拼优医
                            </div>
                        </div>
                    </div>
                </div>
                <div class="unionListHint" v-if="UnionData.GroupTableCount > 0">还剩{{UnionData.GroupTableCount}}个拼优医场次，先到先得喔</div>
            </div>
        </div>

        <div class="startUnion" v-if="UnionData.GroupTableCount > 0">
            <p> {{UnionData.List && UnionData.List.length == 0?'当前暂无场次':'没有心仪的场次'}}？试试发起拼优医吧！</p>
            <span :class="IsOver?'disableBtn':''" @click="UnionAlert('')">发起拼优医</span>
        </div>

        <!--参加拼优医弹窗-->
        <van-popup v-model="AddUnionShow" style="background: transparent;">
            <div class="addUnion">
                <div class="bg"></div>
                <div class="con">
                    <p>确定参与</p>
                    <h3>{{ConfirmData.DoctorName}}{{ConfirmData.PositionalTitles | filterDoctorTitles}}</h3>
                    <p><span>{{ConfirmData.VisitDay | getTime}}-{{ConfirmData.HospitalName}}</span>的拼优医?</p>
                    <u>仅剩{{ConfirmData.SurplusNumber}}个名额，{{ConfirmData.DownTime}}后结束</u>
                    <div class="addUnionBtn" @click="UnionSelectDate(false)">参 与 拼 团</div>
                    <span @click="AddUnionShow = false">取消</span>
                </div>
                <span class="closeAddUnion"><van-icon @click="AddUnionShow = false" name="close" size=".56rem"
                                                      color="#fff"/></span>
            </div>
        </van-popup>

        <!--发起拼优医弹窗-->
        <van-popup v-model="StartUnionShow" style="background: transparent;">
            <div class="addUnion">
                <div class="bg1"></div>
                <div class="con">
                    <p>您确定要发起</p>
                    <h3 style="display: inline;">{{UnionData.DoctorName}}医生</h3>
                    <p style="display: inline;">的拼优医吗?</p>
                    <u>成行人数根据您所选的就诊日期而定</u>
                    <div class="addUnionBtn" @click="UnionSelectDate(true)">发 起 拼 团</div>
                    <span @click="StartUnionShow = false">取消</span>
                </div>
                <span class="closeAddUnion"><van-icon @click="StartUnionShow = false" name="close" size=".56rem"
                                                      color="#fff"/></span>
            </div>
        </van-popup>

        <!--规则弹窗-->
        <van-popup
                round
                position="bottom"
                v-model="RuleShow"
                closeable
                :style="{ height: '5.5rem' }"
        >
            <div class="ruleText">
                <p>活动规则</p>
                <div>
                    {{UnionData.RuleExplain}}
                </div>
            </div>
        </van-popup>

        <!--医生简介弹窗-->
        <van-popup
                round
                position="bottom"
                v-model="IntroduceShow"
                closeable
                :style="{ height: '5.5rem' }"
        >
            <div class="doctorGoods">
                <div>
                    <p>
                        <img :src="require('../../../assets/images/good-icon1.png')" alt/>
                        擅长
                        <van-button type="default" round size="mini" style="float: right;"
                                    @click="SkillAllShow = !SkillAllShow">
                            {{SkillAllShow?'收起':'展开'}}
                            <van-icon v-if="!SkillAllShow" name="arrow-down" size="12px"
                                      style="vertical-align: text-top;"/>
                            <van-icon v-if="SkillAllShow" name="arrow-up" size="12px"
                                      style="vertical-align: text-top;"/>
                        </van-button>
                    </p>
                    <div :class="SkillAllShow ? '' :'hide'">{{UnionData.Skill}}</div>
                </div>
                <div>
                    <p>
                        <img :src="require('../../../assets/images/good-icon2.png')" alt/>
                        简介
                        <van-button type="default" round size="mini" style="float: right;"
                                    @click="IntroductionAllShow = !IntroductionAllShow">
                            {{IntroductionAllShow?'收起':'展开'}}
                            <van-icon v-if="!IntroductionAllShow" name="arrow-down" size="12px"
                                      style="vertical-align: text-top;"/>
                            <van-icon v-if="IntroductionAllShow" name="arrow-up" size="12px"
                                      style="vertical-align: text-top;"/>
                        </van-button>
                    </p>
                    <div :class="IntroductionAllShow ? '' :'hide'">{{UnionData.Introduction}}</div>
                </div>
            </div>
        </van-popup>

        <!--更多拼优医弹窗-->
        <van-popup
                round
                position="bottom"
                closeable
                v-model="MoreUnionShow"
                :style="{ height: '10rem' }"
        >
            <div class="moreUnion">
                <div>拼优医数量</div>
                <div style="height: 9rem;overflow: auto;">
                    <div class="unionList-ctn">
                        <div
                                class="unionItem"
                                v-for="(item,index) in UnionData.List"
                                v-if="index > 1"
                                @click="(item.PeopleCounting - item.TotalCount) >= 0?UnionAlert(item):''"
                        >
                            <div class="flexTop">
                                <div class="unionItemInfo">
                                    <van-image
                                            round
                                            fit="cover"
                                            width="1rem"
                                            height="1rem"
                                            :src="item.HeadImg"
                                            style="margin-right: .3rem;"
                                    >
                                        <template v-slot:loading>
                                            <van-loading type="spinner"/>
                                        </template>
                                    </van-image>
                                    <h3>{{item.NickName || '未知'}}</h3>
                                </div>
                                <div class="unionItemTime" v-if="item.PeopleCounting - item.TotalCount > 0">
                                    <p>还差<span style="color:#ff0000">{{item.PeopleCounting - item.TotalCount}}</span>名成员
                                    </p>
                                    <p>剩余：{{item.DownTime}}</p>
                                </div>
                                <div style="color:#24ac1e;" class="unionItemTime" v-else>
                                    <p>已成团，等待就诊</p>
                                </div>
                            </div>
                            <div class="flexBottom">
                                <div class="unionItemLocation">
                                    <p @click.stop="$router.push({path:'/HospitalDetail',query:{id:item.HospitalID}})">
                                        <u>活动地点：</u>
                                        <span>
                                        <van-icon name="location" color="#4CA0FF" size=".33rem"
                                                  style="vertical-align: text-bottom;"/>{{item.HospitalName}}
                                    </span>
                                    </p>
                                    <p><u>就诊时间：</u><span>{{item.VisitDay | getTime}} {{item.VisitDay | getWeek}}</span>
                                    </p>
                                </div>
                                <div
                                        :class="(item.PeopleCounting - item.TotalCount) > 0?'unionItemBtn':'unionItemBtn disableBtn'"
                                        :DissertationDetailID="item.DissertationDetailID"
                                >去拼优医
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>

        <!--首次进入引导的弹窗-->
        <van-popup
                v-model="FirstGuideShow"
                :style="{ height: '100%',width:'100%',background:'transparent'}"
                @opened="SetFirstGuide"
        >
            <div class="firstGuide">
                <div>
                    <span @click="FirstGuide"></span>
                </div>
            </div>
        </van-popup>

        <!--选择拼优医时间弹窗-->
        <van-popup
                round
                position="bottom"
                v-model="UnionTimeShow"
                closeable
                :style="{ height: '11rem' }"
                @opened="SetToDayText"
        >
            <div style="height: .5rem;"></div>
            <div class="seek">
                <div class="seekCity" @click="ToChooseCity">
                    <span>就诊城市：</span>
                    <p>{{ConfirmData.chooseCity.AreaName || '请选择'}}</p>
                </div>
                <div class="seekHospital" @click="HospitalShowAlert">
                    <span>就诊医院：</span>
                    <p v-if="!LoadingHospitalStatus">{{ConfirmData.HospitalName || '请选择'}}</p>
                    <p v-if="LoadingHospitalStatus">
                        <van-loading size="24px">加载中...</van-loading>
                    </p>
                </div>
                <div class="seekDate">
                    <span>就诊日期：</span>
                </div>
                <div id="inlineCalendar">
                    <inlineCalendar
                            mode="multiple"
                            :disabledDate="DisabledDate"
                            :defaultDate="DefaultDate"
                            :weekNames="WeekNames"
                            :dayClick="dayClick"
                    >
                        <template v-slot:day="scope">
                            <van-icon
                                    v-if="scope.date.isSelect && scope.date.value == ConfirmData.value"
                                    name="checked"
                                    class="point"
                                    size=""
                                    color="#4CA0FF"
                            />
                            <!--
                            scope.date 可选值
                            value,//当前几号
                            dateTime,// 当前日期（dayjs类型）
                            isGrey,// 是否当前月的日期
                            isToday,// 是否今天
                            isSelect,// 是否被选中 包含在 DefaultDate 数组里的日期
                            isDisable,// 是否被禁止选择
                            isDuring,// 是否在已选日期段内
                            -->
                        </template>
                    </inlineCalendar>
                </div>


                <div class="seekTime" v-if="!ConfirmData.dateTime">
                    <span>就诊时间段：请先选择就诊日期</span>
                </div>
                <div class="seekFund" v-if="!ConfirmData.dateTime">
                    <div>
                        <p>诊金：<span>￥--.--</span></p>
                        <span>（具体诊金根据所选的出诊城市而定）</span>
                    </div>
                    <div class="seekFundBtn" @click="TouOrderDdetails">确 定</div>
                </div>


                <div
                        v-for="(item,index) in DateData"
                        :key="index"
                        v-if="ConfirmData.dateTime && item.VisitDay.split('T')[0] == ConfirmData.dateTime"
                >
                    <div class="seekTime">
                        <span>就诊时间段：</span>
                        <div
                                v-for="(item2,index2) in item.ListDate"
                        >
                            <div @click="SwiperTimeSlot(index2,item)"
                                 :class="ConfirmData.timeSlotIndex === index2?'Active':''">
                                <div style="font-size: .22rem;">{{item2.TimeSlot | getTimeSlot}}</div>
                                <div style="font-size: .24rem;">{{item2.TimeSlot}}</div>
                            </div>
                            <p>剩余{{item2.SurplusNumber}}个名额</p>
                        </div>
                    </div>
                    <div class="seekFund">
                        <div>
                            <p>诊金：<span>
                        ￥{{
                            (UnionData.DoctorAreaCode == ConfirmData.chooseCity.AreaCode ?
                                item.AppointmentsPrice:
                                item.NoSameCityPrice)
                             | getPrice}}
                    </span></p>
                            <span>（具体诊金根据所选的出诊城市而定）</span>
                        </div>
                        <div class="seekFundBtn" @click="TouOrderDdetails">确 定</div>
                    </div>
                </div>

            </div>

        </van-popup>

        <!--选择就诊医院-->
        <van-popup
                v-model="HospitalShow"
                position="bottom"
                round
                safe-area-inset-bottom
                :close-on-popstate="true"
                :style="{ height: '40%' }"
        >
            <van-picker
                    show-toolbar
                    :columns="HospitalList"
                    value-key="HospitalName"
                    @cancel="HospitalShow = false;"
                    @confirm="confirmHospital"
            />

        </van-popup>

    </main>


</template>

<script>


    export default {
        name: "unionDetail",
        data() {
            return {
                UnionAlertDate: {}, // 发起 or 参加拼团弹窗数据
                AddUnionShow: false, //参加拼优医弹窗
                StartUnionShow: false, // 发起拼优医弹窗
                RuleShow: false, // 规则弹窗
                IntroduceShow: false, // 医生简介弹窗
                MoreUnionShow: false, // 更多拼优医弹窗
                SkillAllShow: false, // 医生简介的擅长字段是否展开
                IntroductionAllShow: false, //医生简介的介绍字段是否展开
                FirstGuideShow: false, // 是否已经被指引诊金说明
                UnionTimeShow: false, //选择拼优医时间弹窗
                HospitalShow: false, // 选择医院弹窗
                LoadingHospitalStatus: false,// 选择医院弹窗异步加载显示loading
                HospitalList: [],// 医院数据
                WeekNames: ['一', '二', '三', '四', '五', '六', '日'], //显示的星期文本
                DisabledDate: [], //不可选的时间 =>['2019-11-15','2019-11-13','2019-11-16']
                DefaultDate: [], // 可选的时间 => ['2019-11-12','2019-11-17','2019-11-14']
                DateData: [], //根据团id 返回可选的时间段
                UnionId: '', // 拼团ID
                UnionData: {}, //拼团详情页面渲染数据
                IsMeStart: null, //是自己发起拼团还是参加别人拼团 自己发起的拼团 = true ; 别人的团 = false
                ConfirmData: { // 确认订单数据
                    dateTime: '', //确定选择的日期
                    value: 0, // 日期的数值 2019-12-15 = value:15
                    timeSlotIndex: '', // 选择的时间段下标
                    HospitalID: '', //医院ID
                    HospitalName: '', //医院名称
                    chooseCity: {} // 就诊城市
                },
                IsOver:false, //当前拼团活动是否预约时间已过
            }
        },
        created() {

            this.FirstGuideShow = JSON.parse(localStorage['FirstGuideShow'] || 'true');
            this.UnionId = this.$route.query.id || '';
            this.GetDissByTable();

            // 数据克隆
            var self = this;
            var obj = JSON.parse(sessionStorage['unionDetail'] || '{}');
            if (obj) {
                Object.keys(self).forEach(key => {
                    key in self && key in obj ? self[key] = obj[key] : '';
                })

                // 选择城市后重置医院选择
                var chooseCityData = JSON.parse(sessionStorage['chooseCity'] || '{}');
                if (chooseCityData.AreaCode != this.ConfirmData.chooseCity.AreaCode) {
                    this.ConfirmData.HospitalID = '';
                    this.ConfirmData.HospitalName = '';
                }
                this.ConfirmData.chooseCity = chooseCityData;

            }

        },
        destroyed() {
        },
        methods: {

            // 赋值 参加 || 发起 拼团弹窗的数据并收集用户确定选择的数据用于确认订单
            UnionAlert(obj) {

                if(this.IsOver){
                    this.$toast('已过预约时间')
                    return;
                }

                if (obj) {
                    // 参加别人拼团
                    this.AddUnionShow = true;
                    this.GetTableDetails(this.UnionData.ID,obj.ID);
                }else{
                    // 自己发起拼团
                    this.StartUnionShow = true;
                    this.GetTableDetails(this.UnionData.ID,'');
                }

                this.ConfirmData.DoctorName = this.UnionData.DoctorName; // 医生名字
                this.ConfirmData.PositionalTitles = this.UnionData.PositionalTitles; // 医生职称
                this.ConfirmData.VisitDay = obj.VisitDay; // 选择的拼团日期
                this.ConfirmData.HospitalName = obj.HospitalName || ''; // 医院名字
                this.ConfirmData.HospitalID = obj.HospitalID || ''; // 医院ID
                this.ConfirmData.SurplusNumber = obj.DateList ? obj.DateList[0].SurplusNumber + obj.DateList[1].SurplusNumber : ''; //选择的拼团场次上午和下午共还有多少号源

                this.ConfirmData.dateTime = obj.VisitDay ? obj.VisitDay.split('T')[0] : '',
                this.ConfirmData.value = Number(obj.VisitDay ? obj.VisitDay.split('T')[0].slice(-2) : '0'),

                this.ConfirmData.DownTime = obj.DownTime || '';
                this.ConfirmData.chooseCity = { // 给赋值参与别人团的城市信息
                    AreaCode: obj.AreaCode || '',
                    AreaName: obj.AreaName || '',
                };
                // this.ConfirmData.dissertaionDetailId = obj.DissertationDetailID || '', //参加别人拼团的团ID

                this.ConfirmData.timeSlotIndex = ''; // 清除默认选择时间段
                this.ConfirmData.ID = obj.ID; // 该拼团活动的ID

            },

            // type = false 参与别人的拼团并弹起选择时间弹窗
            // type= true 自己发起拼团并弹起选择时间弹窗
            UnionSelectDate(type) {
                this.StartUnionShow = false;
                this.AddUnionShow = false;
                this.UnionTimeShow = true;
                this.IsMeStart = type;
            },

            // 跳转确认订单
            TouOrderDdetails() {
                var data = {
                    dissertaionDetailId: this.ConfirmData.dissertaionDetailId, //天ID
                    dissertationDateId: this.ConfirmData.dissertationDateId, //时间段ID
                    areaCode: this.ConfirmData.chooseCity.AreaCode || '', //城市Code
                    hospitalID: this.ConfirmData.HospitalID, // 医院ID
                    hospitalName: this.ConfirmData.HospitalName, //医院名称
                    ID: this.ConfirmData.ID, // 该团的ID
                    isMeStart: this.IsMeStart ? 1 : 2 // 自己发起拼团还是参加别人拼团
                };

                if (!data.areaCode) {
                    this.$toast('请选择就诊城市');
                    return;
                }
                if (!data.hospitalID) {
                    this.$toast('请选择就诊医院');
                    return;
                }
                if (!data.dissertaionDetailId || !data.dissertationDateId || this.ConfirmData.timeSlotIndex === '') {
                    this.$toast('请选择就诊日期和时间');
                    return;
                }

                if (this.ConfirmData.SurplusNumber <= 0) {
                    this.$toast('当前时间无号源，请选择其他时间');
                    return;
                }

                sessionStorage['unionDetail'] = JSON.stringify(this._data);
                this.$router.push({path: '/uOrderDetails', query: data});
            },

            // 切换拼团时间段
            SwiperTimeSlot(e, obj) {
                this.ConfirmData.timeSlotIndex = e;
                this.ConfirmData.dissertaionDetailId = obj.ListDate[e].DissertationDetailID;
                this.ConfirmData.dissertationDateId = obj.ListDate[e].ID;
                this.ConfirmData.SurplusNumber = obj.ListDate[e].SurplusNumber;
            },

            // 跳转选择城市页面 参与别人团不跳转
            ToChooseCity() {
                if (!this.IsMeStart) {
                    this.$toast('参与拼团不可自行选择');
                    return;
                }
                sessionStorage['unionDetail'] = JSON.stringify(this._data);
                this.$router.push('/chooseCity')
            },

            // 获取一个团可以选择的天数
            GetTableDetails(id1,id2) {
                this.$http.GetTableDetails({
                    id: id1 || '', //团ID
                    groupTableid: id2  || '' //拼团场次ID
                }).then(({data}) => {
                    if (data.IsSuccess) {


                        // 筛选可选时间和不可选时间给选择日期组件 start
                        var DefaultDateArr = []; //可选的时间
                        var DisabledDateArr = []; // 不可选的时间

                        data.ResultObject.forEach((key) => {
                            var str = key.VisitDay.split('T')[0];
                            key.IsEffective ? DefaultDateArr.push(str) : DisabledDateArr.push(str);
                        })

                        this.DisabledDate = DisabledDateArr;
                        this.DefaultDate = DefaultDateArr;
                        // 筛选可选时间和不可选时间给选择日期组件 end

                        // 时间段排序 start
                        var DateData = Object.assign([], data.ResultObject);
                        DateData.forEach((key) => {
                            var ListDate = key.ListDate.sort((a, b) => {
                                return (
                                    parseInt(a.TimeSlot) - parseInt(b.TimeSlot)
                                );
                            });
                            key.ListDate = ListDate;
                        });
                        this.DateData = DateData;
                        // 时间段排序 end


                    } else {
                        this.$toast(data.ResultMsg)
                    }
                })
            },

            // 根据城市Code 加载合作医院 参与别人拼团不加载
            HospitalShowAlert() {
                if (!this.IsMeStart) {
                    this.$toast('参与拼团不可自行选择')
                    return;
                }
                if (!this.ConfirmData.chooseCity.AreaCode) {
                    this.$toast('请先选择就诊城市');
                    return;
                }
                this.LoadingHospitalStatus = true;
                var code = this.ConfirmData.chooseCity.AreaCode;
                this.$http.GetCityHospital(code).then(res => {
                    this.LoadingHospitalStatus = false;
                    if (res.data.IsSuccess) {
                        if (res.data.ResultObject.length == 0) {
                            this.$toast('当前城市暂无合作医院');
                            return;
                        }
                        this.HospitalShow = true;
                        this.HospitalList = res.data.ResultObject;
                    } else {
                        this.$toast(res.data.ResultMsg)
                    }
                })
            },

            // 选择医院
            confirmHospital(e) {
                console.log(e)
                this.HospitalShow = false;
                this.ConfirmData.HospitalID = e.ID;
                this.ConfirmData.HospitalName = e.HospitalName;
                sessionStorage['HospitalID'] = JSON.stringify(e.ID)
            },

            // 选择拼团日期
            dayClick(e) {
                var str = e.format('YYYY-MM-DD');

                if (!this.IsMeStart) {
                    this.$toast('参与拼团不可自行选择');
                    return;
                }

                if (!this.ConfirmData.HospitalID) {
                    this.$toast('请先选择就诊医院');
                    return;
                }
                console.log(str)
                if (this.DefaultDate.includes(str)) {
                    this.ConfirmData.dateTime = str;
                    this.ConfirmData.value = e.$D;
                    this.ConfirmData.dissertaionDetailId = '';
                    this.ConfirmData.dissertationDateId = '';
                    this.ConfirmData.timeSlotIndex = '';
                    console.log('这天可选')
                } else {
                    console.log('这天不可选')
                    this.$toast('这天不是医生的出诊日')
                }

                // return false将不会执行选中、取消选中的操作
                return false;
            },

            // 获取拼团详情
            GetDissByTable() {

                if (!this.UnionId) {
                    this.$toast('发生错误');
                    return;
                }

                this.$http.GetDissByTable(this.UnionId).then(({data}) => {
                    if (data.IsSuccess) {
                        this.UnionData = data.ResultObject;

                        var EndTime = data.ResultObject.AppointmentsEndTime.split('T').join(' ').split('-').join('/');

                        new Date(EndTime) < new Date()?this.IsOver = true:this.IsOver = false;

                        this.getDownTimeText();
                    } else {
                        this.$toast(data.ResultMsg)
                    }
                })
            },

            // 设置引导图片
            SetFirstGuide() {
                this.FirstGuideShow = true;
                window.scrollTo({
                    top: 0,
                    behavior: "smooth"
                });
            },

            // 经过了引导信息
            FirstGuide() {
                this.FirstGuideShow = false;
                localStorage['FirstGuideShow'] = false;
            },

            getDownTimeText() {

                // 日期补0
                let formate = (time) => {
                    if (time >= 10) {
                        return time;
                    } else {
                        return `0${time}`
                    }
                };

                let _this = this;

                let a = setInterval(() => {

                    let arr = _this.UnionData.List;

                    if (arr.length == 0) {
                        return;
                        clearInterval(a);
                    }

                    arr.forEach((item, index) => {
                        let endTime = new Date(_this.UnionData.AppointmentsEndTime.split('T').join(' ').split('-').join('/')).getTime();
                        let startTime = new Date().getTime();
                        let Timer = parseInt((endTime - startTime) / 1000) //获得相差秒数
                        if (Timer < 0) {
                            item.DownTime = `00:00:00`;
                        }else{
                            let d = parseInt(Timer / (24 * 60 * 60))
                            let h = formate(parseInt(Timer / (60 * 60)))
                            let m = formate(parseInt(Timer / 60 % 60))
                            let s = formate(parseInt(Timer % 60))
                            item.DownTime = `${h}:${m}:${s}`
                        }
                    })
                    _this.UnionData.List = Object.assign([], _this.UnionData.List, arr)

                }, 1000);
            },

            // 自定义日期选择今天为 '今' 的字样
            SetToDayText() {
                setTimeout(() => {
                    document.getElementsByClassName('m-today')[0].innerText = '今'
                }, 200)
            }
        },
    }
</script>

<style lang="less" scoped>
    .disableBtn {
        background-color: #ACACAC !important;
        box-shadow: 0 0 4px 0px #ACACAC !important;
    }

    .UnionBtn(@width,@height,@Bgcolor) {
        width: @width;
        min-width: @width;
        height: @height;
        text-align: center;
        border-radius: .35rem;
        background-color: @Bgcolor;
        color: #fff;
        line-height: @height;
        box-shadow: 0 0 4px 0px @Bgcolor;
        box-sizing: border-box;
    }

    .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .main {
        max-width: 7.5rem;
        width: 7.5rem;
        min-height: 100vh;
        text-align: left;
        background-color: #F9F9FA;
        position: relative;
        padding-bottom: 1.2rem;
    }

    .container {
        box-sizing: border-box;
        padding: 0 .3rem;
        width: 100%;
        background-color: #fff;
    }

    .E {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .unionName {display: flex;min-height: 1.5rem;align-items: center;margin: 0 0 .2rem 0;
        h3 {font-size: .36rem;color: #333333;max-width: 6rem;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;line-height: 1.2;}
        p {font-size: .26rem;color: #666666;padding: .1rem 0;margin-top: .1rem;position: relative;
            span {font-size: 0.36rem;color: #ff0000;margin-right: 0.2rem;position: absolute;top: -0.05rem;z-index: 10000;background-color: #fff;border-radius: 15px;padding: 0.1rem 0.2rem;} }
    }

    .unionOption {
        > div {.flex;height: .8rem;
            span {font-size: .26rem;color: #666666;}
            p {font-size: .28rem;color: #333333;}
            i {font-size: 0.3rem;} }
    }

    /*拼优医列表*/
    .unionList {margin-top: .2rem;
        .unionListAll {font-size: .28rem;color: #333333;.flex;height: .8rem;background-color: #fff;padding: 0 .3rem;box-sizing: border-box;
            span {font-size: .24rem;color: #666666;} }
        .unionListHint {height: .6rem;background-color: #FFF0D1;color: #ffaa00;font-size: .24rem;text-align: center;line-height: .6rem;}
    }
    .unionList-ctn {margin-bottom: .2rem;box-shadow: 0px 2px 5px 0px #ccc;}
    .unionItem {background-color: #fff;box-sizing: border-box;padding: .2rem .3rem;border-bottom: 1px solid #F0F0F1;
        .flexTop,
        .flexBottom {.flex;}
        .flexTop {
            .unionItemInfo {
                .flex;
                h3 {font-size: .34rem;color: #333333;max-width: 3.6rem;.E;} }
            .unionItemTime {text-align: right;font-size: .26rem;color: #333333;
                p {line-height: 1.2;} } }
        .flexBottom {
            .unionItemLocation {font-size: .28rem;color: #999999;
                p {display: flex;margin: .1rem 0;}
                u {text-decoration: none;min-width: 1.5rem;}
                span {font-size: .28rem;color: #4ca0ff;} }
            .unionItemBtn {.UnionBtn(1.6rem, .5rem, #ffb00f)} }
    }

    .startUnion {width: 100%;height: 1rem;box-sizing: border-box;padding: 0 .3rem;.flex;background-color: #fff;color: #333333;font-size: .28rem;position: fixed;bottom: 0;left: 0;box-shadow: 0px 1px 5px 0px #ccc;
        span {.UnionBtn(2.14rem, .7rem, #ffb00f)}
    }

    .addUnion {
        > span {display: block;text-align: center;margin-top: .2rem;}
        > .bg {width: 4.36rem;height: 2.18rem;background: url("../../../assets/images/union/addUnionAlert.png") no-repeat;-webkit-background-size: 4.36rem 2.18rem;background-size: 4.36rem 2.18rem;}
        > .bg1 {width: 4.36rem;height: 2.18rem;background: url("../../../assets/images/union/startUnionAlert.png") no-repeat;-webkit-background-size: 4.36rem 2.18rem;background-size: 4.36rem 2.18rem;}
        .con {box-sizing: border-box;padding: .3rem;background-color: #fff;border-radius: 0 0 5px 5px;
            * {line-height: 1.3;}
            p {font-size: .28rem;color: #333333;}
            h3, p > span {font-size: .28rem;color: #3292ff;}
            u {text-decoration: none;letter-spacing: 0.04rem;width: 100%;display: block;margin: .05rem 0;}
            > span {width: 0.6rem;display: block;margin: 0 auto;text-align: center;}
            .addUnionBtn {.UnionBtn(2.72rem, .61rem, #3A96FF);margin: .15rem auto;} }
    }

    .ruleText {
        > p {height: 1rem;line-height: 1rem;text-align: center;font-size: .36rem;color: #0e0e0e;}
        > div {box-sizing: border-box;padding: .2rem;font-size: .24rem;color: #000000;line-height: 1.4;}
    }

    .doctorGoods {
        margin-top: 0.8rem;
        > div {padding: 0 0.3rem;margin-bottom: 0.5rem;
            > p {font-size: 0.32rem;color: #333333;margin-bottom: 0.2rem;
                img {vertical-align: sub;width: 0.38rem;margin-right: 0.14rem;} }
            > div {font-size: 0.24rem;color: #333333;line-height: 1.7;} }
    }

    .hide {
        display: -webkit-box;-webkit-line-clamp: 4;line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;
    }

    /*更多拼优医*/
    .moreUnion {
        > div:nth-child(1) {height: .9rem;line-height: .9rem;text-align: center;font-size: .32rem;color: #0e0e0e;background: #fff;}
    }

    .firstGuide {position: relative;width: 100%;height: 100%;
        > div {width: 7.5rem;height: 4.48rem;background: url("../../../assets/images/union/FirstGuide.png") no-repeat;-webkit-background-size: 7.5rem 4.48rem;background-size: 7.5rem 4.48rem;position: absolute;top: 4.1rem;}
        span {display: inline-block;width: 3rem;height: .7rem;position: absolute;bottom: 0;left: 0;right: 0;margin: auto;}
    }

    /*选择就诊数据*/
    .seek {box-sizing: border-box;padding: 0 .3rem;
        > .seekCity, .seekHospital, .seekDate, .seekTime {height: .8rem;display: flex;align-items: center;
            > span {display: inline-block;min-width: 1.6rem;font-size: .28rem;color: #333333;}
            > p {font-size: .24rem;color: #666666;} }
        .seekTime {
            margin-top: .5rem;
            > div {
                margin: 0 .1rem;
                > div {text-align: center;padding: .1rem .05rem;margin: 0 .2rem .1rem;
                    > div {line-height: 1.3;} }
                > div.Active {background-color: #4CA0FF;color: #FFF;border-radius: 10px;}
                > div.Active + p {opacity: 1;}
                > p {background-color: #FFF0D1;font-size: .24rem;color: #ffaa00;border-radius: 10px;padding: .05rem;margin: .05rem 0;text-align: center;opacity: 0;}
            }
        }
    }

    .seekFund {display: flex;height: 1rem;align-items: center;justify-content: space-between;box-sizing: border-box;margin-top: .2rem;
        > div:nth-child(1) {
            > p {font-size: .28rem;color: #333333;
                span {font-size: .38rem;color: #ff0000;} }
            > span {font-size: .2rem;color: #ffab00;} }
        .seekFundBtn {font-size: .32rem;.UnionBtn(2.13rem, .68rem, #FFB00F)}
    }

    /*自定义日期选择样式*/
    /deep/ .m-calendar {
        .m-months-container .m-months-wrapper .m-months .m-row:before {
            background-color: #fff !important;
        }

        .m-toolbar, .m-week-header {
            background-color: #fff;
        }

        .m-months-container .m-months-wrapper .m-months .m-row .m-day {
            color: #65788c;
        }

        .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-disable {
            background-color: #E0DFE4;
        }

        .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-select {
            background-color: #4CA0FF;
        }
        .point {position: absolute;right: 0;bottom: 0;border-radius: 50%;border: 1px solid #fff;font-size: .32rem;}
        /*对勾*/
    }
</style>
