<template>
    <section class="content">
        <div class="box box-primary">
            <div class="box-body">
                <section class="content-header">
                    <h1 id="itemTitle"></h1>
                </section>
                <section class="content">
                    <table id="table" class="table table-hover"></table>
                    <div id="toolbar">
                        <form class="form-inline">
                            <div class="form-group">
                                主播ID:<input type="text" class="form-control" id="searchText" name="searchText"
                                    placeholder="请输入">
                            </div>
                            &nbsp;&nbsp;
                            &nbsp;&nbsp;
                            <button type="button" id="btnSearch" class="btn btn-info">
                                <i class="glyphicon glyphicon-search"></i>查询
                            </button>
                        </form>
                    </div>
                </section>
            </div>
        </div>
    </section>
    <div class="modal fade" id="messageModel" tabindex="-2" role="dialog" aria-labelledby="modalLabel2">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">x</span></button>
                    <h4 class="modal-title" id="channelModelModalLabel">不通过原因</h4>
                </div>
                <div class="modal-body">
                    <form id="messageForm" class="form-inline">
                        <input type="hidden" id="pid" />
                        <div class="form-group">
                            <div class="col-sm-8">
                                <textarea class="form-control validate[required]" name="message" id="message"
                                    placeholder="原因" />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="create">提交</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import TableHelper from '@/utils/bootstrap-table-helper';
import ComboboxHelper from '@/assets/plugins/bootstrap-combobox/js/bootstrap-combobox-helper';

