<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-xs">Assign Test</div>
      <div class="q-pa-md q-gutter-sm">
        <q-breadcrumbs>
          <q-breadcrumbs-el icon="home" to="/tutor/welcome" />
          <q-breadcrumbs-el label="All Tests" to="/all-tests" />
          <q-breadcrumbs-el label="Assign Test" to="/assign-test" />
        </q-breadcrumbs>
      </div>
      <div class="row">
        <div class="col-12 col-md-12 col-sm-12 col-xs-12">
          <q-card class="my-card">
            <q-card-select>
              <div class="row q-px-md">
                <div class="col-6 col-md-6 col-xs-12 q-pa-sm row">
                  <div class="text-bold q-py-sm">Test Name:</div>
                  <div class="text-body1 q-pa-sm">MOH Test 1</div>
                </div>
                <div class="col-6 col-md-6 col-xs-12 q-pa-sm row">
                  <div class="text-bold q-py-sm">Already Assigned To:</div>
                  <div class="text-body1 text-amber-10 q-pa-sm">Not assigned to any group</div>
                </div>
              </div>
              <div class="row q-pa-md">
                <div class="col-6 col-md-6 col-xs-12 q-pa-sm">
                  <q-input
                    color="primary"
                    outlined
                    v-model="inputValue"
                    label="Valid From - Valid To"
                    mask="####-##-## - ####-##-##"
                    class="text-body1"
                  >
                    <template v-slot:append>
                      <q-icon name="far fa-calendar" class="cursor-pointer">
                        <q-popup-proxy
                          v-model="showScroller2"
                          anchor="top right"
                          self="bottom middle"
                        >
                          <q-scroller
                            v-model="value"
                            view="date-range"
                            vertical-bar
                            style="width: 300px;height:200px;"
                            :style="scrollerPopupStyle240"
                            @close="() => { showScroller2 = false }"
                          />
                        </q-popup-proxy>
                      </q-icon>
                    </template>
                  </q-input>
                </div>
                <div class="q-px-md q-mx-md row">
                  <!-- <q-tree
                    :nodes="simple"
                    node-key="label"
                    tick-strategy="leaf"
                    :selected.sync="selected"
                    :ticked.sync="tickedKeys"
                    :expanded.sync="expanded"
                    accordion
                  />-->
                  <q-tree
                    class="col-12 col-sm-12"
                    :nodes="simple"
                    node-key="label"
                    tick-strategy="leaf"
                    :selected.sync="selected"
                    :ticked.sync="ticked"
                    :expanded.sync="expanded"
                  />
                </div>
              </div>
            </q-card-select>
            <div class="col-12 col-md-12 q-pa-lg">
              <q-btn color="primary" size="md">Assign</q-btn>
            </div>
          </q-card>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { date } from "quasar";
export default {
  data() {
    return {
      third: false,
      fourth: true,
      showScroller2: false,
      value: "",
      inputValue: "",
      level: ["", "Easy", "Medium", "Hard"],
      simple: [
        {
          label: "Dental Guide",
          children: [
            {
              label: "Asim Khan",
            },
            {
              label: "Zahid Mamon",
            },
            {
              label: "Jhon Doe",
            }
          ]
        },
        {
          label: "Clinical Surgery",
          children: [
            {
              label: "Hammad Ahmed",
            },
            {
              label: "Nouman Khan",
            },
            {
              label: "Kate vinsallet",
            }
          ]
        }
      ],
      selected: [],
      ticked: [],
      expanded: []
    };
  },
  computed: {
    todaysDate() {
      let timeStamp = Date.now();
      timeStamp = date.addToDate(timeStamp, { days: 7, month: 1 });
      return date.formatDate(timeStamp, "YYYY-MM-DD, HH:MM");
    }
  },
  scrollerPopupStyle240() {
    if (this.$q.screen.lt.sm) {
      return {
        width: "90vw",
        height: "70vh"
      };
    } else {
      return {
        maxHeight: "200px",
        height: "200px",
        width: "250px"
      };
    }
  },
  methods: {},
  watch: {
    value(val) {
      const type = Object.prototype.toString.call(this.value);
      if (type === "[object Array]") {
        this.inputValue = `${val[0]} - ${val[1]}`;
      }
    },

    inputValue(val) {
      const parts = val.split(" - ");
      if (parts[0] !== this.value[0] || parts[1] !== this.value[1]) {
        this.value[0] = parts[0];
        this.value[1] = parts[1];
      }
    }
  }
};
</script>

<style lang="css" scoped>
.hide {
  display: none;
}

.show {
  display: inline;
}
.edit-validate-show-hide {
  display: inline;
}
a {
  text-decoration: none;
  color: #04b1ed;
  cursor: pointer;
}
.hover img {
  filter: grayscale(100%);
  transition: all 0.5s ease;
}
.hover img:hover {
  filter: grayscale(0%);
  transition: all 0.5s ease;
}
.li-gap li {
  padding: 5px;
}
.active {
  background: #f00;
  color: #fff;
  font-size: 30px;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
  .hide {
    display: inline;
  }

  .show {
    display: none;
  }
}

@media only screen and (min-width: 899px) and (max-width: 1280px) {
}
</style>
