{extend name="foxcms" /}

{block name="css"}

{/block}

{block name="body"}
<input name="columnId" type="hidden" value="{$columnId}"/>
<input name="modelId" type="hidden" value="{$modelRecord.id}"/>


<div class="foxcms-content-inner">
    <!-- page content -->
    <div class="attach-set-content">
        <div class="foxui-tabs foxui-type-line">
            <div class="foxui-tabs-header">
                <div class="foxui-tabs-item is-active">基本设置</div>
                <div class="foxui-tabs-item">内容字段</div>
                <div class="foxui-tabs__active-bar" style="width: 112px; transform: translateX(0px);"></div></div>
            <div class="foxui-tabs-content">
                <div class="foxui-tabs-pane" style="">
                    <div class="section">

                        <div class="section-title">设置</div>
                        <div class="section-main">

                            <div class="section-main-item">
                                <div class="foxui-input-group">
                                    <div class="input-label">
                                        <label>模型类型：</label>
                                    </div>
                                    <div class="input-box display-flex foxui-align-items-center">
                                        <mark>{$modelRecord.systemtext}</mark>
                                    </div>
                                </div>
                            </div>

                            <div class="section-main-item">
                                <div class="foxui-input-group">
                                    <div class="input-label">
                                        <label>模型名称：</label>
                                    </div>
                                    <div class="input-box display-flex foxui-align-items-center">
                                        <input class="foxui-size-small" disabled placeholder="请输入模型名称" value="{$modelRecord.name}"/>
                                    </div>
                                </div>
                            </div>

                            <div class="section-main-item">
                                <div class="foxui-input-group">
                                    <div class="input-label">
                                        <label>模型标识：</label>
                                    </div>
                                    <div class="input-box display-flex foxui-align-items-center">
                                        <span>{$modelRecord.nid}</span>
                                    </div>
                                </div>
                            </div>

                            <div class="section-main-item">
                                <div class="foxui-input-group">
                                    <div class="input-label">
                                        <label>附加表：</label>
                                    </div>
                                    <div class="input-box display-flex foxui-align-items-center">
                                        <input class="foxui-size-small" disabled placeholder="请输入内容" value="{$modelRecord.table}"/>
                                    </div>
                                </div>
                            </div>

                            <div class="section-main-item">
                                <div class="foxui-input-group">
                                    <div class="input-label">
                                        <label>标题设置：</label>
                                    </div>
                                    <div class="input-box display-flex foxui-align-items-center">
                                        <p class="switch-label">允许标题重复</p>
                                        <div class="foxui-switch is-checked">
                                            <input type="checkbox" checked="checked" value="" class="foxui-switch-input">
                                            <span class="foxui-switch-core"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="foxui-tabs-pane" style="display: none;">
                    <div class="section">
                        <div class="foxcms-content-inner">
                            <!-- page content -->
                            <div class="diy-form-content">
                                <div class="content-top-operation">
                                    <div class="left">
                                        <button class="foxui-size-small foxui-solid-primary" onclick="modifyTableItem()">
                                            <i class="foxui-icon-jiahao-o"></i>
                                            <span>添加字段</span>
                                        </button>
                                    </div>
                                    <div class="right display-flex">
                                        <div class="foxui-input-group item-input">
                                            <label>字段搜索：</label>
                                            <input class="foxui-size-small" placeholder="请输入字段标题 / 字段名称" value="" name="keyword">
                                        </div>
                                        <div class="foxui-input-group item-select">
                                            <label>状态：</label>
                                            <div class="foxui-select">
                                                <div class="foxui-select-handle foxui-select-icon">
                                                    <input class="foxui-select-input foxui-size-small" readonly="readonly" placeholder="请选择状态" value="全部" name="status">
                                                    <i class="foxui-icon-close-circle"></i>
                                                </div>
                                                <div class="foxui-select-menu">
                                                    <ul class="foxui-select-slide">
                                                        <li class="foxui-select-item" data-id="1">全部</li>
                                                        <li class="foxui-select-item" data-id="2">启用</li>
                                                        <li class="foxui-select-item" data-id="3">禁用</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <button class="foxui-solid-primary foxui-size-small search-btn">搜索</button>
                                        <button class="foxui-text-primary foxui-size-small reset-btn">重置</button>
                                    </div>
                                </div>
                                <div class="section section-panel margin-top-10">
                                    <div class="foxui-table foxui-table-border-bottom foxui-table-hover foxui-checkbox-group">

                                        <ul class="foxui-table-thead foxui-checkbox-head">
                                            <li class="foxui-table-tr">
                                                <div class="foxui-table-th" style="flex: initial; width: 40px">
                                                    <div class="foxui-checkbox foxui-checkbox-all">
                                                        <span class="foxui-checkbox-input">
                                                            <i class="foxui-checkbox-icon"></i>
                                                            <input type="checkbox" value="" />
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="foxui-table-th">ID</div>
                                                <div class="foxui-table-th">标题</div>
                                                <div class="foxui-table-th">名称</div>
                                                <div class="foxui-table-th">类型</div>
                                                <div class="foxui-table-th">状态</div>
                                                <div class="foxui-table-th">所属分类</div>
                                                <div class="foxui-table-th">操作</div>
                                            </li>
                                        </ul>
                                        <ul class="foxui-table-tbody foxui-checkbox-list" id="loadingContainer">
                                            <!--表格内容-->
                                        </ul>

                                        <div class="table-footer foxui-checkbox-head">
                                            <div class="left display-flex foxui-align-items-center">
                                                <div class="foxui-checkbox foxui-checkbox-all margin-right-24">
                                                    <span class="foxui-checkbox-input">
                                                        <i class="foxui-checkbox-icon"></i>
                                                        <input type="checkbox" value="" />
                                                    </span>
                                                </div>
                                                <div class="display-flex">
                                                    <button class="foxui-plain-info foxui-size-mini enable-btn">
                                                        <i class="foxui-icon-zhengque-o"></i>
                                                        <span>启用</span>
                                                    </button>
                                                    <button class="foxui-plain-info foxui-size-mini disabled-btn">
                                                        <i class="foxui-icon-jinyong-o"></i>
                                                        <span>禁用</span>
                                                    </button>
                                                    <button class="foxui-plain-info foxui-size-mini delete-btn">
                                                        <i class="foxui-icon-shanchu-o"></i>
                                                        <span>删除</span>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="right total">共N条记录</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{include file="footed-copy"/}
{/block}


