{% 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" style=" opacity: 0;">
    <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()" disabled>全部商品</button>
        <button type="button" class="btn btn-secondary" onclick="getFood()" disabled>进口食品</button>
        <button type="button" class="btn btn-secondary" onclick="getMakeUp()" disabled>美妆</button>
        <button type="button" class="btn btn-secondary" onclick="getOffice()" disabled>办公用品</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="selectedId2" />
    <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()" 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() {
          let e = window.event || arguments.callee.caller.arguments[0];
          let button = e.target
          hiddenValue = button.getAttribute("hiddenDate")
          hiddenType = button.getAttribute("hiddenType")
          localStorage.setItem('secondItem', hiddenType);
          console.log(hiddenType)
          for (pro of productsList){
            if (pro.id == hiddenValue){
              var money = pro.price
              document.getElementById("money").innerHTML = "该商品的价格为 ¥"+money
            }
          }
          document.querySelector('[name=selectedId2]').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" id="money">
      您确定要购买此商品吗？
    </div>
    <div class="modal-footer">
      <button type="button" class="btn" data-dismiss="modal">关闭</button>
      <button class="btn" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" id="collapse">
        我已付款
      </button>
    </div>
    <div class="collapse" id="collapseExample">
      <div class="card card-body">
        请再次确认您已付款。
        <button class="otree-btn-next btn btn-primary">提交</button>
      </div>
     
    </div>
  </div>
</div>
<script>
  $('#exampleModal').on('hidden.bs.modal', function (event) {
        document.getElementById("collapse").click()
    })
</script>
<div  style="width: 60vmax; height: 35vmax; display: flex;  justify-content:space-between; margin-left: 20vmax;">
  <img src="{% static "img/Alipay.jpeg" %}" style="width: 40%;">
  <img src="{% static "img/Wechat.png" %}"  style="width: 40%;">
</div>
</div>
<!-- <a href="#" class="btn btn-primary button" >Go somewhere</a> -->
{% endblock %}