@using WX.CRM.WebHelper
@{
    ViewBag.Title = "bas_salesDepartment";
    Layout = "~/Views/Shared/_content.cshtml";
}
<script src="/Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<link href="/Content/themes/blue/easyui.css" rel="stylesheet" />
<link href="/Content/Site.css" rel="stylesheet" />
<script src="/Scripts/common.js"></script>
<link href="/Content/data_grid_list.css" rel="stylesheet" />
<script src="/Scripts/op/jquery.rewrite.js"></script>
<div class="layui-fluid" style="padding-left:0px;padding-top:10px;">


    <style>
        .self-table-click td {
            background-color: #f3ebbc;
        }
    </style>
    <div class="layui-card" id="topcard" style="width:100%;padding-top:10px;">
        <div class="layui-card-body " id="contentBody">
            <form class="layui-form selftopwhere" id="myform">
                <div class="layui-form-item">
                    <div class="layui-form-item">
                        @Html.Action("UserSSOComBox", "Control", new
                        {
                            currentRight = WX.CRM.WebHelper.InitRights.CONST_我的订单,
                            @class = "layui-input",  // 添加Layui输入框样式
                            style = "width:150px;"   // 保持与相邻select一致的宽度
                        })
                    </div>
                    客户id：
                    <div class="layui-inline">
                        <input type="text" name="umid" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                    到期时间：
                    <div class="layui-inline">
                        <input class="layui-input" placeholder="开始日" name="starttime" id="starttime" style="width:120px;">
                    </div>
                    <div class="layui-inline">
                        <input class="layui-input" placeholder="截止日" name="endtime" id="endtime" style="width:120px;">
                    </div>
                    产品大类：
                    <div class="layui-inline">
                        <select id="slt_midproductId" name="midproductId"
                                style="width:150px;height:22px"
                                lay-filter="midproduct"
                                onChange="changeMidProduct(this.value)">
                            <option value="">--请选中产品大类--</option>
                            @foreach (var item in ViewBag.midproductList as List<SelectListItem>)
                            {
                                <option value="@item.Value">@item.Text</option>
                            }
                        </select>
                    </div>
                    产品小类：
                    <div class="layui-inline">
                        <select id="slt_subProductId" name="subProductId" style="width:220px;height:22px">
                            <option value="">--请选中产品小类--</option>
                        </select>
                    </div>
                    <input class="layui-btn layui-btn-sm layui-btn-ok" data-method="search" type="button" value="查询" />
                </div>
            </form>
            <table class="layui-hide" id="tabl1" lay-filter="tabl1"></table>
        </div>
    </div>

</div>

