<template>
    <!-- 附近专家、、 -->
    <div>
        <div class="headTab">
            <router-link to="/chooseCity" class="dingwei">
                <van-icon
                    name="location"
                    color="#4CA0FF"
                    size=".33rem"
                    style="vertical-align: text-bottom;"
                />
                {{location.AreaName || location.city || '定位中...'}}
            </router-link>
            <div class="tabs">
                <p @click="swiperTab(0)" :class="tabIndex == 0?'Active':''">找专场</p>
                <p @click="swiperTab(1)" :class="tabIndex == 1?'Active':''">找专家</p>
                <p @click="swiperTab(2)" :class="tabIndex == 2?'Active':''">拼优医专场</p>
            </div>
            <div class="screen">
                <span @click="show = !show;"></span>
            </div>
        </div>
        <form class="search" action="/" v-if="searchDoctorShow">
            <van-search
                v-model="doctorName"
                placeholder="请输入搜索医生"
                show-action
                round
                @input="onSearchDoctor"
                @cancel="searchDoctorShow = false;"
            />
        </form>
        <main class="main" :style="{'padding-top':searchDoctorShow?'1.6rem':''}">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                :immediate-check="false"
                @load="onLoad"
            >
                <!--找专场-->
                <div v-if="tabIndex == 0">
                    <router-link
                        v-for="(item,index) in list"
                        :to="'/freeClinicDetail?id='+item.ID"
                        class="item"
                        :key="index"
                    >
                        <div class="itemImgCtn">
                            <div class="itemImgBg">
                                <van-image class="itemImg" fit="cover" :src="item.FlatPatternImg">
                                    <template v-slot:error>图片加载失败...</template>
                                    <template v-slot:loading>
                                        <van-loading
                                            type="spinner"
                                            style="text-align: center;line-height: 2.6rem;"
                                            size="40"
                                        />
                                    </template>
                                </van-image>
                            </div>
                        </div>
                        <div class="itemInfo">
                            <van-image
                                round
                                fit="cover"
                                width=".8rem"
                                height=".8rem"
                                :src="item.DissertationImg"
                                style="margin-right: .2rem;"
                            />
                            <div style="width: 6.3rem;">
                                <h3>
                                    <span class="h3">{{item.DissertationName}}</span>
                                    <span
                                        class="tag"
                                        v-if="item.DissertationPattern == 2"
                                    >{{item.DissertationPattern == 2?'专家1诊':''}}</span>
                                </h3>
                                <p>
                                    {{item.VisitStartTime | getTime}} 至 {{item.VisitEndTime | getTime}}
                                    <span
                                        v-if="(item.DisNumber+DisNumber) > 30"
                                    >{{item.DisNumber+DisNumber}}人已报名</span>
                                </p>
                            </div>
                        </div>
                        <div class="brief">{{item.DissertationIntro}}</div>
                        <div class="itemTime">
                            <span>{{item.HospitalName}}</span>
                            <DownTime
                                titleText
                                :VisitStartTime="item.VisitStartTime"
                                :VisitEndTime="item.VisitEndTime"
                                :AppointmentsStartTime="item.AppointmentsStartTime"
                                :AppointmentsEndTime="item.AppointmentsEndTime"
                            ></DownTime>
                        </div>
                    </router-link>
                </div>
                <!--找专家-->
                <div v-if="tabIndex == 1">
                    <router-link
                        class="dcItem"
                        v-for="item in list"
                        :to="'/doctorDetail?id='+item.ID"
                    >
                        <div class="dcItemInfoCtn">
                            <van-image
                                round
                                fit="cover"
                                width="1rem"
                                height="1rem"
                                :src="item.HeadImg?item.HeadImg:require('@/assets/images/doctor.png')"
                                style="margin-right: .3rem;"
                            />
                            <div class="dcItemInfo">
                                <h3>
                                    <span>{{item.DoctorName}}</span>
                                    <span>{{item.PositionalTitles | filterDoctorTitles}}</span>
                                    <van-icon name="arrow" size=".27rem" />
                                </h3>
                                <p>{{item.HospitalName}}</p>
                                <p>{{item.HospitalDepartments}}</p>
                            </div>
                        </div>
                        <div class="dcItemLocation">
                            <p v-if="item.VisitCount > 0">
                                最近出诊：
                                <span>{{item.VisitHospital}}</span>
                            </p>
                            <p v-if="item.VisitCount ==0">
                                <span>无出诊安排</span>
                            </p>
                            <p v-if="item.VisitCount > 0">
                                出诊日期：
                                <span>{{item.VisitDate | getTime }} {{item.VisitDate | getWeek}}</span>
                            </p>
                            <p v-if="item.VisitCount-1 > 0">还有{{item.VisitCount-1}}个出诊安排</p>
                        </div>
                        <div class="dcItemBtn">
                            <router-link :to="'/nextSpecial?id='+item.ID" class="btn1">预约下次</router-link>
                            <router-link
                                v-if="item.VisitCount"
                                :to="'/freeClinicDetail?id='+item.VisitDissertationID"
                                class="btn2"
                            >就诊预约</router-link>
                        </div>
                    </router-link>
                </div>
                <!--拼优医专场-->
                <div v-if="tabIndex == 2">
                    <div class="dcItem" v-for="item in list" @click="ToUnionDetail(item)">
                        <div class="dcItemInfoCtn">
                            <van-image
                                round
                                fit="cover"
                                width="1rem"
                                height="1rem"
                                :src="item.HeadImg?item.HeadImg:require('@/assets/images/doctor.png')"
                                style="margin-right: .3rem;"
                            />
                            <div class="dcItemInfo">
                                <h3>
                                    <span>{{item.DoctorName}}</span>
                                    <span>{{item.PositionalTitles | filterDoctorTitles}}</span>
                                    <van-icon name="arrow" size=".27rem" />
                                </h3>
                                <p>{{item.HospitalName}}</p>
                                <p>{{item.HospitalDepartments}}</p>
                            </div>
                        </div>
                        <div class="dcItemLocation">
                            <p>
                                拼优医活动时间：
                                <span>{{item.AppointmentsStartTime | getTime}} ~ {{item.AppointmentsEndTime | getTime}}</span>
                            </p>
                            <p>
                                医生出诊时间：
                                <span>{{item.VisitStartTime | getTime}} ~ {{item.VisitEndTime | getTime}}</span>
                            </p>
                            <p v-if="item.GroupTableCount>0">还有{{item.GroupTableCount}}个拼优医场次</p>
                            <p v-if="item.GroupTableCount == 0">该医生拼团场次已满</p>
                        </div>
                        <div class="dcItemBtn">
                            <span
                                :class="getClassStatus(item)?'btn1 disableBtn':'btn1'"
                            >{{item | getBtnName}}</span>
                        </div>
                    </div>
                </div>
                <!--没有数据时-->
                <div v-if="location && finished && list.length == 0" class="noData">
                    <div></div>
                    <p>当前城市尚未有{{tabIndex | getTabName}}</p>
                </div>
                <div v-if="!locationStatus" class="noData">
                    <p>正在定位中...</p>
                </div>
            </van-list>
        </main>

        <van-popup
            v-model="show"
            position="right"
            :style="{ height: tabIndex == 0?'5.3rem':'9.1rem',width:'5.8rem',top:tabIndex == 0?'3.44rem':'5.34rem' }"
        >
            <!--筛选专场-->
            <div v-if="tabIndex == 0" class="screenTab1">
                <p>坐诊状态</p>
                <div>
                    <span
                        @click="pageData.dissertationStatus = -1"
                        :class="pageData.dissertationStatus == -1?'Active':''"
                    >全部</span>
                    <span
                        @click="pageData.dissertationStatus = 1"
                        :class="pageData.dissertationStatus == 1?'Active':''"
                    >报名中</span>
                    <span
                        @click="pageData.dissertationStatus = 2"
                        :class="pageData.dissertationStatus == 2?'Active':''"
                    >预告中</span>
                    <span
                        @click="pageData.dissertationStatus = 3"
                        :class="pageData.dissertationStatus == 3?'Active':''"
                    >已结束</span>
                </div>
            </div>
            <!--筛选专家-->
            <div v-if="tabIndex == 1 || tabIndex == 2" class="screenTab2">
                <p>医生科室</p>
                <div>
                    <span
                        @click="department = {text:'请选择'}"
                        :class="department.text == '请选择'?'Active':''"
                    >全部</span>
                    <div class="select" @click="departmentShow = true;">
                        <p>{{department.text}}</p>
                        <van-icon name="arrow-down" />
                    </div>
                </div>
                <p>医生职称</p>
                <div>
                    <span
                        @click="filterDoctorTitles = 0"
                        :class="filterDoctorTitles == 0?'Active':''"
                    >全部</span>
                    <span
                        @click="filterDoctorTitles = 1"
                        :class="filterDoctorTitles == 1?'Active':''"
                    >主任医师</span>
                    <span
                        @click="filterDoctorTitles = 2"
                        :class="filterDoctorTitles == 2?'Active':''"
                    >副主任医师</span>
                    <span
                        @click="filterDoctorTitles = 3"
                        :class="filterDoctorTitles == 3?'Active':''"
                    >主治医师</span>
                    <span
                        @click="filterDoctorTitles = 4"
                        :class="filterDoctorTitles == 4?'Active':''"
                    >医师</span>
                </div>
                <p v-if="tabIndex !=2">出诊医院</p>
                <div v-if="tabIndex !=2">
                    <span
                        @click="hospital = {HospitalName:'请选择'}"
                        :class="hospital.ID?'':'Active'"
                    >全部</span>
                    <div class="select" @click="GetCityHospital">
                        <p>{{!GetCityHospitalStatus?hospital.HospitalName:'加载中...'}}</p>
                        <van-icon name="arrow-down" />
                    </div>
                </div>
                <p>手动检索医生</p>
                <van-search @click="searchDoctor" disabled placeholder="搜索医生" style="padding: 0;" />
            </div>
            <div class="screenTabBtn">
                <p @click="show = false">取消</p>
                <p v-if="tabIndex == 0" @click="screenTypeFun(0)">确定</p>
                <p v-if="tabIndex == 1" @click="screenTypeFun(1)">确定</p>
                <p v-if="tabIndex == 2" @click="screenTypeFun(2)">确定</p>
            </div>
        </van-popup>

        <!--选择科室和医院组件-->
        <van-popup v-model="departmentShow" get-container="body" position="bottom">
            <ChooseDepartment @cancel="departmentShow=false" @confirm="confirmDepartment"></ChooseDepartment>
        </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>
    </div>
