<!-- 候诊室 -->
<template>
  <div>
    <div class="navigation">
      <div class="menuTab">
        <ul>
          <li
            v-for="(item, i) in menuList"
            :class="select_index == i ? 'active' : ''"
            @click="menuTabClick(i)"
            :key="i"
          >
            {{ item.label + (item.count > 0 ? "(" + item.count + ")" : "") }}
          </li>
        </ul>
      </div>
    </div>
    <div class="dataList">
      <div class="cell clearfix" v-if="scheduals.length > 0">
        <h2 class="title"></h2>
        <data-list :scheduals="filtedScheduals"></data-list>
      </div>
    </div>
  </div>
</template>

<script>
import DataList from "./data_list";
import { getWaitingScheduals } from "@/api/dialysis";
import { parseTime } from "@/utils";

export default {
  name: "WaitingContent",
  components: {
    DataList
  },
  data() {
    return {
      menuList: [
        { value: "1", label: "全部", count: 0 },
        { value: "2", label: "透前称量", count: 0 },
        { value: "3", label: "制定处方", count: 0 }
      ],

      select_index: 0,

      scheduals: []
    };
  },
  computed: {
    filtedScheduals: function() {
      if (this.select_index == 0) {
        return this.scheduals;
      } else if (this.select_index == 1) {
        var scheduals = [];
        for (let index = 0; index < this.scheduals.length; index++) {
          const schedual = this.scheduals[index];
          if (schedual.assessment_before_dislysis != null) {
            scheduals.push(schedual);
          }
        }
        return scheduals;
      } else {
        var scheduals = [];
        for (let index = 0; index < this.scheduals.length; index++) {
          const schedual = this.scheduals[index];
          if (
            schedual.assessment_before_dislysis == null &&
            schedual.prescription != null
          ) {
            scheduals.push(schedual);
          }
        }
        return scheduals;
      }
    }
  },
  created() {
    this.requestScheduals();
  },
  methods: {
    menuTabClick: function(tabIndex) {
      this.select_index = tabIndex;
    },

    requestScheduals() {
      var date = parseTime(Date.parse(new Date()), "{y}-{m}-{d}");
      // var date = (Date.parse(new Date()) / 1000) - 28800
      getWaitingScheduals({ date: date }).then(rs => {
        var resp = rs.data;
        // console.log(resp);
        if (resp.state == 1) {
          var scheduals = resp.data.scheduals;
          // console.log(scheduals);
          var totalCount = scheduals.length;
          var prescription_count = 0;
          var assessment_before_dislysis_count = 0;
          for (let index = 0; index < scheduals.length; index++) {
            const schedual = scheduals[index];
            if (schedual.assessment_before_dislysis != null) {
              assessment_before_dislysis_count += 1;
            } else if (schedual.prescription != null) {
              prescription_count += 1;
            }
          }
          this.menuList[0].count = totalCount;
          this.menuList[1].count = assessment_before_dislysis_count;
          this.menuList[2].count = prescription_count;
          this.scheduals = scheduals;
        } else {
          this.$toast({
            message: resp.msg
          });
        }
      });
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.menuTab {
  background: $main-color;
  padding: 0.17rem 0 0.28rem 0;
  color: $text-color;
  font-size: 0.3rem;
  @include box-sizing;
  ul {
    width: 70%;
    @include display-flex;
    @include text-align;
    @include align-items-center;
    @include justify-content-center;
    margin: 0 auto;
    li {
      //   @include flex;
      border-radius: 50px;
      padding: 0.16rem 0.3rem;
      margin: 0 0.2rem;
      &.active {
        background: rgba(255, 255, 255, 0.2);
      }
    }
  }
}
.dataList {
  @include box-sizing;
  margin: 0 0 1.425rem 0;
  .cell {
    padding: 0 0.28rem 0 0;
    margin-top: 0.3rem;
    background: $white-bg;
    .title {
      font-size: 0.36rem;
      padding: 0.27rem 0.4rem;
      color: $pgh-color;
      font-weight: 700;
    }
  }
}
</style>
