{extend name="./main"}

{block name="CSS"}
<style>
    .ts_title {
        height: 60px;
        text-align: center;
        line-height: 60px;
        font-size: 18px;
        background: #409ccf;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        color: #fff;
    }

    .ts_con {
        padding: 30px 0;
        position: relative;
    }

    .ts_con p {
        height: 40px;
        width: 100%;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 2px;
        line-height: 40px;
        margin-bottom: 20px;
    }

    .ts_con p span {
        width: 120px;
        font-size: 16px;
        background: #409ccf;
        display: block;
        float: left;
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
        color: #fff;
        text-align: center;
        margin-right: 10px;
    }

    .ts_con p input, .ts_con p select {
        width: calc(100% - 140px);
        width: -moz-calc(100% - 140px);
        width: -webkit-calc(100% - 140px);
        border: none;
        font-size: 14px;
        outline: none;
        letter-spacing: 1px;
    }

    @media (max-width: 780px) {
        .ts_con p input, .ts_con p select {
            width: 160px;
            border: none;
            font-size: 14px;
            outline: none;
            letter-spacing: 1px;
        }

        .footer_bottom .footer-menu {
            text-align: center;
        }
    }

    .ts_con p textarea {
        width: calc(100% - 140px);
        width: -moz-calc(100% - 140px);
        width: -webkit-calc(100% - 140px);
        max-width: 780px;
        height: 195px;
        border: none;
        font-size: 14px;
        line-height: 35px;
        outline: none;
        letter-spacing: 1px;
        resize: none;
    }

    .btn {
        display: inline-block;
        border: none;
        height: 48px;
        width: 200px;
        line-height: 48px;
        color: #fff;
        margin: 0 auto;
        border-radius: 2px;
        font-weight: bold;
        margin-right: 1rem;
    }

    .btn-ts {
        background: #409ccf;
    }

    .btn-cx {
        background: #ef7e89;
    }

    .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
    }

    .shili img {
        position: absolute;
        top: 38px;
        left: 0;
    }
</style>

{/block}

{block name="content"}
<div class="order_form">
    <div class="ts_title">
        订 单 投 诉
    </div>
    <div class="ts_con">

        {if condition="!empty($complaint)"}
        <form name='report' style="padding: 0 20px;">
            <p><span>订单编号</span><input disabled name="trade_no" type="text" value="{$complaint->trade_no}"></p>
            <p><span>举报原因</span><input disabled name="type" type="text" value="{$complaint->type}"/></p>
            <p><span>联系方式</span>
                <a target="_blank" href="//wpa.qq.com/msgrd?v=3&amp;uin={$complaint->qq}&amp;site=qq&amp;menu=yes">
                    <input disabled name="qq" type="text" value="{$complaint->qq}">
                </a>
            </p>
            <p><span>投诉时间</span><input disabled name="mobile" type="text"
                                       value="{$complaint.create_at|date='Y-m-d H:i:s', ###}"></p>
            <p><span>投诉状态</span>
                {if condition="$complaint->status == 0"}
                <input disabled name="mobile" type="text" value="处理中">
                {elseif condition="$complaint->status == -1"}
                <input disabled name="mobile" type="text" value="已撤销">
                {else /}
                <input disabled name="mobile" type="text" value="已处理">
                {/if}
            </p>
            <div style="text-align: center;">
                {if condition="$complaint->status == 0"}
                <button type="button" class="btn btn-cx" onclick="cancel()">撤销投诉</button>
                {/if}
                <button type="button" class="btn btn-ts" onclick="detail()">投诉详情</button>
            </div>
        </form>

        <script>
            function cancel() {
                layer.prompt({title: '请输入投诉密码'}, function (pwd) {
                    $.post("{:url('Index/Order/complaintCancel')}", {
                        token: "{$token}",
                        trade_no: "{$complaint->trade_no}",
                        pwd: pwd
                    }, function (data) {
                        var extra = {icon: 1}
                        if (data.code != '200') {
                            extra = {icon: 2}
                        }
                        layer.msg(data.msg, extra, function () {
                            location.reload();
                        })
                    });
                });
            }

            function detail() {
                layer.prompt({title: '请输入投诉密码'}, function (pwd) {
                    $.post("{:url('Index/Order/complaintPass')}", {
                        token: "{$token}",
                        trade_no: "{$complaint->trade_no}",
                        pwd: pwd
                    }, function (data) {
                        if (data.code != '200') {
                            layer.msg(data.msg, {icon: 2})
                        } else {
                            layer.msg(data.msg, {icon: 1}, function () {
                                location.href = data.url;
                            })
                        }

                    });
                });
            }
        </script>
        {else /}
        <div style="display:block;text-align:center; font-size:24px;margin: 5rem 0;">订单不存在或该订单暂无投诉信息</div>
        {/if}

    </div>
</div>
{/block}

{block name="appendJS"}
{/block}
