<template>
  <div>
    <go-back :title="title"></go-back>
    <div class="monitor-container">
      <!-- search -->
      <div class="search-content">
        <div class="search">
          <span class="iconfont">&#xe64d;</span>
          <input type="text" class="searchInput" placeholder="透析号/姓名" />
        </div>
      </div>
      <!-- search end -->
      <div class="screening">
        <ul class="ul">
          <li class="list" @click="toShow">
            <span>全部分区</span>
            <span class="iconfont">&#xe60c;</span>
          </li>
          <li class="list">
            <span>全部班</span>
            <span class="iconfont">&#xe60c;</span>
          </li>
          <li class="list">
            <span>全部医嘱</span>
            <span class="iconfont">&#xe60c;</span>
          </li>
          <li class="list">
            <span>2019-01-01</span>
            <span class="iconfont">&#xe60c;</span>
          </li>
        </ul>
      </div>
      <!-- screening end -->
      <div style="width:100%;overflow:hildden;overflow-x:auto;">
        <table class="MonitoringForm" border="0">
          <tr>
            <th width="136px">机号</th>
            <th width="166px">姓名</th>
            <th width="152px">透析号</th>
            <th width="138px">来源</th>
            <th width="155px">类型</th>
            <th width="324px">开始时间</th>
            <th width="450px">医嘱</th>
            <th width="324px">停止时间</th>
            <th width="155px">开嘱医生</th>
            <th width="155px">执行护士</th>
            <th width="155px">核对人员</th>
          </tr>
          <tr>
            <td
              colspan="11"
              style="text-align:left;text-indent:10px;font-weight:bold;"
            >
              {{ inpatientArea }}
            </td>
          </tr>
          <tr
            v-for="(item, index) in tableDate"
            :key="index"
            :value="item.value"
          >
            <td>{{ item.jh }}</td>
            <td>{{ item.xm }}</td>
            <td>{{ item.txh }}</td>
            <td>{{ item.ly }}</td>
            <td>{{ item.lx }}</td>
            <td>{{ item.kssj }}</td>
            <td>{{ item.yz }}</td>
            <td>{{ item.tzsj }}</td>
            <td>{{ item.kzys }}</td>
            <td>{{ item.zxhs }}</td>
            <td>{{ item.hdry }}</td>
          </tr>
          <tr>
            <td
              colspan="11"
              style="text-align:left;text-indent:10px;font-weight:bold;"
            >
              {{ CommonArea }}
            </td>
          </tr>
          <tr
            v-for="(item, index) in tableDate"
            :key="index"
            :value="item.value"
          >
            <td>{{ item.jh }}</td>
            <td>{{ item.xm }}</td>
            <td>{{ item.txh }}</td>
            <td>{{ item.ly }}</td>
            <td>{{ item.lx }}</td>
            <td>{{ item.kssj }}</td>
            <td>{{ item.yz }}</td>
            <td>{{ item.tzsj }}</td>
            <td>{{ item.kzys }}</td>
            <td>{{ item.zxhs }}</td>
            <td>{{ item.hdry }}</td>
          </tr>

          <tr>
            <td
              colspan="11"
              style="text-align:left;text-indent:10px;font-weight:bold;"
            >
              {{ HepatitisArea }}
            </td>
          </tr>
          <tr
            v-for="(item, index) in tableDate"
            :key="index"
            :value="item.value"
          >
            <td>{{ item.jh }}</td>
            <td>{{ item.xm }}</td>
            <td>{{ item.txh }}</td>
            <td>{{ item.ly }}</td>
            <td>{{ item.lx }}</td>
            <td>{{ item.kssj }}</td>
            <td>{{ item.yz }}</td>
            <td>{{ item.tzsj }}</td>
            <td>{{ item.kzys }}</td>
            <td>{{ item.zxhs }}</td>
            <td>{{ item.hdry }}</td>
          </tr>
        </table>
      </div>
    </div>
    <footer-nav></footer-nav>
  </div>
</template>

<script>
import GoBack from "./components/goBack";
import FooterNav from "./components/footerNav";
export default {
  name: "monitorPage",
  components: {
    GoBack,
    FooterNav
  },
  data() {
    return {
      title: "今日医嘱",
      inpatientArea: "住院区",
      CommonArea: "普通区",
      HepatitisArea: "乙肝区",
      tableDate: [
        {
          jh: "1号",
          xm: "和为贵",
          txh: "0012",
          ly: "住院",
          lx: "长期医嘱",
          kssj: "2012-08-12 12:04",
          yz: "按时吃药 一天吃三次 一次吃两粒 饭后吃",
          tzsj: "2012-08-12 12:04",
          kzys: "王医生",
          zxhs: "李护士",
          hdry: "张护士"
        },
        {
          jh: "1号",
          xm: "和为贵",
          txh: "0012",
          ly: "住院",
          lx: "长期医嘱",
          kssj: "2012-08-12 12:04",
          yz: "按时吃药 一天吃三次 一次吃两粒 饭后吃",
          tzsj: "2012-08-12 12:04",
          kzys: "王医生",
          zxhs: "李护士",
          hdry: "张护士"
        }
      ]
    };
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.monitor-container {
  @include box-sizing;

  .screening {
    background: $main-color;
    .ul {
      @include box-sizing;
      @include display-flex;
      // @include align-items-center;
      @include justify-content-center;
      @include text-align;
      padding: 0.3rem 0;
      margin: 0 auto;
      .list {
        color: $text-color;
        display: inline-block;
        font-size: 0.3rem;
        @include flex;
        span {
          &.iconfont {
            font-size: 0.3rem;
          }
        }
      }
    }
  }
  .MonitoringForm {
    width: 1500px;
  }
}
</style>