export default {
    name: "AnchorFansMpAudioView",
    setup() {
        return {};
    },
    created() {
        this.$nextTick(function () {
            this.initData();
        });
    },
    methods: {
        initData() {

            //查询方法
            ComboboxHelper.build(null, '#checkType');
            ComboboxHelper.build(null, '#gender');
            ComboboxHelper.build(null, '#statusType');
            ComboboxHelper.build(null, '#photoType');
            $(function () {
                $('#table').bootstrapTable('destroy');
                $('#table').bootstrapTable({
                    columns: [
                        { field: 'tmp', title: '选择', width: '1%', align: 'center', checkbox: true },
                        { field: 'id', title: 'id', width: '5%', align: 'center' },
                        { field: 'erbanNo', title: '主播ID', width: '5%', align: 'center' },
                        { field: 'nick', title: '昵称', width: '5%', align: 'center' },
                        { field: 'mpTx', title: '申请文案', width: '5%', align: 'center' },
                        {
                            field: 'auditType',
                            title: '审核状态',
                            width: '5%',
                            align: 'center',
                            formatter: function (val) {
                                if (val == 0) {
                                    return "待审核";
                                } else if (val == 1) {
                                    return "审核不通过";
                                } else if (val == 2) {
                                    return "审核通过";
                                }
                            }
                        },
                        {
                            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:00");
                                } else {
                                    return '-';
                                }
                            }
                        },
                        {
                            field: 'updateTime',
                            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:00");
                                } else {
                                    return '-';
                                }
                            }
                        },
                        {
                            field: 'pid',
                            width: '5%',
                            title: '操作',
                            align: 'center',
                            formatter: function (val, row) {
                                var str = "";
                                var auditType = row.auditType;
                                if (auditType == 0) {
                                    str = str + '<div style="margin-top: 2px;"><button class="btn btn-sm btn-warning opt-send" data-id=' + row.id + '>' +
                                        '<i class="glyphicon glyphicon-edit"></i>&#12288通过</button></div>' +
                                        '<div style="margin-top: 2px;"><button class="btn btn-sm btn-danger opt-ignore" data-id=' + row.id + '>' +
                                        '<i class="glyphicon glyphicon-edit"></i>不通过</button></div>';
                                }
                                return str;
                            }
                        }
                    ],
                    cache: false,
                    striped: true,
                    showRefresh: false,
                    pageSize: 10,
                    pagination: true,
                    pageList: [1, 10, 20, 30, 50],
                    search: false,
                    sidePagination: "server", //表示服务端请求
                    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
                    //设置为limit可以获取limit, offset, search, sort, order
                    queryParamsType: "undefined",
                    queryParams: function queryParams(params) {   //设置查询参数
                        var param = {
                            pageSize: params.pageSize,
                            pageNumber: params.pageNumber,
                            searchText: $('#searchText').val(),
                        };
                        return param;
                    },
                    toolbar: '#toolbar',
                    uniqueId: 'id',
                    url: '/admin/anchorFansTeamAudio/recordList',
                    onLoadSuccess: function () {  //加载成功时执行
                        console.log("load success");
                    },
                    onLoadError: function () {  //加载失败时执行
                        console.log("load fail");
                    }
                });

                //搜索
                $('#btnSearch').on('click', function () {
                    TableHelper.doRefresh('#table');
                });

                //批量审核通过
                $('#btnPass').on('click', function () {
                    var rows = $("#table").bootstrapTable("getSelections");
                    if (rows.length == 0) {
                        alert("请先选择要审核的图片");
                        return;
                    }
                    var pid = [];
                    for (var i = 0; i < rows.length; i++) {
                        pid.push(rows[i]['pid']);
                    }
                    if (confirm("确定批量批量审核通过图片吗?")) {
                        $.ajax({
                            type: 'post',
                            url: '/admin/photo/batchPass',
                            data: { pid: JSON.stringify(pid) },
                            dataType: 'json',
                            success: function (res) {
                                if (res.success) {
                                    $("#tipMsg").text("操作成功");
                                    $("#tipModal").modal('show');
                                    TableHelper.doRefresh("#table");
                                } else {
                                    $("#tipMsg").text("操作失败，" + res.message);
                                    $("#tipModal").modal('show');
                                }
                            }
                        })
                    }
                });
                //审核通过
                $('#table').on('click', '.opt-send', function () {
                    if (confirm("确定审核通过吗?")) {
                        // let dataId = $('#table .opt-send').attr('data-id')
                        let dataId = $(this).attr('data-id')
                        console.log(dataId)
                        // var data = $(this).bootstrapTable('getRowByUniqueId');
                        // console.log(data)
                        $.ajax({
                            type: 'post',
                            url: '/admin/anchorFansTeamAudio/pass',
                            data: { pid: dataId, status: 2 },
                            dataType: 'json',
                            success: function (res) {
                                if (res.success) {
                                    $("#tipMsg").text("操作成功");
                                    $("#tipModal").modal('show');
                                    TableHelper.doRefresh("#table");
                                } else {
                                    $("#tipMsg").text("操作失败，" + res.message);
                                    $("#tipModal").modal('show');
                                }
                            }
                        })
                    }
                });
                //审核不通过
                $('#table').on('click', '.opt-ignore', function () {
                    // let dataId = $('#table .opt-send').attr('data-id')
                    let dataId = $(this).attr('data-id')
                    console.log(dataId)
                    // const id = $(this).attr('id');
                    // var data = $('#table').bootstrapTable('getRowByUniqueId',id);
                    // console.log("data======", data)
                    var pid = $(this).attr('data-nameplateId');
                    $('#pid').val(dataId);
                    $('#messageForm')[0].reset();
                    $('#messageModel').modal('show');
                });
                //审核不通过保存原因
                $('#create').on('click', function () {
                    // let dataId = $('#table .opt-send').attr('data-id')
                    let dataId = $('#pid').val()
                    console.log(dataId)
                    // var pid = $('#pid').val();
                    var message = $('#message').val();
                    if ($("#messageForm").validationEngine('validate')) {
                        $.ajax({
                            type: 'post',
                            url: '/admin/anchorFansTeamAudio/pass',
                            data: { pid: dataId, message: message, status: 1 },
                            dataType: 'json',
                            success: function (res) {
                                if (res.success) {
                                    $("#tipMsg").text("操作成功");
                                    $("#tipModal").modal('show');
                                    TableHelper.doRefresh("#table");
                                } else {
                                    $("#tipMsg").text("操作失败，" + res.message);
                                    $("#tipModal").modal('show');
                                }
                            }
                        })
                    }
                });
            })
        }
    },

};
</script>

<style scoped>
.img {
    width: 98%;
    height: auto;
    overflow: hidden;
    position: relative;
    border-radius: 4px 4px 0 0;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
</style>