{% extends "global/Page.html" %}
{% load otree static %}
{% block title %}
{% endblock %}



{% block content %}
<style>
  .loadEffect {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    margin-top: 100px;
  }

  .loadEffect span {
    display: inline-block;
    width: 30px;
    height: 10px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background: pink;
    position: absolute;
    -webkit-animation: load 1.04s ease infinite;
  }

  @-webkit-keyframes load {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0.2;
    }
  }

  .loadEffect span:nth-child(1) {
    left: 0;
    top: 50%;
    margin-top: -5px;
    -webkit-animation-delay: 0.13s;
  }

  .loadEffect span:nth-child(2) {
    left: 10px;
    top: 20px;
    -webkit-transform: rotate(45deg);
    -webkit-animation-delay: 0.26s;
  }

  .loadEffect span:nth-child(3) {
    left: 50%;
    top: 10px;
    margin-left: -15px;
    -webkit-transform: rotate(90deg);
    -webkit-animation-delay: 0.39s;
  }

  .loadEffect span:nth-child(4) {
    top: 20px;
    right: 10px;
    -webkit-transform: rotate(135deg);
    -webkit-animation-delay: 0.52s;
  }

  .loadEffect span:nth-child(5) {
    right: 0;
    top: 50%;
    margin-top: -5px;
    -webkit-transform: rotate(180deg);
    -webkit-animation-delay: 0.65s;
  }

  .loadEffect span:nth-child(6) {
    right: 10px;
    bottom: 20px;
    -webkit-transform: rotate(225deg);
    -webkit-animation-delay: 0.78s;
  }

  .loadEffect span:nth-child(7) {
    bottom: 10px;
    left: 50%;
    margin-left: -15px;
    -webkit-transform: rotate(270deg);
    -webkit-animation-delay: 0.91s;
  }

  .loadEffect span:nth-child(8) {
    bottom: 20px;
    left: 10px;
    -webkit-transform: rotate(315deg);
    -webkit-animation-delay: 1.04s;
  }

  .absolute {
    position: fixed;
    width: 100vmax;
    height: 1000vmax;
    left: 0;
    top: 0;
    height: 100%;
    overflow: scroll;
    display: flex;
    flex-direction: row;
  }

  .nav {
    /* position: absolute;
    top: 0;
    right: 0;
    bottom: 0; */
    width: 250px;
    border-right: 2px rgb(211, 211, 211) solid;
    float: left;
    opacity: 0;
  }
</style>
<div class="absolute">
  <div class="nav">
    <div style=" width: 140px; top: 0;">
      <div class="btn-group-vertical" style="margin-top: 3rem; position:sticky; top: 2rem;">
        <button type="button" class="btn btn-secondary" onclick="getAll()">全部商品</button>
        <button type="button" class="btn btn-secondary" onclick="getFood()">进口食品</button>
        <button type="button" class="btn btn-secondary" onclick="getMakeUp()">美妆</button>
        <button type="button" class="btn btn-secondary" onclick="getOffice()">办公用品</button>
      </div>
    </div>
  </div>
  <script>
    var cards = document.getElementsByClassName("special")
    var foods = document.getElementsByName("1")
    var makeUps = document.getElementsByName("2")
    var offices = document.getElementsByName("3")
    console.log(offices)


    function getAll() {
      for (card of cards) {
        card.style.display = "none"
      }
      for (card of cards) {
        card.style.display = "inherit"
      }
    }

    function getFood() {
      for (card of cards) {
        card.style.display = "none"
      }



      for (food of foods) {
        food.style.display = "inherit"
      }

    }

    function getMakeUp() {
      for (card of cards) {
        card.style.display = "none"
      }



      for (makeUp of makeUps) {
        makeUp.style.display = "inherit"
      }

    }

    function getOffice() {
      for (card of cards) {
        card.style.display = "none"
      }


      for (office of offices) {
        console.log(office)
        office.style.display = "inherit"
      }

    }
  </script>
  <div class="content">
    <input type="hidden" name="selectedId1" />
    <style>
      .debug-info {
        display: none;
      }
      .short  {
        color: red;
      }
      .short-button{
        background-color: darkgray;
        margin-right: 1.7rem;
      }
      .shortage{
        order: 2;
      }
      .enough{
        order:1;
      }
      .pic{
        width: 10.5rem;
        height: 10.5rem;
        margin: 1.5rem;
        overflow: hidden;
      }
      .special{
        border: 0;
      }
      .enough-button{
        margin-right: 1.7rem;
      }
    </style>
    <div class="wrapper1" style="display: flex; flex-direction: row; flex-wrap: wrap; margin: 2rem;">

      {% for item in products %}
        {% if item.short == 1 %}
        <div class="card special shortage" style="width: 14rem; margin: 1rem 0.1rem; " name={{item.type}}>
          <div class="pic">
          <img src={{ item.picUrl }} class="card-img-top" alt="...">
        </div>
          <div class="card-body">
            <p class="card-text" style="font-size: 1rem;"><font class="short">【暂时无法试用】</font>{{item.title}}</p>
            <h5 class="card-title" style="bottom: 2px; position:absolute; left: 1rem;"> ¥{{item.price}} </h5>
            <button type="button" class="btn short-button" data-toggle="modal" data-target="#exampleModal"
              onclick="changeId()" hiddenType={{item.type}} hiddenDate={{item.id}} style="bottom: 2px; position:absolute; right: 2px;" disabled>
              立即试用
            </button>
          </div>
        </div>
        {% else %}
        <div class="card special enough" style="width: 14rem; margin: 1rem 0.1rem; " name={{item.type}}>
          <div class="pic">
          <img src={{ item.picUrl }} class="card-img-top" alt="...">
        </div>
          <div class="card-body">
            <p class="card-text" style="font-size: 1rem;">{{item.title}}</p>
            <h5 class="card-title" style="bottom: 2px; position:absolute; left: 1rem;"> ¥{{item.price}} </h5>
            <button type="button" class="btn btn-primary enough-button" data-toggle="modal" data-target="#exampleModal"
              onclick="changeId()" hiddenDate={{item.id}} hiddenType = {{item.type}} style="bottom: 2px; position:absolute; right: 2px;">
              立即试用
            </button>
          </div>
        </div>
        {% endif %}


    

      <script>
        let productsList = js_vars.products
        function changeId() {
          console.log("1")
          let e = window.event || arguments.callee.caller.arguments[0];
          let button = e.target
          hiddenValue = button.getAttribute("hiddenDate")
          hiddenType = button.getAttribute("hiddenType")
          localStorage.setItem('firstItem', hiddenType);
          console.log(hiddenType)
          document.querySelector('[name=selectedId1]').value = parseInt(hiddenValue);
        }
      </script>

      {% endfor %}
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" style="z-index: 10;">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">商品确认</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body" >
      您确定要立即试用此商品吗？
    </div>
    <div class="modal-footer">
      <button type="button" class="btn" data-dismiss="modal">关闭</button>
      <button class="otree-btn-next btn btn-primary">确认</button>

    </div>
  </div>
</div>

</div>
<!-- <a href="#" class="btn btn-primary button" >Go somewhere</a> -->
{% endblock %}