{block name="js"}

<script>
    /**
     * @description: 添加/编辑（item有效编辑，无效添加）
     * @param {*} item
     * @return {*}
     * @Date: 2022-01-10 10:08:32
     */
    function modifyTableItem(id) {
        let fieldTitel = '',
            fieldName = '',
            fieldType = '',
            selects = '',
            oldName = '',
            tips = '';
        if (id) {
            // 根据 id 异步请求数据（赋值）
            fieldTitel = '文章模型';
            fieldName = 'article';
            fieldType = '多选项';
            selects = '男,女';
            tips = '选择性别';


            $.ajax({
                type: "get",
                url: ADMIN_PATH + '/ModelField/getModelField?id=' + id,
                dataType: "json",
                async: false,
                success: function (res) {
                    if (res.code == 1) {
                        let data = res.data;
                        fieldTitel = data.title;
                        fieldName = data.name;
                        fieldType = data.dtype;
                        selects = data.dfvalue;
                        tips = data.remark;
                        oldName = data.name;
                    }
                }, error: function (res) {
                    console.log("查询失败")
                }
            });


        }
        foxui.dialog({
            title: id ? '编辑字段' : '添加字段',
            content: _modifyTableItemHtml(fieldTitel, fieldName, fieldType, selects, tips),
            cancelText: '取消',
            confirmText: id ? '确定' : '添加',
            buttonSize: 'small',
            buttonAlign: 'center',
            width: '710px',
            longButton: true,
            border: true,
            confirm: function (callback) {
                let title = $('input[name="title"]').val();
                let modelId = $('input[name="modelId"]').val();
                let name = $('input[name="name"]').val();
                if(!letterBegin(name)){
                    foxui.message({
                        type:'warning',
                        text: "字段名称必须以英文字母开头"
                    })
                    return;
                }

                let dtype = $('.dtype .foxui-radio.is-checked input').val();
                let dfvalue = $('textarea[name="dfvalue"]').val();
                let remark = $('textarea[name="remark"]').val();
                let datas ={"id": id, "oldName": oldName, "modelId": modelId, "name": name, "title":title, "dtype":dtype, "dfvalue":dfvalue, "remark":remark};

                let url = id?ADMIN_PATH + '/ModelField/edit': ADMIN_PATH + '/ModelField/add';
                // $.ajax({
                //     type: "post",
                //     url: url,
                //     dataType: "json",
                //     data: datas,
                //     success: function (res) {
                //         if (res.code == 1) {
                //             foxui.message({
                //                 text: id ? '修改成功' : '添加成功',
                //                 type: 'success',
                //             });
                //             //拉取模型字段
                //             init();
                //         } else {
                //             foxui.message({
                //                 text: res.msg,
                //                 type: 'warning',
                //             });
                //         }
                //     }, error: function (res) {
                //         foxui.message({
                //             text: id ? '修改失败' : '添加失败',
                //             type: 'warning',
                //         });
                //     }
                // });
                ajaxR(url,'post',datas,{},function (res) {
                    if (res.code == 1) {
                        foxui.message({
                            text: id ? '修改成功' : '添加成功',
                            type: 'success',
                        });
                        //拉取模型字段
                        init();
                    } else {
                        foxui.message({
                            text: res.msg,
                            type: 'warning',
                        });
                    }
                }, function (res) {
                    foxui.message({
                        text: id ? '修改失败' : '添加失败',
                        type: 'warning',
                    });
                })
                callback();
            },
            cancel: function () {},
        });
    }

    /**
     * @description: 修改字段类型/添加字段类型 html
     * @param {*} fieldTitel      字段标题
     * @param {*} fieldName       字段名称
     * @param {*} fieldType       字段类型
     * @param {*} selects         默认值
     * @param {*} tips            提示文字
     * @return {*}
     * @Date: 2022-01-10 13:26:40
     */
    function _modifyTableItemHtml(fieldTitel, fieldName, fieldType, selects, tips) {

        return `
                <div class="column-field-add-content">
                    <div class="section-main">
                        <div class="section-main-item margin-top-0">
                            <div class="foxui-input-group">
                                <div class="input-label">
                                    <label>字段标题：</label>
                                </div>
                                <div class="input-box">
                                    <div class="foxui-input-suffix">
                                        <input name="title" class="foxui-size-small" maxlength="10" placeholder="" value="${fieldTitel || ''}" />
                                        <i class="foxui-suffix-icon foxui-suffix-count">0/10</i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="section-main-item">
                            <div class="foxui-input-group">
                                <div class="input-label">
                                    <label>字段名称：</label>
                                </div>
                                <div class="input-box">
                                    <div class="foxui-input-suffix">
                                        <input name="name" class="foxui-size-small" maxlength="30" placeholder="" value="${fieldName || ''}" onkeyup="this.value=this.value.replace(/[^a-z_0-9]/g,'');"/>
                                        <i class="foxui-suffix-icon foxui-suffix-count">0/30</i>
                                    </div>
                                </div>
                            </div>
                            <p class="input-box-info">只能用英文字母,数字或下划线，数据表的真实字段名,必须英文字母开头</p>
                        </div>
                        <div class="section-main-item">
                            <div class="foxui-input-group foxui-align-items-start">
                                <div class="input-label">
                                    <label>字段类型：</label>
                                </div>
                                <div class="input-box">
                                    <div class="foxui-radio-group foxui-row radio-box-gapless foxui-gutter-2 dtype">
                                        ${_fieldTypeHtml(fieldType)}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="section-main-item">
                            <div class="foxui-input-group foxui-align-items-start">
                                <div class="input-label">
                                    <label>默认值：</label>
                                </div>
                                <div class="input-box">
                                    <div class="foxui-textarea">
                                        <textarea autocomplete="off" rows="4" placeholder="" name="dfvalue">${selects || ''}</textarea>
                                    </div>
                                </div>
                            </div>
                            <p class="input-box-info">如果字段类型为单择项、多选项、下拉框时，此处填写被选择的项目用英文“,”分隔。如“男孩,女孩”</p>
                        </div>
                        <div class="section-main-item">
                            <div class="foxui-input-group foxui-align-items-start">
                                <div class="input-label">
                                    <label>提示文字：</label>
                                </div>
                                <div class="input-box">
                                    <div class="foxui-textarea">
                                        <textarea autocomplete="off" rows="4" placeholder="" name="remark">${tips || ''}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
          `;
    }

    /**
     * @description: 字段类型列表项
     * @param {*} value
     * @return {*}
     * @Date: 2022-01-10 13:17:59
     */
    function _fieldTypeHtml(value) {
        let fieldTypeList = [
            // { id: 1, label: '单行文本' },
            // { id: 2, label: '单选项' },
        ];
        $.ajax({
            type: "get",
            // url: ADMIN_PATH + '/ModelField/fieldTypeList?dtype='+ value,
            url: "{:url('ModelField/fieldTypeList')}?dtype=" + value,
            dataType: "json",
            async: false,
            success: function (res) {
                if (res.code == 1) {
                    fieldTypeList = res.data;
                }
            }, error: function (res) {
                console.log("操作失败");
            }
        });
        let htmlArr = [];
        value = value || fieldTypeList[0].name;
        fieldTypeList.forEach(item => {
            htmlArr.push(`
            <div class="foxui-radio foxui-col-xs-6 foxui-col-sm-6 ${item.name === value ? ' is-checked' : ''} ${item.isDisable? ' is-disabled' : ''}" data-id=${item.id}>
                <span class="foxui-radio-input">
                    <i class="foxui-radio-icon"></i>
                    <input type="radio" value="${item.name}"/>
                </span>
                <span class="foxui-radio-label">${item.title}</span>
            </div>
        `);
        });
        return htmlArr.join('');
    }
