<template>
    <div>
      <van-list
        width="100%"
        v-model="loading"
        :finished="finished"
        @load="onLoad"
      >
        <div class="blueBorder"></div>
        <div class="tableTit " >
                <ul>
                    <li v-for="(item,index) in ['日期','班次','分区','机号','治疗模式']" :key="index" :value="item.value" >{{item}}</li>
                </ul>
        </div>
            <div class="tableDate" >
                <ul>
                    <li v-for="(item,index) in tableDate" :key="index" :value="item.value" >
                    <span>{{parseTime(item.schedule_date, "{y}-{m}-{d}")}}</span>
                    <span>{{scheduleType(item.schedule_type)}}</span>
                    <span>{{item.zone.name}}</span>
                    <span>{{item.bed.number}}</span>
                    <span>{{item.mode.name}}</span>
                    </li>
                </ul>
            </div>
      </van-list>
        <!--<div class="NoData" v-show="tableDate.length == 0"><img src="@/assets/login/data.jpg" alt=""></div>-->
      <div class="NoData" v-show="tableDate.length == 0"><img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt=""></div>

    </div>
</template>

<script>
  import {parseTime} from "@/utils"
  import {getSchedualList} from '@/api/patient';
export default {
  name: "LongTable",
  created(){
    this.tableDate=[]
    let params = {
      page : this.page + 1,
      limit: this.limit,
      patient_id: this.$route.query.patient_id
    }
    getSchedualList(params).then(response =>{
      if(response.data.state == 0){
        return false;
      }else{
        if(response.data.data.schedules.length == 0){

        }else{
          for(let i = 0; i < response.data.data.schedules.length;i++){
            this.tableDate.push(response.data.data.schedules[i])
          }
        }
      }
    });

  },
  data() {
    return {
      tableDate: [],
      loading: false,
      finished: false,
      page:0,
      limit:15,
    };

  },  methods: {
    parseTime(time, layout) {
      return parseTime(time, layout)
    },onLoad() {
      this.page = this.page + 1
      let params = {
        page : this.page + 1,
        limit: this.limit,
        patient_id: this.$route.query.patient_id
      }
      getAllEducationList(params).then(response =>{
        if(response.data.state == 0){
          this.finished = true;
          this.loading = false;
          return false;
        }else{
          if(response.data.data.schedules.length == 0){
            this.finished = true;
            this.loading = false;

          }else{
            for(let i = 0; i < response.data.data.schedules.length;i++){
              this.tableDate.push(response.data.data.schedules[i])
            }
            this.loading = false;
          }
        }
      });
    }, scheduleType(scheduleType) {
      var typeName = "";
      switch (scheduleType) {
        case 1:
          typeName = "上午";
          break;
        case 2:
          typeName = "下午";
          break;
        case 3:
          typeName = "晚上";
          break;

        default:
          break;
      }
      return typeName;
    },
  }
};
</script>

<style style="stylesheet/scss" lang="scss"  scoped>
.tableTit {
  background: $main-color;
  color: $text-color;
  @include box-sizing;
  ul {
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-center;
    li {
      @include flex;
      border-right: 2px #fff solid;
      font-size: 0.3rem;
      height: 0.88rem;
      line-height: 0.88rem;
    }
    &:last-child {
      border-right: none;
    }
  }
}
.tableDate {
  background: $text-color;
  color: $pgh-color;
  @include box-sizing;
  ul {
    li {
      font-size: 0.3rem;
      height: 0.88rem;
      line-height: 0.88rem;
      @include display-flex;
      @include align-items-center;
      @include text-align;
      @include justify-content-center;
      span {
        @include flex;
        border-right: 2px #fff solid;
        border-bottom: 2px #fff solid;
        background: #ecf5ff;
        display: inline-block;
        height: 0.88rem;
        line-height: 0.88rem;
        .iconfont {
          color: $main-color;
          font-size: 0.3rem;
          margin-right: 0.1rem;
        }
      }
    }
    &:last-child {
      border-right: none;
    }
  }
}
</style>

