<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('随访SOP表修改')" />
</head>
<body>
<div class="ui-layout-center">
    <div class="col-sm-12">
        <div class="float-e-margins">
            <div class="ibox-title">
                <h5>随访SOP</h5>
                <div class="ibox-tools" style="margin-top: -10px;">
                    <label class="control-label">最后更新时间:</label>
                    <input name="lastUpdateTime"  class="styled-input input-field" type="text" style="border: none" value="2024-09-18 22:68"  readonly>
                    <span> <input type="text" style="border: none;font-size: 13px;width: 60px;color: orangered;" class="styled-input" value="已创建" id="switchFlag" readonly></span>
                    <div class="toggle-switch">
                        <label>
                            <input type="checkbox" class="toggle-switch" value="" id="switchFlag2">
                            <span class="toggle-switch"></span>
                        </label>
                    </div>
                </div>
            </div>

            <div class="ibox-content">

                <form id="form-SDtpYypzFollowUpSop-edit">
                    <div class="customize-form-group-row">
                        <label class="control-label is-required">随访SOP：</label>
                        <input name="phoneNumber" placeholder="随访SOP" class="styled-input input-field"
                               type="text" maxlength="30" th:value="${phoneNumber}" required>

                    </div>
                    <div class="customize-form-group-row">
                            <label class="control-label is-required">业务归属:&nbsp;&nbsp;:</label>
                            <select name="businessBelonging" class="styled-input input-field"  th:with="type=${@dict.getType('sys_select_dtp_ywgs')}" disabled>
                                <option value="">业务归属</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictLabel}"></option>
                            </select>
                    </div>
                    <div class="customize-form-group-row">
                        <label class="control-label is-required">适用药品：</label>
                        已选择2种药品 <button type="button"  onclick="selectUsersToParentCallBack2()" class="btn-primary">添加药品</button>
                        <div class="form-horizontal">
                            <p class="pull-right">
                            <div class="customize-form-group select-time">
                                <div class="panel-body">
                                    <strong>药品信息</strong>
                                    <div class="form-group" id="formGroup">
                                        <div class="col-sm-12">
                                            <div class="col-sm-11" id="carGroup">
                                                <div id="iboxContainer">
                                                    <ul class="list-group list-group-striped" id="inputList">
                                                        <!-- 输入框将在这里动态添加 -->
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </p>
                        </div>
                    </div>

                    <div class="customize-form-group-row">
                        <label class="control-label is-required">节点配置：</label>
                        <div class="col-sm-6">
                            <div class="tabs-container">
                                <button type="button"  onclick="addNode()" class="btn btn-outline btn-primary">新增节点</button>
                                <ul class="nav nav-tabs" id="addNodeSelect">
                                    <!--动态添加表单数据-->
                                </ul>
                                <div class="tab-content" id="addNode">
                                    <!--动态添加表单数据-->
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
<div class="main-content">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
    </div>
