<template>
    <view class="site-manage">
        <view class="sm-sticky-box">
            <view class="sm-header">
                <picker mode="selector" :range="storeList" range-key="name" @change="storePickerChange">
                    <view class="sh-address">
                        <text>{{curStoreInfo.name || '-'}}</text>
                        <image mode="aspectFit" src="/static/images/icon/arrow_c33.png"></image>
                    </view>
                </picker>
                <view class="sh-type">
                    <picker mode="selector" :range="typeList" range-key="name" @change="typePckerChange">
                        <view class="st-type">
                            <text>{{curTypeInfo.name || '-'}}</text>
                            <image mode="aspectFit" src="/static/images/icon/arrow_c33.png"></image>
                        </view>
                    </picker>
                    <view class="st-tip">{{curTypeInfo.rule_text || '-'}}</view>
                </view>
                <view class="sh-date" v-if="dateList.length">
                    <picker 
                        mode="date" 
                        :value="dateList[0].dateStr" 
                        data-type='start' 
                        @change="datePickerChange">
                        <view class="sd-box">
                            <text>{{ dateList[0].ZhDateStr || '-' }}</text>
                            <view></view>
                        </view>
                    </picker>
                    <text>至</text>
                    <picker 
                        mode="date" 
                        :value="dateList[dateList.length - 1].dateStr" 
                        data-type="end"
                        @change="datePickerChange">
                        <view class="sd-box">
                            <text>{{ dateList[dateList.length - 1].ZhDateStr || '-' }}</text>
                            <view></view>
                        </view>
                    </picker>
                </view>
                <picker mode="date" @change="timeSlotChange" v-if="false">
                    <view class="sh-time" v-if="dateList.length>1">
                        <text>{{dateList[0].ZhDateStr || '-'}} — {{dateList[dateList.length-1].ZhDateStr || '-'}}</text>
                        <image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
                    </view>
                </picker>
            </view>
            <scroll-view class="sm-times" scroll-x>
                <view 
                    v-for="(e,i) in dateList" 
                    :key="i"
                    :class="['st-item', curDateInfo.dateStr===e.dateStr?'active':'']" 
                    @click="dateChange(e)"
                >
                    <view class="si-txt">
                        <view>{{e.dayStr || '-'}}</view>
                        <view>{{e.showDateStr || '-'}}</view>
                    </view>
                </view>
            </scroll-view>
        </view>
        
        <view class="sm-venue">
            <!-- <view class="sv-time-interval">
                <view class="sti-item" v-for="(e,i) in venueTimeList" :key="i">
                    <view>{{ e || '-' }}</view>
                </view>
            </view> -->
            <scroll-view class="sti-venue-list" enable-flex scroll-x scroll-y enhanced :bounces="false" :style="venueAreaSize">
                <view class="svl-box">
                    <view class="sticky-cover"></view>
                    <view class="sl-time-ls">
                        <view class="sti-item" v-for="(e,i) in venueTimeList" :key="i">
                            <view>{{ e || '-' }}</view>
                        </view>
                    </view>
                    <view class="sl-name-ls">
                        <view class="snl-item"  v-for="(e, i) in venueList"  :key="i">{{e.venue_name || '-'}}</view>
                    </view>
                    
                    <view class="sl-vanue-ls">
                        <view class="svl-list" v-for="(e, i) in venueList" :key="i">
                            <!-- <view class="sl-item">{{e.venue_name || '-'}}</view> -->
                            <view class="sl-item" v-for="(k,j) in e.items" :key="j" @click="venueSelect(i,j)">
                                <view
                                    :class="[ k._isSelect? 'cyan' : '', getVenueStatusnInfo(k).className ]"
                                >
                                    {{ getVenueStatusnInfo(k).zh_text || '-' }}
                                </view>
                            </view>
                        </view>
                    </view>
                    
                </view>
                
            </scroll-view>
        </view>
        <view class="sm-fixd-bot">
            <block v-if="selectedVenueList.length">
                <!-- <view class="sfb-continuity-tip">9点至10点为连场预订,请谅解</view> -->
                <view class="sfb-selected-section">
                    <view class="sss-bar">
                        <view>已选择场次<text>{{ selectedVenueList.length || 0 }}</text></view>
                        <view @click="clearSelectedList">清空</view>
                    </view>
                    <scroll-view class="sss-list" scroll-y>
                        <view class="sl-item" v-for="(e,i) in selectedVenueList" :key="i">
                            <view class="si-time">{{e.durations || '-'}}</view>
                            <view class="si-name">{{e.parentObj.venue_name || '-'}}</view>
                        </view>
                    </scroll-view>
                </view>
            </block>
            <view class="sfb-tip-list" v-else>
                <view 
                    class="stl-item" 
                    v-for="(e,i) in tipArray" 
                    :key="i"
                >
                    <view :class="[ e.c ]"></view>
                    <view>{{ e.n || '-'}}</view>
                </view>
            </view>
            <view class="sfb-btn-bar" v-if="selectedVenueList.length">
                <view class="sbb-price"><text>¥</text>{{totalPrice || '0.00'}}</view>
                <view class="sbb-btn" hover-class="hover-active" @click="toOrderConfirm">
                    {{selectedVenueList.length?'提交订单':'请选择场地'}}
                </view>
            </view>
        </view>
        <view class="sm-fixed-tip" v-if="occupyTip!==''">
            <text>{{occupyTip || '-'}}</text>
        </view>
        <order-modal @close="boardInfo=null" @refresh='refreshVenues'  v-if="boardInfo!=null" :query-info="boardInfo"></order-modal>
    </view>
