@using Core.Web.WebHelper
@using CRM.Core.Model.Entity
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="layui-form">
    <div class="x-body">
        <form class="layui-form">
            @*<div class="layui-form-item">
            <label class="layui-form-label">事业部：</label>
            <div class="layui-input-block">
                <span class="layui-form-mid" id="DeptNameShow"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">直播平台：</label>
            <div class="layui-input-block">
                <span class="layui-form-mid" id="PlatformShow"></span>
            </div>
        </div>*@
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">课程：</label>
                <div class="layui-input-block">
                    <a href="#" id="LiveUrl" target="_blank" style="color: #01AAED"><span class="layui-form-mid" id="ScheduleShow"></span></a>
                    &nbsp;<a class="layui-form-mid" href="#" onclick="ShowLiveRecord()">直播记录</a>
                </div>
            </div>

            <div class="layui-form-item layui-form-text" id="txt_RectificationAccessory" style="display: none;">
                <label class="layui-form-label">整改附件：</label>
                <div class="layui-input-block">
                    <a class="layui-table-link" id="RectificationAccessoryShow"  style="color: #01AAED" href=""><span class="layui-form-mid">查看</span></a>
                </div>
            </div>

            <div class="layui-form-item layui-form-text" id="txt_RectificationRemarkShow" style="display: none;">
                <label class="layui-form-label">整改内容：</label>
                <div class="layui-input-block">
                    <span class="layui-form-mid" id="RectificationRemarkShow"></span>
                </div>
            </div>


            @*<div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注：</label>
            <div class="layui-input-block">
                <span class="layui-form-mid" id="RemarkShow"></span>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">直播人：</label>
            <div class="layui-input-block">
                <span class="layui-form-mid" id="LiverShow"></span>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">账号：</label>
            <div class="layui-input-block">
                <span class="layui-form-mid" id="AccountShow"></span>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">链接：</label>
            <div class="layui-input-block">
                <span class="layui-form-mid" id="LiveUrlShow"></span>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">开始时间：</label>
            <div class="layui-input-block">
                <span class="layui-form-mid" id="StartTimeShow"></span>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">结束时间：</label>
            <div class="layui-input-block">
                <span class="layui-form-mid" id="EndTimeShow"></span>
            </div>
        </div>*@

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">审核状态：</label>
                <div class="layui-input-block">
                    <select name="AuditStatus" id="AuditStatus" lay-verify="required" lay-filter="select_AuditStatus">
                        <option value="">请选择</option>
                        @{
                            if (ViewBag.Status != null)
                            {
                                var list = ViewBag.Status as List<CRM.Core.DTO.LiveAuditKeyValue>;
                                foreach (var item in list)
                                {
                                    <option value="@item.Key">@item.Value</option>
                                }
                            }
                        }
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-form-text" id="txt_RejectReason" style="display: none;">
                <label class="layui-form-label">驳回理由：</label>
                <div class="layui-input-block">
                    <select name="RejectReason" id="RejectReason">
                        <option value="">请选择</option>
                        @{
                            if (ViewBag.Reasons != null)
                            {
                                var list = ViewBag.Reasons as List<CRM.Core.DTO.LiveAuditKeyValue>;
                                foreach (var item in list)
                                {
                                    <option value="@item.Key">@item.Value</option>
                                }
                            }
                        }
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">审核备注：</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" name="AuditRemark" id="AuditRemark"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">审核附件：</label>
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="uploadAtt">
                        <i class="layui-icon layui-icon-upload-drag layui-font-12"></i> 上传附件
                    </button>
                    <div class="layui-upload-list" style="max-width: 1000px;">
                        <table class="layui-table">
                            <colgroup>
                                <col width="100">
                                <col width="100">
                                <col width="200">
                                <col width="50">
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>文件名</th>
                                    <th>大小</th>
                                    <th>上传进度</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="demoList"></tbody>
                        </table>
                    </div>
                    <input type="hidden" name="AuditAccessory" id="AuditAccessory" />
                    <br /><span>备注：上传文件支持扩展名：rar .zip .doc .docx .pdf .jpg .png.excel.mp3...</span>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="float: right">
                    <input type="hidden" name="AuditId" id="AuditId" value="@ViewBag.Id" />
                    <button class="layui-btn" lay-submit="" id="audit" lay-filter="audit">提交</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="AttDialog" class="layui-form" style="display:none;">
    <div class="x-body">
        <table class="layui-hide" id="tabl3" lay-filter="tabl3"></table>
    </div>
