<script setup lang="ts">
import { createVNode, getCurrentInstance, reactive, toRaw } from "vue";
import { Format } from "@ease-forge/shared";
import { createBlockComponent } from "@ease-forge/runtime";
import DataForm from "@/components/data-form/DataForm.vue";
import type { DataFormProps } from "@/components/data-form/DataFormTypes.ts";

window.globalConfig.componentManage.registerComponent("DataForm", DataForm);

// 当前组件对象
const instance = getCurrentInstance();

const data = reactive({
    str: "abcABC",
    num_1: 123,
    checkbox_1: true,
    checkbox_group_1: ["v2"],
    radio_1: false,
    radio_group_1: "v2",
    switch_1: false,
    select_1: "006",
    select_2: "006",
    date_1: "2025-02-03",
    date_2: Format.toDayjs("2025-02-03").toDate(),
    time_1: "08:30:00",
    time_select_1: "08:30:00",
    cascader_1: ["wh"],
    tree_select_1: "wh",
    autocomplete: "汤磊",
    tags_1: ["DEV"],
    color_1: "#CA4343",
    slider_1: 80,
    rate_1: 3.5,
    mentions_1: "abc @bj ABC",
    transfer_1: ["v1", "v2"],
    upload_1: [
        {
            name: 'image.png',
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
            uid: '-2',
            name: 'image.png',
            status: 'done',
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
            uid: '-3',
            percent: 50,
            name: 'image.png',
            status: 'uploading',
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
            uid: '-5',
            name: 'image.png',
            status: 'error',
        },
    ],
    password: "2025fff",
    textarea: [
        "蛇衔春色千山秀",
        "龙舞祥光万户新",
        "福满人间",
        "属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数"
    ].join("\n"),
});

