<template>
    <section class="content">
        <div class="box box-primary">
            <div class="box-body">
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1 id="itemTitle"></h1>
                </section>
                <!-- .content -->
                <div id="table"></div>
                <div id="toolbar">
                    <div class="col-sm-12">
                        <label for="erbanNo" class="col-sm-2 control-label">平台号:</label>
                        <div class="col-sm-2"><input type="text" class="form-control" name="erbanNo" id="erbanNo"></div>

                        <label class="col-sm-2 control-label">发布时间:</label>
                        <div class="col-sm-3"><input type="text" class="form-control" name="startTime" id="startTime"></div>
                        <div class="col-sm-3"><input type="text" class="form-control" name="endTime" id="endTime"></div>
                    </div>
                    <div class="col-sm-12">
                        <label for="status" class="col-sm-2 control-label">状态:</label>
                        <div class="col-sm-2">
                            <select name="status" id="status" data-btn-class="btn-warning" class="form-control">
                                <option value="" selected="selected">全部</option>
                                <option value="1">未审核</option>
                                <option value="2">通过</option>
                                <option value="3">不通过</option>
                                <option value="4">已下架</option>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <button id="btnSearch" class="btn btn-default">
                                <i class="glyphicon glyphicon-search"></i>查询
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
import TableHelper from '@/utils/bootstrap-table-helper';
import { showLoading, hideLoading } from '@/utils/maintainer';