</template>

<script>
import { API } from '../../../js/api';
import { servers } from '../../../js/server';
import util from '../../../utils/util';
import order_modal from '../../../components/site/order_modal/order_modal.vue';
let tipTimer = null;
export default {
    components: {
        'order-modal': order_modal
    },
    data(){
        return {
            storeList: [],          // 店铺列表
            curStoreInfo: {},       // 当前店铺
            typeList: [],           // 类型列表
            curTypeInfo: {},        // 当前类型
            venueList: [],          // 场馆列表
            dateList: [],           // 日期列表
            curDateInfo: {},        // 当前日期
            selectedVenueList: [],  // 所选场地列表
            totalPrice: 0,
            occupyTip: '', // 占用提示
            venueAreaSize: '', // 场地滚动区域大小
            tipArray: [
                { n: '空场', c: '' },
                { n: '小程序预定', c: 'green' },
                { n: '课程预定', c: 'pistac' },
                { n: '固定场锁定', c: 'blue' },
                { n: '已占用', c: 'black' },
            ],
            // 订场看板信息
            boardInfo: null, // { brand_id，stadium_id, venue_id, date, duration }

        }
    },
    computed: {
        // 场地时间间隔列表
        venueTimeList(){
            // return [];
            let _venueList = this.venueList || []
            if(!_venueList.length || !_venueList[0] || !_venueList[0].items || !_venueList[0].items.length)return [];
            let _obj = {};
            let _items = _venueList[0].items, _tempArr;
            _tempArr = _items.reduce((_arr, val)=>_arr.concat(val.durations.split('-')), []);
            // 对除去最后一个进行去重， 然后尾部拼接最后一个
            return [...new Set(_tempArr.splice(0, _tempArr.length-2)), _tempArr[_tempArr.length-1]];

            return ([].concat(...venueList[0].items.map(e=>e.durations&&e.durations.split('-')))).filter(e=>{
                let _bol = !!_obj[e];
                !_bol?_obj[e] = true:'';
                return !_bol;
            })
        }
    },
    onUnload(){
        this.occupyTip = '';
        clearTimeout(tipTimer);
        tipTimer = null;
    },
    async onLoad(){
        try {
            util.showLoad();
            let _dateArr = this.getDateList({}) || [];
            this.dateList = _dateArr;
            this.curDateInfo = _dateArr[0] || {};
            let _storeInfo = await this.getStoreList();
            let _storeList = _storeInfo.list || [];
            if(!_storeList.length)return util.showNone('没有店铺信息！');
            this.storeList = _storeList ;
            let _curStore =  _storeList[0] || {};
            this.curStoreInfo = _curStore;
            let _typeInfo = await this.getClassify({ stadium_id: _curStore.id });
            let _typeList = _typeInfo || [];
            this.typeList = _typeList;
            if(!_typeList.length)return util.showNone('没有球类信息！');
            let _curType = _typeList[0];
            this.curTypeInfo = _curType;
            util.hideLoad();
            return  this.$nextTick(_=>this.refreshVenues());
            
        }catch(err){
            util.hideLoad();
            console.warn('加载失败----->', err)
        }
    },
    methods: {
        getVenueStatusnInfo(info){
            // 超时未订
            if(info.overdue&&info.type == 'empty_venue')return { zh_text: info.message || info.price, type: 'overdue', className: 'gray', }
            // isLinkage
            if(info.isLinkage&&info.isLinkage == true)return { zh_text: info.message || info.price || 0, type: 'linkage', className: 'gray', }
            switch(info.type){
                case 'no_price_venue':
                    return { zh_text: info.message || '无法订场', type: info.type, className: 'grey', }
                case 'empty_venue':
                    return { zh_text: info.message, type: info.type, className: '', }
                case 'mini_program':
                    return { zh_text: info.message || '小程序订场', type: info.type, className: 'green', }
                case 'take_up_venue':
                    return { zh_text: info.message || '管理员占用', type: info.type, className: 'black', }
                case 'course_venue':
                    return { zh_text: info.message || '课程预定', type: info.type, className: 'pistac', }
                case 'play_venue':
                    return { zh_text: info.message || '约玩占用', type: info.type, className: 'black', }
                case 'fixed_venue':
                    return { zh_text: info.message || '固定场锁定', type: info.type, className: 'blue', }
                default: return {}
                    
                    
            }
        },
        // 20210726 时间范围选择，兼容旧逻辑
        datePickerChange(e){
            let { dateList } = this;
            let _type = e.currentTarget.dataset.type;
            let _value = e.detail.value;
            let _selectedDateTimestamp = new Date(_value.replace(/\-/g, '/')).getTime(); // 选择当天0点时间戳
            let _todayTimestamp = new Date(new Date().toLocaleDateString().replace(/\-/g, '/')).getTime(); // 当天0点
            let _oneDateTimestamp = 24*60*60*1000;
            // if(_selectedDateTimestamp<_todayTimestamp)return util.showNone(`请选择${new Date().toLocaleDateString().replace(/\-/g, '/')}之后日期`); 
            let _startTimestamp = _type == 'start' ? _selectedDateTimestamp :_type == 'end' ? _selectedDateTimestamp - (7*_oneDateTimestamp) : _todayTimestamp;
            // let _endTimestamp =  _type == 'end' ? _selectedDateTimestamp : new Date(dateList[dateList.length-1].dateStr.replace(/\-/g, '/')).getTime();
            // if(_endTimestamp<_startTimestamp)return util.showNone('请选择正常范围！');
            // let _dateLength = +(((_endTimestamp - _startTimestamp) /_oneDateTimestamp + 1).toFixed());
            let _dateLength = 8;
            // if(_dateLength>7)return util.showNone('不能超过7天范围！');
            let _dateArr = this.getDateList({
                startTimestamp: _startTimestamp,
                length: _dateLength
            }) || [];
            this.dateList = _dateArr;
            this.curDateInfo = _dateArr[0] || {};
            this.$nextTick(_=>this.refreshVenues());
            // if(_type=='end'&&_selectedDateTimestamp-_todayTimestamp<_oneDateTimestamp)return util.showNone('时间段最小一天！'); 

        },
        timeSlotChange(e){
            let _timestamp = new Date(e.detail.value.replace(/\-/g, '/')).getTime(); // 当天0点时间
            if(new Date().getTime() - _timestamp > 24*60*60*1000)return util.showNone('请选择正确时间！'); // 一天前
            let _dateArr = this.getDateList({
                startTimestamp: _timestamp,
            }) || [];
            this.dateList = _dateArr;
            this.curDateInfo = _dateArr[0] || {};

            this.$nextTick(_=>this.refreshVenues());
        },
        // 刷新场地信息
        async refreshVenues(){
            let { curStoreInfo, curTypeInfo, curDateInfo } = this;
            try{
                util.showLoad();
                this.venueList = [];
                this.boardInfo = null;
                this.selectedVenueList = [];
                this.$nextTick(_ => this.setVenueAreaSize());
                let _res = await this.getVenueList({
                    type_key: curTypeInfo.key || '',
                    stadium_id: curStoreInfo.id || '',
                    date: curDateInfo.dateStr || '',
                })
                let _list = _res || [];
                if(!_list.length)return util.showNone('没有场地信息！');

                this.venueList = _list || [];
                this.$nextTick(_=>{
                    this.getSelectedVenues();
                    this.setVenueAreaSize();
                });
                
                util.hideLoad();
            }catch(err){
                util.hideLoad();    
            }
            
        },
        // 清空已选
        clearSelectedList(){
            this.refreshVenues();
            
            // this.$nextTick(_=>this.getSelectedVenues());
        },
        // 占用提示
        showOccupyTip(str, duration = 1200){
            this.occupyTip = str;
            clearTimeout(tipTimer);
            tipTimer = null;
            tipTimer = setTimeout(_=>this.occupyTip = '', duration);
        },
        // 场地选择
        venueSelect(i,j){
            let { venueList } = this;
            let _venueList = venueList.slice();
            let _curTarget = { ..._venueList[i].items[j] };
            // if(_curTarget.is_take_up){
            //     let _str = `操作人:${_curTarget.operator || '-'}\n收取金额: ${_curTarget.price || 0}\n原因: ${_curTarget.take_up_reason || '-'}`;
            //     this.showOccupyTip(_str)
            //     return
            // }
            if(_curTarget.overdue&&_curTarget.type == 'empty_venue')return // 超时未定
            // 设置看板信息
            if(_curTarget.type !== 'empty_venue'&& _curTarget.type !== 'no_price_venue'){
                let { curStoreInfo } = this;
                let _venueInfo = { ..._venueList[i] };
                return this.boardInfo = {
                    brand_id: curStoreInfo.brand_id,
                    stadium_id: curStoreInfo.id,
                    venue_id: _venueInfo.venue_id,
                    date: _venueInfo.date,
                    duration: _curTarget.duration,
                    venueInfo: {...this.getVenueStatusnInfo(_curTarget)},
                }
            }

            if(_curTarget.type !== 'empty_venue')return;
            if(_curTarget.isLinkage == true)return;

            _venueList[i].items[j]._isSelect = !_curTarget._isSelect;


            // ----->
            // let _ctnList = []; // 提示用, 连场列表

            // // 连场判断, 需要循环当前列表
            // _venueList[i].items = _venueList[i].items.map(e=>{

            //     let _flag = e.time_arrow_id&&   // 不连场为空
            //                 // e.is_valid&&        // 已售为false
            //                 e.time_arrow_id == _curTarget.time_arrow_id;

            //     if(_flag)e._isSelect = !_curTarget._isSelect;

            //     if(_flag&&!_curTarget._isSelect)_ctnList.push(e);

            //     return e;
            // }) || [];
            
            // ----->
            // 联动赋值禁选
            _venueList = this.checkLinkageVenue({
                group: i,
                venueList: _venueList,
                selectedKey: '_isSelect',
                linkageKey: 'isLinkage',
                linkageIDArrKey: 'link_venue_ids',
                linkageIDKey: 'venue_id',
            })
            this.venueList = _venueList;
            this.$nextTick(_=>{
                // if(_ctnList.length>1){
                //     let _tipStr = `${_ctnList[0].duration}-${_ctnList[_ctnList.length-1].duration}为连场预订`
                //     util.showModal({ title: '连场提示！', content: _tipStr });
                // }
                // this.$forceUpdate();
                this.getSelectedVenues();
            })
        },

        // 检查&设置联动禁选场地
        // checkLinkageVenue({
        //     group = 0, // 所点击场地列表
        //     venueList = [], // 所有场地
        //     selectedKey = 'selectedKey', // 选中key
        //     linkageKey = 'linkageKey', // 联动禁用key 
        //     linkageIDArrKey = 'link_venue_ids',
        //     linkageIDKey = 'venue_id',
        //     curTag
        // }){
        //     let _curGroupInfo = {...venueList[group]};
        //     for(let i=0; i<venueList.length; i++){
        //         let _link_venue_ids = _curGroupInfo[linkageIDArrKey] || [];
                
        //         if(_link_venue_ids.includes(venueList[i][linkageIDKey])){
        //             _curGroupInfo.items.forEach(ele=>{
        //                 //  单列联动
        //                 if(venueList[i].link_venue_ids && venueList[i].link_venue_ids.length == 1){
        //                     venueList[i].items[ele._defineIndex][linkageKey] = !!_curGroupInfo.items[ele._defineIndex][selectedKey];
        //                 }
        //                 // 多列联动
        //                 if(venueList[i].link_venue_ids && venueList[i].link_venue_ids.length > 1){
        //                     let _link_venueLs = venueList.filter(item=> venueList[i].link_venue_ids.includes(item[linkageIDKey]));
        //                     // 已联动列表选中情况 ex:   [ true, false ];
        //                     let _link_venueLs_selectedLs = _link_venueLs.map(el=> el['items'][ele._defineIndex] && el['items'][ele._defineIndex][selectedKey]);
        //                     venueList[i].items[ele._defineIndex][linkageKey] = _link_venueLs_selectedLs.includes(true); // 多场联动，只要有一个被选中就禁止
        //                 }
        //             });
        //         }
        //     }
        //     return venueList || [];
        // },
        // 场地》》》检查&设置联动禁选场地
        checkLinkageVenue({
            group = 0, // 所点击场地列表
            venueList = [], // 所有场地
            selectedKey = 'selectedKey', // 选中key
            linkageKey = 'linkageKey', // 联动禁用key 
            linkageIDArrKey = 'link_venue_ids', // 后台提供联动列表
            linkageIDKey = 'venue_id', // 对应列表 id
            curTag
        }){
            let _curGroupInfo = {...venueList[group]};
            for(let i=0; i<venueList.length; i++){
                let _link_venue_ids = _curGroupInfo[linkageIDArrKey] || [];
                // 筛选存在自身关联id，对比非当前所选组
                _link_venue_ids = _link_venue_ids.filter(ele=>_curGroupInfo[linkageIDKey] !=ele);
                if(_link_venue_ids.includes(venueList[i][linkageIDKey])){
                    _curGroupInfo.items.forEach(ele=>{
                        //  单列联动
                        if(venueList[i].link_venue_ids && venueList[i].link_venue_ids.length == 1){
                            venueList[i].items[ele._defineIndex][linkageKey] = !!_curGroupInfo.items[ele._defineIndex][selectedKey];
                        }
                        // 多列联动
                        if(venueList[i].link_venue_ids && venueList[i].link_venue_ids.length > 1){
                            // 过滤自身联动id （后端bug）
                            let _linkVenueIds = venueList[i].link_venue_ids.filter(e=>e !=venueList[i][linkageIDKey]); 
                            // 查找所有联动场地列表
                            let _link_venueLs = venueList.filter(item=> _linkVenueIds.includes(item[linkageIDKey]));
                            // 已联动列表选中情况 ex:   [ true, false ];
                            let _link_venueLs_selectedLs = _link_venueLs.map(el=> el['items'][ele._defineIndex] && el['items'][ele._defineIndex][selectedKey]);
                            venueList[i].items[ele._defineIndex][linkageKey] = _link_venueLs_selectedLs.includes(true); // 多场联动，只要有一个被选中就禁止
                        }
                    });
                }
            }
            return venueList || [];
        },

        // 获取已选列表
        getSelectedVenues(){
            let { venueList } = this;
            let _arr = [];
            let _totalPrice = 0;
            venueList.forEach((e,i)=>{
                e.items.forEach((el,idx)=>{
                    let { items, ...parentObj } = e;
                    if(el._isSelect){
                        _totalPrice += +el.price;
                        _arr.push({ parentObj, ...el });
                    }
                })
            })
            this.totalPrice = _totalPrice.toFixed(2);
            this.selectedVenueList = _arr || [];
            this.$nextTick(_ => this.setVenueAreaSize());
            return _arr;
        },
        // 日期tab 切换
        dateChange(e){
            this.curDateInfo = e;
            this.$nextTick(_=>this.refreshVenues());
        },
        //  获取近7天列表
        getDateList({ startTimestamp = new Date().getTime(), length = 8 }){
            let _dayTimeStamp = 24*60*60*1000;
            return new Array(length).fill(1).map((e,i)=>{
                let _curStamp = startTimestamp + (i*_dayTimeStamp);
                return {
                    showDateStr: util.formatDate({date: _curStamp, partition: 'zh'}).substr(5),
                    dateStr: util.formatDate({date: _curStamp}),
                    ZhDateStr: util.formatDate({date: _curStamp, partition: 'zh'}),
                    dayStr: util.get_zh_day(_curStamp),
                }
            })
            
        },
        // 
        async storePickerChange(e){
            let { storeList } = this;
            let _curStore = storeList[e.detail.value] || {};
            this.curStoreInfo = _curStore;
            this.venueList = [];
            this.boardInfo = null;
            this.typeList = [];           // 类型列表
            this.curTypeInfo = {};        // 当前类型
            this.selectedVenueList = [];
            try{
                let _typeInfo = await this.getClassify({ stadium_id: _curStore.id });
                let _typeList = _typeInfo || [];
                this.typeList = _typeList;
                if(!_typeList.length)return util.showNone('没有球类信息！');
                let _curType = _typeList[0];
                this.curTypeInfo = _curType;
                this.$nextTick(_=>this.refreshVenues());
            }catch(err){
                util.showNone('切换门店失败！稍后重试！');
            }
            
            
            
        },
        typePckerChange(e){
            console.log(e)
            let { typeList } = this;
            this.curTypeInfo = typeList[e.detail.value];
            this.$nextTick(_=>this.refreshVenues());
        },
        toOrderConfirm(){
            let { curStoreInfo, curTypeInfo, curDateInfo, selectedVenueList } = this;
            if(!selectedVenueList.length)return;

            this.$store.commit('setOccupyInfo', {
                storeInfo: curStoreInfo,
                dateInfo: curDateInfo,
                typeInfo: curTypeInfo,
                venueList: selectedVenueList,
            })

            util.routeTo(`/pages/site/confirm/confirm`, 'rT');
        },
        // 场馆列表
        getVenueList({ type_key, stadium_id, date }){
            return servers.get({
                url: API.venue.venueList,
                data: { stadium_id, type_key, date },
                failMsg: '加载场地列表失败！'
            })
            .then(res=>{
                let _ls = res.dashboard || [];
                _ls.map(ele => ele.items.map((item, index) =>{
                    item._defineIndex = index;
                    return item;
                }))
                return _ls;
            })
        },
        // 球类列表
        getClassify({ stadium_id }){
            return servers.get({
                url: API.venue.venueTypes,
                data: { stadium_id },
                failMsg: '加载分类失败！'
            })
        },
        // 店铺列表
        getStoreList(){
            return servers.get({
                url: API.stadiumList,
                data: {},
                failMsg: '加载店铺失败！'
            })
        },
        // 设置滚动区域大小
        async setVenueAreaSize(){
            let _fixedBotInfo = {}, _fixedTopInfo = {};
            const _sysInfo = uni.getSystemInfoSync() || {};
            try{
                _fixedTopInfo = await util.getNodeMes('.sm-sticky-box');
                _fixedBotInfo = await util.getNodeMes('.sm-fixd-bot');
            }catch(err){    
                console.warn('get fixed nodes info err', err);
            }
            let _totalHeight = ( _fixedBotInfo.height || 0 ) + ( _fixedTopInfo.height || 0 );
            this.venueAreaSize = `width:${ _sysInfo.screenWidth || 0 }px;height:${ ( _sysInfo.windowHeight || 0 ) - _totalHeight }px;`
            // util.getNodeMes('.sv-time-interval')
            // .then(res=>{
            //     this.venueAreaSize = `width:${sysInfo.screenWidth - (res.width || 0)}px;height:${res.height || 0}px;`
            // })
        },
    }
}
</script>

