<template>
    <view class="site-people">
        <stadium-select 
            ref="stadiumSelect"
            @change:stadium="stadiumChange"
        ></stadium-select>
        <methods-bar
            :type="igsType"
        ></methods-bar>
        
        <classify-tab
            v-if="[1, 2].includes(igsType)&&tabLs.length"
            :tabs="tabLs"
            @click:tab="tabLs = $event"
        ></classify-tab>

        <number-show :num="siteNum"></number-show>
        
        <view class="sp-modify" @click="modifyBtn">修改人数</view>
        <view class="sp-check" @click="checkNotLeaveBtn">查看未离场订单</view>

        <auto-clean 
            :auto-clean="siteInfo.present_person_number_clear"
            @switch:change="switchAutoClean"
        ></auto-clean>

        <modify-number ref="modifyNum"></modify-number>
        <not-leave-modal ref="notLeaveModal"></not-leave-modal>
    </view>
</template>

<script>
import stadium_select from "./modules/stadium_select.vue";
import auto_clean from "./modules/auto_clean.vue";
import methods_bar from "./modules/methods_bar.vue";
import classify_tab from "./modules/classify_tab.vue";
import number_show from "./modules/number_show.vue";
import modify_number from "./modules/modify_number.vue";
import not_leave_modal from './modules/not_leave_modal.vue';
import API from "../../js/api.js";
import server from "../../js/server.js";
import { showLoad, hideLoad, showNone } from "@/utils/util.js";
export default {
    components: {
        'stadium-select': stadium_select,
        'auto-clean': auto_clean,
        'methods-bar': methods_bar,
        'classify-tab': classify_tab,
        'number-show': number_show,
        'modify-number': modify_number,
        'not-leave-modal': not_leave_modal
    },
    computed: {
        igsType(){
            // 0时用，对应门店人数/ 1时用，对应门禁人数/ 2时用，对应场地分类人数
            return this.siteInfo?.igs_type || 0;
        }, 
        // 现场人数
        siteNum(){
            let { igsType, siteInfo, tabLs } = this;
            if(igsType === 0) return siteInfo?.stadium_num || 0;
            if([1,2].includes(igsType)){
                let _tab = tabLs.find(e=>e.selected);
                return _tab?.number || 0;
            };
            return 0
        }
    },
    data(){
        return {
            stadiumInfo: {},
            siteInfo: {},
            tabLs: [
                // { [label], [key], [number], [selected] }
            ],
            intervalTimer: null
        }
    },
    async onLoad(options){
        this.$refs.stadiumSelect.initStadium({
            brand_id: options?.brand_id ?? '',
            stadium_id: options?.stadium_id ?? '',
        })
        .then(stadiumInfo=>{
            if(!stadiumInfo?.id) return;
            this.stadiumInfo = stadiumInfo;
            this.initData({
                brand_id: options?.brand_id || '',
                stadium_id: stadiumInfo?.id || ''
            })
        })
    },
    onShow(){
        this.setTimer();
    },
    onHide(){
        this.clearTimer(this.intervalTimer);
    },
    onUnload(){
        this.clearTimer(this.intervalTimer);
    },
    methods: {
        setTimer(){
            this.intervalTimer = setInterval(()=>{
                let { brand_id, id } = this.stadiumInfo;
                if(!brand_id || !id) return;
                this.refreshData({ brand_id, stadium_id: id });
            }, 5000)
        },
        clearTimer(timer){
            try{
                clearInterval(timer);
                timer = null;
            }catch(err){
            }
        },
        stadiumChange(sInfo){
            if(!sInfo?.id) return;
            this.stadiumInfo = sInfo;
            this.initData({
                brand_id: sInfo?.brand_id || '',
                stadium_id: sInfo?.id || ''
            })
        },
        async initData({ brand_id, stadium_id }){
            try{
                showLoad();
                let _skInfo = await this.getSkNumber({ brand_id, stadium_id });
                hideLoad();
                this.resetData(_skInfo);
            }catch(err){
                console.warn('site people index initData err', err);
            }
        },
        // 重置页面数据
        resetData(res){
            this.siteInfo = res || {};
            this.tabLs = [];
            if([1,2].includes(res?.igs_type)){
                let _tabLs = this.getTabList(res);
                _tabLs[0].selected = true;
                this.tabLs = _tabLs;
            }
        },
        async refreshData({ brand_id, stadium_id }){
            let { siteInfo, tabLs } = this;
            let _skInfo = await this.getSkNumber({ brand_id, stadium_id });
            if(_skInfo?.igs_type === siteInfo?.igs_type){
                if(_skInfo?.igs_type === 0)return this.siteInfo = _skInfo;
                let _tabLs = this.getTabList(_skInfo);
                let _selectedTab = tabLs.find(e=>e.selected);
                let _newTabIdx = _tabLs.findIndex(e=>e.key === _selectedTab?.key);
                if(_newTabIdx > -1){
                    _tabLs[_newTabIdx].selected = true;
                    this.tabLs = _tabLs;
                    this.siteInfo = _skInfo;
                }else{
                    this.resetData(_skInfo);
                }
            }else{
                this.resetData(_skInfo);
            }
            this.$forceUpdate();

        },
        getSkNumber({ brand_id, stadium_id }){
            return server.post({
                url: API.skNumber,
                data: {
                    brand_id,
                    stadium_id,
                },
                failMsg: '加载现场人数信息失败！'
            })
            .then(res=>{
                // if(stadium_id === 156){
                //     res.igs_type = 1;
                //     res.hw_num = [
                //         { gate_id: 1, gate_name: 'A门', number: 10 },
                //         { gate_id: 2, gate_name: 'B门', number: 20 },
                //         { gate_id: 3, gate_name: 'C门', number: 30 },
                //     ]
                // }
                // if(stadium_id === 151){
                //     res.igs_type = 2;
                //     res.vt_num = [
                //         { venue_type_key: 1, venue_type_name: '羽毛球', number: 101 },
                //         { venue_type_key: 2, venue_type_name: '篮球', number: 210 },
                //         { venue_type_key: 3, venue_type_name: '乒乓球', number: 310 },
                //     ]
                // }
                return res || {};
            })
            .catch(err=>{
                console.warn('site people index getSkNumber', err);
            })
        },
        getTabList(res){
            let _ls = [];
            if(res?.igs_type === 1){ // 门禁
                res?.hw_num?.forEach(e=>{
                    if(e?.gate_id)_ls.push({
                        label: e?.gate_name || '',
                        key: e?.gate_id,
                        number: e?.number || 0
                    })
                })
            }
            if(res?.igs_type === 2){ // 场地分类
                res?.vt_num?.forEach(e=>{
                    if(e?.venue_type_key)_ls.push({
                        label: e?.venue_type_name || '',
                        key: e?.venue_type_key,
                        number: e?.number || 0
                    })
                })
            }
            return _ls;
        },
        modifyBtn(){
            let { siteNum, stadiumInfo, tabLs, igsType } = this;
            let { brand_id, id } = stadiumInfo;
            this.$refs.modifyNum.initData({
                num: siteNum,
                brand_id,
                stadium_id: id,
                igsType,
                key: tabLs.find(e=>e.selected)?.key,
                success: ()=>{
                    this.refreshData({ brand_id, stadium_id: id });
                }
            });
        },
        // 自动清零状态切换
        switchAutoClean(status){
            let { brand_id, id } = this.stadiumInfo;
            server.get({
                url: API.timingOpen, 
                data: {
                    brand_id: brand_id,
                    stadium_id: id,
                    status: status
                },
                failMsg: '操作失败！'
            })
            .then(res=>{
                hideLoad();
                showNone('操作成功！');
                setTimeout(_=>{
                    this.refreshData({ brand_id, stadium_id: id });
                }, 1000)
            })
        },
        checkNotLeaveBtn(){
            let { tabLs, stadiumInfo, igsType } = this;
            let { brand_id, id } = stadiumInfo;
            this.$refs.notLeaveModal.initData({
                brand_id,
                stadium_id: id,
                igsType,
                key: tabLs.find(e=>e.selected)?.key
            });
        },
    }
}
</script>

<style lang="scss">
    page{
        background: #fff;
    }
    .sp-modify{
        margin: 40upx auto 0;
        width: 618upx;
        text-align: center;
        border-radius: 10upx;
        background: $mColor;
        @include flcw(32upx, 88upx, #fff);
    }
    .sp-check{
        margin-top: 24upx;
        margin-bottom: 60upx;
        text-decoration: underline;
        text-align: center;
        @include flcw(24upx, 34upx, $mColor);
    }
</style>