<template>
    <div>
        <called :called='waitingCalledAm' :index='1' v-if="state == 0" style="padding-bottom:2.1rem;"></called>
        <called :called='waitingCalledPm' :index='1' v-if="state == 1" style="padding-bottom:2.1rem;"></called>
        <called :called="called" v-if="state == 2"></called>
        <div class="fixedCalling" v-if="state == 0 || state == 1">
            <div class="nowCalling">
                <div class="callingName">{{ fisrtQueueInfo && fisrtQueueInfo.patient_name ? fisrtQueueInfo.patient_name : '暂无叫号' }}</div>
                <p v-if="fisrtQueueInfo != null && fisrtQueueInfo.patient_name">当前叫号</p>
            </div>
            <div class="fixedVolume" @click="call(fisrtQueueInfo && fisrtQueueInfo.patient_id ? fisrtQueueInfo.patient_id : '')">
                <van-icon name="volume" />
            </div>
            <div style="display:flex;">
                <div class="newCallingName" @click="next(fisrtQueueInfo && fisrtQueueInfo.patient_id ? fisrtQueueInfo.patient_id : '')">下一位</div>
                <div class="newCallingName" style="margin-left:5px;" @click="nextFive(fisrtQueueInfo && fisrtQueueInfo.patient_id ? fisrtQueueInfo.patient_id : '')">下五位</div>
            </div>
        </div>
    </div>
</template>

