{% extends 'shop/base.html' %}
{% load static %}
{% block ext_css %}
    <link rel="stylesheet" href="{% static 'dist/css/common.css' %}">
{% endblock %}

{% block content %}
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div>
                    <div class="row">
                        <div class="col-sm-6">
                            <h1 class="m-0">
                                商品模块 <small>列表</small>
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <section content="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12 search-collapse">
                        <form id="search_form">
                            <div class="select-list">
                                <ul>
                                    <li>
                                        <label>分类：</label>
                                        <label for="cate_id"></label><select id="cate_id">
                                            <option selected value="">请选择...</option>
                                            {% for key,value in cates.items %}
                                                <option value="{{ key }}">{{ value|safe }}</option>
                                            {% endfor %}
                                        </select>
                                    </li>
                                    <li>
                                        <label>商品名称：</label>
                                        <input type="text" id="goodname" name="goodname" value="">
                                    </li>
                                    <li>
                                        <label>状态：</label>
                                        <select id="status" name="status">
                                            <option value="">所有</option>
                                            <option value="0">正常</option>
                                            <option value="1">下架</option>
                                        </select>
                                    </li>
                                    <li>
                                        <a class="btn btn-primary btn-rounded btn-sm" id="btn-search"><i
                                                class="fa fa-search"></i>&nbsp;搜索</a>
                                    </li>
                                </ul>
                            </div>
                        </form>
                    </div>
                    <div class="col-sm-12 select-table table-striped">
                        <div class="btn-group-sm" id="toolbar" role="group">
                            <a class="btn btn-success" href="{% url 'good_add' %}">
                                <i class="fa fa-plus"></i>新增
                            </a>
                        </div>
                        <table id="bootstrap-table"></table>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <script src="{% static 'plugins/bootstrap-table/bootstrap-table.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-table/bootstrap-table-zh-CN.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-table/bootstrap-table.min.css' %}"></script>

    <script>
        InitMainTable();

        function InitMainTable() {
            $('#bootstrap-table').bootstrapTable({
                url: 'goods/ajax_goods',
                method: 'get',
                toolbar: '#toolbar',
                striped: true,
                cache: false,
                pagination: true,
                sortable: false,
                sortOrder: "asc",
                queryParams: function (params) {
                    var temp = {
                        page: (params.offset / params.limit) + 1,
                        cate_id: $('#cate_id').val(),
                        goodname: $('#goodname').val(),
                        status: $('#status').val()
                    };
                    return temp;
                },
                sidePagination: "server",
                pageNumber: 1,
                pageSize: 10,
                pageList: [10, 25, 50, 100],
                showColumns: true,
                showRefresh: true,
                uniqueId: "id",
                columns: [
                    {checkbox: true}, {
                        field: 'name',
                        title: '商品名称'
                    }, {
                        field: 'market_price',
                        title: '市场价'
                    }, {
                        field: 'price',
                        title: '销售价'
                    }, {
                        field: 'category_id',
                        title: '商品分类'
                    }, {
                        field: 'click_num',
                        title: '点击量'
                    }, {
                        field: 'amount',
                        title: '销售量'
                    }, {
                        field: 'id',
                        title: '操作',
                        formatter: operation,
                    }
                ]
            });
        }

        function operation(value, row, index) {
            var htm = "<buton class='btn btn-primary btn-edit'>修改</button>   <buton class='btn btn-danger btn-del'>删除</button>"
            return htm;
        }

        $('#btn_search').click(function() {
            $('#bootstrap-table').bootstrapTable('refresh', {
                url: '/goods/ajax_goods/'
            });
        })
    </script>
{% endblock %}