</template>

<script>
    var a; // 本页面定时器 用来搜索医生时 打完字 200ms 后发请求
    import DownTime from "@/components/DownTime";
    import ChooseDepartment from "@/components/ChooseDepartment";
    import ChooseHospital from "@/components/ChooseHospital";
    import { wxMethod } from "@/assets/js/weixinShare.js";

    export default {
        name: "nearbySpecialist",
        components: { DownTime, ChooseDepartment, ChooseHospital },
        data() {
            return {
                loading: false, // 插件所需
                finished: false, // 插件所需
                show: false, // 插件所需
                tabIndex: "", //当前tab选择

                list: [], // 渲染列表
                pageIndex: 1,
                pageSize: 10,

                // 找坐诊列表请求数据
                pageData: {
                    name: "", //城市code,
                    status: -1, //专题状态 2义诊 1普通坐诊 , -1=全部
                    dissertationStatus: -1 // -1=全部 1=报名中。 2=义诊已经发布但是未到报名时间。 3=已结束
                },

                // 找专家筛选数据
                departmentShow: false, // 组件所需
                hospitalShow: false, // 组件所需
                searchDoctorShow: false, //搜索医生
                department: { text: "请选择" }, //筛选选择的科室
                hospital: { HospitalName: "请选择" }, //筛选的医院,
                filterDoctorTitles: "0", //筛选的医生职称
                doctorName: "", // 筛选搜索医生名字
                HospitalList: [], //根据城市Code 加载合作医院
                GetCityHospitalStatus: false, // 根据城市Code 加载合作医院的网络请求状态
                // 定位城市数据
                location: {},
                locationStatus: false //定位状态
            };
        },
        created() {
            // 移除拼团确认数据以免造成数据混乱
            sessionStorage.removeItem("unionDetail");
            sessionStorage.removeItem("ConfirmData");
            sessionStorage.removeItem("HospitalID");

            this.tabIndex = this.$route.query.tabIndex || 0;

            var chooseCity = JSON.parse(sessionStorage["chooseCity"] || "{}");
            if (JSON.stringify(chooseCity) != "{}") {
                this.location = chooseCity;
                this.onLoad();
            } else {
                this.baiduGetLocation();
            }
        },
        methods: {
            ToUnionDetail(item) {
                var endTime = item.AppointmentsEndTime.split("T")
                    .join(" ")
                    .split("-")
                    .join("/");
                if (new Date(endTime) < new Date()) {
                    this.$toast("该医生的预约时间已过");
                    return;
                }

                if (item.GroupTableCount == 0) {
                    this.$toast("该医生的拼团场次已满");
                    return;
                }

                this.$router.push("/unionDetail?id=" + item.ID);
            },

            baiduGetLocation() {
                var self = this;
                console.log(wxMethod);
                wxMethod(() => {
                    wx.getLocation({
                        type: "wgs84", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                        success: res => {
                            var latitude = res.latitude + "," + res.longitude; // 纬度，浮点数，范围为90 ~ -90

                            self.$http.getAreaCode(latitude).then(e => {
                                if (e.status == 0) {
                                    var data = e.result.addressComponent;
                                    console.log(e);
                                    data.adcode =
                                        ("" + data.adcode).slice(0, 4) + "00";
                                    self.location = data;
                                    sessionStorage.setItem(
                                        "chooseCity",
                                        JSON.stringify(data)
                                    );
                                    self.onLoad();
                                } else {
                                    self.$toast(e.status);
                                }
                            });
                            // var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                            // var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                            // var speed = res.speed; // 速度，以米/每秒计
                            // var accuracy = res.accuracy; // 位置精度
                        },
                        error: res => {
                            self.location.city = "定位失败";
                        }
                    });
                });
            },

            // 切换tab类型
            swiperTab(e) {
                this.tabIndex = e;
                this.$router.replace({
                    path: "/nearbySpecialist",
                    query: { tabIndex: e }
                });
                this.ResetData();
                this.onLoad();
            },

            onLoad(e) {
                //
                // if(JSON.stringify(this.location) == '{}'){
                //     // this.MyGetLocation();
                //     this.getLocation();
                //     return;
                // }
                this.locationStatus = true;
                if (this.tabIndex == 0) {
                    this.GetDissertationList();
                } else if (this.tabIndex == 1) {
                    this.GetDoctorList();
                } else if (this.tabIndex == 2) {
                    this.GetUnionList();
                }
            },

            // 搜索医生
            onSearchDoctor(e) {
                clearTimeout(a);
                a = setTimeout(() => {
                    this.ResetData();
                    if (this.tabIndex == 1) {
                        this.GetDoctorList();
                    } else if (this.tabIndex == 2) {
                        this.GetUnionList();
                    }
                }, 250);
            },

            // 获取医生列表
            GetDoctorList() {
                let obj = {
                    areaCode: Number(
                        this.location.AreaCode || this.location.adcode || ""
                    ),
                    name: this.doctorName,
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    hospitalDepartmentId:
                        this.department.text == "请选择" ? "" : this.department.id, //科室
                    positionalTitles: Number(this.filterDoctorTitles), //医生职称
                    hospitalLevel: -1,
                    hospitalID:
                        this.hospital.HospitalName == "请选择"
                            ? 0
                            : this.hospital.ID //医院
                };
                this.$http.GetDoctorList(obj).then(({ data }) => {
                    this.loading = false;
                    if (data.IsSuccess) {
                        this.list = [...this.list, ...data.ResultObject];
                        // 数据全部加载完成
                        if (data.ResultObject.length < this.pageSize) {
                            this.finished = true;
                        }
                        this.pageIndex++;
                    } else {
                        // 失败
                        this.$toast(data.ResultMsg);
                    }
                });
            },

            // 获取专场列表
            GetDissertationList() {
                var obj = {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    name: Number(
                        this.location.AreaCode || this.location.adcode || ""
                    ),
                    status: this.pageData.status,
                    dissertationStatus: this.pageData.dissertationStatus
                };

                this.$http.GetDissertationList(obj).then(res => {
                    this.loading = false;
                    if (res.data.IsSuccess) {
                        this.list = [...this.list, ...res.data.ResultObject];
                        if (res.data.ResultObject.length < this.pageSize) {
                            this.finished = true;
                        }
                        this.pageIndex++;
                    } else {
                        this.$toast(res.data.ResultMsg);
                    }
                });
            },

            // 获取拼优医列表
            GetUnionList() {
                var obj = {
                    // areaCode:Number(this.location.AreaCode || this.location.adcode || ''),
                    areaCode: "",
                    name: this.doctorName,
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    hospitalDepartmentId:
                        this.department.text == "请选择" ? "" : this.department.id, //科室
                    positionalTitles: Number(this.filterDoctorTitles), //医生职称
                    hospitalLevel: -1,
                    hospitalID:
                        this.hospital.HospitalName == "请选择"
                            ? 0
                            : this.hospital.ID //医院
                };
                this.$http.getUnionList(obj).then(({ data }) => {
                    this.loading = false;
                    if (data.IsSuccess) {
                        this.list = [...this.list, ...data.ResultObject];
                        // 数据全部加载完成
                        if (data.ResultObject.length < this.pageSize) {
                            this.finished = true;
                        }
                        this.pageIndex++;
                    } else {
                        // 失败
                        this.$toast(data.ResultMsg);
                    }
                });
            },

            // 选择科室
            confirmDepartment(e) {
                console.log(e);
                this.department = e.id != -1 ? e : { text: "请选择" };
                this.departmentShow = false;
            },

            // 选择医院
            confirmHospital(e) {
                console.log(e);
                this.hospitalShow = false;
                this.hospital = e;
            },

            // 确认筛选条件并搜索
            screenTypeFun(e) {
                // e = 0 筛选专场
                // e = 1 筛选专家
                // e = 2 筛选拼优医
                this.ResetData();
                if (e == 0) {
                    this.GetDissertationList();
                } else if (e == 1) {
                    this.GetDoctorList();
                } else if (e == 2) {
                    this.GetUnionList();
                }
            },

            // 重置请求数据初始值
            ResetData() {
                this.pageIndex = 1;
                this.list = [];
                this.finished = false;
                this.loading = true;
                this.show = false;
            },

            // 点击搜索医生
            searchDoctor() {
                this.ResetData();
                this.loading = false;
                this.searchDoctorShow = true;
                this.show = false;
            },

            // 根据城市Code 加载合作医院
            GetCityHospital() {
                var code = this.location.adcode || this.location.AreaCode || "";

                if (!code) {
                    this.$toast("请定位就诊城市");
                    return;
                }
                this.GetCityHospitalStatus = true;
                this.$http.GetCityHospital(code).then(res => {
                    this.GetCityHospitalStatus = 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);
                    }
                });
            },

            getClassStatus(item) {
                var endTime = item.AppointmentsEndTime.split("T")
                    .join(" ")
                    .split("-")
                    .join("/");
                return item.GroupTableCount == 0 || new Date(endTime) < new Date()
                    ? true
                    : false;
            }
        },
        filters: {
            getTabName(val) {
                var arr = ["专场", "专家", "拼优医"];
                return arr[val];
            },
            getBtnName(item) {
                var endTime = item.AppointmentsEndTime.split("T")
                    .join(" ")
                    .split("-")
                    .join("/");

                // 没有剩余号源且未到预约结束时间和已过结束预约时间
                if (
                    item.GroupTableCount == 0 &&
                    (new Date(endTime) > new Date() ||
                        new Date(endTime) < new Date())
                ) {
                    return "已成团";
                }
                // 还有号源但是已过预约结束时间
                if (item.GroupTableCount > 0 && new Date(endTime) < new Date()) {
                    return "不成团";
                }
                // 还有号源但是还没过预约结束时间
                if (item.GroupTableCount > 0 && new Date(endTime) > new Date()) {
                    return "去拼优医";
                }
            }
        }
    };
