<?php
/**
 * 积木云渲染器
 *
 * @package XbCode
 * @author 楚羽幽 <958416459@qq.com>
 * @version 1.0
 * @license Apache License 2.0
 * @link http://www.xbcode.net
 * @document http://doc.xbcode.net
 */
namespace plugin\xbDevExample\app\admin\controller;

use support\Request;
use plugin\xbCode\XbController;
use plugin\xbCode\builder\Builder;
use plugin\xbCode\builder\Renders\Form;

/**
 * 完整表单
 * @copyright 贵州小白基地网络科技有限公司
 * @author 楚羽幽 cy958416459@qq.com
 */
class FormIntactController extends XbController
{
 /**
 * 列表
 * @return \support\Response
 * @copyright 贵州小白基地网络科技有限公司
 * @author 楚羽幽 cy958416459@qq.com
 */
 public function index(Request $request)
 {
 $builder = Builder::form(function (Form $builder) {
 // 设置无包裹框
 $builder->useForm()->wrapWithPanel(false);

 // 添加表单项
 $builder->addRowHtml('<div class="text-danger" style="padding:20px 0;">这是一个HTML组件,可以自定义内容,或者拿来填写说明文字等等</div>');
 $builder->addRowInput('inline', '联级输入框')->inline(true);
 $builder->addRowInput('normal', '普通输入框');
 $builder->addRowInput('number', '数字输入框');
 $builder->addRowInput('url', '链接输入框');
 $builder->addRowInput('email', '邮箱输入框');
 $builder->addRowInput('tip', '提示输入框')->desc('这是一个提示输入框,在组件底部会有提示信息');
 $builder->addRowInputPassword('password', '密码输入框');
 $builder->addRowInput('extraInput', '附带按钮')
 ->addOn([
 'type' => 'button',
 'label' => '搜索',
 'icon' => 'fa fa-search',
 ]);
 $builder->addRowInputTag('tags', '标签输入框', ['zhugeliang', 'caocao', 'zhongwuyan'])->options([
 [
 "label" => "诸葛亮",
 "value" => "zhugeliang"
 ],
 [
 "label" => "曹操",
 "value" => "caocao"
 ],
 [
 "label" => "钟无艳",
 "value" => "zhongwuyan"
 ],
 [
 "label" => "野核",
 "value" => "yehe",
 "children" => [
 [
 "label" => "李白",
 "value" => "libai"
 ],
 [
 "label" => "韩信",
 "value" => "hanxin"
 ],
 [
 "label" => "云中君",
 "value" => "yunzhongjun"
 ],
 ]
 ]
 ]);
 $builder->addRowInput('combination', '输入框前后组合');
 $builder->addRowTextarea('textarea', '多行文本输入框');
 $builder->addRowDivider('普通静态文本分割线');
 $builder->addrowStatic('text', '静态输入框文本', '这是静态展示的文本文字');
 $builder->addrowStatic('text', '可复制文本', '这是静态展示的文本文字')->copyable([
 'content' => '这是静态展示的文本文字,复制的内容可以不一样',
 ]);
 $options = [
 [
 'label' => '选项1',
 'value' => '1'
 ],
 [
 'label' => '选项2',
 'value' => '2'
 ],
 [
 'label' => '选项3',
 'value' => '3'
 ],
 ];
 $htmlOptions = [
 [
 'label' => '选项1',
 'value' => '1',
 'body' => "<div class=\"m-l-sm m-r-sm m-b-sm m-t-xs\">\n<div class=\"text-md p-b-xs b-inherit b-b m-b-xs\">套餐:C01</div>\n<div class=\"text-sm\">CPU:12核</div>\n<div class=\"text-sm\">内存:12GB</div>\n<div class=\"text-sm\">SSD盘:1024GB</div>\n</div>",
 ],
 [
 'label' => '选项2',
 'value' => '2',
 'body' => "<div class=\"m-l-sm m-r-sm m-b-sm m-t-xs\">\n<div class=\"text-md p-b-xs b-inherit b-b m-b-xs\">套餐:C01</div>\n<div class=\"text-sm\">CPU:22核</div>\n<div class=\"text-sm\">内存:16GB</div>\n<div class=\"text-sm\">SSD盘:1024GB</div>\n</div>",
 ],
 ];
 $builder->addRowFieldSet('选择器表单项', [
 $builder->addRowCheckbox('checkbox', '多选框', ['2'])->options($options),
 $builder->addRowCheckbox('checkboxInline', '多选框(非内联)')
 ->inline(false)
 ->options($options),
 $builder->addRowRadio('radio', '单选框', '1')->options($options),
 $builder->addRowRadio('radioInline', '单选框(非内联)', '2')
 ->inline(false)
 ->options($options),
 $builder->addRowRadioButton('radioGroup', '单选按钮组', '1')->options($options),
 $builder->addRowRadioButton('radioGroups', '单选按钮组(多选)', ['1', '3'])->multiple(true)->options($options),
 $builder->addRowSelect('select', '下拉选择框', ['1', '2'])->options($options)->inline(true),
 $builder->addRowListSelect('listSelect', '列表选择', ['1'])->options($options),
 $builder->addRowListSelect('listSelect2', '列表图片选择', ['1'])->options(array_map(function ($item) {
 $item['image'] = 'https://aisuda.bce.baidu.com/amis/static/photo/3893101144_bff2dc9.jpg';
 return $item;
 }, $options)),
 $builder->addRowListSelect('htmlSelect', '支持HTML排版', ['1'])->options($htmlOptions),
 ]);
 $builder->addRowDivider('表单项分组布局');
 $builder->addRowGroup([
 $builder->addRowRating('rating', '评分组件', 3),
 $builder->addRowSwitch('switch', '开关组件', '10'),
 $builder->addRowSwitch('switchText', '开关文字组件', '10')->onText('开启')->offText('关闭'),
 $builder->addRowSwitch('switchIcon', '开关图标组件', '10')->onText([
 'type' => 'icon',
 'icon' => 'fa fa-check-circle',
 ])
 ->offText([
 'type' => 'icon',
 'icon' => 'fa fa-times-circle',
 ]),
 ]);
 $builder->addRowDivider('表单项Flex布局');
 $builder->addRowFlex([
 $builder->addRowCheckbox('checkboxGroup', '多选按钮', ['1', '3'])->options($options),
 $builder->addRowColor('color', '颜色选择器', '#ff0000')->inline(true),
 ]);
 $builder->addRowDivider('日期时间选择器');
 $builder->addRowGroup([
 $builder->addRowDate('date', '日期选择器', '2023-10-01'),
 $builder->addRowTime('time', '时间选择器', '12:00'),
 ]);
 $builder->addRowGroup([
 $builder->addRowDate('month', '月份选择器', '')->inline(true),
 $builder->addRowDate('quarter', '季度选择器', '')->inline(true),
 $builder->addRowDate('yaer', '年份选择器', '')->inline(true),
 ]);
 $builder->addRowGroup([
 $builder->addRowDateTime('timeRange', '时间范围', '12:00:00')->inline(true),
 $builder->addRowDateTime('monthRange', '月份范围', ['03', '07'])->inline(true),
 $builder->addRowDateTime('quarterRange', '季度范围', '')->inline(true),
 $builder->addRowDateTime('yearRange', '年份范围', ['2023', '2025'])->inline(true),
 ]);

 $builder->addRowDateTime('dateTime', '日期时间选择器', '2023-10-01 12:00:00')->inline(true);
 $builder->addRowGroup([
 $builder->addRowDateRange('dateRange', '日期范围选择器', ['2023-10-01', '2023-10-31']),
 $builder->addRowDateTimeRange('dateTimeRange', '日期时间范围选择器', ['2023-10-01', '2023-10-31']),
 ]);

 $builder->addRowDivider('上传组件示例');
 $builder->addRowUploadImage('uploadImage', '图片上传组件');
 $builder->addRowUploadFile('uploadFile', '文件上传组件');
 $builder->addRowUploadAudio('uploadAudio', '音频上传组件');
 $builder->addRowUploadVideo('uploadVideo', '视频上传组件');
 $builder->addRowUploadAttachmant('attachment', '附件库选择');

 $builder->addRowDivider('表单联动示例');
 $builder->addRowInput('linkedInput1', 'A联动输入', '1')->desc('该输入框组件有值时,会影响到其他组件状态');
 $builder->addRowInput('linkedInput2', 'B联动输入')->visibleOn('${linkedInput1 === ""}')->desc('【A组件】无内容时,显示这个组件');
 $builder->addRowInput('linkedInput3', 'C联动输入')->visibleOn('${linkedInput1 !== ""}')->desc('【A组件】有内容时,显示这个组件');

 $builder->addRowDivider('富文本编辑器');
 $builder->addRowEditorTinymce('tinymce', 'Tinymce编辑器', '<p>你好,积木云,我是tinymce编辑器</p>');
 $builder->addRowEditorFroala('froala', 'Froala编辑器', '<p>你好,积木云,我是froala编辑器</p>');
 $builder->addRowEditorWang('wangEditor', 'wangEditor编辑器', '<div>你好,积木云,我是王德发编辑器</div>');
 $markdown = <<<STR
 # 积木云
 ## 这是一个Markdown编辑器示例,可以输入Markdown语法内容。
 STR;
 $builder->addRowEditorMarkdown('markdown', 'Markdown编辑器', $markdown);
 $builder->addRowEditorVditor('vditor', 'vditor编辑器(markdown)', $markdown);

 $builder->addRowDivider('代码编辑器');
 $coder = <<<STR
 <?php
 \$builder = Builder::crud(function (Grid \$builder) {
 // 表格列配置
 \$builder->addColumn('id', '序号')->width(90);
 \$builder->addColumn('name', '姓名')->width(120);
 \$builder->addColumn('sex', '性别')->width(80);
 \$builder->addColumn('age', '年龄')->width(80);
 \$builder->addColumn('idnumber', '身份证号');
 \$builder->addColumn('address', '用户地址');
 \$builder->addColumn('phone', '联系电话')->width(130);
 \$builder->addColumn('email', '电子邮箱')->width(180);
 \$builder->addColumn('balance', '账户余额')->width(120);
 \$builder->addColumn('create_at', '注册时间')->width(180);
 });
 STR;
 $builder->addRowCodeEdit('coder', '代码编辑器', $coder, [
 'allowFullscree' => true,
 'size' => 'xl',
 ])->language('php');
 $builder->addRowDivider('地图组件示例');
 $builder->addRowAmapPicker('AmapPicker', '高德地图-位置选择器')->ak('4ba3ba65f14940e699fc219576b9b103');
 $builder->addRowAmapPicker('aMapPickerStatic', '高德地图-静态展示')->static(true);
 $builder->addRowBmapPicker('bMapPicker', '百度地图-位置选择器')->ak('LiZT5dVbGTsPI91tFGcOlSpe5FDehpf7');
 $builder->addRowBmapPicker('bMapPickerStatic', '百度地图-静态展示', [
 "address" => "北京市西城区复兴门内大街97号",
 "lat" => 39.91404014231763,
 "lng" => 116.36857981150743,
 "zoom" => 12
 ])
 ->ak('LiZT5dVbGTsPI91tFGcOlSpe5FDehpf7')
 ->staticSchema([
 'embed' => true,
 'showAddress' => true,
 'mapStyle' => [
 'height' => '600px',
 ],
 ])
 ->static(true);

 $builder->addRowDivider('表单自动验证');
 $builder->addRowDivider('颜色集合示例');
 $builder->addRowColor('colorPicker1', '颜色选择器', '#4a90e2');
 $builder->addRowInputArray('colorArray', '数组表单', [
 "red",
 "blue",
 "green"
 ],[
 $builder->addRowColor('color1', '颜色选择', '#ff0000')
 ]);

 $builder->addRowDivider('穿梭器示例');
 $rules = [];
 for ($i = 1; $i <= 10; $i++) {
 $rules[] = [
 'label' => '权限' . $i,
 'value' => '/permission/' . $i,
 'children' => [
 [
 'label' => '子权限' . $i . '-1',
 'value' => '/permission/' . $i . '-1',
 ],
 [
 'label' => '子权限' . $i . '-2',
 'value' => '/permission/' . $i . '-2',
 ],
 ],
 ];
 }
 $actives = [];
 $builder->addRowTransfer('transfer', '穿梭器示例')
 ->resultListModeFollowSelect(true)
 ->selectMode('tree')
 ->selectTitle('权限列表')
 ->resultTitle('已选权限')
 ->columns([
 ['name' => 'label', 'label' => '权限名称'],
 ['name' => 'value', 'label' => '权限地址'],
 ])
 ->options($rules)
 ->value($actives);

 $builder->addRowDivider('树结构示例');
 $options = [
 [
 'label' => '选项1',
 'value' => '1',
 'children' => [
 ['label' => '子选项1-1', 'value' => '1-1'],
 ['label' => '子选项1-2', 'value' => '1-2'],
 ],
 ],
 [
 'label' => '选项2',
 'value' => '2',
 'children' => [
 ['label' => '子选项2-1', 'value' => '2-1'],
 ['label' => '子选项2-2', 'value' => '2-2'],
 ],
 ],
 ];
 $builder->addRowInputTree('inputTree1', '树结构选择器', 1)->options($options);
 $builder->addRowInputTree('inputTree2', '树结构多选', [1, 2])->options($options)->multiple(true);
 $builder->addRowTreeSelect('treeSelect1', '树选择器', 1)->options($options);
 $builder->addRowTreeSelect('treeSelect2', '树选择器(多选)', [1, 2])->options($options)->multiple(true);

 $builder->addRowDivider('级联选择器');
 $builder->addRowNestedSelect('nestedSelect1', '级联选择器', 1)->options($options);
 $builder->addRowNestedSelect('nestedSelect2', '级联选择器(多选)', [1, 2])->options($options)->multiple(true);

 $builder->addRowDivider('链式下拉示例');
 $builder->addRowChainedSelect('chainedSelect1', '链式下拉选择器', '2,2-1')->options($options);

 $builder->addRowDivider('城市选择器');
 $builder->addRowCity('citySelect1', '城市选择器', '贵州省,贵阳市');

 $builder->addRowDivider('矩阵组件示例');
 $builder->addRowMatrixCheckboxes('matrixCheckboxes', '矩阵复选框组件')
 ->rowLabel('矩阵标题')
 ->columns([
 ['name' => 'label', 'label' => '选项'],
 ['name' => 'value', 'label' => '值'],
 ])
 ->rows([
 ['label' => '选项1', 'value' => '1'],
 ['label' => '选项2', 'value' => '2'],
 ['label' => '选项3', 'value' => '3'],
 ]);

 $builder->addRowDivider('组合示例');
 $builder->addRowCombo('combo1', '组合框', [
 'input1' => '输入框1',
 'select1' => '输入框2',
 ], [
 $builder->addRowInput('input1', '输入框1'),
 $builder->addRowSelect('select1', '下拉选择框', '1')->options($options),
 ]);
 $builder->addRowCombo('combo2', '组合多条', [
 [
 'input2' => '输入框1',
 'select2' => '输入框2',
 ],
 [
 'input2' => '输入框3',
 'select2' => '输入框4',
 ],
 [
 'input2' => '输入框5',
 'select2' => '输入框6',
 ],
 ], [
 $builder->addRowInput('input2', '输入框1'),
 $builder->addRowSelect('select2', '下拉选择框', '1')->options($options),
 ])
 ->multiple(true);

 $builder->addRowDivider('键值对组合示例');
 $builder->addRowKeyValue('keyValue1', '键值对输入', [
 'key1' => '值数据1',
 'key2' => '值数据2',
 ]);

 $builder->addRowDivider('进度条示例');
 $builder->addRowProgress('progress1', '进度条组件', 50);

 $builder->addRowDivider('图标示例');
 $builder->addRowIcon('icon', '图标静态展示', 'Avatar');
 $builder->addRowIconPicker('iconPicker', '图标选择器', 'Avatar');

 $builder->addRowDivider('自定义组件示例');
 $builder->addRowRemote('remote', '远程Vue组件','', xbUrl('FormIntact/remote'));
 $template = file_get_contents(dirname(__DIR__) . '/view/index/workbench.vue');
 $builder->addRowRender('render', '渲染Vue组件','', $template);
 });
 $builder->setMethod('POST');
 return $this->successRes($builder);
 }
 
 /**
 * 远程Vue组件
 * @param \support\Request $request
 * @return \support\Response
 * @copyright 贵州积木云网络科技有限公司
 * @author 楚羽幽 958416459@qq.com
 */
 public function remote(Request $request)
 {
 $template = file_get_contents(dirname(__DIR__) . '/view/formintact/remote.vue');
 return $this->successRes($template);
 }
}