<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('演出详情')"/>
        <th:block th:include="include :: bootstrap-fileinput-css" />
    </head>

    <body class="white-bg">
        <div class="detail_title">演出名称：<span></span></div>
        <div class="detail_inner detail_img"><img src=""></div>
        <p>演出时间</p>
        <div class="detail_inner detail_time"></div>
        <p>演出地点</p>
        <div class="detail_inner detail_place"></div>
        <p>票提设置</p>
        <div class="detail_inner detail_option">
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
        <p>代理票种</p>
        <div class="detail_inner detail_pur">
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table2"></table>
            </div>
        </div>
        <p>演出详情</p>
        <div class="detail_inner detail_main"></div>
    </body>

    <th:block th:include="include :: footer"/>
    <script th:src="@{/js/jquery.tmpl.js}"></script>
    <th:block th:include="include :: bootstrap-fileinput-js" />

    <script type="text/javascript">
        var smilePrefix = ctx + "smile/show";
        var perId = window.localStorage.getItem('performancesId');
        $.ajax({
            type: 'get',
            url: smilePrefix + "/getShowById",
            data: {
                performancesId: perId
            },
            success:function(e) {
                let { data } = e;
                console.log('data', data)
                $('.detail_title span').text(data.title);
                $('.detail_img img').attr('src', data.imgPoster);
                $('.detail_time').text(data.timeStart + '-' + data.timeEnd);
                $('.detail_place').text(data.fieldName);
                $('.detail_option').text(data.detail_option);
                $('.detail_main').html(data.details);
                // 新增表格数据
                var options = {
                    data: data.showAgentVoList,
                    id: 'bootstrap-table',
                    pagination: false,
                    showSearch: false,
                    showRefresh: false,
                    showToggle: false,
                    showColumns: false,
                    sidePagination: "client",
                    columns: [
                        {
                            field: 'title',
                            title: '票种名'
                        },
                        {
                            field: 'totalCarry',
                            title: '总代票提',
                            formatter: function (value, row, index) {
                                // return value * 100 + '%'
                                return Math.round(value * 100)
                            }
                        },
                        {
                            field: 'ordCarry',
                            title: '普代票提',
                            formatter: function (value, row, index) {
                                // return value * 100 + '%'
                                return Math.round(value * 100)
                            }
                        },
                        {
                            field: 'content',
                            title: '特殊代理票提'
                        }
                    ]
                };
                $.table.init(options);
                var options2 = {
                    data: data.showTicketVoList,
                    id: 'bootstrap-table2',
                    pagination: false,
                    showSearch: false,
                    showRefresh: false,
                    showToggle: false,
                    showColumns: false,
                    sidePagination: "client",
                    columns: [
                        {
                            field: 'title',
                            title: '票种名'
                        },
                        {
                            field: 'price',
                            title: '单价'
                        },
                        {
                            field: 'type',
                            title: '类型'
                        },
                        {
                            field: 'type',
                            title: '使用时间',
                            formatter: function (value, row, index) {
                                return row.useStart ? $.common.dateFormat(new Date(row.useStart), 'yyyy-MM-dd HH:mm:ss') + '  -  ' + $.common.dateFormat(new Date(row.useEnd), 'yyyy-MM-dd HH:mm:ss') : ''
                            }
                        },
                        {
                            field: 'totalGeneral',
                            title: '库存'
                        },
                        {
                            field: 'agentSaleNum',
                            title: '代理销售数量'
                        },
                        {
                            field: 'totalPrice',
                            title: '销售金额'
                        }
                    ]
                };
                $.table.init(options2);
            }
        })
    </script>

    <style>
        .white-bg {
            padding: 50px;
        }
        .white-bg .detail_inner {
            margin-bottom: 20px;
        }
        .white-bg .detail_title {
            margin-top: 50px;
            font-weight: bold;
            font-size: 16px;
        }
        .bottomBtn {
            text-align: left;
            padding: 10px 15px 12px;
        }
    </style>

</html>