</div>

<div id="LiveDialog" class="layui-form" style="display:none;">
    <div class="x-body">
        <table class="layui-hide" id="tabl4" lay-filter="tabl4"></table>
    </div>
</div>


<script src="~/Scripts/layui_ext/xm-select/xm-select.js"></script>
<script>
    var selectRow = {};
    var layer;
    var flow;
    var accessories = [];
    var token;
    var table;
    var selectRow = @Html.Raw(ViewBag.Model);
    layui.use(['table', 'form', 'layer', 'upload', 'laydate', 'flow', 'element'], function () {
        flow = layui.flow;

        table = layui.table;
        var form = layui.form;
        form.render('select');
        layer = layui.layer;
        var upload = layui.upload;
        var laydate = layui.laydate;
        var element = layui.element;
        var File_Server = '@ViewBag.File_Server';

        table.render({
            id: 'testReload3'//列表别名ID
            , elem: '#tabl3'//表ID
            , data: []
            , cols: [[
                { field: 'id', title: '序号', type: 'numbers', align: "center", width: 60 }
                , { field: 'fileName', title: '文件名称', align: "center", width: 250 }
                , { field: 'fileSize', title: '文件大小', align: "center", width: 100 }
                , { field: 'fileUrl', title: '操作', templet: '#fileTpl', width: 100, align: "center" }
                , { field: 'uploader', title: '上传人', align: "center", width: 113 }
                , { field: 'uploadTime', title: '上传时间', align: "center", width: 180 }
            ]]
        });

        table.render({
            id: 'testReload4'//列表别名ID
            , elem: '#tabl4'//表ID
            , data: []
            , cols: [[
                { field: 'id', title: 'id', align: "center", width: 100 }
                , {
                    field: 'ctime', title: '时间', align: "center", width: 150, templet: function(d)
                    {
                        var timestamp = parseInt(d.ctime.substring(d.ctime.indexOf("(") + 1, d.ctime.indexOf(")/")));
                        var date = new Date(timestamp);
                        return date.toLocaleString();
                    }
                }
                , { field: 'title', title: '名称', align: "center", width: 195 }
                , {
                    field: 'fileUrl', title: '操作', width: 110, align: "center", templet: function (d)
                    {
                        return "<a target='_blank' href='https://app.hc.idongniu.com/activity/00000052.html?id=" + d.id + "' style='color:#01AAED'>链接</a>"
                    }
                }
            ]]
        });


        if (selectRow.LiveUrl != null) {
            $("#LiveUrl").attr("href", selectRow.LiveUrl).show();
        }
        else {
            $("#LiveUrl").hide();
        }

        var liveRoomInfo = JSON.parse(selectRow.LiveRoomInfo);
        $("#ScheduleShow").html(liveRoomInfo.name);

        if (selectRow.RectificationAccessory != null) {
            $("#txt_RectificationAccessory").show();
            $("#RectificationAccessoryShow").attr("href", "javascript:ShowAtt(" + selectRow.RectificationAccessory + ")");
        } else {
            $("#txt_RectificationAccessory").hide();
        }

        if (selectRow.RectificationRemark != null) {
            $("#txt_RectificationRemarkShow").show();
            $("#RectificationRemarkShow").html(selectRow.RectificationRemark);
        } else {
            $("#txt_RectificationRemarkShow").hide();
        }

        form.on('select(select_AuditStatus)', function (data) {
            if (data.value == 1) {
                $("#txt_RejectReason").attr('style', 'display:block');
                $("#RejectReason").attr('lay-verify', 'required');
            //    selectChannel.update({ layVerify: 'required' });
            } else {
                $("#txt_RejectReason").attr('style', 'display:none');
                $("#RejectReason").attr('lay-verify', '');
                $("#RejectReason").html('');
                //selectChannel.update({ layVerify: '' });
            }
        })




        form.on('submit(audit)', function (data) {
            data.field.AuditAccessory = JSON.stringify(accessories);

            if (data.field.AuditStatus == 1 && data.field.Reason == "0") {
                layer.msg('请选择驳回理由！', { icon: 2 });
                return false;
            }
            $.r_post('/LiveAudit/AuditSet', data.field, function (res) {
                if (res.result) {
                    layer.msg('操作成功！', { icon: 1 }, function () {
                        parent.layer.closeAll();
                        parent.TableReload();

                    });
                }
                else {
                    layer.msg('操作失败！' + result.retmsg, { icon: 2 });
                }
            });
            return false;
        });

        //自定义验证规则
        form.verify({
            len: function (value) {
                if (value.length > 200) {
                    return '字数太多了！';
                }
            }
        });
        var loading;
        $.ajax({
            type: "GET",
            url: File_Server + "/api/Token?key=7AC51A5F0DE9A13D5FC9960AD45CC8D5",
            success: function (da) {
                token = "Bearer " + da;
                var uploadListIns = upload.render({
                    elem: '#uploadAtt'
                    , elemList: $('#demoList') //列表元素对象
                    //, url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                    , url: File_Server + '/Streaming/UploadLargeFile'
                    , accept: 'file'
                    , headers: { Authorization: token }
                    , multiple: true
                    , number: 15
                    , auto: true
                    //, bindAction: '#testListAction'
                    , choose: function (obj) {
                        var that = this;
                        if (accessories && accessories.length > 14) {
                            layer.msg('不能上传超过15个文件！', { icon: 2 });
                            return;
                        }
                        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列

                        //读取本地文件
                        obj.preview(function (index, file, result) {
                            if (file.size > 1024 * 1024 * 500) {
                                layer.msg('不能上传超过500M的文件！', { icon: 2 });
                                delete files[index];
                                return;
                            }
                            var fileSize = (file.size / (1024)) > 1024 ? (file.size / (1024 * 1024)).toFixed(2) + 'MB' :
                                (file.size / (1024)).toFixed(1) + 'KB';
                            var tr = $(['<tr id="upload-' + index + '">'
                                , '<td>' + file.name + '</td>'
                                , '<td>' + fileSize + '</td>'
                                , '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
                                , '<td>'
                                , '<button class="layui-btn layui-btn-xs demo-reload layui-hide" type="button">重传</button>'
                                , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete" type="button">删除</button>'
                                , '</td>'
                                , '</tr>'].join(''));

                            //单个重传
                            tr.find('.demo-reload').on('click', function () {
                                obj.upload(index, file);
                            });

                            //删除
                            tr.find('.demo-delete').on('click', function () {
                                delete files[index]; //删除对应的文件
                                tr.remove();
                                var fileIndex = accessories.findIndex(x => x.fileName == file.name);
                                accessories.splice(fileIndex, 1);
                                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                            });

                            that.elemList.append(tr);
                            element.render('progress'); //渲染新加的进度条组件
                        });
                    }
                    , done: function (res, index, upload) { //成功的回调
                        var that = this;
                        //if(res.code == 0){ //上传成功
                        var tr = that.elemList.find('tr#upload-' + index)
                            , tds = tr.children();
                        //tds.eq(3).html(''); //清空操作
                        var file = this.files[index];
                        var fileSize = (file.size / (1024)) > 1024 ? (file.size / (1024 * 1024)).toFixed(2) + 'MB' :
                            (file.size / (1024)).toFixed(1) + 'KB';
                        var data = {
                            fileName: file.name,
                            fileSize: fileSize,
                            fileUrl: res.url,
                            uploader: '@Html.Raw(ViewBag.UserName)',
                            uploadTime: getNowDate()
                        }
                        accessories.push(data);
                        delete this.files[index]; //删除文件队列已经上传成功的文件
                        return;
                        //}
                        this.error(index, upload);
                    }
                    , allDone: function (obj) { //多文件上传完毕后的状态回调
                        //var data = JSON.stringify(accessories);
                        //document.getElementById("ATTACHMENT").value = data;
                    }
                    , error: function (index, upload) { //错误回调
                        var that = this;
                        var tr = that.elemList.find('tr#upload-' + index)
                            , tds = tr.children();
                        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                    }
                    , progress: function (n, elem, e, index) { //注意：index 参数为 layui 2.6.6 新增
                        element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
                    }
                });
            }
        })
    });
    function initAccessory() {
        layui.use('element', function () {
            document.getElementById("Accessories").value = JSON.stringify(accessories);
            var element = layui.element;
            var $ = layui.jquery;
            $('#demoList').html("");
            for (var i = 0; i < accessories.length; i++) {
                var accessory = accessories[i];
                if (!accessory) return;
                var tr = $(['<tr id="upload-old-' + accessory.id + '">'
                    , '<td>' + accessory.fileName + '</td>'
                    , '<td>' + accessory.fileSize + '</td>'
                    , '<td><div class="layui-progress" lay-filter="progress-old-' + accessory.id + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
                    , '<td>'
                    , '<button class="layui-btn layui-btn-xs layui-btn-danger" type="button" onclick="deleteFile(' + accessory.id + ',\'' + accessory.fileName + '\')">删除</button>'
                    , '</td>'
                    , '</tr>'].join(''));
                $('#demoList').append(tr);
                element.progress('progress-old-' + accessory.id, '100%');
            }
        });
    }


    function ShowAtt(data) {
        layui.use(['table', 'form', 'layer', 'upload', 'laydate'], function () {
            var layer = layui.layer;
            console.log(data);
            table.reload('testReload3', {
                data: data
            });
            layer.open({
                title: '查看附件',
                type: 1,
                content: $('#AttDialog'),
                area: ['850px', '500px']
                , btn: ['关闭']
                , yes: function (index, layero) {
                    layer.closeAll();
                }
            });
        });
    }


    function deleteFile(id, fileName) {
        winindex = layer.confirm('是否确认删除【' + fileName + '】?', { icon: 3, title: '提示' }, function (index) {
            var index = accessories.findIndex(x => x.id == id);
            accessories.splice(index, 1);
            Closed();
            initAccessory();
        });
        return false;
    }


    function ShowLiveRecord() {
        //var scheduleId = selectRow.ScheduleId;
        //var zbDate = selectRow.LiveDate;

        var scheduleId = 177;
        var zbDate = '2023-5-4';

        $.ajax({
            type: "GET",
            url: 'https://inapi.hc.dn8188.com/Read/GetZhiboPlayback.html?scheduleid=' + scheduleId + '&zbdate=' + zbDate,
            dataType: "json",
            contentType: "application/json",
            success: function (da) {
                if (da.s) {
                    data = da.d;
                    layui.use(['table', 'form', 'layer', 'upload', 'laydate'], function () {
                        var layer = layui.layer;
                        console.log(data);
                        table.reload('testReload4', {
                            data: data
                        });
                        layer.open({
                            title: '查看直播记录',
                            type: 1,
                            content: $('#LiveDialog'),
                            area: ['600px', '380px']
                            , btn: ['关闭']
                            , yes: function (index, layero) {
                                layer.closeAll();
                            }
                        });
                    });
                }
            }
        })

    }


    const getNowDate = () => {
        var date = new Date();
        var sign2 = ":";
        var year = date.getFullYear() // 年
        var month = date.getMonth() + 1; // 月
        var day = date.getDate(); // 日
        var hour = date.getHours(); // 时
        var minutes = date.getMinutes(); // 分
        var seconds = date.getSeconds() //秒
        var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
        var week = weekArr[date.getDay()];
        // 给一位数的数据前面加 “0”
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (day >= 0 && day <= 9) {
            day = "0" + day;
        }
        if (hour >= 0 && hour <= 9) {
            hour = "0" + hour;
        }
        if (minutes >= 0 && minutes <= 9) {
            minutes = "0" + minutes;
        }
        if (seconds >= 0 && seconds <= 9) {
            seconds = "0" + seconds;
        }
        return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
    }
</script>

<script type="text/html" id="fileTpl">
    {{# if(d.fileUrl != null){ }}
    <a href="{{d.fileUrl}}" target="_blank" class="layui-table-link" download="{{d.fileName}}">下载</a>
    {{# } }}
</script>