</script>


<script>
    /**
     * 初始化数据
     */
    function init(){
        let keyword = $('input[name="keyword"]').val();
        let bcid = $("input[name='bcid']").val();
        let status = $("input[name='status']").val();
        let modelId = $('input[name="modelId"]').val();
        let searchData = {
            "keyword": keyword,
            "bcid": bcid,
            "status": status,
            "modelId": modelId
        };

        $.ajax({
            type: "post",
            // url: ADMIN_PATH + '/ModelField/index',
            url: "{:url('ModelField/index')}",
            dataType: "json",
            data: searchData,
            success: function (res) {
                if (res.code == 1 && res.data) {
                    let data = res.data;
                    let paginationData = {
                        pageSize: data.per_page,
                        total: data.total,
                        currentPage: data.current_page
                    };
                    initTable(paginationData, data.data);
                }
                $('#loadingContainer').removeClass('loading-container');
            }, error: function (res) {
                $('#loadingContainer').removeClass('loading-container');
            }
        });
    }

    /**
     * @description: 初始化表格
     * @param {*} pageSize
     * @param {*} total
     * @param {*} currentPage
     * @param {*} dataList
     * @return {*}
     * @Date: 2022-01-12 10:55:11
     */
    function initTable({ pageSize, total, currentPage }, dataList) {
        if (dataList == undefined){
            dataList = [];
        }
        if(total == undefined){
            total = 0;
        }
        // 追加表格 html
        _appendToTable(dataList);
        //总数
        $(".right.total").empty().html("共" + total + "条记录");
    }

    /**
     * @description: 追加表格 html
     * @param {*} dataList
     * @return {*}
     * @Date: 2022-01-12 00:18:40
     */
    function _appendToTable(dataList) {
        const html = _trsHtml(dataList);
        $('.foxui-table-tbody').empty().append(html);
    }

    /**
     * @description: 表格 html
     * @param {*} dataList
     * @return {*}
     * @Date: 2022-01-12 00:18:52
     */
    function _trsHtml(dataList) {
        let htmlArr = [];
        dataList.forEach(item => {
            htmlArr.push(`
            <li class="foxui-table-tr">
                <div class="foxui-table-td" style="flex: initial; width: 40px">
                    <div class="foxui-checkbox">
                        <span class="foxui-checkbox-input">
                            <i class="foxui-checkbox-icon"></i>
                            <input type="checkbox" value="" />
                        </span>
                    </div>
                </div>
                <div class="foxui-table-td">${item.id}</div>
                <div class="foxui-table-td blue-color">${item.title}</div>
                <div class="foxui-table-td">${item.field}</div>
                <div class="foxui-table-td">${item.type}</div>
                <div class="foxui-table-td">
					<span class="${item.status == 1?'state-enable':'state-disabled'}">${item.statustext}</span>
                </div>
                <div class="foxui-table-td">
					<span class="${item.status == 1?'state-enable':'state-disabled'}">${item.category}</span>
                </div>
                <div class="foxui-table-td">
                    <button class="foxui-text-primary foxui-size-medium edit-btn" onclick="modifyTableItem(${item.id})">编辑</button>
                    <button class="foxui-text-primary foxui-size-medium delete-btn" id="${item.id}" title="${item.title}"  onclick="deleteItem(this)">删除</button>
                </div>
            </li>
        `);
        });
        return htmlArr.join('');
    }

