<template>
    <div style="height:100%;display:flex;flex-direction: column;">
        <div class="screening">
            <ul style="width:50%">
                <el-popover v-model="type_options_visible" placement="bottom" trigger="click">
                    <li slot="reference">
                    {{ types[type_selected].text }}
                    <span class="iconfont">&#xe74a;</span>
                    </li>
                    <div class="popover-demo-content">
                    <ul>
                        <li
                        v-for="item in types"
                        :key="item.value"
                        @click="handleType(item.value)"
                        :class="type_selected == item.value ? 'tick' : ''">
                        {{ item.text }}
                        </li>
                    </ul>
                    </div>
                </el-popover>
                <el-popover v-model="state_options_visible" placement="bottom" trigger="click">
                    <li slot="reference">
                        {{ state[state_selected].text }}
                        <span class="iconfont">&#xe74a;</span>
                    </li>
                    <div class="popover-demo-content">
                        <ul>
                            <li
                            v-for="stateType in state"
                            :key="stateType.value"
                            @click="handleStateType(stateType.value)"
                            :class="
                                state_selected == stateType.value ? 'tick' : ''
                            "
                            >
                            {{ stateType.text }}
                            </li>
                        </ul>
                    </div>
                </el-popover>

            </ul>
        </div>

        <div class="dialysisCallingBox" style="padding-left:0;">
            <before-dialysis-calling v-if="type_selected == 0" :state="state_selected"></before-dialysis-calling>
            <computer-calling v-if="type_selected == 1" :state="state_selected"></computer-calling>
        </div>
        <mt-datetime-picker
        v-model="selected_date"
        ref="picker"
        type="date"
        year-format="{value} "
        month-format="{value} "
        date-format="{value} "
        @confirm="handleScheduleDateChange"
      ></mt-datetime-picker>
    </div>
</template>

<script>

import axios from 'axios'
import { parseTime } from '@/utils/index'

import beforeDialysisCalling from './beforeDialysisCalling'
import computerCalling from './computerCalling'
export default {
    components:{
        beforeDialysisCalling,
        computerCalling
    },
    data(){
        return{
            type_selected: 0,
            types: [
                { value: 0, text: '接诊叫号', select: true },
                { value: 1, text: '上机叫号', select: false },
            ],
            type_options_visible: false,
            selected_date: new Date(),
            selected_date_str:'',
            state: [
                { value: 0, text: '上午待叫号', select: true },
                { value: 1, text: '下午待叫号', select: true },
                { value: 2, text: '已叫号', select: false },
            ],
            state_selected: 0,
            state_options_visible: false,
        }
    },
    
    created(){
        let date = parseTime(new Date(), "{y}-{m}-{d}")
        this.selected_date_str = date
        
    },
    
    methods:{
        handleType: function (index) {
            this.type_selected = index
            this.type_options_visible = false
        },
        openPicker () {
            this.$refs.picker.open()
        },
        handleScheduleDateChange(date){
            this.selected_date_str = parseTime(date, '{y}-{m}-{d}')
        },
        handleStateType: function (index) {
            this.state_options_visible = false
            this.state_selected = index
        },

        
    }
}
</script>


<style lang="scss" scoped>
.screening {
  border-bottom: 1px #e5e5e5 solid;
  width: 100%;
  background: #fff;
  ul {
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-between;
    width: 96%;
    margin: 0 auto;
    font-size: 0.45rem;
    color: $title-color;
    li {
      padding: 0.3rem 0;
      .iconfont {
        font-size: 0.45rem;
        margin-left: 0.1rem;
      }
    }
    .active {
      position: relative;
      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: $main-color;
        // border-bottom: 0.04rem $main-color solid;
        content: "";
      }
    }
  }
}
.dialysisCallingBox{
    flex: 1;
    height: 100%;
    overflow-y: auto;
    width:96%;
    margin: 0 auto;
    padding-top: 20px;
    background: #fff;
    padding-bottom: 40px;
  @media only screen and (min-width: 768px) {
    // padding-top: 20px;
    padding-bottom: 70px;
  }

  @media only screen and (min-width: 415px) and (max-width: 767px) {
    // padding-top: 60px;
    padding-left: 0.3rem;
    padding-bottom: 56px;
  }
}
.fixedCalling{
    height: 2.1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: space-around;
    .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;
    }
    .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;
        .van-icon-volume{
            color: #fff;
            font-size: 1rem;
            margin: 0 auto;
        }
    }
}
</style>
