<!-- 透析室 -->
<template>
  <div>
    <div class="navigation">
      <ul class="ul">
        <li class="list" @click="showZonePicker">
          <span>{{ selected_zone[0].text }}</span>
          <span class="iconfont">&#xe60c;</span>
        </li>
        <li class="list" @click="showSchedualTypePicker">
          <span>{{ selected_schedual_type[0].text }}</span>
          <span class="iconfont">&#xe60c;</span>
        </li>
        <li class="list" @click="openPicker">
          <span>{{ selected_date_str }}</span>
          <span class="iconfont">&#xe60c;</span>
        </li>
      </ul>

      <vue-pickers
        :show="show_zone_picker"
        :columns="1"
        :defaultData="selected_zone"
        :selectData="zones"
        @cancel="hideZonePicker"
        @confirm="didSelectZone"
      >
      </vue-pickers>

      <vue-pickers
        :show="show_schedual_type_picker"
        :columns="1"
        :defaultData="selected_schedual_type"
        :selectData="schedual_types"
        @cancel="hideSchedualTypePicker"
        @confirm="didSelectSchedualType"
      >
      </vue-pickers>

      <mt-datetime-picker
        ref="datePicker"
        type="date"
        v-model="selected_date"
        :endDate="new Date()"
        @confirm="didSelectDate"
      >
      </mt-datetime-picker>
    </div>

    <div class="dataList">
      <div
        v-for="(scheduals, index) in filtedScheduals"
        :key="index"
        class="cell clearfix"
      >
        <h2 class="title">{{ scheduals.zone_name }}</h2>
        <data-list :scheduals="scheduals.scheduals"></data-list>
      </div>
    </div>
  </div>
</template>

<script>
import DataList from "./data_list";
import vuePickers from "vue-pickers";
import { parseTime } from "@/utils/index";
import { getDialysisScheduals } from "@/api/dialysis";

export default {
  name: "DialysisContent",
  components: {
    DataList,
    vuePickers
  },
  data() {
    return {
      show_schedual_type_picker: false,
      selected_schedual_type: [{ value: 0, text: "全部班" }],
      schedual_types: {
        data1: [
          { value: 0, text: "全部班" },
          { value: 1, text: "上午" },
          { value: 2, text: "下午" },
          { value: 3, text: "晚上" }
        ]
      },

      show_zone_picker: false,
      selected_zone: [{ value: 0, text: "全部分区" }],
      zones: {
        data1: [{ value: 0, text: "全部分区" }]
      },

      selected_date: new Date(),

      dialysis_scheduals: []
    };
  },
  computed: {
    selected_date_str: function() {
      return parseTime(this.selected_date, "{y}-{m}-{d}");
    },
    filtedScheduals: function() {
      if (this.selected_zone[0].value == 0) {
        return this.dialysis_scheduals;
      } else {
        var zone_name = this.selected_zone[0].text;
        for (let index = 0; index < this.dialysis_scheduals.length; index++) {
          const dialysis_scheduals = this.dialysis_scheduals[index];
          if (dialysis_scheduals.zone_name == zone_name) {
            return [
              { zone_name: zone_name, scheduals: dialysis_scheduals.scheduals }
            ];
          }
        }
      }
    }
  },
  created() {
    this.requestDialysisScheduals();
  },
  methods: {
    openPicker() {
      this.$refs.datePicker.open();
    },
    didSelectDate: function(date) {
      this.requestDialysisScheduals();
    },

    showZonePicker() {
      this.show_zone_picker = true;
    },
    hideZonePicker() {
      this.show_zone_picker = false;
    },
    didSelectZone(val) {
      this.show_zone_picker = false;
      this.selected_zone = [val.select1];
    },

    showSchedualTypePicker() {
      this.show_schedual_type_picker = true;
    },
    hideSchedualTypePicker() {
      this.show_schedual_type_picker = false;
    },
    didSelectSchedualType(val) {
      this.show_schedual_type_picker = false;
      this.selected_schedual_type = [val.select1];
      this.requestDialysisScheduals();
    },

    requestDialysisScheduals() {
      var type = this.selected_schedual_type[0].value;
      // var date = (Date.parse(new Date(this.selected_date_str)) / 1000) - 28800
      getDialysisScheduals({ type: type, date: this.selected_date_str })
        .then(rs => {
          var resp = rs.data;
          if (resp.state == 1) {
            // console.log(resp.data);
            var scheduals = resp.data.scheduals;
            var zoneMap = {};
            var schedualMap = {};
            for (let index = 0; index < scheduals.length; index++) {
              const schedual = scheduals[index];
              if (schedual.dialysis_order == null) {
                continue;
              }
              if (schedualMap[schedual.device_zone.name] == null) {
                schedualMap[schedual.device_zone.name] = [];
              }
              schedualMap[schedual.device_zone.name].push(schedual);
              if (zoneMap[schedual.device_zone.name] == null) {
                zoneMap[schedual.device_zone.name] = schedual.device_zone;
              }
            }

            var zones = [];
            zones.push({ value: 0, text: "全部分区" });
            for (var zoneName in zoneMap) {
              zones.push({ value: zoneMap[zoneName].id, text: zoneName });
            }
            zones = zones.sort(function(a, b) {
              return a.value > b.value;
            });
            this.zones.data1 = zones;

            var dialysis_scheduals = [];
            for (let index = 0; index < zones.length; index++) {
              const zone = zones[index];
              var scheduals = schedualMap[zone.text];
              if (scheduals == null) {
                continue;
              }
              dialysis_scheduals.push({
                zone_name: zone.text,
                scheduals: scheduals
              });
            }
            this.dialysis_scheduals = dialysis_scheduals;
          } else {
            this.$toast({
              message: resp.msg
            });
          }
        })
        .catch(v => {});
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.navigation {
  padding: 0.17rem 0 0.28rem 0;
  background: $main-color;
  .ul {
    @include box-sizing;
    @include display-flex;
    @include justify-content-center;
    @include text-align;
    /*overflow-y:scroll;*/
    width: 60%;
    margin: 0 auto;
    .list {
      color: $text-color;
      display: inline-block;
      font-size: 0.3rem;
      @include flex;
      span {
        &.iconfont {
          font-size: 0.3rem;
        }
      }
    }
  }
}
.dataList {
  @include box-sizing;
  margin: 0 0 1.425rem 0;
  .cell {
    padding: 0.28rem 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>