const dataForm1 = reactive<DataFormProps>({
    formFields: [
        {
            dataPath: 'str', label: '字符串', input: 'Input',
            inputProps: {
                placeholder: '请输入',
                clearable: true,
            },
        },
        {
            dataPath: 'num_1', label: '数字', input: 'InputNumber',
            inputProps: {
                placeholder: '请输入',
                controlsPosition: 'right',
            },
        },
        {
            dataPath: 'checkbox_1', label: '复选', input: 'Checkbox',
            inputProps: {
                trueValue: true,
                falseValue: false,
            },
        },
        {
            dataPath: 'checkbox_group_1', label: '复选组', input: 'CheckboxGroup',
            inputProps: {
                max: 2,
                // TODO options
            },
        },
        {
            dataPath: 'radio_1', label: '单选', input: 'Radio',
            inputProps: {
                value: true,
            },
        },
        {
            dataPath: 'radio_group_1', label: '单选组', input: 'RadioGroup',
            inputProps: {
                // TODO options
            },
        },
        {
            dataPath: 'switch_1', label: '开关', input: 'Switch',
            inputProps: {
                inactiveValue: false,
                activeValue: true,
                inlinePrompt: true,
                inactiveText: "关闭",
                activeText: "开启",
            },
        },
        {
            dataPath: 'select_1', label: '选择器', input: 'Select',
            inputProps: {
                placeholder: "请选择",
                clearable: true,
                // TODO options
            },
        },
        {
            dataPath: 'select_2', label: '选择器', input: 'SelectV2',
            inputProps: {
                placeholder: "请选择",
                clearable: true,
                options: [
                    { value: "001", label: "选项1" },
                    { value: "002", label: "选项2" },
                    { value: "003", label: "选项3" },
                    { value: "004", label: "选项4" },
                    { value: "005", label: "选项5" },
                    { value: "006", label: "选项6" },
                ],
            },
        },
        {
            dataPath: 'date_1', label: '日期选择', input: 'DatePicker',
            inputProps: {
                placeholder: "选择时间",
                type: "date",
                format: "YYYY-MM-DD",
                valueFormat: "YYYY-MM-DD",
            },
        },
        {
            dataPath: 'date_2', label: '日期时间选择', input: 'DatePicker',
            inputProps: {
                placeholder: "选择时间",
                type: "datetime",
                format: "YYYY-MM-DD HH:mm:ss",
                // valueFormat: "YYYY-MM-DD",
            },
        },
        {
            dataPath: 'time_1', label: '时间选择', input: 'TimePicker',
            inputProps: {
                placeholder: "选择时间",
                isRange: false,
                format: "HH:mm:ss",
                valueFormat: "HH:mm:ss",
            },
        },
        {
            dataPath: 'time_select_1', label: '时间选择', input: 'TimeSelect',
            inputProps: {
                placeholder: "选择时间",
                clearable: true,
                step: "00:15",
                format: "HH:mm:ss",
            },
        },
        {
            dataPath: 'cascader_1', label: '级联选择', input: 'Cascader',
            inputProps: {
                placeholder: '请输入',
                options: [
                    {
                        value: 'zj', label: '浙江',
                        children: [
                            {
                                value: 'hz', label: '杭州',
                                children: [
                                    { value: 'xh', label: '西湖' },
                                ],
                            },
                        ],
                    },
                    {
                        value: 'js', label: '江苏',
                        children: [
                            {
                                value: 'nj', label: '南京',
                                children: [
                                    { value: 'zhm', label: '中华门' },
                                ],
                            },
                        ],
                    },
                    { value: 'sh', label: '上海', },
                    { value: 'bj', label: '北京', },
                    { value: 'sz', label: '深圳', },
                    { value: 'cq', label: '重庆', },
                    { value: 'gz', label: '广州', },
                    { value: 'cd', label: '成都', },
                    { value: 'wh', label: '武汉', },
                ],
            },
        },
        {
            dataPath: 'tree_select_1', label: '树形选择', input: 'TreeSelect',
            inputProps: {
                placeholder: '请输入',
                clearable: true,
                defaultExpandAll: true,
                // renderAfterExpand: true,
                data: [
                    {
                        value: 'zj', label: '浙江',
                        children: [
                            {
                                value: 'hz', label: '杭州',
                                children: [
                                    { value: 'xh', label: '西湖' },
                                ],
                            },
                        ],
                    },
                    { value: 'wh', label: '武汉', },
                    { value: 'sh', label: '上海', },
                    { value: 'bj', label: '北京', },
                ],
            },
        },
        {
            dataPath: 'autocomplete', label: '自动补全', input: 'Autocomplete',
            inputProps: {
                placeholder: "自动补全",
                clearable: true,
                fetchSuggestions: (queryString: string, callback: Function) => {
                    const data = [
                        { label: "1熊超", value: "熊超" },
                        { label: "2姚洋", value: "姚洋" },
                        { label: "3崔艳", value: "崔艳" },
                        { label: "4侯芳", value: "侯芳" },
                        { label: "5林敏", value: "林敏" },
                        { label: "6金丽", value: "金丽" },
                        { label: "7侯秀英", value: "侯秀英" },
                        { label: "8刘秀英", value: "刘秀英" },
                        { label: "9林刚", value: "林刚" },
                        { label: "10汤磊", value: "汤磊" },
                        { label: "11刘军", value: "刘军" },
                        { label: "12潘娜", value: "潘娜" },
                        { label: "13袁军", value: "袁军" },
                        { label: "14段勇", value: "段勇" },
                        { label: "15李霞", value: "李霞" },
                        { label: "16赵杰", value: "赵杰" },
                    ];
                    const res = data.filter(item => item.label.includes(queryString));
                    callback(res);
                },
            },
        },
        {
            dataPath: 'tags_1', label: '标签输入', input: 'InputTag',
            inputProps: {
                placeholder: "请输入",
                clearable: true,
            },
        },
        {
            dataPath: 'color_1', label: '颜色选择', input: 'ColorPicker',
            inputProps: {},
        },
        {
            dataPath: 'slider_1', label: '滑块', input: 'Slider',
            widthCount: 2,
            inputProps: {
                showInput: true,
            },
        },
        {
            dataPath: 'rate_1', label: '评分', input: 'Rate',
            inputProps: {
                allowHalf: true,
            },
        },
        {
            dataPath: 'mentions_1', label: '提及', input: 'Mention',
            inputProps: {
                placeholder: '请输入',
                options: [
                    { value: 'sh', label: '上海', },
                    { value: 'bj', label: '北京', },
                    { value: 'sz', label: '深圳', },
                    { value: 'cq', label: '重庆', },
                ],
            },
        },
        {
            dataPath: 'password', label: '密码', input: 'Input',
            inputProps: {
                placeholder: '请输入',
                clearable: true,
                type: "password",
                showPassword: true,
            },
        },
        {
            dataPath: 'textarea', label: '多行文本', input: 'Input',
            widthCount: 3,
            inputProps: {
                placeholder: '请输入',
                clearable: true,
                type: "textarea",
                autosize: { minRows: 3, maxRows: 8 },
            },
        },
        {
            dataPath: 'transfer_1', label: '穿梭框', input: 'Transfer',
            widthCount: 3,
            inputProps: {
                titles: ["数据项", "已选择"],
                data: [
                    { title: "选项1", key: "v1" },
                    { title: "选项2", key: "v2" },
                    { title: "选项3", key: "v3" },
                    { title: "选项4", key: "v4" },
                    { title: "选项5", key: "v5" },
                    { title: "选项6", key: "v6" },
                    { title: "选项7", key: "v7" },
                    { title: "选项8", key: "v8" },
                ],
            },
        },
        {
            dataPath: 'upload_1', label: '文件上传', input: 'Upload',
            widthCount: 3,
            inputProps: {
                listType: "picture-card",
                fileList: [
                    {
                        name: 'food.jpeg',
                        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
                    },
                    {
                        name: 'food.jpeg',
                        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
                    },
                    {
                        name: 'food.jpeg',
                        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
                    },
                ],
            },
        },
    ],
    columnCount: 3,
    layout: "onlyLabelFixed",
});