</div>
<th:block th:include="include :: footer" />
</body>
</html>
<script>
    var prefix = ctx + "dtp/recipe";
    var count = 0;
    var carNum=1;//选项卡id
    function submitHandler() {
        var prefix = ctx + "dtp/sdtpyypzfollowupsop";
        if ($.validate.form()) {
            var data = $("#form-SDtpYypzFollowUpSop-edit").serializeArray();
            $.operate.saveTab(prefix + "/sDtpYypzFollowUpSopEdit", data);
        }
    }
    function selectUsersToParentCallBack2(){
        var options = {
            title: '药品信息',
            url: prefix + "/drugInfo",
            callBack: doSubmit2
        };
        $.modal.openOptions(options);
    }

    var index=0;
    var carNumFlag2=[];
    // 存储已添加的过滤条件数量
    let addedFiltersCount= 0;
    var selectedOption = []; // 这里存储当前选中的选项
    function  toTask(){
        debugger
        // 使用 includes 方法检查 carNum 是否已在 carNumFlag2 数组中
        if(carNum==""){
            $.modal.msg("请选重新点击节点名称", "warning");
            return;
        }
        // 创建并设置 div 的内容
        var filtersContainer = document.getElementById('filtersContainer'+carNum);
        const filterRow = document.createElement('div');
        filterRow.className = 'filter-row';
        const selectFeature = document.createElement('select');
        selectFeature.className = 'styled-input'; // 添加类名
        selectFeature.innerHTML = '<option value="">请选择特征</option>';
        for (let i = 1; i <= 10; i++) {
            selectFeature.innerHTML += `<option value="${i}">特征${i}</option>`;
        }
        const selectCondition = document.createElement('select');
        selectCondition.className = 'styled-input'; // 添加类名
        selectCondition.innerHTML = '<option value="">判断条件</option>';
        for (let i = 1; i <= 10; i++) {
            selectCondition.innerHTML += `<option value="${i}">条件${i}</option>`;
        }
        const removeButton = document.createElement('span');
        removeButton.textContent = '删除';
        removeButton.className = 'remove-buttonx';
        removeButton.onclick = () => {
            filtersContainer.removeChild(filterRow);
        };
        filterRow.appendChild(selectFeature);
        filterRow.appendChild(selectCondition);
        filterRow.innerHTML+= "<p class='grey-text'>如满足左侧设定逻辑，则不会执行任务动作</p>";
        filterRow.appendChild(removeButton);
        // 将新创建的 filterRow 添加到 filtersContainer 中
        filtersContainer.appendChild(filterRow);
    }

    function bindTabEvents(carNum) {
        console.log("carNum"+carNum);
        var flag = true ;
        var TJ = '';

        var  renwdongz='';//任务动作

        // 绑定 change 事件
        $(document).on('change', '#ts'+carNum, function(e) {
            var selectedValue = $(this).val();
            if (selectedValue === "周期节点" && flag) {
                flag = false;
                $('#span'+carNum).remove();
                var addNodeOne ='<span id="span'+carNum+'"> 每 '+
                    '<input type="number" name="specification" placeholder="请输入" class="styled-input" value="">' +
                    "  天生成任务，共执行  " +
                    '<input type="number" name="specification" placeholder="请输入" class="styled-input" value="">次</span>'

                $('#scrw'+carNum).after(addNodeOne);
            }if (selectedValue === "单次节点" && TJ=='时间条件') {
                flag = true;
                $('#span'+carNum).remove();
                var addNodeOne ="  <span id=\"span"+carNum+"\">第  " +
                    '<input type="number" id="rwday'+carNum+'" name="specification" placeholder="请输入" class="styled-input" value="">' +
                    "  天生成任务 </span>" ;
                $('#scrw'+carNum).after(addNodeOne);
            }
            if (selectedValue === "单次节点" && TJ=='事件条件') {
                flag = true;
                $('#span'+carNum).remove();
                var addNodeOne ='<span id="span'+carNum+'"> 当 '+
                    '<select name="zjddd" id="scrw-t'+carNum+'" class="styled-input">' +
                    '<option value="">请选择</option>' +
                    ' <option value="最近订单D值">最近订单D值(剩余用药天数)</option>' +
                    '<option value="其他值">其他值</option>' +
                    '</select>' +
                    "  为" +
                    '<input type="number" name="dnumber" placeholder="请输入" class="styled-input" value="">触发动作'
                $('#scrw'+carNum).after(addNodeOne);
            }
            if (selectedValue === "单次节点" && TJ=='' ) {
                flag = true;
                $('#span'+carNum).remove();
                var addNodeOne ="  <span id=\"span"+carNum+"\">第  " +
                    '<input type="number" id="scrw-t'+carNum+'" name="specification" placeholder="请输入" class="styled-input" value="">' +
                    "  天生成任务 </span>" ;
                $('#scrw'+carNum).after(addNodeOne);
            }
        });
        // 绑定 change 事件
        $(document).on('change', '#scrw'+carNum, function(e) {
            var selectedValue = $(this).val();
            if (selectedValue === "事件条件" && flag===false) {
                TJ='事件条件';
                $('#span'+carNum).remove();
                var addNodeOne ='<span id="span'+carNum+'"> 当 '+
                    '<select name="zjddd" id="scew-t'+carNum+'" class="styled-input">' +
                    '<option value="">请选择</option>' +
                    ' <option value="最近订单D值">最近订单D值(剩余用药天数)</option>' +
                    '<option value="其他值">其他值</option>' +
                    '</select>' +
                    "  为" +
                    '<input type="number" name="dnumber" placeholder="请输入" class="styled-input" value="">触发动作'+
                    " 共执行  " +
                    '<input type="number" name="specification" placeholder="请输入" class="styled-input" value="">次</span>'
                $('#scrw'+carNum).after(addNodeOne);
            } if (selectedValue === "事件条件" && flag===true) {
                TJ='事件条件';
                $('#span'+carNum).remove();
                var addNodeOne ='<span id="span'+carNum+'"> 当 '+
                    '<select name="zjddd" id="scrw-t'+carNum+'" class="styled-input">' +
                    '<option value="">请选择</option>' +
                    ' <option value="最近订单D值">最近订单D值(剩余用药天数)</option>' +
                    '<option value="其他值">其他值</option>' +
                    '</select>' +
                    "  为" +
                    '<input type="number" name="dnumber" placeholder="请输入" class="styled-input" value="">触发动作'
                $('#scrw'+carNum).after(addNodeOne);
            }if (selectedValue === "时间条件" && flag===false) {
                TJ='时间条件';
                $('#span'+carNum).remove();
                var addNodeOne ='<span id="span'+carNum+'"> 每 '+
                    '<input type="number" name="specification" placeholder="请输入" class="styled-input" value="">' +
                    "  天生成任务，共执行  " +
                    '<input type="number" name="specification" placeholder="请输入" class="styled-input" value="">次</span>'
                $('#scrw'+carNum).after(addNodeOne);
            }if (selectedValue === "时间条件" && flag===true) {
                TJ='时间条件';
                $('#span'+carNum).remove();
                var addNodeOne ="  <span id=\"span"+carNum+"\">第  " +
                    '<input type="number" id="scrw-t'+carNum+'" name="specification" placeholder="请输入" class="styled-input" value="">' +
                    "  天生成任务 </span>" ;
                $('#scrw'+carNum).after(addNodeOne);
            }
        });

        // 绑定 change 事件
        $(document).on('change', '#rwdz'+carNum, function(e) {
            var chudaSelect = $(this).val();
            var roleSelect = document.getElementById("js"+carNum);

            // 清空当前的所有选项
            while (roleSelect.firstChild) {
                roleSelect.removeChild(roleSelect.firstChild);
            }
            // 根据 chudaSelect 的值添加合适的选项
            if (chudaSelect=== '表单任务') {

                var divElement = document.getElementById("rwdzID"+carNum); // 获取 div 引用
                divElement.style.display = "none";
                var divElementform = document.getElementById("rwdzform"+carNum); // 获取 div 引用
                divElementform.style.display = "block";
                renwdongz='表单任务';
                var option = document.createElement("option");
                option.value = "药师";
                option.text = "药师";
                roleSelect.appendChild(option);
                selectedOption.push("yaoshigzt" + carNum);
                // 选中药师工作台
                document.getElementById("yaoshigzt" + carNum).checked = true;
            } else if (chudaSelect === '触达任务') {
                var divElement = document.getElementById("rwdzform"+carNum); // 获取 div 引用
                divElement.style.display = "none";
                var divElementID = document.getElementById("rwdzID"+carNum); // 获取 div 引用
                divElementID.style.display = "block";
                renwdongz='触达任务';
                var option = document.createElement("option");
                option.value = "系统";
                option.text = "系统";
                roleSelect.appendChild(option);
                selectedOption.push("duanxiqudan" + carNum);
                // 选中短信
                document.getElementById("duanxiqudan" + carNum).checked = true;
            }else if (chudaSelect === '') {
                var elementsToDelete = [];
                elementsToDelete.push('duanxiqudan' + carNum);
                elementsToDelete.push('yaoshigzt' + carNum);
                var filteredArray = selectedOption.filter(item => !elementsToDelete.includes(item));
                console.log("filteredArray="+filteredArray);
                // 取消选中
                document.getElementById("duanxiqudan" + carNum).checked = false;
                document.getElementById("yaoshigzt" + carNum).checked = false;
            }

        });
    }
    document.querySelector('.toggle-switch input').addEventListener('change', function () {
        if (this.checked) {
            $('#switchFlag').val('已启用');
            // 开启功能
            console.log('已创建');
        } else {
            $('#switchFlag').val('已停用');
            // 关闭功能
            console.log('已取消创建');
        }
    });

    // 在添加新选项卡的地方调用事件绑定函数
    // function addNewTab(newCarNum) {
    //     // 新选项卡相关的DOM操作...
    //
    //     // 主动重新绑定事件
    //     bindTabEvents(newCarNum);
    // }
    document.addEventListener("DOMContentLoaded", function() {
            addNode()
            // 监听点击事件，激活指定的选项卡
        $('#addNodeSelect').click(function(e) {
            // 阻止默认行为
            e.preventDefault();
            // 获取当前点击的选项卡链接
            var $this = $(this);
            // 获取被点击的 tab标签id
            var clickedA = $(e.target);
            var new_id = clickedA[0].id
            carNum=new_id.substring(2);

                var Select = document.getElementById("rwdz"+carNum);
                if (Select) { // 确保元素存在
                    var selectedOption = Select.options[Select.selectedIndex];
                    console.log(selectedOption.text); // 输出选中文本
                    if(selectedOption.text =='请选择'){
                        document.getElementById("duanxiqudan" + carNum).checked = false;
                    }else {
                        document.getElementById("duanxiqudan" + carNum).checked = true;
                    }
                }

                var Select = document.getElementById("rwdz" + carNum);
                if (Select) { // 确保元素存在
                    var selectedOption = Select.options[Select.selectedIndex];
                    console.log(selectedOption.text); // 输出选中文本
                    if(selectedOption.text =='请选择'){
                        document.getElementById("yaoshigzt" + carNum).checked = false;
                    }else {
                        document.getElementById("yaoshigzt" + carNum).checked = true;
                    }

                }

        });

        // 初始绑定
        bindTabEvents(carNum);
    });
    /* 添加节点配置 */
    function addNode(){
        count++;
        // 生成 ibox 容器
        if(count===1){
            c = "active";
            t = "true"
        }else{
            c="";
            t="false"
        }
        var addNode = '<div id="tab-' + count + '" class="tab-pane '+c+'">' +
                        '<div class="panel-body">'+
                                '<strong>激活节点:</strong>'+
                                "  按  " +
                                '<select name="createplan' + count + '" id="jhjd' + count + '" class="styled-input">' +
                                '<option value="">请选择</option>' +
                                '<option value="创建计划">创建计划</option>' +
                                '</select>' +
                                "  第  " +
                                '<input type="number" name="specification' + count + '" placeholder="规格" class="styled-input" value="">' +
                                "  天激活  "+
                                '<select name="usageMethod' + count + '" id="ts' + count + '" class="styled-input">' +
                                '<option value="单次节点">单次节点</option>' +
                                '<option value="周期节点">周期节点</option>' +
                                '</select>' +
                            '<p>'+
                            '</p id="sctask">'+
                                '<strong>生成任务:</strong>'+
                                "  按  " +
                                '<select name="createTask' + count + '" id="scrw' + count + '" class="styled-input">' +
                                '<option value="">请选择</option>' +
                                '<option value="时间条件">时间条件</option>' +
                                '<option value="事件条件">事件条件</option>' +
                                '</select>' +
                                "  <span id=\"span" + count + "\">第  " +
                                '<input type="number" id="numberDays' + count + '" name="numberDays' + count + '" placeholder="请输入" class="styled-input" value="">' +
                                "  天生成任务 </span>"+' &nbsp;<a href="#" onclick="toTask()">添加过滤条件</a>' +
                                 "<div id=\"filtersContainer" + count + "\"></div>" +
                            '<p>'+
                            '</p>'+
                                '<strong>任务动作:  &emsp;&nbsp;</strong>'+
                                '<select name="creater' + count + '" id="cj' + count + '" class="styled-input">' +
                                '<option value="创建">创建</option>' +
                                '</select>' +
                                '&emsp;&nbsp;&nbsp;' +
                                '<select name="chuda' + count + '" id="rwdz' + count + '" class="styled-input">' +
                                '<option value="">请选择</option>' +
                                '<option value="表单任务">表单任务</option>' +
                                '<option value="触达任务">触达任务</option>' +
                                '</select>' +
                                "  类型，由角色  " +
                                '<select name="roleType' + count + '" id="js' + count + '" class="styled-input">' +
                                '<option value=""></option>' +
                                '<option value="药师">药师</option>' +
                                '<option value="系统">系统</option>' +
                                '</select>' +
                                '  执行  '+
                            '<p>'+
                            '</p>'+
                                '<strong>执行任务: </strong>生成后第&nbsp;'+
                                '<input type="number" name="specification' + count + '" placeholder="请输入" class="styled-input" value="">' +
                                '  天  ' +
                                '<input type="number" name="specification' + count + '" placeholder="请输入" class="styled-input" value="">' +
                                '  执行任务  ' +
                            '<p>'+
                            '</p>'+
                                '<strong>&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;</strong>随访主题&nbsp;'+
                                '<select name="followUupSubject' + count + '" id="sfzt' + count + '" class="styled-input">' +
                                '<option value="">请选择</option>' +
                                '<option value="用药指导">用药指导</option>' +
                                '<option value="脱落召回">脱落召回</option>' +
                                '</select>' +
                            '<p>'+
                            '</p>'+
                                '<strong>&emsp;&emsp;&emsp;&nbsp;&nbsp;</strong>任务有效期&nbsp;'+
                                '<input type="number" name="TaskValidity' + count + '" placeholder="请输入" class="styled-input" value="">' +
                            '<p>'+
                            '</p>'+
                                '<strong>&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;</strong>任务素材&nbsp;'+
                                '<select name="taskMaterial' + count + '" id="1-' + count + '" class="styled-input">' +
                                '<option value="表单">表单</option>' +
                                 '<option value="表单2">表单2</option>' +
                                '</select>' +
                            '<p>'+
                            '</p><div id="rwdzform' + count + '" class="myDivrwdz">'+
                                '<strong>&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;</strong>使用表单&nbsp;'+
                                '<select name="useForm' + count + '" id="2-' + count + '" class="styled-input">' +
                                '<option value="">请选择</option>' +
                                '<option value="单任务表单">单任务表单</option>' +
                                '<option value="随访任务表单">随访任务表单</option>' +
                                '<option value="脱落召回随访表单">脱落召回随访表单</option>' +
                                '</select>' +
                            '</div><p>'+
                            '</p><div id="rwdzID' + count + '" class="myDivrwdz">'+
                            '<strong>&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;</strong>短信ID&emsp;&nbsp;'+
                            '<input type="text" name="duanxinID' + count + '" class="styled-input" placeholder="请输入短信ID" value="">' +
                            '</div><p>'+
                            '</p>'+
                            '<strong>&emsp;&emsp;&emsp;&emsp;&nbsp;</strong>下发渠道&nbsp;'+
                            '<input type="radio" id="duanxiqudan' + count + '" name="deliveryChannel" class="form-check-radio" value="短信"> 短信 ' +
                            '<input type="radio" id="yaoshigzt' + count + '" name="deliveryChannel" class="form-check-radio" value="药师工作台"> 药师工作台 ' +
                        '</div>'+
                    '</div>';
        // 添加到容器
        var  NodeSelect =  '<li id="li-' + count + '" class="'+c+'"><a data-toggle="tab" href="#tab-' + count + '" aria-expanded="'+t+'">  <span class="your-class-for-nodes" id="jd' + count + '">' +
           '节点' + count +'</span>&emsp;&nbsp;&nbsp;<span class="close-tab" onclick="deleteNode(\'' + count + '\')"><i class="fa fa-times"></i></span></a></li>';
        $('#addNode').append(addNode);
        $('#addNodeSelect').append(NodeSelect);
// 主动重新绑定事件
        bindTabEvents(count);
    }
    function doSubmit2(index, layero){
        var rows = layero.find("iframe")[0].contentWindow.selectColumns2();
        if (rows.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        rows.forEach(function(item, index) {
            // 生成 ibox 容器
            var ibox = '<div class="ibox" id="ibox-' + item.productId + '">' +
                '<div class="ibox-title">' +
                '<h5>' + item.mdmCode + ' - ' + item.productName + '</h5>' +
                '<input name="isFlipItem" placeholder="是否为上翻品" id="isFlipItem-' + item.isFlipItem + '"  class="styled-input3" type="hidden" value="' + item.isFlipItem + '">' +
                '<input name="productId" placeholder="商品id" id="productId-' + item.productId + '"  class="styled-input3" type="hidden" value="' + item.productId + '">' +
                '<input name="genericName" placeholder="商品通用名" id="genericName-' + item.genericName + '"  class="styled-input3" type="hidden" value="' + item.genericName + '">' +
                '<input name="productName" placeholder="商品名" id="productName-' + item.productName + '"  class="styled-input3" type="hidden" value="' + item.productName + '">' +
                '<input name="mdmCode" placeholder="MD编码" id="mdmCode-' + item.mdmCode + '"  class="styled-input3" type="hidden" value="' + item.mdmCode + '">' +
                '<input name="specification" placeholder="规格" id="specification-' + item.specification + '"  class="styled-input3" type="hidden" value="' + item.specification + '">' +
                '</div>' +
                '<div class="ibox-content">' +
                '<table class="table table-bordered">' +
                '<tbody>' +
                '<tr>' +
                '<td>MD编码：' + item.mdmCode + '</td>' +
                '<td>商品名：' + item.productName + '</td>' +
                '<td>通用名：' + item.genericName + '</td>' +
                '<td>厂家：没有数据</td>' +
                '<td><button onclick="deleteRow(\'' + item.productId + '\')" class="btn btn-danger">删除</button></td>' +
                /*'<td>规格：' + item.specification[0] + '</td>' +*/
                '</tr>' +
                '</tbody>' +
                '</table>' +
                '</div>' +
                '</div>';

            // 添加到容器
            $('#iboxContainer').append(ibox);
        });
        $.modal.close(index);
    }
    function deleteRow(productId) {
        // 删除 ibox 容器
        $('#ibox-' + productId).remove();
    }
    function deleteNode(id) {
        if(count===0){
            return false
        }
        count--;
        // 删除 ibox 容器
        $('#li-' + id).remove();
        $('#tab-' + id).remove();
        // 遍历所有剩余的节点，更新它们的编号
        $('.your-class-for-nodes').each(function() {

            // 获取当前节点的 id
            let currentId = parseInt(this.id.replace('jd', '')); // 提取数字部分

            // 如果当前节点的 id 大于被删除的节点的 id，更新编号
            if (currentId > id) {
                // 创建一个新的 id
                let newId = 'jd' + (currentId - 1);
                // 更新节点的 id 和文本内容
                $(this).attr('id', newId).text('节点' + (currentId - 1));
                let closeTabElement = $(this).closest('li').find('.close-tab');
                if (closeTabElement.length > 0) {
                    // 更新 onclick 属性中的参数
                    let onclickAttr = closeTabElement.attr('onclick');
                    let updatedOnclickAttr = onclickAttr.replace(/\d+/g, newId.substring(2));
                    closeTabElement.attr('onclick', updatedOnclickAttr);
                }
                $(this).closest('li').attr('id', 'li-' + newId.substring(2));

                // 更新 a 标签的 href 属性
                let aTag = $(this).closest('li').find('a');
                if (aTag.length > 0) {
                    let hrefAttr = aTag.attr('href');
                    let updatedHrefAttr = hrefAttr.replace(/\d+/g, newId.substring(2));
                    aTag.attr('href', updatedHrefAttr);
                }
            }

        });

    }
</script>
<style>

    .container-right {
        display: flex;
        justify-content: right;
    }


    .myDivrwdz {
        display: none; /* 初始状态为不显示 */
    }
    .remove-buttonx { /* 删除按钮样式 */
        cursor: pointer;
        color: red;
        text-decoration: underline;
        font-weight: bold;
    }
    .grey-text {
        padding-right: 5px;
        padding-top: 10px;
        color: gray;
        font-family: "楷体", KaiTi, serif;
        font-size: 11px;
    }
    .filter-row {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    .filter-row input,
    .filter-row select {
        margin-right: 10px;
    }
    .remove-button {
        cursor: pointer;
    }


    .hidden {
        display: none;
    }
    .ibox {
        width: 700px;
        margin-bottom: 20px;
        border: 1px solid #e7eaec;
        border-radius: 4px;
    }
    .ibox-title {
        background-color: #f3f3f4;
        border-bottom: 1px solid #e7eaec;
        padding: 10px 15px;
        font-size: 16px;
    }
    .ibox-content {
        padding: 15px;
    }
    .ibox-content h4 {
        margin-top: 0;
    }
    .customize-form-group2 {
        display: inline-block;
    }
    .styled-input2 {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 200px;
    }
    .styled-input3 {
        display: inline-block;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 100px;
    }
    .styled-input4 {
        display: inline-block;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 100px;
    }
    .col-sm-6 {
        width: 125%;
    }
    .form-horizontal .form-group {
        margin-right: 384px;
        margin-left: 3px;
    }
    input[type=file] {
        display: none;
    }
    .form-group {
        margin-bottom: -1px;
    }
    /* 添加一些基础样式 */
    body {
        font-family: Arial, sans-serif;
    }
    table {
        width: 400px;
        border-collapse: collapse;
    }
    th, td {
        text-align: left;
        padding: 8px;
        border-bottom: 1px solid #ddd;
    }
    tr:nth-child(even) {
        width: 15px;
        background-color: #f2f2f2;
    }
</style>
