{% extends "global/Page.html" %}
{% load otree static %}
{% block content %}
<style>
  .someTitle{
    font-size: 1.5rem;
  }
  .buttonContain{
    float: right;
  }
  .debug-info { 
    display: none; 
  }
  .pic{
        width: 10.5rem;
        height: 10.5rem;
        overflow: hidden;
      }
  .card-text{
    font-size: 1rem;
  }
  .layui-textarea{
    font-size: 1rem;
  }
</style>
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css ">
<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4" style="overflow: hidden;">
      <div class="pic">
      <img src={{item.picUrl}} class="card-img" alt="" >
    </div>
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title"> --- </h5>
        <p class="card-text">{{item.title}}</p>
        <p class="card-text"><small class="text-muted">{{item.price}}</small></p>
      </div>
    </div>
  </div>
</div>
<hr>
<p class="someTitle">你的评分</p>
<div id="test1"></div>
<input type="hidden" name="starNum1"/>
<br>
<br>
<hr>
<p class="someTitle">你的评论</p>
<br>
<textarea id="commentMock" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
<input type="hidden" name="comment1" />
<div class="buttonContain">
  <button class="otree-btn-next btn btn-primary" onclick="synch()">提交</button>
</div>

<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js "></script>
  <script>
    layui.use('rate', function () {
      var rate = layui.rate;
      //渲染
      rate.render({
        elem: '#test1',
        choose: function (value) {
          document.getElementsByName("starNum1")[0].value = value
        }
      });
    });
    function synch(){
      let starNum1 = document.getElementsByName("starNum1")[0].value
      if(starNum1){

      }else{
        alert("请对商品进行打分")
      }
      document.getElementsByName("comment1")[0].value = document.getElementById("commentMock").value
      console.log(document.getElementsByName("comment1")[0].value)
    }
  </script>

{% endblock %}