<style lang="scss">
    @import "~style/public.scss";
    page{
        background-color: #fff;
    }
    .site-manage{
        
        .sm-sticky-box{
            background-color: #fff;
        }
        .sm-header{
            padding: 0 24upx;
            .sh-address{
                padding: 24upx 0;
                line-height: 44upx;
                font-weight: 500;
                font-size: 32upx;
                color: #333;
                >image{
                    margin-left: 12upx;
                    vertical-align: middle;
                    width: 24upx;
                    height: 24upx;
                    transform: rotateZ(-90deg);
                }
            }
            .sh-type{
                padding: 20upx 0;
                @include centerFlex(space-between);                
                picker{
                    flex-shrink: 0;
                }
                .st-type{
                    
                    margin-right: 20upx;
                    line-height: 50upx;
                    font-size: 32upx;
                    font-weight: 500;
                    color: #333;
                    >image{
                        margin-left: 18upx;
                        width: 24upx;
                        height: 24upx;
                        vertical-align: middle;
                    }
                }
                .st-tip{
                    font-size: 24upx;
                    line-height: 34upx;
                    color: #9b9b9b;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
            >picker{
                width: 100%;
            }
            .sh-date{
                padding: 16upx 0;
                border-top: 1px solid #D8D8D8;
                border-bottom: 1px solid #D8D8D8;
                @include centerFlex(center);                
                >text{
                    margin: 0 30upx;
                    font-size: 28upx;
                    color: #9A9A9D;
                }
                .sd-box{
                    height: 44upx;
                    width: 260upx;
                    border-radius: 6upx;
                    background-color: #F2F2F7;
                    @include centerFlex(center);
                    >text{
                        font-size: 28upx;
                        color: #333;
                    }
                    >view{
                        flex-shrink: 0;
                        margin-left: 6upx;
                        width: 0;
                        height: 0;
                        border-top: 8upx solid #333;
                        border-left: 8upx solid transparent;
                        border-right: 8upx solid transparent;
                    }
                }
            }
            .sh-time{
                height: 86upx;
                line-height: 82upx;
                text-align: center;
                font-size: 28upx;
                color: #9A9A9D;
                border-top: 2upx solid #D8D8D8;
                border-bottom: 2upx solid #D8D8D8;
                >image{
                    margin-left: 20upx;
                    width: 24upx;
                    height: 24upx;
                    vertical-align: middle;
                    transform: rotateZ(90deg);
                }
            }

        }
        .sm-times{
            height: 120upx;
            border-bottom: 2upx solid #D8D8D8;
            white-space: nowrap;
            .st-item{
                display: inline-block;
                padding: 0 20upx;
                &.active{
                    .si-txt{
                        >view{
                            color: $themeColor;
                        }
                        &::after{
                            content: '';
                            position: absolute;
                            left: 50%;
                            bottom: 0;
                            transform: translateX(-50%);
                            height: 10upx;
                            width: 100%;
                            border-radius: 10upx;
                            background-color: $themeColor;
                        }
                    }
                }
                .si-txt{
                    height: 118upx;
                    padding-top: 14upx;
                    position: relative;
                    >view{
                        text-align: center;
                        color: #9A9A9D;
                        white-space: nowrap;
                        &:first-child{
                            line-height: 44upx;
                            font-size: 32upx;
                            font-weight: 500;
                        }
                        &+view{
                            line-height: 28upx;
                            font-size: 24upx;
                        }
                    }
                }
            }
        }
        .sm-venue{
            .sv-time-interval{
                vertical-align: top;
                display: inline-block;
                .sti-item{
                    position: relative;
                    width: 112upx;
                    height: 90upx;
                    border-right: 2upx solid #d8d8d8;
                    >view{
                        position: absolute;
                        left: 0;
                        top: 50%;
                        padding: 0 10upx;
                        height: 100%;
                        width: 100%;
                        text-align: center;
                        line-height: 84upx;
                        font-size: 24upx;
                        color: #333;
                        @include textHide(1);
                    }
                    &::after{
                        content: '';
                        position: absolute;
                        bottom: 0;
                        right: -14upx;
                        width: 26upx;
                        height: 2upx;
                        background-color: #d8d8d8;
                    }
                    &:first-child,&:last-child{
                        &::after{
                            display: none;
                        }
                        
                    }
                    &:first-child{
                        height: 72upx;
                        >view{
                            line-height: 72upx;
                        }
                        
                    }
                }
            }
            .sti-venue-list{
                // vertical-align: top;
                // display: inline-block;
                background-color: #f2f2f7;
                // text-align: left;
                // white-space: nowrap;
                .svl-box{
                    width: fit-content;
                    height: fit-content;
                    .sticky-cover{
                        position: sticky;
                        left: 0;
                        top: 0;
                        width: 0upx;
                        height: 0upx;
                        z-index: 5;
                        &::after{
                            content: '';
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 110upx;
                            height: 60upx;
                            background-color: #fff;
                        }
                    }
                    .sl-name-ls{
                        position: sticky;
                        padding-left: 112upx;
                        top: 0;
                        width: fit-content;
                        white-space: nowrap;
                        font-size: 0;
                        .snl-item{
                            vertical-align: top;
                            display: inline-block;
                            width: 196upx;
                            height: 72upx;
                            line-height: 70upx;
                            text-align: center;
                            font-size: 24upx;
                            font-weight: 500;
                            border-bottom: 2upx solid #D8D8D8;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            background-color: #fff;
                            color: #333;
                        }
                    }
                    .sl-time-ls{
                        position: sticky;
                        left: 0;
                        top: 0;
                        z-index: 2;
                        float: left;
                        display: inline-block;
                        vertical-align: top;
                        background-color: #fff;
                        .sti-item{
                            position: relative;
                            width: 112upx;
                            height: 90upx;
                            border-right: 2upx solid #d8d8d8;
                            >view{
                                position: absolute;
                                left: 0;
                                top: 50%;
                                padding: 0 10upx;
                                height: 100%;
                                width: 100%;
                                text-align: center;
                                line-height: 84upx;
                                font-size: 24upx;
                                color: #333;
                                @include textHide(1);
                            }
                            &::after{
                                content: '';
                                position: absolute;
                                bottom: 0;
                                right: 0;
                                width: 14upx;
                                height: 2upx;
                                background-color: #d8d8d8;
                            }
                            &:first-child,&:last-child{
                                &::after{
                                    display: none;
                                }
                                
                            }
                            &:first-child{
                                height: 72upx;
                                >view{
                                    line-height: 72upx;
                                }
                                
                            }
                            &:last-child>view{
                                background-color: #fff;
                            }
                        }
                    }
                    .sl-vanue-ls{
                        font-size: 0;
                        text-align: left;
                        white-space: nowrap;
                        .svl-list{
                            vertical-align: top;
                            display: inline-block;
                            width: 196upx;
                            .sl-item{
                                height: 90upx;
                                @include centerFlex(center);
                                >view{
                                    padding: 0 10upx;
                                    width: 176upx;
                                    height: 72upx;
                                    line-height: 68upx;
                                    text-align: center;
                                    border: 2upx solid $themeColor;
                                    border-radius: 10upx;
                                    font-size: 28upx;
                                    color: $themeColor;
                                    background-color: #fff;
                                    @include textHide(1);
                                    &.grey{
                                        color: #9A9A9D;
                                        border-color: #D7D7DD;
                                        background-color: #D7D7DD;
                                    }
                                    &.green{
                                        color: #FFF;
                                        border-color: $themeColor;
                                        background-color: $themeColor;
                                    }
                                    &.cyan{
                                        background-color: rgba($color: #33CCA9, $alpha: .18);
                                    }
                                    &.black{
                                        color: #FFF;
                                        border-color: #333333;
                                        background-color: #333333;
                                    }
                                    &.blue{
                                        color: #fff;
                                        border-color: #4F7CC7;
                                        background-color: #4F7CC7;
                                    }
                                    &.pistac{
                                        color: #fff;
                                        background-color: #68C43B;
                                        border-color: #68C43B;
                                    }
                                    &.gray{
                                        border-color: #9A9A9D;
                                        color: #9A9A9D;
                                    }
                                }
                            }
                        }
                    }
                }
                
            }
        }
        .sm-fixd-bot{
            position: fixed;
            left: 0;
            bottom: 0;
            padding-bottom: 0upx;
            padding-bottom: calc( 0upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
            padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
            width: 100%;
            z-index: 5;
            background-color: #fff;
            .sfb-selected-section{
                .sss-bar{
                    padding: 0 30upx;
                    height: 74upx;
                    @include centerFlex(space-between);
                    >view{
                        font-size: 24upx;
                        line-height: 34upx;
                        color: #9a9a9d;
                        >text{
                            color: #333;
                        }
                        &+view{
                            flex-shrink: 0;
                        }
                    }
                }
                .sss-list{
                    padding: 0 20upx;
                    width: 100%;
                    height: 300upx;
                    .sl-item{
                        display: inline-block;
                        margin: 0 10upx 20upx;
                        width: 216upx;
                        height: 128upx;
                        border: 2upx solid $themeColor;
                        border-radius: 6upx;
                        background-color: rgba($color: $themeColor, $alpha: .1);
                        overflow: hidden;
                        .si-time{
                            padding: 0 10upx;
                            margin-bottom: 12upx;
                            height: 56upx;
                            line-height: 56upx;
                            text-align: center;
                            font-size: 28upx;
                            background-color: $themeColor;
                            color: #fff;
                            @include textHide(1);
                        }
                        .si-name{
                            padding: 0 10upx;
                            line-height: 38upx;
                            text-align: center;
                            font-size: 32upx;
                            color: #333;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
            }
            .sfb-continuity-tip{
                height: 60upx;
                line-height: 60upx;
                padding: 0 30upx;
                font-size: 24upx;
                color: #FF873D;
                background-color: rgba($color: #FF873D, $alpha: .1);
            }
            .sfb-tip-list{
                height: 182upx;
                @include centerFlex(center);
                .stl-item{
                    >view{
                        margin: 0 14upx;
                        &:first-child{
                            margin: 0 auto;
                            width: 40upx;
                            height: 22upx;
                            border-radius: 6upx;
                            border: 1px solid $themeColor;
                            margin-bottom: 8upx;

                        }
                        &:nth-child(2){
                            line-height: 34upx;
                            text-align: center;
                            font-size: 28upx;
                            color: #9a9a9d;
                        }
                        &.green{
                            background-color: $themeColor;
                        }
                        &.pistac{
                            background-color: #68C43B;
                            border-color: #68C43B;
                        }
                        &.blue{
                            background-color: #4F7CC7;
                            border-color: #4F7CC7;
                        }
                        &.black{
                            background-color: #333333;
                            border-color: #333333;
                        }
                        
                    }
                }
            }
            .sfb-btn-bar{
                height: 108upx;
                padding: 10upx 30upx;
                @include centerFlex(space-between);
                .sbb-price{
                    flex-grow: 1;
                    font-size: 48upx;
                    line-height: 52upx;
                    font-weight: 500;
                    color: #FF873D;
                    @include textHide(1);
                    >text{
                        font-size: 38upx;
                        font-weight: 400;
                    }
                }
                .sbb-btn{
                    flex-grow: 0;
                    flex-shrink: 0;
                    margin-left: 20upx;
                    width: 290upx;
                    height: 88upx;
                    line-height: 88upx;
                    text-align: center;
                    border-radius: 44upx;
                    background-color: #FF873D;
                    color: #fff;
                }

            }
            
        }
        .sm-fixed-tip{
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 10;
            transform: translate(-50%, -50%);
            max-width: 600upx;
            padding: 20upx 30upx;
            border-radius: 10upx;
            background-color: rgba($color: #000000, $alpha: .5);
            word-break: break-all;
            font-size: 28upx;
            line-height: 44upx;
            color: #fff;
        }
    }
</style>