const MyDataForm = createBlockComponent({
    block: true,
    type: "DataForm",
    data: {
        data: toRaw(data),
    },
    props: {
        style: {
            overflowY: "auto",
        },
        // data: "{{ data }}",
        data: toRaw(data),
        formFields: dataForm1.formFields,
        columnCount: dataForm1.columnCount,
        layout: dataForm1.layout,
        labelWidth: "100px",
    },
}, {
    componentManage: window.globalConfig.componentManage,
});

function test() {
    system.showDialog(createVNode(DataForm, {
        style: {
            overflowY: "auto",
        },
        data: toRaw(data),
        formFields: dataForm1.formFields,
        columnCount: dataForm1.columnCount,
        layout: dataForm1.layout,
        labelWidth: "100px",
    }), {
        title: '模型查看器',
        width: 950,
        height: 400,
        showClose: true,
        showMax: true,
        showCancelButton: false,
        showOkButton: true,
    }).then(() => {
        console.log("data", data);
        // instance?.proxy.$forceUpdate();
    }).finally();
}

</script>

<template>
    <div>
        <button @click="test">测试</button>
    </div>
    <div class="flex-row-container" style="column-gap: 12px;height: calc(100% - 30px);">
        <DataForm
            class="flex-item-fixed"
            style="width: 900px;height: 100%; overflow-y: auto;border: 1px solid #ccc;padding: 6px"
            :data="data"
            :formFields="dataForm1.formFields"
            :columnCount="dataForm1.columnCount"
            :layout="dataForm1.layout"
            labelWidth="100px"
            inputWidth=""
        />
        <!--<MyDataForm class="flex-item-fixed" style="width: 900px;height: 100%; overflow-y: auto;border: 1px solid #ccc;padding: 6px"/>-->
        <pre class="flex-item-fill" style="overflow-y: auto;" lang="json">{{ JSON.stringify(data, null, 4) }}</pre>
    </div>
    <div style="height: 24px;"/>
</template>

<style>
/** flex多行容器 */
.flex-column-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

/** flex多列容器 */
.flex-row-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

/** flex自动填充 */
.flex-item-fill {
    flex-grow: 1;
    overflow: hidden;
}

/** flex固定大小 */
.flex-item-fixed {
    flex-shrink: 0;
}

/** flex主轴上对齐方式 */
.flex-justify-content-center {
    justify-content: center;
}

/** flex交叉轴上对齐方式 */
.flex-align-items-center {
    align-items: center;
}

/** 内容居中 */
.content-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
