{% extends "bee_django_coin/custom_base.html" %}
{% load static %}
{% load bee_django_coin_filter %}
{% block styles %}
    <style>
        .item_div {
            border: 1px solid #ededed;
            margin: 10px 0;
            padding: 10px;
        }

        .img_div img {
            width: 100%;
            max-width: 300px;
            max-height: 300px;
        }

        .name_div {
            font-size: 20px;
            font-weight: 900;
            margin-top: 10px;
        }

        .saled_div {
            font-size: 12px;
            color: red;
        }

        ._btn {
            background-color: #ededed;
            border: 1px solid #111111;
            display: inline-block;
            width: 30px;
            height: 30px;
        }

        .input_div {
            border: 1px solid #111111;
            display: inline-block;
            width: 100px;
            height: 30px;
        }

        .coin_div {
            margin: 10px 0;
        }

        .btn_div {
            margin: 20px 0;
        }

        .active {
            color: #ededed;
            background-color: #555555;
        }

        .info_div {
            margin: 10px 0;
        }

        .panel-body img {
            width: 100%;
            max-width: 750px;
        }
    </style>
{% endblock %}
{% block content %}

    <div class="item_div row">
        <div class="col-sm-6 col-xs-12 img_div text-center"><img
                src="{{ item.get_pic_url }}"
                alt="{{ item.name }}"
                ></div>
        <div class="col-sm-6 col-xs-12">
            <div class="name_div">{{ item.name }}</div>
            <div class="saled_div">累计售出：{{ item.get_seled_count }}件</div>
            {#            <div class="type_div">{% if item.type_int == 1 %}实物{% else %}#}
            {#                虚拟{% endif %}</div>#}
            <div class="coin_div">价格：{{ item.coin }} {{ context_coin_name }}</div>
            <div class="coin_div">数量：
                <button class="_btn" id="min" onclick="click_btn('-')">-</button>
                <input type="text" id="count" class="input_div" value="1">
                <button class="_btn" id="add" onclick="click_btn('+')">+</button>
            </div>
            <div class="btn_div">
                <button id="buy_btn" class="btn btn-danger" style="width: 100%; max-width: 300px;"
                        onclick="click_buy({{ item.id }})">立即购买
                </button>
            </div>
        </div>


    </div>
    <div class="panel panel-default info_div">
        <div class="panel-heading">
            <h3 class="panel-title">商品详情</h3>
        </div>
        <div class="panel-body">
            {{ item.info|safe|linebreaks|default:"" }}
        </div>
    </div>




{% endblock %}

{% block scripts %}
    <script type="text/javascript">
        $(document).ready(function () {
            checkMinBtn(1);
        })
        function click_btn(t) {
            var $input = $("#count");
            var count = getInputCount();
            var new_count = 0;
            if (count) {
                if (t == "+") {
                    new_count = count + 1
                } else if (t == "-") {
                    new_count = count - 1
                }
            }
            else {
                new_count = 1;
            }
            $input.val(new_count.toString());
            checkMinBtn(new_count);

        }
        function getInputCount() {
            var $input = $("#count");
            var count_str = $input.val();
            var re = /^[1-9]+[0-9]*]*$/;
            if (re.test(count_str)) {
                return parseInt(count_str)
            } else {
                return 0
            }
        }
        function lockBuyBtn(t, id) {
            var $buy = $("#buy_btn");
            if (t == 1) {
                $buy.addClass("active");
                $buy.attr("onclick", "");
            } else {

                $buy.removeClass("active");
                $buy.attr("onclick", "click_buy(" + id + ")");
            }
        }
        function checkMinBtn(new_count) {
            var $min = $('#min');
            if (new_count == 1) {
                $min.addClass("active");
                $min.attr("onclick", "");
            } else {
                $min.removeClass("active");
                $min.attr("onclick", "click_btn('-')");
            }
        }
        function click_buy() {

            var item_id = "{{ item.id }}";
            lockBuyBtn(1, item_id);
            var count = getInputCount();
            if (count <= 0) {
                alert("请填写正确的购买数量");
                lockBuyBtn(0, id);
                return;
            }
            var item_name = '{{ item.name }}';
            var coin ={{ item.coin }};
            var total_coin = count * coin;

            var msg = "确定购买以下商品么？\n商品：" + item_name + "\n数量：" + count.toString() + "份\n总价格：" + total_coin.toString() + "{{ context_coin_name }}\n";
            if (confirm(msg) == true) {
                $.post("{% url 'bee_django_coin:order_add' %}", {
                    'user_id':"{{ request.user.id }}" ,
                    'item_id': item_id,
                    'item_count': count,
                    'total_coin': total_coin
                }, function (res) {
                    alert(res["message"]);
                    if (res["error"] == 0) {
                        location.href = '{% url 'bee_django_coin:order_custom_user_list' request.user.id %}';
                    } else {
                        lockBuyBtn(0, item_id);
                    }
                });
                return true;
            } else {
                lockBuyBtn(0, item_id);
                return false;
            }

        }

    </script>
{% endblock %}