</script>

<style lang="less" scoped>
    .disableBtn {
        background-color: #acacac !important;
        box-shadow: 0 0 4px 0px #acacac !important;
    }
    .search {
        width: 100%;
        top: 0.8rem;
        left: 0;
        position: fixed;
        z-index: 10;
    }
    .E {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .main {
        min-width: 100vw;
        min-height: 100vh;
        box-sizing: border-box;
        background: #fff;
        padding-top: 0.8rem;
    }

    .headTab {
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 0.8rem;
        align-items: center;
        padding: 0 0.3rem;
        border-bottom: 1px solid #e7e7e7;
        position: fixed;
        left: 0;
        top: 0;
        background-color: #fff;
        z-index: 1000;

        > div,
        > a {
            min-width: 1rem;
            height: 0.8rem;
            line-height: 0.8rem;
        }

        .dingwei {
            text-align: left;
            font-size: 0.24rem;
            color: #232323;
            display: inline-block;
        }

        .tabs {
            display: flex;
            justify-content: center;
            width: 60% !important;
            p {
                text-align: center;
                font-size: 0.24rem;
                color: #232323;
                transition: all 0.15s ease;
                margin: 0 0.1rem;
            }

            p.Active {
                color: #4ca0ff;
                border-bottom: 2px solid #4ca0ff;
            }
        }

        .screen {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            > span {
                display: inline-block;
                width: 0.35rem;
                height: 0.31rem;
                background: url("../../../assets/Spirit.png") no-repeat -1.27rem -2rem;
                background-size: 4.16rem 5.88rem;
            }
        }
    }

    /*专场*/
    .item {
        width: 7.1rem;
        border-radius: 5px;
        box-sizing: border-box;
        margin: 0.1rem auto;
        overflow: hidden;
        text-align: left;
        display: inline-block;
        box-shadow: 0px 4px 5px 4px #f1f1f2;
        .itemImgCtn {
            width: 100%;
            height: 1.5rem;
            overflow: hidden;
            position: relative;
            background-color: #fff;

            .itemImgBg {
                width: 45.19rem;
                height: 45.19rem;
                position: absolute;
                left: 50%;
                bottom: 0;
                right: 0;
                margin: auto;
                transform: translateX(-50%);
                border-radius: 50%;
                overflow: hidden;
            }

            .itemImg {
                width: 7.1rem;
                height: 1.5rem;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
        }

        .itemInfo {
            display: flex;
            box-sizing: border-box;
            padding: 0 0.2rem;
            text-align: left;
            align-items: center;
            margin-top: 0.2rem;

            h3 {
                margin-bottom: 0.1rem;

                span {
                    vertical-align: text-top;
                }
            }

            span.h3 {
                margin-bottom: 0.1rem;
                font-size: 0.34rem;
                color: #333333;
                .E;
                max-width: 4.5rem;
                display: inline-block;
                margin-right: 0.1rem;
                line-height: normal;
            }

            span.tag {
                width: 1.1rem;
                height: 0.38rem;
                display: inline-block;
                border-radius: 15px 15px 15px 0;
                background: linear-gradient(left top, #ff9002, #ff6700);
                text-align: center;
                line-height: 0.38rem;
                font-size: 0.22rem;
                color: #ffffff;
            }

            p {
                span {
                    float: right;
                    font-size: 0.26rem;
                    color: #ff0000;
                }
            }
        }

        .brief {
            margin-bottom: 0.2rem;
            font-size: 0.24rem;
            color: #666;
            line-height: 1.3;
            margin-top: 0.2rem;
            padding: 0 0.2rem;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            display: -webkit-box;
        }

        .itemTime {
            display: flex;
            justify-content: space-between;

            > p {
                height: 0.8rem;
                min-width: 1.8rem;
            }

            > span {
                width: 5.3rem;
                height: 0.8rem;
                line-height: 0.8rem;
                font-size: 0.28rem;
                color: #3ba8ff;
                .E;
                padding: 0 0.2rem;
            }
        }
    }

    /*专家*/
    .dcItem {
        width: 7.1rem;
        margin: 0.2rem auto;
        text-align: left;
        box-shadow: 0 0 8px 0px #ede0e0;
        border-radius: 5px;
        box-sizing: border-box;
        padding: 0.2rem;
        display: inline-block;
        .dcItemInfoCtn {
            display: flex;
            width: 100%;
            margin-bottom: 0.1rem;

            .dcItemInfo {
                width: 6rem;
                text-align: left;

                h3 {
                    color: #333333;

                    span:nth-child(1) {
                        font-size: 0.34rem;
                        max-width: 3.5rem;
                        display: inline-block;
                        margin-right: 0.1rem;
                        line-height: normal;
                    }

                    span {
                        font-size: 0.26rem;
                        .E;
                        vertical-align: text-bottom;
                    }

                    margin-bottom: 0.1rem;

                    i {
                        float: right;
                    }
                }

                p {
                    font-size: 0.26rem;
                    color: #333333;
                    line-height: 1.3;
                }
            }
        }

        .dcItemLocation {
            font-size: 0.28rem;
            color: #999999;

            p {
                line-height: 1.4;
            }

            span {
                color: #4ca0ff;
            }
        }

        .dcItemBtn {
            text-align: right;

            span,
            a {
                display: inline-block;
                width: 1.6rem;
                height: 0.5rem;
                font-size: 0.26rem;
                color: #fff;
                border-radius: 15px;
                text-align: center;
                line-height: 0.5rem;
                margin: 0 0.1rem;
            }

            .btn1 {
                background-color: #ffb00f;
            }

            .btn2 {
                background-color: #4ca0ff;
            }
        }
    }

    .screenTabBtn {
        width: 100%;
        height: 0.9rem;
        font-size: 0.32rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 0;
        left: 0;

        p {
            height: 100%;
            line-height: 0.9rem;
        }

        > p:nth-child(1) {
            width: 40%;
            background-color: #ffff;
            color: #73757f;
        }

        > p:nth-child(2) {
            width: 60%;
            background-color: #4ca0ff;
            color: #fff;
        }
    }

    .screenTab1,
    .screenTab2 {
        box-sizing: border-box;
        padding: 0.3rem;
        text-align: left;

        > p {
            font-size: 0.28rem;
            color: #333333;
            margin: 0.2rem 0;
        }

        > div {
            display: flex;
            flex-wrap: wrap;
            width: 5.2rem;
            justify-content: flex-start;

            span {
                display: inline-block;
                width: 1.6rem;
                height: 0.6rem;
                color: #303442;
                font-size: 0.26rem;
                text-align: center;
                line-height: 0.6rem;
                border-radius: 5px;
                background-color: #fff;
                margin-bottom: 0.1rem;
            }

            span.Active {
                color: #fff;
                background-color: #4ca0ff;
            }
        }
    }

    .screenTab2 {
        .select {
            width: 3.4rem;
            height: 0.6rem;
            outline: none;
            border: 1px solid #999999;
            border-radius: 3px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding: 0 0.2rem;
            margin-left: 0.2rem;
        }
    }

    .noData {
        > div {
            width: 4.16rem;
            height: 2.12rem;
            background: url("../../../assets/images/not-opened.png") no-repeat 0 0;
            background-size: 4.16rem 2.12rem;
            margin: 0.5rem auto;
        }
        > p {
            margin: 0.2rem 0;
        }
    }
</style>