export default {
    name: "AudioCardVerifyView",
    setup() {
        return {};
    },
    created() {
        this.$nextTick(function () {
            this.initData();
        });
    },
    methods: {
        initData() {
            $(function () {
                $('#table').bootstrapTable('destroy');
                $('#table').bootstrapTable({
                    columns: [
                        { field: 'erbanNo', title: '平台号', align: 'center', valign: 'middle', width: '5%' },
                        { field: 'nick', title: '昵称', align: 'center', valign: 'middle', width: '5%' },
                        {
                            field: 'audioUrl',
                            title: '语音',
                            align: 'center',
                            width: '5%',
                            valign: 'middle',
                            formatter: function (val, row, index) {
                                return '<audio controls="controls"><source src="' + val + '" type="audio/mpeg"></audio>';
                            }
                        },
                        {
                            field: 'createTime',
                            title: '发布时间',
                            align: 'center',
                            width: '5%',
                            valign: 'middle',
                            formatter: function (val, row, index) {
                                if (val) {
                                    var date = new Date(val);
                                    return date.format("yyyy-MM-dd hh:mm:ss");
                                } else {
                                    return '-';
                                }
                            }
                        },
                        {
                            field: 'status',
                            title: '状态',
                            align: 'center',
                            width: '5%',
                            valign: 'middle',
                            formatter: function (val, row, index) {
                                switch (val) {
                                    case 1: return '未审核';
                                    case 2: return '通过';
                                    case 3: return '不通过';
                                    case 4: return '已下架';
                                    case 5: return '已删除';
                                    default: return '-';
                                }
                            }
                        },
                        { field: 'auditor', title: '审核人员', align: 'center', valign: 'middle', width: '5%' },
                        {
                            field: 'auditTime',
                            title: '审核时间',
                            align: 'center',
                            width: '5%',
                            valign: 'middle',
                            formatter: function (val, row, index) {
                                if (val) {
                                    var date = new Date(val);
                                    return date.format("yyyy-MM-dd hh:mm:ss");
                                } else {
                                    return '-';
                                }
                            }
                        },
                        {
                            field: 'id',
                            title: '操作',
                            align: 'center',
                            width: '5%',
                            valign: 'middle',
                            formatter: function (val, row, index) {
                                if (row.isDel) {
                                    return '-';
                                }
                                const pass = '<button class="btn btn-sm btn-primary opt-pass" data-id=' + val + ' data-status=2>通&#12288;过</button>';
                                const noPass = '<button class="btn btn-sm btn-danger opt-not-pass" data-id=' + val + ' data-status=3>不通过</button>';
                                const down = '<button class="btn btn-sm btn-danger opt-not-pass" data-id=' + val + ' data-status=4>下&#12288;架</button>';
                                if (row.status === 1) {
                                    return pass + ' ' + noPass;
                                } else if (row.status === 2) {
                                    return down;
                                }
                            }
                        },
                    ],
                    cache: false,
                    striped: true,
                    showRefresh: false,
                    pageSize: 10,
                    pagination: true,
                    pageList: [10, 20],
                    search: false,
                    sidePagination: "server", //表示服务端请求
                    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
                    //设置为limit可以获取limit, offset, search, sort, order
                    queryParamsType: "-",
                    queryParams: function queryParams(params) {   //设置查询参数
                        return {
                            current: params.pageNumber,
                            size: params.pageSize,
                            erbanNo: $('#erbanNo').val(),
                            status: $('#status').val(),
                            startTime: $('#startTime').val(),
                            endTime: $('#endTime').val(),
                        };
                    },
                    toolbar: '#toolbar',
                    url: '/admin/audioCard/page.action',
                    onLoadSuccess: function () {  //加载成功时执行
                        console.log("load success");
                    },
                    onLoadError: function () {  //加载失败时执行
                        console.log("load fail");
                    }
                });

                // 查询刷新
                $('#btnSearch').on('click', function () {
                    TableHelper.doRefresh('#table');
                });

                //审核不通过/下架弹框
                $("#table").on("click", '.opt-not-pass', function () {

                    var id = $(this).attr("data-id");
                    var status = $(this).attr("data-status");
                    if (id == 'undefined') {
                        $("#tipMsg").text("id参数有误");
                        $("#tipModal").modal('show');
                        return;
                    }
                    if (status == 'undefined') {
                        $("#tipMsg").text("状态参数有误");
                        $("#tipModal").modal('show');
                        return;
                    }

                    const text = status == 3 ? "不通过" : "下架";
                    if (confirm("你确认【" + text + "】该声音签名吗?")) {
                        verify(id, status);
                    }
                });

                $("#table").on("click", '.opt-pass', function () {
                    var id = $(this).attr("data-id");
                    var status = $(this).attr("data-status");
                    if (id == 'undefined') {
                        $("#tipMsg").text("id参数有误");
                        $("#tipModal").modal('show');
                        return;
                    }
                    if (status == 'undefined') {
                        $("#tipMsg").text("状态参数有误");
                        $("#tipModal").modal('show');
                        return;
                    }
                    verify(id, status);
                });

                //审核
                function verify(id, status) {
                    //if (confirm("你确认【"+ text + "】该动态吗?")) {
                    showLoading();
                    $.ajax({
                        type: 'post',
                        url: "/admin/audioCard/verify.action",
                        data: {
                            id: id,
                            status: status
                        },
                        success: function (json) {
                            hideLoading();
                            if (json.code === 200) {
                                $("#tipMsg").text("操作成功");
                                $("#tipModal").modal('show');
                            } else {
                                $("#tipMsg").text(json.message);
                                $("#tipModal").modal('show');
                            }
                            TableHelper.doRefresh("#table");
                        }
                    });
                    //}
                }

                var picker1 = $("#startTime").datetimepicker({
                    format: 'yyyy-mm-dd hh:ii:00',
                    language: 'zh-CN',
                    autoclose: true,
                    todayBtn: true
                });
                var picker2 = $("#endTime").datetimepicker({
                    format: 'yyyy-mm-dd hh:ii:00',
                    language: 'zh-CN',
                    autoclose: true,
                    todayBtn: true
                });
                picker1.on('changeDate', function () {
                    var date = $('#startTime').datetimepicker('getDate');
                    picker2.datetimepicker('setStartDate', date);
                });
                picker2.on('changeDate', function () {
                    var date = $('#endTime').datetimepicker('getDate');
                    picker1.datetimepicker('setendTime', date);
                });
            });
        }
    },

};
</script>

<style scoped></style>