<template>
    <!-- 搜索 -->
    <el-form :inline="true" :model="queryData">
        <QueryForm :items="queryItems" :data="queryData" />
        <el-form-item>
            <el-button type="info" @click="refreshTable">Query</el-button>
            <el-button type="warning" @click="handleAdd">Add</el-button>
        </el-form-item>
    </el-form>

    <!-- 列表 -->
    <XzTable :headers="headers" :get-data="getData" :params="queryData" :refresh-key="tableKey" />

    <!-- dialog 对话框 -->
    <FormDialog v-model="dialogFlag" ref="dialog" :conf="dialogConf" :buttonConf="buttonConf" :saveCall="saveCall" />
</template>

<script lang="ts" setup>
import '@qingbing/ts-v3-xz-form/dist/style.css' // xz-form 组件样式(整合了 json-editor 和 xz-editor 组件样式)

import type { TFormDialogRefresh, TFormDialogButtonConf, TFormDialogSaveCall, TFormDialogSaveParams } from "@qingbing/ts-v3-form-dialog"
import type { TCDialogProps } from "@qingbing/ts-v3-element-plus"
import type { TXzFormItem } from '@qingbing/ts-v3-xz-form'
import type { TXzTableFetchData, TXzTableItem } from "@qingbing/ts-v3-xz-table"
import type { TRecord, TObject } from "@qingbing/ts-v3-utils"
import type { TQueryFormItem } from "@qingbing/ts-v3-query-form"
import { randomInt } from "@qingbing/ts-v3-utils"
import { XzTable } from "@qingbing/ts-v3-xz-table"
import { QueryForm } from "@qingbing/ts-v3-query-form";
import { reactive, ref } from 'vue'
import request from "axios";
import { FormDialog } from "@qingbing/ts-v3-form-dialog"

/**
 * 搜索表单
 */
// 搜索表单项目
const queryItems: TQueryFormItem[] = [
    {
        input_type: "input-text",
        field: "keyword",
        label: "关键字",
    },
    {
        input_type: "sex",
        field: "sex"
    },
]
// 搜索表单数据
const queryData = reactive<TRecord>({})
/**
 * 表格处理
 */
// 表格刷新标志
const tableKey = ref(1)
// 刷新表格函数
const refreshTable = () => {
    tableKey.value++
}
// 表格显示项目配置
const headers: TXzTableItem[] = [
    {
        field: "_idx",
        label: "序号",
        tableConf: {
            width: "160",
            align: "left",
            fixed: "left"
        },
    },
    {
        field: "username",
        label: "用户名",
        default: '-',
        tableConf: {
            width: "160",
            align: "left",
        },
    },
    {
        field: "sex",
        label: "性别",
        default: '0',
        tableConf: {
            width: "100",
        },
        type: 'option',
        exts: {
            options: {
                '0': "秘",
                '1': "女",
                '2': "男",
            }
        }
    },
    {
        field: "operate",
        label: "操作",
        default: '',
        tableConf: {
            fixed: "right",
            align: "left",
            minWidth: 300,
        },
        type: 'component',
        exts: {
            component: {
                name: "operate",
                conf: {
                    isButton: true,
                    buttons: [
                        {
                            type: 'view',
                            handle: (row: TRecord) => {
                                handleView(row)
                            }
                        }, {
                            type: 'edit',
                            handle: (row: TRecord) => {
                                handleEdit(row)
                            }
                        },
                        {
                            type: 'delete',
                            handle: (row: TRecord, successCall: (msg: string) => void, failureCall: (msg: string) => void) => {
                                successCall('删除成功')
                                refreshTable()
                            }
                        }
                    ]
                }
            },
        }
    },
]
// 获取表格数据
const getData: TXzTableFetchData = (cb, params?: TObject) => {
    request.create({
        baseURL: 'http://mock.qiyezhu.net/mock/64e35b8e4a2b7b001dd2e4ec/example/table-pagination-data', // 默认就是 "/",
        timeout: 5000, // 5000毫秒，5秒
        headers: {
            'Content-Type': 'application/json;charset=utf-8'
        }
    })
        .post('/', params)
        .then(res => cb(res.data.data))
        .catch(err => err)
}

/**
 * dialog 数据保存函数
 * 
 * @param params 
 */
const saveCall: TFormDialogSaveCall = (params: TFormDialogSaveParams) => {
    const state = ref(false)
    /**
     * // TODO data save coding
     */
    // 保存数据在 params.data 中
    console.log(params);
    console.log(params.data);
    console.log(params.data.address);
    // 模拟保存状态
    state.value = !randomInt(2, 0)
    if (state.value) {
        // 保存成功， 执行回调, 并刷新 table
        params.callSuccess('哦业， 保存成功了')
        // 数据在列表中不会更新， 这里刷新 table 就好了
        refreshTable()
        // 是否关闭 dialog 对话框根据自己需要
        closeDialog()
    } else {
        // 保存失败， 执行回调
        params.callFailure('哦或， 保存失败了吧')
    }
}

/**
 * dialog 处理
 */
// dialog 状态标志
const dialogFlag = ref(false)
// 开启 dialog
const openDialog = () => {
    dialogFlag.value = true
}
// 关闭 dialog
const closeDialog = () => {
    dialogFlag.value = false
}
// dialog 组件， 务必这样定义， 将暴露接口指出，后续好使用
const dialog = ref<{ refresh: TFormDialogRefresh }>()
// dialog 配置， 通常默认配置即可
const dialogConf: TCDialogProps = reactive({})
/**
 * 操作按钮配置
 */
const buttonConf: TFormDialogButtonConf = {
    buttons: {
        add: {
            "label": "添加",
            "type": "warning",
            callback: () => {
                console.log("callback");
            }
        }
    }
}
// dialog 数据项目定义，参考 @qingbing/ts-v3-xz-form 插件
const dialogItems: TXzFormItem[] = [
    {
        input_type: "input-text",
        field: "username",
        default: "",
        label: "用户名",
        rules: [{ required: true, type: "username" }],
    },
    {
        input_type: "input-select",
        field: "sex",
        default: 2,
        label: "性别",
        rules: [{ type: "required" }],
        exts: {
            options: [
                { value: "0", label: "秘密" },
                { value: "1", label: "女士" },
                { value: "2", label: "男士" },
            ]
        }
    },
    {
        input_type: "input-number",
        field: "age",
        default: 18,
        label: "年龄",
        exts: {
            min: 0,
            max: 127
        },
        rules: [{ required: true, type: "number" }],
    },
    {
        input_type: "input-area",
        field: "address",
        default: "",
        label: "地址",
        rules: [{ required: true }],
    }
]


/**
 * 触发 dialog 的开启
 */
const handleAdd = () => {
    dialog.value && dialog.value.refresh({
        isForm: true,
        title: "添加项目",
        items: dialogItems,
        data: {},
        viewFields: [],
        showFields: [],
        buttons: ["submit", 'reset', "cancel"]
    })
    openDialog()
}
const handleEdit = (row) => {
    dialog.value && dialog.value.refresh({
        isForm: true,
        title: "编辑项目",
        items: dialogItems,
        data: row,
        viewFields: [],
        showFields: [],
        buttons: ["submit", 'reset', "cancel"]
    })
    openDialog()
}
const handleView = (row) => {
    dialog.value && dialog.value.refresh({
        isForm: false,
        title: "查看详情",
        items: dialogItems,
        data: row,
        viewFields: [],
        showFields: [],
        buttons: ["cancel"]
    })
    openDialog()
}
</script>