<script>
    var selectRow = {};
    var winindex;
    var layer;
    var rowid;
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use(['laypage', 'layer', 'table', 'laydate', 'form'], function () {
        var form = layui.form;
        var laydate = layui.laydate;
        layer = layui.layer;
        table = layui.table;

        // 添加表单组件初始化
        form.render('select');  // 初始化所有select元素

        laydate.render({ elem: '#starttime' });
        laydate.render({ elem: '#endtime' });

        var token = $.cookie("AuthToken");

        var param = $("#myform").serializeFormJSON();
        for (let k in param) {
            if (param[k] == "") {
                delete param[k];
            }
        }
        param.action = "list";

        var tableIns = table.render({
            id: 'listReload'
            , elem: '#tabl1'
            , url: '/Res/TranUser'
            , method: 'post'
            , headers: { 
                auth: token
            }
            , cellMinWidth: 80
            , page: true
            , limit: 20
            , limits: [10, 20, 30]  // 添加可选分页大小
            , height: "full-160"
            , size: "sm"
            , cols: [[
                { field: 'Umid', title: '客户ID' }
                , { field: 'SoftUserName', title: '用户名' }
                , { field: 'CName', title: '客户名称' }
                , { field: 'SubProductName', title: '产品名称' }
                , { 
                    field: 'EndTime', 
                    title: '到期时间', 
                    templet: function(d) {
                        return formatDate(d.EndTime);
                    }
                }
                , { 
                    field: 'RemainDays', 
                    title: '剩余天数', 
                    templet: function(d) {
                        if (!d.EndTime) return '';
                        
                        var endDate = new Date(parseInt(d.EndTime.match(/\d+/)[0]));
                        var today = new Date();
                        // 设置时间为同一天的0点，避免时间差影响天数计算
                        today.setHours(0, 0, 0, 0);
                        endDate.setHours(0, 0, 0, 0);
                        
                        var timeDiff = endDate - today;
                        var daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
                        
                        // 已过期显示0，当天显示1
                        return daysDiff < 0 ? 0 : (daysDiff === 0 ? 1 : daysDiff);
                    }
                }
                , { 
                    field: 'RiskLevel', 
                    title: '风险标签', 
                    templet: function(d) {
                        var tags = [];
                        if (d.HasInComplaint) {
                            tags.push('<span class="layui-badge layui-bg-orange" style="margin-right:5px;">内诉</span>');
                        }
                        if (d.HasOutComplaint) {
                            tags.push('<span class="layui-badge layui-bg-yellow">外诉</span>');
                        }
                        return tags.length ? tags.join('') : '';
                    },
                    width: 120  // 设置固定宽度
                }
                , { field: 'Eids', title: '添加员工' }
                , { field: 'LastServiceTime', title: '最新跟进时间' }
                , { field: 'LastServiceEid', title: '最新跟进人员' }
                //, { field: 'Eids', title: '添加员工' }
            ]]
            , where: param
            , parseData: function(res){ // 新增数据解析调试
                console.log('响应数据:', res);
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.count,
                    "data": res.data
                };
            }
            , error: function(res, msg){
                console.error('表格加载错误:', res, msg);
            }
        });

        //触发单元格工具事件
        table.on('tool(tabl1)', function (obj) {
            var data = obj.data;
            //console.log(data)
            if (obj.event === 'edit') {
                layer.open({
                    title: '明细',
                    type: 2,
                    area: ['60%', '80%'],
                    content: '/WeiXin/Invoice/Detail?id=' + data.Id
                });
            }
        });

        //监听行单击事件
        table.on('row(tabl1)', function (obj) {
            var data = obj.data;
            //标注选中样式
            console.log(data);
            obj.tr.addClass('self-table-click').siblings().removeClass('self-table-click');
            selectRow = data;
        });

        // 在layui.use回调中添加
        form.on('select(midproduct)', function (data) {
            changeMidProduct(data.value);
        });

        var active = {
            add: function () {
                var url = "/WeiXin/Invoice/Add";

                layer.open({
                    title: '发票申请',
                    type: 2,
                    maxmin: true,
                    content: url,
                    area: ['80%', '70%']
                });
            },
            search: function () {
                tableIns.config.where = {};
                var param = $("#myform").serializeFormJSON();
                for (let k in param) {
                    if (param[k] == "") {
                        delete param[k];
                    }
                }
                param.action = "list";
                tableIns.reload({
                    where: param,
                    headers: { auth: token },
                    page: {
                        curr: 1 // 重置到第一页但保留分页大小
                    }
                });
            }
        };

        $('.layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            console.log(method);
            active[method] ? active[method].call(this, othis) : '';

        });
    });

    function changeMidProduct(productId) {
        if (productId == 0) {
            $("#slt_subProductId").html("<option value='0'>--请选中产品小类--</option>");
            layui.form.render('select');  // 修复作用域问题
            return;
        }
        $.r_post("/JzOrder/GetAllSubProductList?productId=0&midproductId=" + productId, function (data) {
            $("#slt_subProductId").html("<option value=''>--请选中产品小类--</option>");
            $(data).each(function (n, m) {
                $("#slt_subProductId").append("<option value='" + m.Value + "'>" + m.Text + "</option>");
            });
            layui.form.render('select');  // 直接调用layui的form模块
        }, "json");
    }
    function onLoadSucced() {
        console.log(1);
        //$('#tablist').tablegrid("Search");
    }// 在表格初始化前添加日期格式化函数
function formatDate(timestamp) {
    if(!timestamp) return '';
    // 处理ASP.NET的日期格式 /Date(1574063481000)/
    var date = new Date(parseInt(timestamp.match(/\d+/)[0]));
    return date.toLocaleDateString();
}
</script>