</script>

<script>

    init();
    //搜索
    $(".search-btn").on('click', function() {
        $('#loadingContainer').addClass('loading-container');
        init();
    });

    //重置
    $(".reset-btn").on('click', function (){
        $('input[name="status"]').val("全部");
        $('input[name="keyword"]').val("");
    });

    /**
     * @description: 删除
     * @param {*} id
     * @return {*}
     * @Date: 2022-01-10 09:49:40
     */
    function deleteItem(obj) {
        let title = $(obj).attr("title");
        let id = $(obj).attr("id");

        foxui.dialog({
            title: '删除',
            content: '您确定要删除【' + title + '】吗',
            cancelText: '取消',
            confirmText: '删除',
            buttonType: 'danger',
            confirm: function(callback) {
                ajaxR(ADMIN_PATH + '/ModelField/delete','get',{id},{},function(res) {
                        if (res.code == 1) {
                            foxui.message({
                                text: res.msg,
                                type: 'success',
                            });
                            init();
                        } else {
                            foxui.message({
                                text: res.msg,
                                type: 'warning',
                            });
                        }
                    },
                    function(res) {
                        foxui.message({
                            text: res.msg,
                            type: 'info',
                        });
                    })
                callback();
            },
            cancel: function() {
                foxui.message({
                    text: '取消删除',
                    type: 'info'
                });
            },
        });
    }

    // 多选删除
    $('.table-footer .delete-btn').click(function () {
        let $isChecked = $('.foxui-table-td .foxui-checkbox.is-checked'),
            $checkedTr = $isChecked.closest('.foxui-table-tr'),
            len = $isChecked.length,
            idList = [];

        if (len < 1) {
            foxui.message({
                text: '请先选译要删除的数据！',
                type: 'danger',
            });
        } else {
            foxui.dialog({
                title: '确认',
                content: '您确定要删除选中的所有数据吗？',
                confirmText: '删除',
                cancelText: '取消',
                buttonType: 'danger',
                buttonSize: 'small',
                confirm: function (callback) {
                    // 异步删除数据
                    $checkedTr.each(function () {
                        let id = $(this).find('.foxui-table-td:nth-child(2)').text();
                        idList.push(id);
                    });
                    ajaxR(ADMIN_PATH + '/ModelField/deletes','post',{"idList": JSON.stringify(idList)},{},function(res) {
                            if (res.code == 1) {
                                foxui.message({
                                    text: res.msg,
                                    type: 'success',
                                });
                                init();
                            }else{
                                foxui.message({
                                    text: res.msg,
                                    type: 'warning',
                                });
                            }
                        },
                        function(res) {
                            foxui.message({
                                text: res.msg,
                                type: 'warning',
                            });
                        })
                    callback();
                },
            });
        }
    });

    //启用所有
    $('.table-footer .enable-btn').click(function () {
        let $isChecked = $('.foxui-table-td .foxui-checkbox.is-checked'),
            $checkedTr = $isChecked.closest('.foxui-table-tr'),
            len = $isChecked.length,
            idList = [];

        if (len < 1) {
            foxui.message({
                text: '请先选译要启用的数据！',
                type: 'danger',
            });
        } else {
            foxui.dialog({
                title: '确认',
                content: '您确定要启用选中的所有数据吗？',
                confirmText: '启用',
                cancelText: '取消',
                buttonType: 'danger',
                buttonSize: 'small',
                confirm: function (callback) {
                    // 异步删除数据
                    $checkedTr.each(function () {
                        let id = $(this).find('.foxui-table-td:nth-child(2)').text();
                        idList.push(id);
                    });
                    ajaxR(ADMIN_PATH + '/ModelField/updateStatus','post',{"idList": JSON.stringify(idList),"status":1},{},function(res) {
                            if (res.code == 1) {
                                foxui.message({
                                    text: res.msg,
                                    type: 'success',
                                });

                                init();
                            }else{
                                foxui.message({
                                    text: res.msg,
                                    type: 'warning',
                                });
                            }
                        },
                        function(res) {
                            foxui.message({
                                text: '操作失败',
                                type: 'warning',
                            });
                        })
                    callback();
                },
            });
        }
    });

    //禁用
    $('.table-footer .disabled-btn').click(function () {
        let $isChecked = $('.foxui-table-td .foxui-checkbox.is-checked'),
            $checkedTr = $isChecked.closest('.foxui-table-tr'),
            len = $isChecked.length,
            idList = [];

        if (len < 1) {
            foxui.message({
                text: '请先选译要禁用的数据！',
                type: 'danger',
            });
        } else {
            foxui.dialog({
                title: '确认',
                content: '您确定要禁用选中的所有数据吗？',
                confirmText: '启用',
                cancelText: '取消',
                buttonType: 'danger',
                buttonSize: 'small',
                confirm: function (callback) {
                    // 异步删除数据
                    $checkedTr.each(function () {
                        let id = $(this).find('.foxui-table-td:nth-child(2)').text();
                        idList.push(id);
                    });
                    ajaxR(ADMIN_PATH + '/ModelField/updateStatus','post',{"idList": JSON.stringify(idList),"status":0},{},function(res) {
                            if (res.code == 1) {
                                foxui.message({
                                    text: res.msg,
                                    type: 'success',
                                });

                                init();
                            }else{
                                foxui.message({
                                    text: res.msg,
                                    type: 'warning',
                                });
                            }
                        },
                        function(res) {
                            foxui.message({
                                text: '操作失败',
                                type: 'warning',
                            });
                        })
                    callback();
                },
            });
        }
    });
</script>
{/block}