<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
      <el-button
        size="small"
        icon="el-icon-menu"
        @click="fullscreenboard"
        type="primary"
        >全屏投影</el-button
      >
    </div>
    <div class="app-container">
      <el-tabs v-model="activeName">
        <el-tab-pane label="签到窗口" name="first">
          <sign-in></sign-in>
        </el-tab-pane>
        <el-tab-pane label="排队窗口" name="second">
          <line-up></line-up>
        </el-tab-pane>
      </el-tabs>
    </div>



























    <!-- <div
      class="app-container"
      id="dialysis-board-box"
      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
        :row-style="{ color: '#303133' }"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266'
        }"
        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> -->

    <!-- <div id="fullscreenbroad" v-show="dialogTableVisible">
      <el-row>
        <el-button
          @click="openSetting"
          icon="el-icon-setting"
          circle
          id="fullscreenbroad-setting"
        ></el-button>
        <el-button
          type="primary"
          icon="el-icon-rank"
          v-if="showSetting"
          id="fullscreenbroad-setting"
          @click="togglefullscreen"
          >切换模式</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-menu"
          v-if="showSetting"
          id="fullscreenbroad-setting"
          @click="outfullscreenboard"
          >退出全屏投影</el-button
        >
      </el-row>
      <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
        :data="boardData"
        border
        style="width: 100%"
        :row-style="{ color: '#303133' }"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266'
        }"
      >
        <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> -->
  </div>
</template>

<script>
import { getBoards } from "@/api/board";
import bulletinboard from "./components/bulletinboard";
import { parseTime } from "@/utils";
import BreadCrumb from "../components/bread-crumb";
import screenfull from "screenfull";
import signIn from './components/signIn'
import lineUp from './components/lineUp'
export default {
  components: { BreadCrumb, bulletinboard, signIn, lineUp },
  name: "bulletinBoard",
  data() {
    return {
      dialogTableVisible: false,
      showSetting: false,
      crumbs: [
        { path: false, name: "透析管理" },
        { path: "dialysis/board", name: "数据看板" }
      ],
      orgname: "",
      today: "今天",
      week: "--",
      timer:null,
      rightItem: "board-right-menu-item",
      boardData: [],
      showTime: 120,
      currentPage: 0,
      loading: true,
      weekDay: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      roonOptions: { 1: "上午", 2: "下午", 3: "晚上" },
      modeOptions: {},



      //
      activeName:"first"
    };
  },
  created() {
    var xtuser = this.$store.getters.xt_user;
    this.orgname = xtuser.org.org_name;
    // this.orgname = "遂溪方济医院";
    this.modeOptions = this.$store.getters.treatment_mode;
    this.initData();
  }, beforeDestroy () {
    clearInterval(this.timer)
    this.timer = null
    this.$once('hook:beforeDestroy', () => {
      clearInterval(this.timer)
    })
  },
  methods: {
    fullscreenboard: function() {
      this.dialogTableVisible = true;
      // let routeData = this.$router.resolve({ path: '/fullscreenboard' })
      // window.open(routeData.href, '_blank')
    },
    outfullscreenboard: function() {
      this.dialogTableVisible = false;
      this.showSetting = false;
    },
    togglefullscreen: function() {
      if (!screenfull.enabled) {
        this.$message({
          message: "你的浏览器不支持",
          type: "warning"
        });
        return false;
      }
      screenfull.toggle();
      this.showSetting = false;
    },
    openSetting() {
      if (this.showSetting == false) {
        this.showSetting = true;
      } else {
        this.showSetting = false;
      }
    },
    initData: function() {
      var _this = this;
      var timeOut = this.showTime * 1000;
      this.currentPage++;
      this.getBoards();

      this.timer = window.setInterval(() => {
        setTimeout(this.getBoards(), 0)
      }, 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) {
            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" 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>

<style>
#fullscreenbroad {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  background: #fff;
  padding: 20px;

  /* width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    height: 100%;
    overflow: auto; */
}

#fullscreenbroad #fullscreenbroad-setting {
  float: right;
}
#fullscreenbroad {
  z-index: 9999 !important;
}

#fullscreenbroad .el-button + .el-button {
  margin-left: 0px;
}
#fullscreenbroad .el-button:nth-child(1) {
  margin-left: 10px;
}
#fullscreenbroad .el-button:nth-child(2) {
  margin-left: 10px;
}

#fullscreenbroad .el-menu-item {
  font-size: 30px !important;
}

#fullscreenbroad .board-right-menu-item {
  font-size: 20px !important;
}
#fullscreenbroad .el-table th > .cell {
  font-size: 20px !important;
}
#fullscreenbroad .el-table .cell {
  font-size: 20px !important;
}
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #d0d3da;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #d0d3da;
}
</style>
