<template>
    <div  v-loading="loading" element-loading-text="加载中">
        <el-menu  class="el-menu-demo" mode="horizontal" >
            <el-menu-item >{{orgname}}</el-menu-item>
            <el-menu-item :class="rightItem">{{week}}</el-menu-item>
            <el-menu-item :class="rightItem">{{today}}</el-menu-item>
        </el-menu>
        <el-table
            id="board-table-data"
            :data="boardData"
            border
            style="width: 100%">
            <el-table-column
                align="center"
                prop="date"
                label="姓名"
                width="180">
                <template slot-scope="scope">{{scope.row.patient.name}}</template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="name"
                label="透析号"
                width="180">
                <template slot-scope="scope">{{scope.row.patient.dialysis_no}}</template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="address"
                label="模式">
                <template slot-scope="scope">{{modeName(scope.row.mode_id)}}</template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="address"
                label="分区">
                <template slot-scope="scope">{{scope.row.device_zone?scope.row.device_zone.name:''}}</template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="address"
                label="床位">
                <template slot-scope="scope">{{scope.row.device_number?scope.row.device_number.number:''}}</template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="address"
                label="状态">
                <template slot-scope="scope">{{boradData(scope.row)}}</template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="address"
                label="下次透析时间">
                <template slot-scope="scope">{{nextSchedule(scope.row.next_schedules)}}</template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getBoards } from "@/api/board";
import { parseTime } from "@/utils";

export default {
    name: 'bulletinboard',
    data(){
        return {
            orgname: '',
            today:'今天',
            week:'--',
            rightItem:'board-right-menu-item',
            boardData: [],
            showTime:10,
            currentPage:0,
            loading:true,
            weekDay:['周日','周一','周二','周三','周四','周五','周六',],
            roonOptions:{1:'上午', 2:'下午', 3:'晚上'},
            modeOptions: {},
        }
    },
    created() {
        //   this.orgname = xtuser.org.org_name;
        this.orgname = "遂溪方济医院";
        this.modeOptions = this.$store.getters.treatment_mode;
          this.initData();
        // this.currentPage++;
        // this.getBoards();
    },
    methods:{
        fullscreenboard:function(){
            let routeData = this.$router.resolve({ path: '/fullscreenboard'});
            window.open(routeData.href, '_blank');
        },
        initData:function() {
            var _this = this;
            var timeOut = this.showTime * 1000;
            this.currentPage++;
            console.log("initData this.currentPage", this.currentPage);
            this.getBoards();
            
            setTimeout(function(){
                _this.initData();
            }, timeOut); 
        },
        getBoards:function(){
            getBoards(this.currentPage).then(response=>{
                this.loading = false;
                var r = response.data;
                if (r.state == 0) {
                    this.$message.error(r.msg);
                    return false;
                } else {
                    if(r.data.boards.length==0) {
                        console.log("getBoards this.currentPage", this.currentPage);
                        this.currentPage = 1;
                        this.getBoards();
                    }else {
                        this.today = r.data.today;
                        this.week = (r.data.week in this.weekDay)?this.weekDay[r.data.week]:'--';
                        this.boardData = r.data.boards;
                    }
                }
            })
        },
        modeName:function(mode_id) {
            return (mode_id in this.modeOptions)? this.modeOptions[mode_id].name:'';
        },
        boradData:function(record) {
            if(record.dialysis_order) {
                if(record.dialysis_order.stage == 2) {
                    return '已下机';
                }else {
                    return '透析中';
                }
            }else if(record.sign) {
                return '已签到';
            }else {
                return '未签到';
            }
        },
        nextSchedule:function(nextlist){
            if(nextlist.length==0) {
                return '——';
            }
            var dayTime = parseTime(nextlist[0].schedule_date, '{m}月{d}日');
            var noon = (nextlist[0].schedule_type in this.roonOptions) ? ' ' + this.roonOptions[nextlist[0].schedule_type]:'';
            return dayTime + noon;
        }
    }
}
</script>
<style lang="scss">
#board-table-data th{
    background:#f5f7fa;
}
</style>

<style lang="scss" scoped>
.board-right-menu-item{
    float: right !important;
}
.el-menu--horizontal>.el-menu-item {
    color: #000 !important;
}
.el-menu--horizontal {
    border-bottom: 0px !important;
}
</style>
