{% extends "home/home.html" %}
{% block content %}
<div>
    <img src="{{url_for('static',filename='base/images/about_banner.jpg')}}">
</div>
<div class="breadcrumbs1_wrapper">
  <div class="container">
    <div class="breadcrumbs1"><a href="/">首页</a><span>/</span>景区详情</div>
  </div>
</div>

<!--景区内容-->
<div id="team1">
  <div class="container">
    <h2 class="animated">{{scenic.title}}
      {% if count %} 
        <button class="collect-button">已收藏</button>
      {% else %}
        <button class="collect-button">收藏</button>
      {% endif %}
    </h2>
    <div class="title1">{{scenic.content|safe}}</div>
  </div>
</div>
<!--游记列表-->
<div class="container" style="padding-bottom: 100px">
  <h2 class="animated">{{scenic.title}}游记</h2>
    <div class="row">
    {% if not scenic.travels %}
      <div class="title1">暂无游记</div>
    {% else %}
    <div class="col-sm-12 animated undefined visible">
      <ul class="ul2" style="padding-left: 150px">
        {% for v in scenic.travels %}
        <li class="form-groupe">
          <a  href="{{url_for('home.travels',id=v.id)}}">{{ v.title }}</a>
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}
  </div>
</div>

<script src="{{ url_for('static',filename='layer/layer.js') }}"></script>
<script>
    $(document).ready(function () {
        $(".collect-button").click(function () {       // 触发点击事件
            user_id = {{ user_id }};                   // 获取用户ID
            if(!user_id){                               // 如果用户ID不错在，即用户未登录
              layer.msg("请先登录",{icon:2,time:2000}); // layer弹出错误信息
              return false;                             // 终止执行
            }
            var scenic_id = {{ scenic.id }};            // 获取景区ID
            $.ajax({                                    // 使用Ajax异步提交
                url: "{{ url_for('home.collect_add') }}", // 提交到的URL
                type: "GET",                            // 提交方式为GET
                data:{scenic_id: scenic_id},            // 传递参数
                dataType: "json",                       // 数据类型为json
                success: function (res) {               // 操作成功后执行逻辑
                    if (res.ok == 1) {
                        layer.msg("收藏成功！",{icon:1,time:2000}); // 显示弹出层信息
                        $(".collect-button").empty();               // 清空按钮区文字
                        $(".collect-button").append("已收藏");      // 填充文字
                    } else {
                        layer.msg("您已收藏",{icon:2,time:2000});   // 提示已收藏
                    }
                }
            })
        });
    });
</script>

{% endblock %}