<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImgVideo.aspx.cs" Inherits="MESWebSite.Manage.ImgVideo" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/CSS/Basics.css" rel="stylesheet" />
    <link href="/Scripts/jquery-easyui-1.4.3/themes/metro/easyui.css" rel="stylesheet" type="text/css" />
    <link href="/Scripts/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="/Scripts/jquery-easyui-1.4.3/themes/color.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-easyui-1.4.3/jquery.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-easyui-1.4.3/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script src="/Scripts/MyJs.js" type="text/javascript"></script>
    <style>
        #w td {
            padding: 5px 5px;
            text-align: left;
            vertical-align: middle;
        }

        #w .title {
            vertical-align: middle;
            text-align: right;
            width: 80px;
            height: 40px;
        }

        p {
            padding: 5px;
            font-size: small;
            font-family: 微软雅黑;
        }

        .datagrid {
            text-align: center;
        }
    </style>
    <title>图片和视频</title>
</head>
<body>
    <form id="form1" enctype="multipart/form-data" runat="server">
        <div class="top">
            <table cellpadding="0" cellspacing="0" style="width: 100%">
                <tr>

                    <td><span class="title">图片和视频</span>
                    </td>
                    <td style="float: left">上传时间:
                             <input id="StartTime_s" class="easyui-datebox" style="width: 130px;" />&nbsp;至&nbsp;
                            <input id="EndTime_s" class="easyui-datebox" style="width: 130px;" />
                        &nbsp;&nbsp;文件名称:
                        <input type="text" id="filenName_s" style="width: 140px;" />
                        &nbsp;&nbsp;<a class="topsearchBtn">查询</a>&nbsp;&nbsp;  
                       <a class="topaddBtn">新增图片</a>&nbsp;&nbsp;  
                       <a class="topaddBtn" id="addVideo">新增视频</a>&nbsp;&nbsp;  
                         <a class="topdelBtn">删除</a>

                    </td>
                    <td style="width: 500px"></td>
                </tr>
            </table>
        </div>
        <table id="tb" title="图片和视频" style="width: 99%;">
        </table>

        <!-- 新增窗口 -->
        <div id="w" style="padding: 10px; visibility: hidden" title="新增">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td class="title" style="width: 110px;"></td>
                    <td colspan="2">
                        <img id="phptoPic" width="200" height="200" />
                    </td>
                </tr>
                <tr>
                    <td class="title" style="width: 110px;">
                        <p>
                            上传图片:
                        </p>
                    </td>
                    <td>
                        <input type="file" name="photo" id="photo" />
                        <input type="button" value="上传图片" id="btnUpload" />
                    </td>
                </tr>
                <tr>
                    <td class="title" style="width: 110px;">
                        <p>
                            文件名称:
                        </p>
                    </td>
                    <td colspan="2">
                        <input id="Name" type="text" class="text" style="width: 330px; height: 30px;" />
                    </td>
                </tr>
            </table>
        </div>
        <!-- 新增图片窗口 - footer -->
        <div id="ft" style="padding: 10px; text-align: center; background-color: #f9f9f9; visibility: hidden">
            <a class="saveBtn" id="saveBtn">保存</a>
        </div>

        <!-- 新增视频窗口 -->
        <div id="w_u" style="padding: 10px; visibility: hidden" title="追加生产计划">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td class="title" style="width: 110px;">
                        <p>
                            上传图片:
                        </p>
                    </td>
                    <td>
                        <input type="file" name="video" id="video" />
                        <input type="button" value="上传视频" id="btnUploadVideo" />
                    </td>
                </tr>
                <tr>
                    <td class="title" style="width: 110px;">
                        <p>
                            文件名称:
                        </p>
                    </td>
                    <td colspan="2">
                        <input id="Name_u" type="text" class="text" style="width: 230px; height: 30px;" />
                    </td>
                </tr>

            </table>
        </div>
        <!-- 新增视频窗口 - footer -->
        <div id="ft_u" style="padding: 10px; text-align: center; background-color: #f9f9f9; visibility: hidden">
            <a class="saveBtn" id="saveBtn_u">保存</a>
        </div>




        <div hidden="hidden">
            <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
        </div>
        <input id="UserID" type="text" hidden="hidden" runat="server" />
        <input id="imgUrl" type="text" hidden="hidden" runat="server" />
        <input id="VideoUrl" type="text" hidden="hidden" runat="server" />
        <script>

            /****************       全局变量          ***************/
            var PrimaryID;               //要编辑的id
            var dg = $('#tb');      //表格
            var isEdit = false;     //是否为编辑状态

            /****************       DOM加载          ***************/
            $(function () {
                $.ajaxSetup({
                    cache: false //关闭AJAX缓存
                });


                var curr_time = new Date();
                var str = curr_time.getFullYear() + "-";
                str += curr_time.getMonth() + 1 + "-";
                str += curr_time.getDate()


                $('#StartTime_s').datebox('setValue', str + " 00:00:00");
                $('#EndTime_s').datebox('setValue', str + " 23:59:59");


                $("#btnUpload").click(function () {
                    var formData = new FormData();
                    formData.append("photo", $("#photo")[0].files[0]);
                    formData.append("name", $('#Name').val());
                    $.ajax({
                        url: "/HttpHandlers/ImgVideoHandler.ashx",
                        type: 'post',
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function (res) {
                            $("#phptoPic").attr("src", res)
                            $('#imgUrl').val(res);
                        }
                    })
                });

                $("#btnUploadVideo").click(function () {
                    var formData = new FormData();
                    formData.append("video", $("#video")[0].files[0]);
                    formData.append("name", $('#Name_u').val());
                    $.ajax({
                        url: "/HttpHandlers/ImgVideoHandler.ashx",
                        type: 'post',
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function (res) {
                            if (res != "") {
                                alert("上传成功");
                                $('#VideoUrl').val(res);
                            }

                        }
                    })
                })


                //搜索按钮
                $('.topsearchBtn').first().click(function () {
                    SearchInfo();
                });


                //新增图片
                $('.topaddBtn').first().click(function () {
                    isEdit = false;
                    $('#w').window('open');
                });

                //新增视频
                $('#addVideo').first().click(function () {
                    isEdit = false;
                    $('#w_u').window('open');
                });

                //删除按钮
                $('.topdelBtn').first().click(function () {
                    $.messager.confirm('提示框', '你确定要删除吗?', function (r) {
                        if (r) {
                            deleteInfos();
                        }
                    });

                });


                //新增生产计划窗口加载
                $('#w').window({
                    modal: true,
                    closed: true,
                    minimizable: false,
                    maximizable: false,
                    collapsible: false,
                    width: 560,
                    height: 620,
                    footer: '#ft',
                    top: 20,
                    onBeforeClose: function () { clearw(); },
                    onBeforeOpen: function () {
                        $('#w').css('visibility', 'visible'); $('#ft').css('visibility', 'visible');
                    }

                });

                //追加生产计划窗口加载
                $('#w_u').window({
                    modal: true,
                    closed: true,
                    minimizable: false,
                    maximizable: false,
                    collapsible: false,
                    width: 460,
                    height: 620,
                    footer: '#ft_u',
                    top: 20,
                    onBeforeClose: function () { clearw_u(); },
                    onBeforeOpen: function () {
                        $('#w_u').css('visibility', 'visible'); $('#ft_u').css('visibility', 'visible');
                    }

                });

                dg = $('#tb').datagrid({
                    fitColumns: true,
                    nowrap: false,
                    striped: true,
                    collapsible: false,
                    url: "/HttpHandlers/ImgVideoHandler.ashx?method=QueryList",
                    remoteSort: false,
                    columns: [[
                        { field: 'ID', title: 'ID', hidden: true },
                        { field: 'fileUrl', title: '地址', hidden: true },
                        { field: 'fileName', title: '名称', sortable: 'true', width: 10 },
                        {
                            field: 'fileType', title: '类型', sortable: 'true', width: 10,
                            formatter: function (date, row) {
                                if ("0" == date) {
                                    return "<a href='" + row.fileUrl + "' target='_blank'>查看图片</a>";
                                }
                                if ("1" == date) {
                                    return "<a href='" + row.fileUrl + "' target='_blank'>下载视频</a>";
                                }

                            }
                        },
                        {
                            field: 'CreateTime', title: '上传时间', sortable: 'true', width: 10,
                            formatter: function (date) {
                                var pa = /.*\((.*)\)/;
                                var unixtime = date.match(pa)[1].substring(0, 10);
                                return getTime(unixtime);
                            }
                        }
                    ]],

                    pagination: true,//表示在datagrid设置分页              
                    rownumbers: true,
                    singleSelect: true
                });

                dg.datagrid('getPager').pagination({
                    pageSize: 10,
                    pageNumber: 1,
                    pageList: [10, 20, 30, 40, 50],
                    beforePageText: '第',//页数文本框前显示的汉字   
                    afterPageText: '页    共 {pages} 页',
                    displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
                });

                //新增计划保存按钮
                $('#saveBtn').bind('click', function () {
                    SaveInfo();
                });

                //追加计划保存
                $('#saveBtn_u').bind('click', function () {
                    SaveInfo_u();
                });


            });

            /****************       主要业务程序          ***************/


            //查询方法
            function SearchInfo() {

                var StartTime = $('#StartTime_s').datetimebox('getValue');
                var EndTime = $('#EndTime_s').datetimebox('getValue');

                var queryParams = {
                    StartTime: StartTime,
                    EndTime: EndTime
                };

                dg.datagrid({
                    queryParams: queryParams
                });

                dg.datagrid('reload');

            }

            //新增图片
            function SaveInfo() {

                var Name = $('#Name').val();
                var fileUrl = $('#imgUrl').val();

                var model = {
                    Name: Name,
                    fileUrl: fileUrl,
                    fileType: "0",
                    method: 'SaveInfo'
                };

                SaveModel(model);
            }


            function SaveInfo_u() {

                var Name = $('#Name_u').val();
                var fileUrl = $('#VideoUrl').val();

                var model = {
                    Name: Name,
                    fileUrl: fileUrl,
                    fileType: "1",
                    method: 'SaveInfo'
                };

                SaveModel(model);
            }


            function SaveModel(model) {

                $.ajax({
                    type: "POST",
                    async: false,
                    url: "/HttpHandlers/ImgVideoHandler.ashx",
                    data: model,
                    success: function (data) {
                        if (data == 'true') {
                            $.messager.alert('提示', '已保存', 'info');
                            dg.datagrid('reload');
                            $('#w').window('close');
                            $('#w_u').window('close');
                        }
                        else {
                            $.messager.alert('提示', '保存失败,请查看是否编号重复', 'warning');
                        }

                    },
                    error: function () {
                    }
                });



            }




            /****************       辅助业务程序          ***************/
            /**********************************************/
            /*****************   窗体程序 *******************/
            /**********************************************/

            function ww4(date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                var d = date.getDate();
                return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);

            }

            function clearw() {


                $('#imgUrl').val('');

            }

            function clearw_u() {

                $('#VideoUrl').val('');

            }


            //删除方法
            function deleteInfos() {
                var selRows = dg.datagrid('getSelections');
                if (selRows.length > 1) {
                    $.messager.alert('提示', '每次只能删除一条记录,请重新选取', 'warning');
                    return;
                } else if (selRows.length == 0) {
                    $.messager.alert('提示', '请选择一条记录进行删除', 'warning');
                    return;
                }
                var row = selRows[0];

                var model = {
                    ID: row.ID,
                    method: 'DelInfo'
                };

                $.ajax({
                    url: "/HttpHandlers/ImgVideoHandler.ashx",
                    data: model,
                    async: false,
                    success: function (data) {
                        if (data == 'true') {
                            $.messager.alert('提示', '已删除', 'info');
                            dg.datagrid('reload');
                        }
                        else {
                            $.messager.alert('提示', '由于有关联数据,删除失败', 'warning');
                        }
                    },
                    error: function () {
                    }
                });
            }



          

        </script>
    </form>
</body>
</html>