<script>
const moment = require('moment')
import axios from 'axios'
import {Toast} from "vant";
import Called from './components/Called'
export default {
    props:{
        state:Number
    },
    components:{
        Called,
    },
    data(){
        return{
            waitingCalled:[],
            called:[],
            fisrtQueueInfo:{},
            timer:null,

            waitingCalledAm:[],
            waitingCalledPm:[],
            newFisrtQueueInfo:{}
        }
    },
    computed: {
        websocket() {
            return this.$store.state.user.websocket;
        },
    },
    created(){
        this.initData = {
            cmd: "queue/join",
            data: {type:4,page:0,size:0},
        };
        this.websocketSend(this.initData)
    },
    beforeMount() {
        this.websocketMess();
    },
    mounted(){
        // let obj = {
        //     cmd: "queue/join",
        //     data: {type:4,page:0,size:0},
        // };
        // this.websocketSend(obj)
    },
    beforeDestroy(){

        let unObj = {
            cmd: "queue/unjoin",
            data: {type:4},
        };
        this.websocketSend(unObj)
        let unObj1 = {
            cmd: "queue/unjoin",
            data: {type:5},
        };
        this.websocketSend(unObj1)
    },
    methods:{
        websocketSend(data) {
            try {
                this.websocket.send(JSON.stringify(data))
                
            } catch (error) {
                this.showError = true;
                this.showIndex = 4;
                this.errorInfo = "网络异常，请稍后退出重试！";
            }
        },
        websocketMess() {
            this.websocket.onmessage = e => {
                let res = JSON.parse(e.data);
                // let res = re.data;
                console.log('res',res)
                if(res.channel == 'queue/join'){
                    if(res.data.type == 4){
                        let fisrtQueueInfo = []
                        this.newFisrtQueueInfo = res.data.fisrtQueueInfo
                        if(res.data.fisrtQueueInfo != null){
                            if(this.state == 0){
                                fisrtQueueInfo = res.data.fisrtQueueInfo.morning
                                if(fisrtQueueInfo != null){
                                    if(fisrtQueueInfo.create_time){
                                        fisrtQueueInfo.create_time = moment(parseInt(fisrtQueueInfo.create_time) * 1000).format('HH:mm')
                                    }
                                }
                            }else if(this.state == 1){
                                fisrtQueueInfo = res.data.fisrtQueueInfo.afternoon
                                if(fisrtQueueInfo != null){
                                    if(fisrtQueueInfo.create_time){
                                        fisrtQueueInfo.create_time = moment(parseInt(fisrtQueueInfo.create_time) * 1000).format('HH:mm')
                                    }
                                }
                            }
                        }
                        this.fisrtQueueInfo = fisrtQueueInfo
                        let arr = res.data.patientQueueList.data
                        // let waitingCalledArr = []
                        let waitingCalledAm = []
                        let waitingCalledPm = []
                        let calledArr = []
                        arr.map(item => {
                            if(item.status == 2){
                                item.create_time = moment(item.create_time * 1000).format('HH:mm:ss')
                                // waitingCalledArr.push(item)
                                if(item.schedule_type == 1){
                                    waitingCalledAm.push(item)
                                }else if(item.schedule_type == 2){
                                    waitingCalledPm.push(item)
                                }
                            }else if(item.status == 3){
                                item.create_time = moment(item.create_time * 1000).format('HH:mm:ss')
                                calledArr.push(item)
                            }
                        })
                        // this.waitingCalled = waitingCalledArr
                        this.waitingCalledAm = waitingCalledAm
                        this.waitingCalledPm = waitingCalledPm
                        // this.called = calledArr
                    }
                    if(res.data.type == 5){
                        let arr = res.data.patientQueueList.data
                        let calledArr = []
                        arr.map(item => {
                            if(item.status == 3){
                                item.create_time = moment(item.create_time * 1000).format('HH:mm:ss')
                                calledArr.push(item)
                            }
                        })
                        this.called = calledArr
                    }
                }else if(res.channel == 'allQueueList'){
                    let arr = res.data.queue_list.data
                    // let waitingCalledArr = []
                    let waitingCalledAm = []
                    let waitingCalledPm = []
                    let calledArr = []
                    arr.map(item => {
                        if(item.status == 2){
                            item.create_time = moment(item.create_time * 1000).format('HH:mm:ss')
                            // waitingCalledArr.push(item)
                            if(item.schedule_type == 1){
                                waitingCalledAm.push(item)
                            }else if(item.schedule_type == 2){
                                waitingCalledPm.push(item)
                            }
                        }else if(item.status == 3){
                            item.create_time = moment(item.create_time * 1000).format('HH:mm:ss')
                            calledArr.push(item)
                        }
                    })
                    // this.waitingCalled = waitingCalledArr
                    this.waitingCalledAm = waitingCalledAm
                    this.waitingCalledPm = waitingCalledPm
                    // this.called = calledArr
                }else if(res.channel == 'patientCallInfo'){
                    res.data.patientInfo.create_time = moment(res.data.patientInfo.create_time * 1000).format('HH:mm')
                    this.fisrtQueueInfo = res.data.patientInfo
                }
            }
        },
        call(patient_id){
            if(patient_id == undefined || patient_id == ""){
                Toast.success('已经是最后一位了');
                return
            }
            console.log('patient_id',patient_id)
            let org_id =  parseInt(sessionStorage.getItem("org_id"));
            let admin_user_id = parseInt(sessionStorage.getItem("admin_user_id"));
            axios.get('/api/index/upcall?org_id=' + org_id + '&patient_id=' + patient_id + '&admin_user_id=' + admin_user_id).then(res => {
                console.log(res)
                // let patientArr = res.data.queue_list.data
                // this.patientArr = patientArr
                // this.$emit('child-event',this.patientArr)
                if(res.data.code == 200){
                    Toast.success('叫号成功');
                }
            })
        },
        next(patient_id){
            if(patient_id == undefined || patient_id == ""){
                Toast.success('已经是最后一位了');
                return
            }
            let schedule_type = null
            if(this.state == 0){
                schedule_type = 1
            }else if(this.state == 1){
                schedule_type = 2
            }
            console.log('patient_id',patient_id)
            let org_id =  parseInt(sessionStorage.getItem("org_id"));
            let admin_user_id = parseInt(sessionStorage.getItem("admin_user_id"));
            axios.get('/api/index/nextupcall?org_id=' + org_id + '&patient_id=' + patient_id + '&admin_user_id=' + admin_user_id + '&schedule_type=' + schedule_type).then(res => {
                console.log(res)
                // let patientArr = res.data.queue_list.data
                // this.patientArr = patientArr
                // this.$emit('child-event',this.patientArr)
                if(res.data.data.patientInfo == null){
                    Toast.success('已经是最后一位了');
                    return
                }
                if(res.data.code == 200){
                    Toast.success('叫号成功');
                }
            })
        },
        nextFive(patient_id){
            if(patient_id == undefined || patient_id == ""){
                Toast.success('已经是最后一位了');
                return
            }
            let schedule_type = null
            if(this.state == 0){
                schedule_type = 1
            }else if(this.state == 1){
                schedule_type = 2
            }
            console.log('patient_id',patient_id)
            let org_id =  parseInt(sessionStorage.getItem("org_id"));
            let admin_user_id = parseInt(sessionStorage.getItem("admin_user_id"));
            axios.get('/api/index/nextupcall?org_id=' + org_id + '&patient_id=' + patient_id + '&admin_user_id=' + admin_user_id + '&schedule_type=' + schedule_type + '&num=5').then(res => {
                console.log(res)
                // let patientArr = res.data.queue_list.data
                // this.patientArr = patientArr
                // this.$emit('child-event',this.patientArr)
                if(res.data.data.patientInfo == null){
                    Toast.success('已经是最后一位了');
                    return
                }
                if(res.data.code == 200){
                    Toast.success('叫号成功');
                }
            })
        },
    },
    watch:{
        state:{
            handler(newName, oldName) {
                let fisrtQueueInfo = []
                if(this.newFisrtQueueInfo != null){
                    if(newName == 0){
                        fisrtQueueInfo = this.newFisrtQueueInfo.morning
                        if(fisrtQueueInfo != null){
                            if(fisrtQueueInfo.create_time){
                                fisrtQueueInfo.create_time = moment(parseInt(fisrtQueueInfo.create_time) * 1000).format('HH:mm')
                            }
                        }
                    }else if(newName == 1){
                        fisrtQueueInfo = this.newFisrtQueueInfo.afternoon
                        if(fisrtQueueInfo != null){
                            if(fisrtQueueInfo.create_time){
                                fisrtQueueInfo.create_time = moment(parseInt(fisrtQueueInfo.create_time) * 1000).format('HH:mm')
                            }
                        }
                    }else if(newName == 2){
                        let obj = {
                            cmd: "queue/join",
                            data: {type:5,page:0,size:0},
                        };
                        this.websocketSend(obj)
                    }

                }
                this.fisrtQueueInfo = fisrtQueueInfo
            },
            deep: true
        }
    }
}
</script>

<style lang="scss" scoped>
.fixedCalling{
    height: 2.1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 0.2rem;
    .nowCalling{
        p{
            font-size: 0.4rem;
            text-align: center;
        }
    }
    .callingName{
        width: 3rem;
        height: 1rem;
        background: #DBDFE7;
        opacity: 0.9;
        border-radius: 0.53rem;
        color:#3389FB;
        text-align: center;
        font-size: 0.53rem;
        line-height: 1rem;
        margin-top: 0.5rem;
    }
    .newCallingName{
        height: 1rem;
        background: #DBDFE7;
        opacity: 0.9;
        border-radius: 0.53rem;
        color:#3389FB;
        text-align: center;
        font-size: 0.53rem;
        line-height: 1rem;
        margin-top: 0.5rem;
        padding: 0 0.4rem;
    }
    .fixedVolume{
        width: 2rem;
        height: 2rem;
        background: linear-gradient(0deg, #1965E5 0%, #33ACF9 100%);
        box-shadow: 0px 4px 10px 0px rgba(69, 143, 243, 0.27);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        top: -0.33rem;
        left: 42%;
        .van-icon-volume{
            color: #fff;
            font-size: 1rem;
            margin: 0 auto;
        }
    }
}
</style>
